/* ============================================================
   RETICENCE (Sculpture) — supplemental styles
   Loaded AFTER styles.css. Additions/overrides only, so the
   shared Reticence design system stays the single source of truth.
   ============================================================ */

/* Collection cards on the Collections index + home strip */
.coll-card .card-info { padding-top: 14px; }
.coll-card-statement {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.86rem; line-height: 1.5; color: #6b6b6b;
  margin: 6px 0 10px; max-width: 34ch;
}
.text-link-inline { color: #1B1917; font-weight: 500; }

/* graceful empty state for a collection with no works yet (spans the grid) */
.collection-empty {
  grid-column: 1 / -1;
  padding: 3rem 0 4rem; margin: 0;
  color: #6b6b6b; font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.98rem; line-height: 1.65; max-width: 48ch;
}

/* Search refine facets (material · shape · collection chips) */
.search-facets { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.facet-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.facet-label { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A8A; min-width: 78px; }
.facet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.facet-chip {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.72rem; letter-spacing: 0.04em; color: #1B1917;
  background: #fff; border: 1px solid #dcd8d2; border-radius: 999px;
  padding: 5px 13px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.facet-chip:hover { border-color: #1B1917; }
.facet-chip.is-on { background: #1B1917; color: #fff; border-color: #1B1917; }

/* Collections dropdown nav — hover "Collections" to reveal the sections; STAGGERED so it reads light, not brutish */
.site-nav .nav-item.has-menu { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-item.has-menu::after {   /* invisible bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; top: 100%; left: -10px; right: -20px; height: 14px;
}
.nav-menu {   /* transparent — floats over the page, no box */
  position: absolute; top: calc(100% + 9px); left: -6px;
  min-width: 150px; background: transparent; border: none; box-shadow: none;
  padding: 8px 4px 12px; display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav-menu a {
  padding: 3px 4px; font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.74rem; letter-spacing: 0.03em; color: #a5a19b;   /* softer grey — doesn't compete with the top nav */
  text-decoration: none; white-space: nowrap;
  transition: color .14s ease;
}
.nav-menu a:hover { color: #1B1917; }
.nav-menu a:not(.nav-menu-all) { margin-left: 16px; }   /* the sections step right as ONE group, aligned to each other */
.nav-menu .nav-menu-all {   /* the "top" item, set apart from the sections below */
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8A8A8A;
  margin: 0 0 6px 0; padding: 0 4px 7px; align-self: stretch;
  border-bottom: 1px solid rgba(27,25,23,0.10);
}

/* "More from the studio" — centred transparent cut-outs (no crop, ground shadow shows) */
.card-media--cut { background: transparent; }
.card-media--cut img { object-fit: contain; object-position: center; padding: 7%; background: transparent; }   /* floating cut-out — centred, not cropped low */

/* Collection MARK beside the card title (matches the Works-filter logo treatment) */
.coll-card-mark {
  display: inline-block;   /* override the global img{display:block} so it sits INLINE beside the title, not below */
  width: 0.9em; height: 0.9em; object-fit: contain; object-position: center;
  vertical-align: -0.13em; margin-left: 0.42em;
  opacity: 0.9;   /* the real mark, sized to the letter height, beside the title */
}
.card-title-row .coll-card-mark, .card-title .piece-card-mark {
  width: 0.86em; height: 0.86em; margin-left: 0.4em; opacity: 0.72; vertical-align: -0.13em;
}

/* Status badge on a piece card (Sold / Made to order) */
.card-media { position: relative; }
.card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #1B1917; background: rgba(255,255,255,0.92);
  padding: 5px 9px; border-radius: 2px;
}

/* Piece spec list — a couple more rows than the design proto */
.spec-list .spec-row { display: flex; justify-content: space-between; gap: 24px; }

/* Primary enquiry CTA — refined outline that fills on hover (not a heavy slab) */
.enquire-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 10px; min-height: 52px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  letter-spacing: 0.14em;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.enquire-cta:hover { background: var(--ink); color: var(--paper); }

/* the two secondary actions — even halves, quiet (not bold boxes) */
.piece-actions { display: flex; gap: 10px; margin-top: 10px; }
.piece-actions .btn { flex: 1; min-width: 0; }
.enq-piece, .fav-piece {
  min-height: 42px; padding: 0 0.75rem; margin-top: 0;
  font-size: 0.6rem; letter-spacing: 0.11em; font-weight: 500;
  border: 1px solid var(--hair); color: #6b6b6b; background: transparent;
}
.enq-piece:hover, .fav-piece:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.enq-piece.is-in, .fav-piece.is-in { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.acquire-note {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.8rem; color: #6b6b6b; margin-top: 12px; line-height: 1.5;
}

/* Header site-switch (Sculpture ⇄ Design) */
.site-switch {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #8A8A8A; text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.site-switch:hover { color: #1B1917; }
.site-switch .ss-arrow { font-size: 0.85em; letter-spacing: 0; }
.header-end { display: flex; align-items: center; gap: 18px; }

/* Collection intro line under the page head */
.collection-intro {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.95rem; color: #6b6b6b; max-width: 60ch; margin-top: 4px;
}

/* Gallery main frame always square-ish for studio/white shots */
.product-main.is-square { aspect-ratio: 1 / 1; }
.product-main.is-square img { object-fit: contain; background: #fff; }

/* Collection marks (SVG logos) on the collection chooser — reductive identity */
/* square frame (override .coll-card .card-media.ar-portrait = 4/5) */
.coll-card .card-media.ar-portrait.card-media--mark {
  aspect-ratio: 1 / 1;
  background: var(--paper, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair, #e7e4df);
}
.coll-card .card-media--mark .coll-mark {
  width: 62%;
  height: 62%;
  object-fit: contain;
  object-position: center;   /* dead-centre, equal margins */
  transition: transform 0.5s var(--ease-out, ease);
}
.coll-card:hover .coll-mark { transform: scale(1.04); }
/* hover: dissolve the mark into a real detail crop of the collection */
/* NB: beat `.coll-card .card-media.ar-portrait img` (0,3,1 → contain + padding) */
.coll-card .card-media.ar-portrait.card-media--mark .coll-mark-swap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;                     /* kill the contain-card padding */
  object-fit: cover;              /* fills the square corner-to-corner, bleeds past edges */
  object-position: center;
  opacity: 0;
  transform: scale(1.015);
  transform-origin: center;
  transition: opacity 0.6s var(--ease-out, ease), transform 1.8s var(--ease-out, ease);
  will-change: transform, opacity;
}
.coll-card:hover .card-media.ar-portrait.card-media--mark .coll-mark-swap { opacity: 1; transform: scale(1.08); }  /* gentle, slow zoom forward */

/* Per-collection crop nudges */
.coll-card .card-media--mark .coll-mark-swap--gyrification { object-position: center; }  /* source cropped so the sculpture centres in-frame */


/* Header logo split: MARK -> opening splash, WORDMARK -> home */
.brand-mark-link { display: inline-flex; flex: none; }
a.brand-words { text-decoration: none; color: inherit; }

/* Collection logo/mark beside each Works filter chip (design-site silhouette treatment) */
.filter-btn { display: inline-flex; align-items: center; gap: 0.5em; }
.filter-mark { width: 1.9em; height: 1.9em; object-fit: contain; filter: brightness(0); opacity: 0.5; transition: opacity 0.3s ease; flex: none; margin-right: 0.15em; }   /* bigger animated marks in the filter line (Driaan 2026-07-24) */
.filter-btn:hover .filter-mark, .filter-btn.is-active .filter-mark { opacity: 1; }

/* ============================================================
   Works grid — "quiet" hover-reveal cards (Driaan, 2026-07-23)
   The image leads. By default only the collection MARK (top-left)
   and the "+" (top-right) sit on the card; collection · name ·
   material fade up on hover + focus. You meet the piece first and
   find the name second — mirrors the reticence.co.za hover grid.
   Ink-on-white with a soft WHITE bottom-veil for legibility over
   any object tone — no dark scrim on a light ground (halo rule).
   ============================================================ */
.card--quiet .card-media { position: relative; }

/* collection icon — always present, quiet, top-left. Sized to balance the
   "+" opposite it; padding:0 reclaims the space the cut-out rule would steal.
   Native #1B1917 ink (no brightness filter — stays on the brand ink). */
.card--quiet .card-mark-badge {
  position: absolute; top: 13px; left: 13px; z-index: 3;
  width: 26px; height: 26px; padding: 0;
  object-fit: contain; object-position: center;
  opacity: 0.62; transition: opacity 0.3s ease; pointer-events: none;
}
.card--quiet:hover .card-mark-badge,
.card--quiet:focus-within .card-mark-badge { opacity: 0.9; }

/* the "+" — always present, floating top-right (handler is delegated) */
.card--quiet .card-plus { position: absolute; top: 10px; right: 10px; z-index: 4; margin: 0; }

/* status badge (Sold / Made to order) stacks under the mark here */
.card--quiet .card-badge { top: 44px; left: 12px; }

/* the label — hidden until hover / focus, then fades up */
.card--quiet .card-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 34px 16px 15px;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: linear-gradient(to top, rgba(255,255,255,0.94), rgba(255,255,255,0.82) 34%, rgba(255,255,255,0) 78%);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out);
  pointer-events: none;
}
.card--quiet:hover .card-caption,
.card--quiet:focus-within .card-caption { opacity: 1; transform: none; }

.card--quiet .card-cap-cat {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8A8A8A;
}
.card--quiet .card-cap-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.18; letter-spacing: -0.005em;
  color: #1B1917; margin: 1px 0 0;
}
.card--quiet .card-cap-meta {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.78rem; color: #1B1917; letter-spacing: 0.01em; margin-top: 2px;
}

/* Touch devices (no hover): keep the label visible so names aren't lost. */
@media (hover: none) {
  .card--quiet .card-caption { opacity: 1; transform: none; }
}

/* ============================================================
   FEED — a visual library, not a grid (Driaan, 2026-07-23)
   The uniform square works-grid lives in the mind map. The Feed is
   a beautiful masonry of hero + detail shots (his tag-picked "best
   of"), each image in its NATURAL aspect — no square crop. A place
   to browse and be inspired; tap any shot to open the piece.
   ============================================================ */
.feed-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* mosaic: varied heights (aspect) + occasional wide tiles */
  grid-auto-rows: 8px;                      /* row unit — JS sizes each tile's row-span from its height */
  grid-auto-flow: row dense;
  column-gap: clamp(0.5rem, 1vw, 0.9rem);
  align-items: start;
}
.feed-tile {
  display: block; margin: 0; border-radius: 2px; overflow: hidden; background: var(--paper);
  grid-row-end: span 34;                    /* fallback until JS measures */
}
.feed-tile.feed-feat { grid-column: span 2; }   /* a larger accent tile, for scale variation */
.feed-tile img {
  width: 100%; height: auto; display: block;
  transition: transform 1.2s var(--ease-out), opacity 0.5s ease;
}
.feed-tile:hover img, .feed-tile:focus-visible img { transform: scale(1.03); }
@media (max-width: 1000px) { .feed-masonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .feed-masonry { grid-template-columns: repeat(2, 1fr); } .feed-tile.feed-feat { grid-column: span 1; } }

/* ============================================================
   HOME / COLLECTIONS — "N readings of the mind" marker tiles
   (Driaan, 2026-07-23). A clean WHITE entry point: at rest the
   collection MARK is perfectly white (invisible on the page). On
   hover a DETAIL shot fades in — SHARP, no blur — the white mark
   reads against it, and the name + statement overlay. It fades to
   a close-up, never the whole sculpture. Count ("Six") is
   data-derived via [data-coll-count].
   ============================================================ */
.coll-tile { display: block; position: relative; text-decoration: none; color: inherit; }
.coll-tile-media {
  position: relative; overflow: hidden; background: var(--paper);
  border: 1px solid rgba(27,25,23,0.06);   /* whisper of structure so the row isn't a void */
}

/* the DETAIL shot — hidden at rest, fades in SHARP on hover (no blur) */
.coll-tile-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.03);
  transition: opacity 0.55s var(--ease-out), transform 1.7s var(--ease-out);
}
/* the MARK — visible at rest as a dark symbol on the white tile, so the
   six symbols read as a set before you touch anything; on hover it turns
   WHITE and lifts as the detail image comes in behind it. */
.coll-tile-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40%; height: 40%; object-fit: contain; object-position: center;
  filter: brightness(0) invert(0);          /* dark symbol, visible on white */
  opacity: 0.6; z-index: 2; pointer-events: none;
  transition: filter 0.5s var(--ease-out), opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out);
}
/* name + statement — white, appear on hover over the detail image */
.coll-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 48px 22px 22px; display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(to top, rgba(18,16,14,0.66), rgba(18,16,14,0.2) 46%, rgba(18,16,14,0) 88%);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
}
.coll-tile-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.14; letter-spacing: -0.005em; color: #fff;
}
.coll-tile-stmt {
  font-family: "PP Neue Montreal", system-ui, sans-serif;
  font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 42ch;
}
/* hover / focus → detail image in, mark lifts a touch, caption up */
.coll-tile:hover .coll-tile-img, .coll-tile:focus-visible .coll-tile-img { opacity: 1; transform: scale(1.06); }
.coll-tile:hover .coll-tile-mark, .coll-tile:focus-visible .coll-tile-mark { filter: brightness(0) invert(1); opacity: 1; transform: translate(-50%, -78%) scale(0.94); }
.coll-tile:hover .coll-tile-cap, .coll-tile:focus-visible .coll-tile-cap { opacity: 1; transform: none; }
/* touch: no hover — reveal the detail + label so it stays usable */
@media (hover: none) {
  .coll-tile-img { opacity: 1; }
  .coll-tile-mark { filter: brightness(0) invert(1); opacity: 1; }
  .coll-tile-cap { opacity: 1; transform: none; }
}

/* ============================================================
   ENQUIRY COMPOSER — in-site form (Driaan, 2026-07-23)
   Clicking "Enquire about these" opens this in-site composer: the
   works you chose ride along as the subject/attachment; you add
   name · email · message and opt into the newsletter. On send it
   reaches the studio (and, on deploy via ENQUIRY_ENDPOINT, adds you
   to the Contact DB + Mailchimp).
   ============================================================ */
.enq-compose { max-width: 720px; margin: 6px 0 44px; }
.enq-compose-head { margin-bottom: 22px; }
.enq-compose-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -0.01em; margin: 4px 0 8px; }
.enq-compose-sub { font-family: "PP Neue Montreal", system-ui, sans-serif; color: #6b6b6b; font-size: 0.95rem; line-height: 1.55; max-width: 52ch; }

.enq-attach { border: 1px solid var(--hair); border-radius: 4px; padding: 14px 16px; margin-bottom: 24px; background: #fcfcfb; }
.enq-attach-label { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A8A; margin: 0 0 11px; }
.enq-attach-list { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: 999px; padding: 4px 13px 4px 4px; background: #fff; }
.enq-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; display: block; }
.enq-chip-t { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.8rem; color: #1B1917; }

.enq-form { display: flex; flex-direction: column; gap: 16px; }
.enq-field { display: flex; flex-direction: column; gap: 6px; }
.enq-flabel { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A8A; }
.enq-field input, .enq-field textarea {
  font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.95rem; color: #1B1917;
  border: 1px solid var(--hair); border-radius: 3px; padding: 12px 14px; background: #fff; width: 100%;
  transition: border-color .2s ease;
}
.enq-field input:focus, .enq-field textarea:focus { outline: none; border-color: #1B1917; }
.enq-field textarea { resize: vertical; line-height: 1.5; }
.enq-check { display: flex; align-items: flex-start; gap: 10px; font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.85rem; color: #4a4a4a; cursor: pointer; line-height: 1.4; }
.enq-check input { margin-top: 1px; accent-color: #1B1917; width: 15px; height: 15px; flex: none; }
.enq-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.enq-form-actions .btn { width: auto; }
.enq-form-note { min-height: 1.1em; font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.82rem; color: #9a2b2b; margin: 2px 0 0; }

.enq-sent { max-width: 620px; padding: 26px 0 64px; }
.enq-sent-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.06; letter-spacing: -0.01em; margin: 6px 0 12px; }
.enq-sent-sub { font-family: "PP Neue Montreal", system-ui, sans-serif; color: #6b6b6b; font-size: 1rem; line-height: 1.6; margin-bottom: 24px; max-width: 48ch; }

/* enforce the hidden attribute over the author display rules (composer toggling) */
#enqGrid[hidden], .enq-page-actions[hidden], .filter-bar[hidden], .enq-compose[hidden], .enq-sent[hidden] { display: none !important; }

/* ============================================================
   SCALE FIGURE — the piece cut-out beside a ~1.7 m person
   (Driaan, 2026-07-23). Small pieces stand on a plinth; large
   pieces stand on the floor; a monumental piece dwarfs the figure.
   ============================================================ */
.scale-fig { margin: 24px 0 4px; }
.scale-label { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A8A; margin: 0 0 14px; }
.scale-stage { display: flex; align-items: flex-end; justify-content: flex-start; gap: clamp(26px, 6vw, 54px); border-bottom: 1px solid var(--hair); }
.scale-person { color: #26221f; display: flex; align-items: flex-end; flex: none; }
.scale-person svg, .scale-human { height: 100%; width: auto; display: block; }   /* realistic entourage figure (raster PNG) */
.scale-piece { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.scale-cut { display: block; object-fit: contain; width: auto; height: auto; margin-bottom: 1px; }  /* pre-rendered clean rembg silhouette ({slug}-sil.png), already solid ink; height set dynamically by fitScale */
/* a light gallery pedestal — distinct from the near-black piece + person so they never merge into one giant column (Driaan 2026-07-24) */
.scale-plinth { width: 58%; min-width: 36px; background: #E7E5E2; border: 1px solid #C2C0BD; border-bottom: none; box-shadow: 0 1px 0 #B7B5B2; }
.scale-plinth-label { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8A8A8A; margin: 6px 0 0; text-align: center; display: block; }
.scale-cap { font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.72rem; color: #8A8A8A; margin: 11px 0 0; letter-spacing: 0.01em; }

/* Collections whose hover detail-shot is light-ground: keep the mark BLACK on hover
   (still lifts up) instead of turning white and vanishing (Driaan 2026-07-23). */
.coll-tile--darkmark:hover .coll-tile-mark,
.coll-tile--darkmark:focus-visible .coll-tile-mark { filter: brightness(0) invert(0); opacity: 0.92; }

/* Home hero — cross-fade cycle through several group shots (Driaan 2026-07-23) */
.hero-media { position: relative; }
.hero-slide-over {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.hero-slide-over.is-on { opacity: 1; }

/* "More from the studio" cards: + moved to TOP-RIGHT (over the image) so long names
   sit clean underneath — matches the works cards (Driaan 2026-07-23). */
.card--plus-tr { position: relative; }
.card--plus-tr .card-plus { position: absolute; top: 10px; right: 10px; z-index: 4; margin: 0; }
.card--plus-tr .card-title-row { justify-content: flex-start; }

/* animated collection marks — the inline SVG fills its mount point (coll-tile-mark, etc.) */
.coll-tile-mark svg { width: 100%; height: 100%; display: block; }

/* Piece page — animated series icon beside the name */
.title-row { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.series-mark { display: inline-block; width: 1.35em; height: 1.35em; flex: none; align-self: center; color: #1B1917; }
.series-mark svg { width: 100%; height: 100%; display: block; }

/* every collection-mark mount point fills with its (animated) inline SVG */
.card-mark-badge svg, .coll-card-mark svg, .piece-card-mark svg, .filter-mark svg, .card-mark-badge > svg { width: 100%; height: 100%; display: block; }

/* Collection page header — animated mark beside the title */
.page-head .title-row { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.page-head-mark { display: inline-block; width: clamp(30px, 4vw, 46px); height: clamp(30px, 4vw, 46px); flex: none; color: #1B1917; }
.page-head-mark svg { width: 100%; height: 100%; display: block; }

/* Enquiry popover — explicit × close (always dismissable) */
/* .card-pop remains fixed: app.js positions it in viewport coordinates. */
.card-pop-close { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--grey); border-radius: 50%; cursor: pointer; z-index: 3; transition: background 0.15s, color 0.15s; }
.card-pop-close:hover { background: rgba(27,25,23,0.07); color: var(--ink); }
.card-pop-close svg { display: block; }

/* Scale figure — 1.7 m dimension bar (left of the person) + tighter plinth contact */
.scale-stage { gap: clamp(16px, 3.5vw, 36px); }
.scale-bar { position: relative; flex: none; width: 44px; align-self: flex-end; border-right: 1.2px solid #26221f; }
.scale-bar::before, .scale-bar::after { content: ''; position: absolute; right: -0.6px; width: 9px; height: 1.2px; background: #26221f; }
.scale-bar::before { top: 0; }
.scale-bar::after { bottom: 0; }
.scale-bar-num { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.6rem; letter-spacing: 0.03em; color: #26221f; background: #fff; white-space: nowrap; padding: 1px 0; }
.scale-cut { margin-bottom: 1px; }   /* single white pixel between piece + plinth (Driaan 2026-07-23) */

/* Collections page — smaller tiles, 4 across; hover expands ONE + greys the rest (Driaan 2026-07-23) */
#collectionsGrid { grid-template-columns: repeat(4, 1fr); column-gap: clamp(12px, 1.5vw, 20px); row-gap: clamp(12px, 1.5vw, 20px); }
#collectionsGrid .coll-tile { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out); transform-origin: center; will-change: transform; }
#collectionsGrid .coll-tile.is-push { opacity: 0.5; filter: grayscale(0.9); }   /* neighbours de-emphasise as they get shoved aside */
#collectionsGrid .coll-tile.is-focus { opacity: 1; filter: none; z-index: 6; }   /* the hovered tile — JS sets its scale transform */
@media (max-width: 1100px) { #collectionsGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { #collectionsGrid { grid-template-columns: repeat(2, 1fr); } }

/* Collections page tiles a touch shorter → more of the family visible at once */
#collectionsGrid .coll-tile-media.ar-square { aspect-ratio: 5 / 4; }

/* Home "readings of the mind" — smaller icon tiles + the ripple/bump hover (Driaan 2026-07-23) */
#homeCollections { grid-template-columns: repeat(5, 1fr); column-gap: clamp(10px, 1.3vw, 16px); row-gap: clamp(10px, 1.3vw, 16px); }
#homeCollections .coll-tile-media.ar-square { aspect-ratio: 1 / 1; }
#homeCollections .coll-tile { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out); transform-origin: center; will-change: transform; }
#homeCollections .coll-tile.is-push { opacity: 0.5; filter: grayscale(0.9); }
#homeCollections .coll-tile.is-focus { opacity: 1; filter: none; z-index: 6; }
@media (max-width: 1100px) { #homeCollections { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { #homeCollections { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { #homeCollections { grid-template-columns: repeat(2, 1fr); } }

/* ─── Neural Synapses flipbook (home) ─── */
.book-section { padding-top: clamp(2rem, 5vw, 4rem); }
.book-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.book-dl { white-space: nowrap; }
.book-stage { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 28px); min-height: 300px; max-width: 1040px; margin: 0 auto; }
.flipbook { touch-action: pan-y; transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* closed cover sits centred (shifted left by half a page so the right-hand cover lands in the middle);
   opening removes .is-cover → it slides back to reveal the full spread (Driaan 2026-07-24) */
.flipbook.is-cover { transform: translateX(calc(var(--book-half, 210px) * -1)); }
.flipbook .stf__parent { margin: 0 auto; }
.book-nav { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair, #e2ded7); background: #fff; color: var(--ink, #1B1917); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.book-nav:hover { background: var(--ink, #1B1917); color: #fff; border-color: var(--ink, #1B1917); }
.book-hint { text-align: center; margin-top: 16px; font-family: "PP Neue Montreal", system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.05em; color: #9a968f; }
@media (max-width: 620px) { .book-nav { width: 38px; height: 38px; font-size: 18px; } }
/* mobile: single-page book, hide the nav arrows (drag/swipe to turn) so the page gets full width & never overflows */
@media (max-width: 679px) { .book-nav { display: none; } .book-stage { gap: 0; max-width: 100%; overflow: hidden; } }

/* Piece-page gallery thumbnails — smaller, compact selector row like the design site (Driaan 2026-07-24) */
.product-gallery .thumb-row { grid-template-columns: repeat(auto-fill, 92px); justify-content: start; column-gap: 0.7rem; row-gap: 0.5rem; }
.product-gallery .thumb { aspect-ratio: 1 / 1; border: 1px solid var(--hair, #e7e4df); opacity: 0.72; }
.product-gallery .thumb:hover { opacity: 1; }
.product-gallery .thumb.is-active { opacity: 1; border-color: var(--ink, #1B1917); }
.product-gallery .thumb-label { font-size: 0.56rem; letter-spacing: 0.1em; }
@media (max-width: 620px) { .product-gallery .thumb-row { grid-template-columns: repeat(auto-fill, 72px); } }

/* Flipbook — Download PDF moved below the book (Driaan 2026-07-24) + no weird left-edge shadow */
.book-download-row { text-align: center; margin-top: 22px; }
.book-download-btn { display: inline-flex; align-items: center; gap: 0.5em; border: 1px solid var(--ink, #1B1917); color: var(--ink, #1B1917); background: transparent; padding: 0.85em 1.6em; letter-spacing: 0.14em; font-size: 0.72rem; transition: background 0.3s, color 0.3s; }
.book-download-btn:hover { background: var(--ink, #1B1917); color: #fff; }
.flipbook .stf__wrapper, .flipbook .stf__block { box-shadow: none !important; }   /* kill any soft outer shadow that "hangs" on the edge */
.flipbook .stf__outerShadow, .flipbook .stf__innerShadow,
.flipbook .stf__hardShadow, .flipbook .stf__hardInnerShadow { display: none !important; opacity: 0 !important; }   /* no spine/gutter/edge shadow (Driaan: looked unreal) */