/* ════════════════════════════════════════════════════════════════════
   CURIO — shared stylesheet
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─── */
:root {
  --plum:       #5C2840;
  --plum-deep:  #4a2035;
  --gold:       #E2C97E;
  --gold-deep:  #d0ba6a;
  --gold-ink:   #8A6A22;   /* deep antique gold — legible as TEXT on light surfaces (~5:1) */
  --ivory:      #FAF3E4;
  --near-black: #1A0F14;
  --mid:        #8A6A5C;

  --bg:        #FAFAF8;
  --surface:   #FFFFFF;
  --border:        rgba(26,15,20,0.08);
  --border-strong: rgba(26,15,20,0.14);
  --gold-line:     rgba(226,201,126,0.45);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Raleway', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Menlo', monospace;

  --max-w:   1440px;
  --max-w-narrow: 1200px;
  --px:      clamp(24px, 5.5vw, 80px);
  --sec-py:  clamp(72px, 9vw, 128px);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--near-black);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* ─── Utility ─── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}
.wrap-narrow {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}
.label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--plum);
}
.label--gold  { color: var(--gold); }
.label--muted { color: rgba(26,15,20,0.4); }
.label--white { color: rgba(255,255,255,0.6); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, gap 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn--gold        { background: var(--gold); color: var(--plum); }
.btn--gold:hover  { background: var(--gold-deep); }
.btn--plum        { background: var(--plum); color: #fff; }
.btn--plum:hover  { background: var(--plum-deep); }
.btn--outline-plum       { border: 0.5px solid var(--plum); color: var(--plum); background: transparent; }
.btn--outline-plum:hover { background: var(--plum); color: #fff; }
.btn--outline        { border: 0.5px solid var(--border-strong); color: var(--near-black); background: transparent; }
.btn--outline:hover  { border-color: var(--plum); color: var(--plum); }
.btn--ghost         { color: rgba(255,255,255,0.65); background: transparent; }
.btn--ghost::after  { content: '→'; font-size: 0.875rem; }
.btn--ghost:hover   { color: #fff; }
.btn--ghost-bordered {
  color: rgba(255,255,255,0.6);
  border: 0.5px solid rgba(255,255,255,0.28);
  background: transparent;
}
.btn--ghost-bordered:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--text-plum {
  color: var(--plum);
  padding: 0;
  background: transparent;
}
.btn--text-plum::after { content: '→'; font-size: 0.875rem; }
.btn--text-plum:hover { gap: 14px; }

/* ════════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.35s ease, border-color 0.35s ease;
  border-bottom: 0.5px solid transparent;
}
.nav--solid,
.nav.is-solid {
  background: rgba(250,250,248,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav__bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__list { list-style: none; display: flex; gap: 36px; }
.nav__list--right { justify-content: flex-end; }
.nav__link {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  transition: color 0.2s;
}
.nav__link:hover { color: #fff; }
.nav.is-solid .nav__link,
.nav--solid .nav__link { color: var(--near-black); }
.nav.is-solid .nav__link:hover,
.nav--solid .nav__link:hover { color: var(--plum); }
.nav__link.is-active { color: var(--plum); }

.nav__brand { text-align: center; cursor: pointer; }
.nav__wordmark {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: 0.46em;
  color: rgba(255,255,255,0.95);
  display: block;
  padding-right: 0.46em;
  transition: color 0.35s;
}
.nav.is-solid .nav__wordmark,
.nav--solid .nav__wordmark { color: var(--near-black); }
.nav__rule {
  height: 1px;
  background: rgba(226,201,126,0.55);
  margin: 4px auto 3px;
  transition: background 0.35s;
}
.nav.is-solid .nav__rule,
.nav--solid .nav__rule { background: var(--gold); opacity: 0.7; }
.nav__tag {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  transition: color 0.35s;
  display: block;
}
.nav.is-solid .nav__tag,
.nav--solid .nav__tag { color: rgb(1, 1, 1); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.nav__burger span {
  display: block; width: 22px; height: 0.5px;
  background: rgba(255,255,255,0.8);
  transition: background 0.35s;
}
.nav.is-solid .nav__burger span,
.nav--solid .nav__burger span { background: var(--near-black); }

@media (max-width: 880px) {
  .nav__list { display: none; }
  .nav__burger { display: flex; }
  .nav__bar { grid-template-columns: 44px 1fr 44px; height: 64px; }
}

/* ─── Mobile menu overlay ─── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(26,15,20,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px var(--px) 60px;
  gap: 0;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: 22px; right: var(--px);
  background: none; border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 1.375rem;
  padding: 8px;
  transition: color 0.2s;
  line-height: 1;
}
.mobile-menu__close:hover { color: #fff; }
.mobile-menu__link {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  padding: 18px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  transition: color 0.2s;
}
.mobile-menu__link:first-of-type { border-top: 0.5px solid rgba(255,255,255,0.07); }
.mobile-menu__link:hover { color: var(--gold); }
.mobile-menu__enquire {
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  border: 0.5px solid rgba(226,201,126,0.5);
  padding: 14px 40px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mobile-menu__enquire:hover { background: var(--gold); color: var(--plum); border-color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   PLACEHOLDERS — image / video drop-in slots
   ════════════════════════════════════════════════════════════════════ */
.slot {
  position: relative;
  background: var(--ivory);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 22px,
    rgba(92,40,64,0.05) 22px,
    rgba(92,40,64,0.05) 23px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(26,15,20,0.55);
}
.slot--dark {
  background: var(--near-black);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 22px,
    rgba(226,201,126,0.07) 22px,
    rgba(226,201,126,0.07) 23px
  );
  color: rgba(226,201,126,0.55);
}
.slot__inner {
  text-align: center;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 80%;
}
.slot__icon {
  width: 24px;
  height: 24px;
  opacity: 0.55;
}
.slot__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
}
.slot__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  opacity: 0.65;
}
.slot--full { position: absolute; inset: 0; }

/* ─── <image-slot> drop targets — inherit the slot's full-bleed behaviour ─── */
image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
image-slot.slot--full {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
image-slot::part(frame) {
  background: var(--near-black);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 22px,
    rgba(226,201,126,0.07) 22px,
    rgba(226,201,126,0.07) 23px
  );
}
image-slot.slot--light::part(frame) {
  background: var(--ivory);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 22px,
    rgba(92,40,64,0.05) 22px,
    rgba(92,40,64,0.05) 23px
  );
}
image-slot::part(ring) { border-color: rgba(226,201,126,0.18); }
image-slot.slot--light::part(ring) { border-color: rgba(92,40,64,0.18); }

/* ─── Universal: move Replace/Remove controls INSIDE every slot at top-right,
       and make them ALWAYS visible. The default "hover to reveal" model
       fights with parent <a> links (every piece card wraps its slot in a
       link — clicks navigate before the button can settle), so we make
       them an always-on small badge. !important is necessary: the slot's
       internal .ctl class selector (specificity 0,1,0) outranks our
       external ::part selector (0,0,2) without it.

       PRODUCTION GUARD: scoped to image-slot[data-editable], which the
       component only sets when window.omelette.writeFile exists (i.e. inside
       the Claude editor). On a deployed static host there is no omelette
       bridge, the attribute is absent, this override never applies, and the
       slot falls back to its built-in hover-gated controls — which are ALSO
       editable-gated, so real visitors see no Replace/Remove buttons. The
       filled images themselves still load from .image-slots.state.json. */
image-slot[data-editable]::part(controls) {
  top: 10px !important;
  bottom: auto !important;
  left: auto !important;
  right: 10px !important;
  transform: none !important;
  padding-top: 0 !important;
  z-index: 11 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  gap: 4px !important;
}
/* On EMPTY slots we suppress the controls — the big "Drop image" area
   already invites a click; an extra Replace button would be redundant. */
image-slot:not([data-filled])::part(controls) {
  display: none !important;
}
/* Pretty up the buttons — small, high-contrast, with a soft backdrop blur
   so they read on any image. */
image-slot::part(controls-replace),
image-slot::part(controls-clear),
image-slot::part(controls-zoom-in),
image-slot::part(controls-zoom-out),
image-slot::part(controls-reframe) {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 0 !important;
  background: rgba(15,6,10,0.78) !important;
  color: #fff !important;
  border: 0.5px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}
image-slot::part(controls-replace):hover,
image-slot::part(controls-clear):hover,
image-slot::part(controls-zoom-in):hover,
image-slot::part(controls-zoom-out):hover,
image-slot::part(controls-reframe):hover {
  background: var(--gold, #E2C97E) !important;
  color: var(--near-black, #0F060A) !important;
}
/* Zoom +/− are compact square buttons */
image-slot::part(controls-zoom-in),
image-slot::part(controls-zoom-out) {
  width: 26px !important;
  padding: 5px 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
/* Crop/Done button gets a plum tint when active (reframe mode) */
image-slot[data-reframe]::part(controls-reframe) {
  background: var(--plum, #5C2840) !important;
  color: rgba(250,238,210,0.95) !important;
  border-color: rgba(226,201,126,0.35) !important;
}
/* Large hero / statement / video backgrounds — slightly more inset. */
image-slot#hero-bg::part(controls),
image-slot#statement-bg::part(controls),
image-slot#index-atelier-poster::part(controls) {
  top: 20px !important;
  right: 20px !important;
}
/* Hero already has external Replace/Remove buttons (.hero__edit). Hide
   the slot's INTERNAL controls so we don't render a duplicate pair. */
image-slot#hero-bg::part(controls) { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   SECTION HEADER
   ════════════════════════════════════════════════════════════════════ */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}
.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 3.5vw, 3.375rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--near-black);
  margin-top: 10px;
}
.section-head__link {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
  white-space: nowrap;
  margin-bottom: 4px;
}
.section-head__link::after { content: '→'; }
.section-head__link:hover { gap: 14px; }

@media (max-width: 540px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PROMISE STRIP
   ════════════════════════════════════════════════════════════════════ */
.promise {
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 28px var(--px);
}
.promise__editorial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.promise__rule {
  width: 48px;
  height: 0.5px;
  background: var(--gold);
  flex-shrink: 0;
}
.promise__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 300;
  color: var(--mid);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .promise__editorial { flex-direction: column; gap: 0; }
  .promise__rule { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — site-wide
   ════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--near-black);
  padding: 80px var(--px) 40px;
}
.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  margin-bottom: 40px;
}
.footer__wm {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 1.0625rem;
  letter-spacing: 0.46em;
  color: var(--gold);
  margin-bottom: 5px;
}
.footer__wm-rule {
  width: 100px;
  height: 0.5px;
  background: rgba(226,201,126,0.25);
  margin-bottom: 5px;
}
.footer__wm-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226,201,126,0.32);
  margin-bottom: 28px;
}
.footer__desc {
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  line-height: 1.7;
  max-width: 30ch;
}
.footer__col-head {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 22px;
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__link {
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer__link:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__legal {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}
.footer__socials { display: flex; gap: 24px; }
.footer__social {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  transition: color 0.2s;
}
.footer__social:hover { color: var(--gold); }
@media (max-width: 860px) {
  .footer__main { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .footer__main { grid-template-columns: 1fr; }
}

/* ─── Compact dark footer (inner pages) ─── */
.footer-mini {
  background: var(--near-black);
  padding: 48px var(--px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-mini__brand {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 0.9375rem;
  letter-spacing: 0.42em;
  color: var(--gold);
  margin-bottom: 6px;
}
.footer-mini__rule {
  width: 36px;
  height: 0.5px;
  background: rgba(226,201,126,0.35);
  margin: 14px 0;
}
.footer-mini__link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
  transition: color 0.2s;
}
.footer-mini__link:hover { color: var(--gold); }
.footer-mini__contact {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
}
.footer-mini__social {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer-mini__social:hover { color: var(--gold); }
.footer-mini__legal {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--up-sm { transform: translateY(16px); transition-duration: 0.6s; }
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }
.reveal--delay-4 { transition-delay: 0.32s; }
.reveal--delay-5 { transition-delay: 0.40s; }
.reveal--delay-6 { transition-delay: 0.48s; }

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE — hero, cuts grid, feature, statement, pieces, video, atelier, journal
   ════════════════════════════════════════════════════════════════════ */

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--near-black);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(15,6,10,0.85) 0%,
    rgba(20,8,14,0.65) 42%,
    rgba(20,8,14,0.28) 70%,
    rgba(20,8,14,0.10) 100%
  );
  z-index: 1;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15,6,10,0.72) 0%, transparent 45%);
  z-index: 2;
}
.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-bottom: clamp(56px, 8vw, 104px);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.hero__eyebrow-line {
  width: 28px; height: 0.5px;
  background: var(--gold);
  opacity: 0.7;
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6.5vw, 6.5rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 10ch;
  margin-bottom: 28px;
}
.hero__headline em { font-style: italic; color: var(--gold); }
.hero__sub {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 300;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.02em;
  line-height: 1.75;
  max-width: 38ch;
  margin-bottom: 44px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  z-index: 10;
  right: var(--px);
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__scroll-track {
  width: 0.5px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  position: relative;
}
.hero__scroll-track::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0; right: 0;
  height: 100%;
  background: rgba(226,201,126,0.7);
  animation: scr 2.2s ease-in-out infinite;
}
@keyframes scr { 0%{top:-100%} 100%{top:100%} }
.hero__scroll-text {
  writing-mode: vertical-rl;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
@media (max-width: 540px) {
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__scroll { display: none; }
}

/* Cuts grid */
.cuts { padding: var(--sec-py) 0; background: var(--bg); }
.cuts__header { padding: 0 var(--px); }
.cuts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.cut-card {
  background: var(--bg);
  padding: 52px 44px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.25s;
}
.cut-card:hover { background: var(--surface); }
.cut-card__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  color: rgba(26,15,20,0.14);
  margin-bottom: 44px;
}
.cut-card__diagram {
  width: 100%;
  max-width: 210px;
  margin: 0 auto 44px;
  aspect-ratio: 1;
}
.cut-card svg *[stroke]:not([stroke="none"]) {
  stroke: rgba(26,15,20,0.28);
  transition: stroke 0.3s ease;
}
.cut-card:hover svg *[stroke]:not([stroke="none"]) {
  stroke: var(--gold);
}
.cut-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 8px;
}
.cut-card__desc {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
  flex: 1;
}
.cut-card__from-label {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26,15,20,0.35);
  margin-bottom: 3px;
  font-family: var(--font-sans);
}
.cut-card__from {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--near-black);
}
.cut-card__arrow {
  position: absolute;
  bottom: 44px; right: 44px;
  font-size: 1rem;
  color: var(--plum);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.2s, transform 0.22s;
}
.cut-card:hover .cut-card__arrow { opacity: 1; transform: none; }
@media (max-width: 960px) { .cuts__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) {
  .cuts__grid { grid-template-columns: 1fr; }
  .cut-card { padding: 36px 28px; }
}

/* Featured piece */
.feature { background: var(--ivory); overflow: hidden; }
.feature__split {
  display: grid;
  grid-template-columns: 56% 44%;
  min-height: 700px;
}
.feature__image { position: relative; overflow: hidden; background: #1a0f14; }
.feature__content {
  padding: clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature__label { margin-bottom: 18px; }
.feature__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.125rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--near-black);
  margin-bottom: 6px;
}
.feature__sub {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--mid);
  margin-bottom: 40px;
}
.feature__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.5px solid var(--border-strong);
  margin-bottom: 36px;
}
.spec {
  padding: 16px 20px;
  border-right: 0.5px solid var(--border-strong);
  border-bottom: 0.5px solid var(--border-strong);
}
.spec:nth-child(2n) { border-right: none; }
.spec:nth-last-child(-n+2) { border-bottom: none; }
.spec__k {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26,15,20,0.36);
  margin-bottom: 5px;
}
.spec__v {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--near-black);
}
.feature__price-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26,15,20,0.35);
  margin-bottom: 6px;
}
.feature__price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 300;
  color: var(--plum);
  margin-bottom: 28px;
}
@media (max-width: 860px) {
  .feature__split { grid-template-columns: 1fr; }
  .feature__image { min-height: 380px; }
}
@media (max-width: 480px) {
  .feature__image { min-height: 280px; }
  .feature__content { padding: clamp(32px, 6vw, 48px); }
}

/* Brand statement — dark plum */
.statement {
  background: var(--plum);
  padding: var(--sec-py) var(--px);
  text-align: center;
}
.statement__ornament { width: 48px; height: 1px; background: var(--gold); margin: 0 auto 52px; }
.statement__quote {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.32;
  color: #fff;
  max-width: 22ch;
  margin: 0 auto 44px;
}
.statement__byline {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

/* Pieces strip */
.pieces { padding: var(--sec-py) 0; background: var(--bg); overflow: hidden; }
.pieces__header { padding: 0 var(--px); margin-bottom: 48px; }
.pieces__strip {
  display: flex;
  gap: 1px;
  background: var(--border);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.pieces__strip:active { cursor: grabbing; }
.pieces__strip::-webkit-scrollbar { display: none; }
.piece-card {
  flex: 0 0 clamp(240px, 28vw, 340px);
  background: var(--bg);
  transition: background 0.2s;
}
.piece-card:hover { background: var(--surface); }
.piece-card__img {
  aspect-ratio: 3/4;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}
.piece-card__body { padding: 20px 24px 28px; }
.piece-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 4px;
}
.piece-card__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--mid);
  margin-bottom: 12px;
}
.piece-card__price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--plum);
}

/* Video section */
.video-sec { background: var(--near-black); overflow: hidden; }
.video-sec__inner {
  position: relative;
  aspect-ratio: 16/9;
  max-height: 78vh;
}
.video-sec__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.video-sec__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--px);
  background: rgba(26,15,20,0.58);
  z-index: 5;
}
.video-sec__label { margin-bottom: 20px; }
.video-sec__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.5vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  max-width: 18ch;
  line-height: 1.12;
  margin-bottom: 36px;
}
@media (max-width: 640px) {
  .video-sec__inner { aspect-ratio: auto; min-height: 80svh; }
}

/* Atelier CTA */
.atelier {
  padding: var(--sec-py) var(--px);
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.atelier__label { margin-bottom: 18px; }
.atelier__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--near-black);
  max-width: 22ch;
  margin-bottom: 18px;
}
.atelier__sub {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--mid);
  max-width: 44ch;
  line-height: 1.75;
  margin-bottom: 44px;
}
.atelier__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.atelier__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}
.atelier__address-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--near-black);
}
.atelier__address-line {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--mid);
}

/* ═══════════════════════════════════════════════════════
   Journal — homepage mosaic redesign (.jm-*)
   ═══════════════════════════════════════════════════════ */
.journal.jm-section {
  background: var(--near-black);
  padding: clamp(52px, 7vw, 88px) 0;
}

/* Header row */
.jm-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.jm-hd__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 300;
  color: rgba(250,238,210,0.95);
  line-height: 1.08;
  margin-top: 10px;
}
.jm-hd__title em { font-style: italic; color: var(--gold); }
.jm-hd__link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226,201,126,0.72);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 5px;
  transition: color 0.2s;
}
.jm-hd__link:hover { color: var(--gold); }

/* Mosaic grid — hero left, two stacked right */
.jm-mosaic {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}

/* Card base */
.jm-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.22s;
}
.jm-card:hover { opacity: 0.82; }

/* Image */
.jm-card__img {
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(226,201,126,0.1);
}
.jm-card--hero .jm-card__img { aspect-ratio: 3/2; }
.jm-card--side .jm-card__img { aspect-ratio: 16/9; }

/* Placeholder styling on dark background */
.jm-card__img image-slot::part(frame) {
  background: rgba(250,238,210,0.03);
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 28px,
    rgba(250,238,210,0.025) 28px, rgba(250,238,210,0.025) 29px
  );
}
.jm-card__img image-slot::part(empty) { color: rgba(250,238,210,0.38); }
.jm-card__img image-slot::part(ring)  { border-color: rgba(226,201,126,0.14); }

/* Body */
.jm-card__body {
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jm-card__cat { margin: 0; }

.jm-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  color: rgba(250,238,210,0.95);
  line-height: 1.18;
  text-wrap: pretty;
}
.jm-card--hero .jm-card__title  { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.jm-card--side .jm-card__title  { font-size: clamp(1.05rem, 1.55vw, 1.3rem); }

.jm-card__cta {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226,201,126,0.65);
  margin-top: 4px;
  transition: color 0.2s, letter-spacing 0.2s;
}
.jm-card:hover .jm-card__cta { color: var(--gold); letter-spacing: 0.26em; }

/* Side stack */
.jm-side {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jm-side .jm-card + .jm-card {
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 0.5px solid rgba(226,201,126,0.1);
}

/* Responsive */
@media (max-width: 720px) {
  .jm-mosaic { grid-template-columns: 1fr; }
  .jm-card--hero .jm-card__img { aspect-ratio: 4/3; }
}

/* Journal magazine grid */
.journal { padding: var(--sec-py) 0; background: var(--surface); }
.journal__header { padding: 0 var(--px); margin-bottom: 52px; }
.journal__grid { padding: 0 var(--px); }
.journal__row-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.journal__row-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 0.5px solid var(--border);
}
.jcard {
  border-top: 0.5px solid var(--border);
  padding-top: 28px;
}
.jcard__label { margin-bottom: 14px; }
.jcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--near-black);
  margin-bottom: 12px;
}
.jcard__excerpt {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 24px;
}
.jcard__read {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}
.jcard__read::after { content: '→'; }
.jcard__read:hover { gap: 14px; }
.jcard--hero .jcard__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 14px;
}
.jcard--hero .jcard__excerpt {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-style: italic;
  color: var(--mid);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 28px;
}
.jcard--compact { padding-top: 24px; }
.jcard--compact .jcard__title {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  margin-bottom: 16px;
}
.jcard--compact .jcard__excerpt { display: none; }
@media (max-width: 780px) {
  .journal__row-main { grid-template-columns: 1fr; gap: 32px; }
  .journal__row-compact { grid-template-columns: 1fr; gap: 24px; }
  .jcard--hero .jcard__title { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .jcard--compact .jcard__excerpt { display: block; }
}

/* ════════════════════════════════════════════════════════════════════
   INNER PAGE: CUT
   ════════════════════════════════════════════════════════════════════ */
.page--inner { padding-top: 68px; }
@media (max-width: 880px) { .page--inner { padding-top: 64px; } }

.cut-hero {
  background: var(--near-black);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
}
.cut-hero__bg { position: absolute; inset: 0; opacity: 0.4; }
.cut-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,15,20,0.92) 0%, rgba(26,15,20,0.3) 60%);
}
.cut-hero__content {
  position: relative;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: clamp(48px,7vw,96px) var(--px) clamp(56px,8vw,96px);
  width: 100%;
}
.cut-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cut-hero__eyebrow::before {
  content: '';
  display: block;
  width: 22px; height: 0.5px;
  background: var(--gold);
}
.cut-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.cut-hero__short {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
  line-height: 1.65;
  max-width: 44ch;
}

/* Stats bar */
.stats {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}
.stats__row {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 28px 32px;
  border-right: 0.5px solid var(--border);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; }
.stat__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.stat__value {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--near-black);
}
.stat__value--prose {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  margin-top: 4px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .stats__row { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 0.5px solid var(--border); padding: 20px 0; }
  .stat:last-child { border-bottom: none; }
}

/* Article (cut page) */
.cut-article {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--px);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 72px;
  align-items: start;
}
.cut-article__body p {
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 300;
  color: var(--near-black);
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}
.cut-article__body p:last-child { margin-bottom: 0; }
.cut-article__aside { position: sticky; top: 88px; }
.aside-img {
  width: 100%;
  aspect-ratio: 3/4;
  margin-bottom: 20px;
}
.aside-caption {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 860px) {
  .cut-article { grid-template-columns: 1fr; gap: 48px; }
  .cut-article__aside { position: static; }
  .aside-img { aspect-ratio: 16/9; }
}

/* Buyer checklist */
.checklist {
  background: var(--ivory);
  border-top: 0.5px solid rgba(226,201,126,0.2);
  border-bottom: 0.5px solid rgba(226,201,126,0.2);
}
.checklist__inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--px);
}
.checklist__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 10px;
}
.checklist__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 36px;
}
.checklist__title em { font-style: italic; }
.checklist__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 48px;
}
.checklist__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--near-black);
}
.checklist__item::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 8px;
}
@media (max-width: 720px) { .checklist__list { grid-template-columns: 1fr; } }

/* Cut CTA */
.cut-cta {
  padding: clamp(56px, 7vw, 96px) var(--px);
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  text-align: center;
}
.cut-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--near-black);
  margin-bottom: 10px;
}
.cut-cta__sub {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin-bottom: 36px;
}
.cut-cta__sub .mono {
  font-family: var(--font-mono);
  font-weight: 400;
}
.cut-cta__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   INNER PAGE: JOURNAL ARTICLE
   ════════════════════════════════════════════════════════════════════ */
.article-header {
  background: var(--ivory);
  border-bottom: 0.5px solid rgba(226,201,126,0.2);
  padding: clamp(48px, 7vw, 80px) var(--px) clamp(40px, 5vw, 56px);
  text-align: center;
}
.article-header__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.article-header__rule {
  width: 36px;
  height: 0.5px;
  background: var(--gold);
  margin: 16px auto;
}
.article-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  color: var(--near-black);
  line-height: 1.07;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0 auto;
}

.article {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--px) clamp(72px, 10vw, 120px);
}
.article__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 0.5px solid var(--border-strong);
}
.article__excerpt {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 300;
  font-style: italic;
  color: var(--mid);
  line-height: 1.72;
  margin-bottom: 40px;
}
.article__body {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--near-black);
}
.article__body p { margin-bottom: 1.75em; }
.article__body strong { font-weight: 500; color: var(--near-black); }

/* Related cuts */
.article__related {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 0.5px solid var(--border-strong);
}
.article__related-label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
}
.article__related-cuts { display: flex; flex-wrap: wrap; gap: 8px; }
.article__related-cut {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 0.5px solid var(--border-strong);
  color: var(--plum);
  transition: background 0.2s, color 0.2s;
  display: inline-block;
}
.article__related-cut:hover { background: var(--plum); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   INNER PAGE: FAQ
   ════════════════════════════════════════════════════════════════════ */
.faq-hero {
  background: var(--ivory);
  border-bottom: 0.5px solid rgba(226,201,126,0.2);
  padding: clamp(56px, 8vw, 96px) var(--px);
  text-align: center;
}
.faq-hero__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 18px;
}
.faq-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--near-black);
  margin-bottom: 18px;
}
.faq-hero__sub {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  max-width: 44ch;
  margin: 0 auto;
}
.faq-list { max-width: 720px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--px); }
.faq__item { border-bottom: 0.5px solid var(--border-strong); }
.faq__item:first-child { border-top: 0.5px solid var(--border-strong); }
.faq__q {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  color: var(--near-black);
  transition: color 0.2s;
}
.faq__q:hover { color: var(--plum); }
.faq__icon {
  flex-shrink: 0;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--plum);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.22,1,.36,1);
}
.faq__item.is-open .faq__a { max-height: 600px; }
.faq__a-inner {
  padding-bottom: 28px;
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  font-weight: 300;
  color: var(--mid);
  line-height: 1.9;
  max-width: 56ch;
}
.faq-cta {
  background: var(--near-black);
  padding: clamp(56px, 7vw, 80px) var(--px);
  text-align: center;
}
.faq-cta__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(226,201,126,0.6);
  margin-bottom: 16px;
}
.faq-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  margin-bottom: 32px;
  line-height: 1.1;
}
.faq-cta__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: PIECES INDEX
   ════════════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--ivory);
  border-bottom: 0.5px solid rgba(226,201,126,0.2);
  padding: clamp(56px, 8vw, 104px) var(--px) clamp(48px, 6vw, 72px);
  text-align: center;
}
.page-hero__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 14px;
}
.page-hero__rule {
  width: 36px;
  height: 0.5px;
  background: var(--gold);
  margin: 14px auto 22px;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--near-black);
  margin-bottom: 18px;
}
.page-hero__sub {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 auto;
}

.pieces-grid-section { padding: var(--sec-py) 0; background: var(--bg); }
.pieces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}
.pieces-grid .piece-card { flex: 1 1 auto; }
@media (max-width: 880px) { .pieces-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pieces-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   PAGE: ATELIER
   ════════════════════════════════════════════════════════════════════ */
.atelier-page__intro {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--px);
}
.atelier-page__intro p {
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  font-weight: 300;
  color: var(--near-black);
  line-height: 1.85;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}
.atelier-page__intro p:last-child { margin-bottom: 0; }

.atelier-page__media {
  padding: 0 var(--px) var(--sec-py);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
.atelier-page__media-slot { aspect-ratio: 4/3; }
.atelier-page__media-slot:first-child { aspect-ratio: auto; min-height: 480px; }
@media (max-width: 860px) {
  .atelier-page__media { grid-template-columns: 1fr; }
  .atelier-page__media-slot:first-child { min-height: 320px; }
}

.atelier-page__details {
  background: var(--surface);
  padding: var(--sec-py) var(--px);
}
.atelier-page__details-grid {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.detail-block__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 14px;
}
.detail-block__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 18px;
}
.detail-block p {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 18px;
}
.detail-block__row {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--near-black);
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.detail-block__row:last-child { border-bottom: none; }
.detail-block__row .k { color: var(--mid); }
@media (max-width: 720px) {
  .atelier-page__details-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: ENQUIRE
   ════════════════════════════════════════════════════════════════════ */
.enquire {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--px) clamp(72px, 10vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: start;
}
.enquire__intro p {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 18px;
}
.enquire__intro .detail-block__row { font-size: 0.8125rem; }
.enquire__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mid);
}
.field__input,
.field__textarea,
.field__select {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--near-black);
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus { border-color: var(--plum); }
.field__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field__hint {
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
  margin-top: -6px;
}
@media (max-width: 720px) {
  .enquire { grid-template-columns: 1fr; gap: 48px; }
  .field__row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   IMG / VIDEO transitions
   ════════════════════════════════════════════════════════════════════ */
.piece-card__img img,
.piece-card__img .slot { transition: transform 0.65s cubic-bezier(.22,1,.36,1); }
.piece-card:hover .piece-card__img img,
.piece-card:hover .piece-card__img .slot { transform: scale(1.05); }
.feature__image img,
.feature__image .slot { transition: transform 12s ease-out; }
.feature__image:hover img,
.feature__image:hover .slot { transform: scale(1.04); }

/* ════════════════════════════════════════════════════════════════════
   VISUAL REFRESH — icons, shapes, font scale
   ════════════════════════════════════════════════════════════════════ */

/* ─── Base font scale ─── */
body { font-size: 20px; }

/* ─── Font size overrides ─── */
.label                   { font-size: 0.75rem; letter-spacing: 0.26em; }
.section-head__title     { font-size: clamp(2.5rem, 4vw, 3.75rem); }
.cut-card__name          { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
.cut-card__desc          { font-size: 0.875rem; line-height: 1.72; }
.cut-card__from          { font-size: 0.875rem; }
.cut-card__diagram       { max-width: 220px; }
.jcard__title            { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.jcard--compact .jcard__title { font-size: clamp(1rem, 1.4vw, 1.125rem); }
.jcard__excerpt          { font-size: 0.875rem; line-height: 1.75; }
.piece-card__name        { font-size: 1.1875rem; }
.piece-card__meta        { font-size: 0.75rem; }
.piece-card__price       { font-size: 0.875rem; }
.atelier__sub            { font-size: 1rem; max-width: 52ch; }
.feature__title          { font-size: clamp(2.25rem, 3.5vw, 3.375rem); }
.feature__price          { font-size: 1.875rem; }
.footer__link            { font-size: 0.8125rem; }
.footer__desc            { font-size: 0.8125rem; }
.footer__col-head        { font-size: 0.6875rem; }
.spec__v                 { font-size: 0.875rem; }
.hero__sub               { font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); color: rgba(255,255,255,0.68); }

/* ─── Section ornament ─── */
.section-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.section-ornament__line {
  width: 28px;
  height: 0.5px;
  background: var(--gold);
  opacity: 0.85;
}
.section-ornament__gem {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ─── Promise pillars ─── */
.promise--pillars {
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 0;
}
.promise__pillars {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--border);
  gap: 1px;
}
.promise__pillar {
  background: var(--surface);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: background 0.2s;
}
.promise__pillar:hover { background: var(--ivory); }
.promise__pillar-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.promise__pillar-icon svg { width: 100%; height: 100%; }
.promise__pillar-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--near-black);
}
.promise__pillar-sub {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 720px) { .promise__pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .promise__pillars { grid-template-columns: 1fr; } }

/* ─── Cut shape navigator ─── */
.cut-nav {
  background: var(--bg);
  padding: clamp(48px, 6vw, 72px) var(--px);
  border-bottom: 0.5px solid var(--border);
}
.cut-nav__header {
  text-align: center;
  margin-bottom: 40px;
}
.cut-nav__header .section-ornament { justify-content: center; }
.cut-nav__row {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
}
.cut-nav__item {
  background: var(--bg);
  padding: 32px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  text-decoration: none;
  transition: background 0.22s;
  position: relative;
}
.cut-nav__item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.cut-nav__item:hover { background: var(--surface); }
.cut-nav__item:hover::after { width: 48px; }
.cut-nav__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cut-nav__icon svg {
  color: rgba(26,15,20,0.4);
  transition: color 0.28s ease;
}
.cut-nav__item:hover .cut-nav__icon svg { color: var(--gold); }
.cut-nav__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--near-black);
  line-height: 1.2;
}
.cut-nav__price {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--mid);
  letter-spacing: 0.06em;
}
@media (max-width: 860px) { .cut-nav__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .cut-nav__row { grid-template-columns: repeat(2, 1fr); } }

/* ─── Atelier feature blocks ─── */
.atelier__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 60px;
  width: 100%;
  max-width: 900px;
}
.atelier__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.atelier__feature-icon {
  width: 56px;
  height: 56px;
  border: 0.5px solid rgba(92,40,64,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--plum);
  flex-shrink: 0;
  transition: border-color 0.25s, color 0.25s;
}
.atelier__feature-icon svg { width: 22px; height: 22px; }
.atelier__feature:hover .atelier__feature-icon { border-color: var(--gold); color: var(--gold); }
.atelier__feature-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--near-black);
}
.atelier__feature-text {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  max-width: 24ch;
}
@media (max-width: 600px) {
  .atelier__features { grid-template-columns: 1fr; gap: 24px; }
  .atelier__feature { flex-direction: row; align-items: flex-start; text-align: left; }
  .atelier__feature-text { max-width: none; }
}

/* ─── Statement background motif ─── */
.statement { position: relative; overflow: hidden; }
.statement__bg-motif {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.statement__bg-motif svg {
  width: min(680px, 88vw);
  height: auto;
  opacity: 0.07;
  color: var(--gold);
}

/* ─── Journal hero card gold accent ─── */
.journal__row-main .jcard--hero {
  border-top: none;
  padding-top: 0;
  border-left: 2px solid var(--gold);
  padding-left: 28px;
}

/* ─── Footer ornament ─── */
.footer__ornament {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.footer__ornament-line {
  height: 0.5px;
  background: rgba(226,201,126,0.2);
  width: 60px;
}
.footer__ornament-gem {
  width: 4px;
  height: 4px;
  background: rgba(226,201,126,0.5);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ─── Cut specifications panel ─── */
.cut-specs {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
}
.cut-specs__inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--px);
}
.cut-specs__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}
.cut-specs__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
.cut-specs__views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-strong);
  border: 0.5px solid var(--border-strong);
}
.cut-specs__view {
  background: var(--bg);
  padding: 28px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cut-specs__diagram-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
}
.cut-specs__diagram-wrap svg {
  color: rgba(26,15,20,0.45);
  max-width: 100%;
  max-height: 80px;
  overflow: visible;
}
.cut-specs__view-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
}
.cut-specs__panel {
  background: var(--ivory);
  padding: 28px 32px;
  border: 0.5px solid rgba(226,201,126,0.25);
}
.cut-specs__panel-title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--near-black);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid rgba(226,201,126,0.3);
}
.cut-specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.cut-specs__row:last-child { border-bottom: none; }
.cut-specs__k {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--near-black);
}
.cut-specs__v {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--plum);
  text-align: right;
}
@media (max-width: 860px) {
  .cut-specs__layout { grid-template-columns: 1fr; }
  .cut-specs__views { max-width: 300px; }
}

/* ════════════════════════════════════════════════════════════════════
   LUXURY REFINEMENT — maison-level spacing, typography, presence
   ════════════════════════════════════════════════════════════════════ */

/* More generous section rhythm */
:root { --sec-py: clamp(96px, 12vw, 168px); }

/* Hero — larger, more cinematic headline */
.hero__headline {
  font-size: clamp(4rem, 8.5vw, 9rem);
  letter-spacing: -0.025em;
  max-width: 9ch;
}

/* Promise — refined single editorial line */
.promise--single {
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 42px var(--px);
  text-align: center;
}
.promise__single-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 300;
  color: var(--mid);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* Cuts grid — more generous proportions */
.cut-card { padding: 64px 52px 52px; }
@media (max-width: 580px) { .cut-card { padding: 44px 32px; } }

/* Editorial typography moment (full-width dark) */
.editorial-moment {
  background: var(--near-black);
  padding: clamp(52px, 7vw, 88px) var(--px);
  text-align: center;
  overflow: hidden;
}
.editorial-moment__headline {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7vw, 7.5rem);
  font-weight: 300;
  line-height: 1.06;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.025em;
}
.editorial-moment__headline em {
  font-style: italic;
  color: var(--gold);
}
.editorial-moment__rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 28px auto;
}
.editorial-moment__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.85;
  max-width: 56ch;
  margin: 0 auto;
}

/* Brand statement — deeper dark, bigger type */
.statement { background: var(--near-black); }
.statement__ornament { background: rgba(226,201,126,0.55); }
.statement__quote {
  font-size: clamp(2.25rem, 4.8vw, 4.25rem);
  max-width: 17ch;
}
.statement__byline { color: rgba(255,255,255,0.22); }

/* Section heads — larger, more presence */
.section-head__title { font-size: clamp(2.75rem, 4.5vw, 4.25rem); }

/* Journal hero title — bigger */
.jcard--hero .jcard__title {
  font-size: clamp(2rem, 3.2vw, 2.625rem);
}

/* Piece cards — taller images */
.piece-card__img { aspect-ratio: 2/3; min-height: 340px; }

/* Video section — immersive full-height */
.video-sec__inner { aspect-ratio: unset; min-height: 88svh; max-height: none; }

/* Atelier CTA — more generous */
.atelier__title { font-size: clamp(2.5rem, 4.5vw, 4.25rem); }
.atelier__sub { font-size: 1.0625rem; line-height: 1.85; }


/* ════════════════════════════════════════════════════════════════════
   MAISON AUDIT — refinement layer (Q2 2026)
   Quiet-luxury overrides per the design audit.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Global hairlines: gold-tinged borders for grid seams ─── */
:root {
  --gold-hairline: rgba(226,201,126,0.18);
}
.cuts__grid,
.pieces__strip,
.pieces-grid { background: var(--gold-hairline); }

/* ─── 2. Buttons: breathing letter-spacing on hover ─── */
.btn { transition: background 0.25s, color 0.25s, border-color 0.25s, gap 0.2s, letter-spacing 0.35s ease; }
.btn:hover { letter-spacing: 0.30em; }
.btn--gold:hover  { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 0.5px var(--gold); }
.btn--plum:hover  { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 0.5px var(--plum); }

/* ─── 3. Cut-detail page: stats row hidden (was redundant with specs panel) ─── */
.page-cut .stats { display: none; }

/* ─── 4. Cut-detail specs: collapse into elegant drawer ─── */
.cut-specs__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 0 0 18px 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--plum);
  border-bottom: 0.5px solid var(--gold-line);
  width: 100%;
  justify-content: space-between;
  transition: color 0.2s, border-color 0.2s;
}
.cut-specs__toggle:hover { color: var(--gold); border-bottom-color: var(--gold); }
.cut-specs__toggle-glyph {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.cut-specs.is-open .cut-specs__toggle-glyph { transform: rotate(45deg); }
.cut-specs__drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(.22,1,.36,1), padding 0.4s ease;
  padding-top: 0;
}
.cut-specs.is-open .cut-specs__drawer {
  max-height: 1200px;
  padding-top: 36px;
}
.cut-specs__title { display: none; } /* title now lives inside toggle */
/* Soften diagram lines to gold hairlines */
.cut-specs__diagram-wrap svg { color: rgba(226,201,126,0.55); }
.cut-specs .cut-specs__view { background: var(--ivory); }
.cut-specs__views { background: rgba(226,201,126,0.18); border-color: rgba(226,201,126,0.25); }

/* ─── 5. Maison Guide: rebuild buyer checklist with serif numerals, 2-col ─── */
.checklist--maison .checklist__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 80px;
  counter-reset: maison;
}
.checklist--maison .checklist__item {
  display: block;
  padding-left: 0;
  position: relative;
  border-top: 0.5px solid var(--gold-line);
  padding-top: 28px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--near-black);
  counter-increment: maison;
}
.checklist--maison .checklist__item::before {
  content: counter(maison, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  margin: 0 0 18px 0;
  letter-spacing: 0.02em;
  line-height: 1;
}
@media (max-width: 720px) {
  .checklist--maison .checklist__list { grid-template-columns: 1fr; gap: 36px; }
}

/* ─── 6. Pieces page: asymmetric editorial layout ─── */
.pieces-grid--editorial {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 1px;
  background: var(--gold-hairline);
  border-top: 0.5px solid var(--gold-hairline);
  border-bottom: 0.5px solid var(--gold-hairline);
}
.pieces-grid--editorial .piece-card { grid-column: span 2; background: var(--bg); }
.pieces-grid--editorial .piece-card--feature { grid-column: span 3; }
.pieces-grid--editorial .piece-card--feature .piece-card__img { aspect-ratio: 4/5; min-height: 460px; }
.pieces-grid--editorial .piece-card--feature .piece-card__name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.005em;
}
.pieces-grid--editorial .piece-card--wide { grid-column: span 3; }
.pieces-grid--editorial .piece-card--wide .piece-card__img { aspect-ratio: 5/4; min-height: 360px; }
.pieces-grid--editorial .pieces-grid__quote {
  grid-column: span 2;
  background: var(--ivory);
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  align-items: center;
  text-align: left;
}
.pieces-grid--editorial .pieces-grid__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--mid);
  letter-spacing: 0.005em;
}
.pieces-grid--editorial .pieces-grid__quote p::before {
  content: '';
  display: block;
  width: 36px;
  height: 0.5px;
  background: var(--gold);
  margin-bottom: 22px;
}
@media (max-width: 880px) {
  .pieces-grid--editorial { grid-template-columns: repeat(2, 1fr); }
  .pieces-grid--editorial .piece-card,
  .pieces-grid--editorial .piece-card--feature,
  .pieces-grid--editorial .piece-card--wide,
  .pieces-grid--editorial .pieces-grid__quote { grid-column: span 1; }
}
@media (max-width: 560px) {
  .pieces-grid--editorial { grid-template-columns: 1fr; }
  .pieces-grid--editorial .piece-card,
  .pieces-grid--editorial .piece-card--feature,
  .pieces-grid--editorial .piece-card--wide,
  .pieces-grid--editorial .pieces-grid__quote { grid-column: span 1; }
}

/* ─── 7. Atelier: asymmetric editorial media layout ─── */
.atelier-page__editorial {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px) var(--sec-py);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.atelier-page__editorial-media--lead {
  grid-row: span 2;
  aspect-ratio: 4/5;
  min-height: 560px;
}
.atelier-page__editorial-text {
  padding-top: clamp(24px, 4vw, 64px);
}
.atelier-page__editorial-text .label {
  display: block;
  margin-bottom: 18px;
}
.atelier-page__editorial-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.625rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--near-black);
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.atelier-page__editorial-text p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  letter-spacing: 0.01em;
}
.atelier-page__editorial-media--detail {
  aspect-ratio: 4/3;
  min-height: 280px;
}
.atelier-page__editorial-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.6;
  padding-top: 14px;
  border-top: 0.5px solid var(--gold-line);
  margin-top: 12px;
  letter-spacing: 0.005em;
}
@media (max-width: 880px) {
  .atelier-page__editorial { grid-template-columns: 1fr; }
  .atelier-page__editorial-media--lead { grid-row: auto; min-height: 360px; aspect-ratio: 4/3; }
}

/* Custom monochrome "map" placeholder for the atelier address block */
.atelier-map {
  margin-top: 28px;
  height: 260px;
  background: var(--near-black);
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--gold-line);
}
.atelier-map svg { width: 100%; height: 100%; display: block; opacity: 0.55; }
.atelier-map__pin {
  position: absolute;
  left: 52%; top: 48%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  display: flex; align-items: center; justify-content: center;
}
.atelier-map__pin::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.5px solid var(--gold);
  border-radius: 50%;
  animation: pinpulse 2.6s ease-out infinite;
}
.atelier-map__pin::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(92,40,64,0.9);
}
@keyframes pinpulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.atelier-map__caption {
  position: absolute;
  left: 18px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226,201,126,0.55);
}

/* ─── 8. Journal article: drop cap, pull quote, reading progress ─── */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0%;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold-deep));
  z-index: 250;
  pointer-events: none;
  transition: width 0.08s linear;
}
.article__body > p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.10em 0 -0.04em;
  color: var(--plum);
  padding-right: 4px;
}
.pullquote {
  margin: 56px auto;
  padding: 0;
  max-width: 28ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.35;
  color: var(--near-black);
  letter-spacing: -0.005em;
}
.pullquote::before,
.pullquote::after {
  content: '';
  display: block;
  width: 28px;
  height: 0.5px;
  background: var(--gold);
  margin: 28px auto;
}

/* ─── 9. Enquire: borderless inputs + pill subject selector ─── */
.enquire__form .field__input,
.enquire__form .field__textarea {
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--border-strong);
  padding: 14px 0;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.25s;
}
.enquire__form .field__input:focus,
.enquire__form .field__textarea:focus {
  border-color: var(--plum);
}
.enquire__form .field__textarea {
  border: 0.5px solid var(--border);
  padding: 14px 16px;
  background: rgba(250, 243, 228, 0.35);
}
.enquire__form .field__textarea:focus { border-color: var(--plum); background: var(--ivory); }
.enquire__form .field__label {
  margin-bottom: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  color: rgba(26,15,20,0.42);
}
.enquire__form .field {
  gap: 4px;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 6px;
}
.pill {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 11px 18px;
  border: 0.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border-radius: 0;
  line-height: 1;
}
.pill:hover { color: var(--plum); border-color: var(--plum); }
.pill.is-active {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
}

/* ─── 10. Homepage: hide the elements we removed but kept in HTML for safety ─── */
.page-home .promise--single,
.page-home .feature,
.page-home .atelier__features,
.page-home .journal__row-compact { display: none; }

/* Atelier section on homepage — tighten without the icon row */
.page-home .atelier__title { margin-bottom: 24px; }
.page-home .atelier__sub { margin-bottom: 56px; }

/* ─── 11. Journal index: a touch more rhythm, gold hairlines on cards ─── */
.page-journal-index .jcard { border-top-color: var(--gold-line); }
.page-journal-index .journal__row-compact { border-top-color: var(--gold-line); }

/* ─── 11b. Journal visual layer — line glyphs, reading time, hero image,
            decorative ornament under the page hero. Keeps the editorial
            tone (no emoji) but adds the visual rhythm the words alone
            were missing. ─── */
.journal-ornament {
  margin: 36px auto 0;
  width: clamp(160px, 22vw, 220px);
  color: var(--gold);
  opacity: 0.85;
}
.journal-ornament svg { width: 100%; height: auto; display: block; }

.page-journal-index .jcard__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--surface);
  border: 0.5px solid var(--gold-line, rgba(226,201,126,0.4));
}
.page-journal-index .jcard__media image-slot { display: block; width: 100%; height: 100%; }

.jcard__meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.jcard__topic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.jcard__topic .jcard__label { margin: 0; }
.jcard__glyph {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--plum);
  flex-shrink: 0;
}
.jcard__readtime {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
}
/* Compact cards: glyph + label go top, readtime sits between title and CTA */
.jcard--compact .jcard__topic { margin-bottom: 14px; }
.jcard--compact .jcard__readtime {
  display: block;
  margin: -4px 0 18px;
  color: var(--mid);
  letter-spacing: 0.18em;
}

/* ─── 12. Tighter cut-card grid — diagram-heavy cells were swallowing the viewport. ─── */
.cut-card { padding: 28px 32px 28px; }
.cut-card__num { margin-bottom: 18px; }
.cut-card__diagram { max-width: 130px; margin: 0 auto 18px; }
.cut-card__name { font-size: clamp(1.25rem, 1.8vw, 1.625rem) !important; }
.cut-card__desc { margin-bottom: 16px; font-size: 0.8125rem; }
.cut-card__arrow { bottom: 24px; right: 32px; }
.cuts { padding: clamp(48px, 6vw, 80px) 0; }
@media (max-width: 580px) {
  .cut-card { padding: 24px 22px; }
  .cut-card__diagram { max-width: 110px; }
}

/* ─── Footer text — warm ivory tint for better contrast on near-black.
       Was pure-white at 0.18-0.5 alpha which read as dark + low contrast.
       Switched to a soft champagne ivory (250,238,210) — still subordinate
       to the gold wordmark, but legible at a glance. ─── */
.footer__desc {
  color: rgba(250,238,210,0.72) !important;
}
.footer__col-head {
  color: rgba(250,238,210,0.58) !important;
}
.footer__link {
  color: rgba(250,238,210,0.82) !important;
}
.footer__link:hover { color: var(--gold) !important; }
.footer__wm-tag {
  color: rgba(226,201,126,0.7) !important;
}
.footer__legal {
  color: rgba(250,238,210,0.55) !important;
}
.footer__social {
  color: rgba(250,238,210,0.65) !important;
}
.footer__social:hover { color: var(--gold) !important; }
.footer-mini__link {
  color: rgba(250,238,210,0.78) !important;
}
.footer-mini__link:hover { color: var(--gold) !important; }
.footer-mini__legal {
  color: rgba(250,238,210,0.62) !important;
}
.footer-mini__brand {
  color: var(--gold) !important;
}
.footer-mini__rule {
  background: rgba(226,201,126,0.42) !important;
}
.footer__main {
  border-bottom-color: rgba(250,238,210,0.14) !important;
}
/* Editor-only: hidden by default; shown only when script.js detects the
   Claude editor runtime and adds body.is-editor. Real visitors never see it. */
.video-sec__bg-controls {
  display: none;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
body.is-editor .video-sec__bg-controls { display: flex; }
.video-sec__bg-btn {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.22);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.video-sec__bg-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}

/* ─── 14. Seamless pieces sections — no hairline / no gap between cards.
       Strip and grid both used `gap: 1px` over a `background: hairline`
       so a tiny rule appeared between every card. Collapsed to gap:0 and
       no background; the card hover bg still tints the hovered card. */
.pieces__strip,
.pieces-grid,
.pieces-grid--editorial {
  gap: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* Drop the body padding's left-edge gap so card text aligns to the image
   left without an inset that visually breaks the seam. */
.pieces__strip .piece-card__body,
.pieces-grid .piece-card__body,
.pieces-grid--editorial .piece-card__body {
  padding: 20px 20px 26px;
}

/* ─── 16. Hero edit controls — buttons OUTSIDE the slot, at the top-right
       corner of the hero section. They drive the hero image-slot's
       internal Replace/Remove (which were being covered by hero__content
       at z-index:10). ─── */
/* Editor-only: hidden by default; shown only under body.is-editor (set by
   script.js when running inside the Claude editor). Real visitors never see it. */
.hero__edit {
  position: absolute;
  top: 88px;
  right: 24px;
  display: none;
  gap: 6px;
  z-index: 12;
}
body.is-editor .hero__edit { display: flex; }
.hero__edit-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,238,210,0.92);
  background: rgba(15,6,10,0.6);
  border: 0.5px solid rgba(250,238,210,0.22);
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hero__edit-btn:hover {
  background: var(--gold);
  color: var(--near-black);
  border-color: var(--gold);
}

/* ─── 15. Journal articles — sticky right-side image placeholder.
       Articles previously had a 680px single-column body. With an
       <aside class="article__aside"> sibling, we re-grid the article
       into a 2/1 split so the photo sits to the right of the text
       (and is sticky on desktop). On mobile it collapses above the
       body, full width. ─── */
.page-article .article {
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 24px;
  align-items: start;
}
/* Header rows (meta + excerpt) span the full width so the text column
   still starts narrow, but the body + related sit in the left track. */
.page-article .article__meta,
.page-article .article__excerpt { grid-column: 1 / -1; }
.page-article .article__body,
.page-article .article__related { grid-column: 1; max-width: 680px; }

.article__aside {
  grid-column: 2;
  grid-row: 3 / span 2; /* aside spans body + related rows */
  position: relative;
  align-self: stretch;
}
@media (min-width: 921px) {
  .article__aside {
    position: sticky;
    top: 96px;
    align-self: start;
    aspect-ratio: 4/5;
  }
}
.article__aside image-slot {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 920px) {
  .page-article .article {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
  .page-article .article__meta,
  .page-article .article__excerpt,
  .page-article .article__body,
  .page-article .article__related,
  .article__aside { grid-column: 1; grid-row: auto; }
  .article__aside { aspect-ratio: 16/9; margin: 0 0 28px; order: -1; }
}

/* ─── 17. Cuts → Journal bridge — on each cut detail page, show 1–2
       relevant journal articles ABOVE the enquire CTA so the reader can
       dive deeper into history/buying/comparison. Editorial card layout
       (no boxes; gold hairline separators). ─── */
.cut-journal {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 64px) clamp(40px, 6vw, 72px);
  border-top: 0.5px solid var(--gold-hairline, rgba(226,201,126,0.4));
}
.cut-journal__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 760px) { .cut-journal__head { grid-template-columns: 1fr; } }
.cut-journal__eyebrow {
  color: var(--gold-ink);
  letter-spacing: 0.32em;
}
.cut-journal__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--near-black);
  letter-spacing: -0.005em;
  margin: 0;
}
.cut-journal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 720px) { .cut-journal__grid { grid-template-columns: 1fr; } }
.cut-journal__card {
  display: block;
  padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) 0;
  border-left: 0.5px solid var(--gold-hairline, rgba(226,201,126,0.4));
  padding-left: clamp(24px, 2.5vw, 36px);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}
.cut-journal__card:first-child {
  border-left: 0;
  padding-left: 0;
}
@media (max-width: 720px) {
  .cut-journal__card,
  .cut-journal__card:first-child {
    border-left: 0;
    border-top: 0.5px solid var(--gold-hairline, rgba(226,201,126,0.4));
    padding: 24px 0;
  }
  .cut-journal__card:first-child { border-top: 0; padding-top: 0; }
}
.cut-journal__card:hover .cut-journal__title { color: var(--plum); }
.cut-journal__card:hover .cut-journal__arrow { gap: 12px; color: var(--plum); }
.cut-journal__topic {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 14px;
}
.cut-journal__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.18;
  color: var(--near-black);
  margin: 0 0 22px;
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.cut-journal__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}
.cut-journal__arrow { color: var(--plum); display: inline-flex; gap: 8px; transition: gap 0.2s, color 0.2s; }
       Re-usable word-level highlights so essays read like editorial prose,
       not blog posts. Combine sparingly.
       ─── */

/* Reading-time pill above the body for rhythm. */
.article__readtime {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 28px;
}

/* Small caps lead-in: wrap the first 3–5 words of an article body in
   <span class="lede"> to set them off like a magazine lead. */
.article__body .lede, .faq__a-inner .lede, .guide-prose .lede {
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--near-black);
  margin-right: 2px;
}

/* Gold-marker highlight — like a wash of yellow ink. Use for short,
   memorable phrases (3–7 words). */
.article__body .hl, .faq__a-inner .hl, .guide-prose .hl {
  background: linear-gradient(180deg, transparent 60%, rgba(226,201,126,0.42) 60%);
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Plum keyword — italic Cormorant, slight weight bump. Use for terms
   the essay is defining: "Portuguese cut", "candlelight", etc. */
.article__body .kw, .faq__a-inner .kw, .guide-prose .kw {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--plum);
}

/* Numerical emphasis — tabular figures, plum weight. Use for "160+",
   "57 facets", "1919". */
.article__body .num, .faq__a-inner .num, .guide-prose .num {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--plum);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.005em;
}

/* Underlined key clause — thin gold underline, offset. For an entire
   short sentence you want to mark. */
.article__body .uline, .faq__a-inner .uline, .guide-prose .uline {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}

/* Inline marginal note — a small mono sidenote pulled into the right
   gutter on desktop; falls below the paragraph on mobile. */
.article__body .sidenote {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin: -8px 0 12px;
  padding-left: 16px;
  border-left: 0.5px solid var(--gold);
}

/* Heavier strong inside the body — bring it up to a true 600. */
.article__body strong, .guide-prose strong { font-weight: 600; letter-spacing: -0.002em; }

/* Make em hit harder — italic + slight color shift. */
.article__body em, .guide-prose em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--near-black);
  font-weight: 400;
}

/* Smarter drop cap — bumped color contrast + descender clearance so it
   doesn't collide with line 2. */
.article__body > p:first-child::first-letter,
.article__body > p.article__body-lead:first-of-type::first-letter {
  font-size: 5.25em;
  line-height: 0.82;
  margin: 0.1em 0.12em 0 -0.02em;
  color: var(--plum);
}

/* ════════════════════════════════════════════════════════════════════
   MOTION LAYER — quiet, editorial transitions
   Entrance hidden-states live INSIDE @media (prefers-reduced-motion:
   no-preference) so reduced-motion visitors get the fully-rendered page
   with nothing hidden. Trigger classes (is-entered / is-drawn) and the
   .anim-rule tagging are added by script.js — no per-page markup needed.
   ════════════════════════════════════════════════════════════════════ */

/* Nav: gold underline sweep (interactive — safe with no hidden state) */
.nav__link { position: relative; }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 0.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav.is-solid .nav__link.is-active::after,
.nav--solid   .nav__link.is-active::after { transform: scaleX(1); transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {

  /* ── Decorative gold rules draw in on scroll ── */
  .anim-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.05s cubic-bezier(.22,1,.36,1);
  }
  .anim-rule--center { transform-origin: center; }
  .anim-rule.is-drawn { transform: scaleX(1); }

  /* ── Hero entrance — staggered rise ── */
  .hero__eyebrow,
  .hero__headline,
  .hero__sub,
  .hero__actions {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1),
                transform 1.1s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .hero.is-entered .hero__eyebrow  { opacity: 1; transform: none; transition-delay: 0.10s; }
  .hero.is-entered .hero__headline { opacity: 1; transform: none; transition-delay: 0.26s; }
  .hero.is-entered .hero__sub      { opacity: 1; transform: none; transition-delay: 0.50s; }
  .hero.is-entered .hero__actions  { opacity: 1; transform: none; transition-delay: 0.70s; }

  /* ── Brand-statement Portuguese motif: slow drift ── */
  .statement__bg-motif svg {
    animation: curio-motif-spin 140s linear infinite;
    transform-origin: center;
  }
  @keyframes curio-motif-spin { to { transform: rotate(360deg); } }

  /* ── Cut diagrams come alive on hover (layers with the gold-stroke shift) ── */
  .cut-card__diagram {
    transition: transform 0.65s cubic-bezier(.22,1,.36,1);
    transform-origin: center;
  }
  .cut-card:hover .cut-card__diagram { transform: scale(1.045) rotate(3deg); }

  /* ── Piece photos: curtain wipe as the card enters view ── */
  .piece-card.reveal .piece-card__img {
    clip-path: inset(0 102% 0 0);
    transition: clip-path 1.15s cubic-bezier(.22,1,.36,1);
  }
  .piece-card.reveal.is-visible .piece-card__img { clip-path: inset(0 0 0 0); }

  /* ── PDP hero image: gentle fade-in ── */
  .pdp__media { animation: curio-fade-in 0.95s cubic-bezier(.22,1,.36,1) both; }
  @keyframes curio-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* ── Featured-piece slow zoom already lives in the IMG block; pair it with
        a soft fade so it doesn't pop on first paint ── */
  .feature__image { animation: curio-fade-in 1.1s cubic-bezier(.22,1,.36,1) both; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — kill scroll-jank on touch devices
   The fixed nav's backdrop-filter blur was repainting the whole viewport
   on every scroll frame (the main "gets stuck while scrolling" cause).
   On phones we drop every backdrop-filter for a fully-opaque surface,
   stabilise viewport-height units, and disable the scroll-parallax.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Opaque surfaces instead of live blur — visually near-identical, far cheaper */
  .nav--solid,
  .nav.is-solid {
    background: rgba(250,250,248,0.99);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-menu {
    background: rgba(26,15,20,0.99);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .video-sec__bg-btn,
  .hero__edit-btn,
  .slot-ext-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Parallax is disabled in JS on touch; neutralise any leftover transform */
  .hero__bg { transform: none !important; }

  /* Stabilise full-height sections against the mobile address-bar resize */
  .hero { height: 100svh; }
  .video-sec__inner { min-height: 78svh; }
}

/* Devices without a precise pointer (phones/tablets): never pay for blur on
   the fixed, constantly-recomposited nav. */
@media (hover: none) and (pointer: coarse) {
  .nav--solid,
  .nav.is-solid {
    background: rgba(250,250,248,0.99);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE: THE GUIDE  (engagement-ring buying guide)
   ════════════════════════════════════════════════════════════════════ */
.page-guide { background: var(--bg); }

/* ─── Hero ─── */
.guide-hero {
  background: var(--ivory);
  border-bottom: 0.5px solid rgba(226,201,126,0.22);
  padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 72px);
}
.guide-hero__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--px);
}
.guide-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--plum);
  display: flex;
  align-items: center;
  gap: 14px;
}
.guide-hero__eyebrow::before {
  content: '';
  width: 34px;
  height: 0.5px;
  background: var(--gold-line);
}
.guide-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--near-black);
  margin: 22px 0 0;
  padding-bottom: 0.06em;
  text-wrap: balance;
}
.guide-hero__title em {
  font-style: italic;
  color: var(--plum);
}
.guide-hero__lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--near-black);
  max-width: 60ch;
  margin: 30px 0 0;
}
.guide-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.guide-hero__meta b { color: var(--plum); font-weight: 400; }

/* ─── Wide banner image band ─── */
.guide-banner {
  width: 100%;
  border-bottom: 0.5px solid var(--border);
}
.guide-banner image-slot {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 540px);
}
.page-guide[data-show-banner="false"] .guide-banner { display: none; }

/* ─── Table of contents ─── */
.guide-toc {
  max-width: 980px;
  margin: clamp(48px, 6vw, 88px) auto 0;
  padding: 0 var(--px);
}
.guide-toc__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 22px;
}
.guide-toc__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--border);
}
.guide-toc__item {
  border-bottom: 0.5px solid var(--border);
}
.guide-toc__item:nth-child(odd) { border-right: 0.5px solid var(--border); }
.guide-toc__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 8px 18px 0;
  transition: color 0.2s, padding-left 0.2s;
}
.guide-toc__link:hover { color: var(--plum); padding-left: 8px; }
.guide-toc__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  flex: none;
}
.guide-toc__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}
.page-guide[data-show-toc="false"] .guide-toc { display: none; }

/* ─── Chapters ─── */
.guide-body {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--px) clamp(64px, 8vw, 120px);
}
.guide-chapter {
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 0.5px solid var(--border-strong);
  padding-top: 30px;
  scroll-margin-top: 96px;
}
.guide-chapter__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.guide-chapter__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  flex: none;
  padding-top: 0.55em;
}
.guide-chapter__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--near-black);
}
.guide-chapter__title em { font-style: italic; color: var(--plum); }
.guide-prose {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--near-black);
  max-width: 64ch;
  margin-top: 24px;
}
.guide-prose p { margin-bottom: 1.4em; }
.guide-prose p:last-child { margin-bottom: 0; }
.guide-prose a.glink {
  color: var(--plum);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.guide-prose a.glink:hover { text-decoration-color: var(--plum); }

/* "In one line" takeaway — a quiet plum-keyed callout, hairline only */
.guide-take {
  display: flex;
  gap: 16px;
  align-items: baseline;
  max-width: 64ch;
  margin-top: 30px;
  padding: 16px 0 0;
  border-top: 0.5px solid var(--gold-line);
}
.guide-take__key {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  flex: none;
  padding-top: 0.35em;
}
.guide-take__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  color: var(--plum);
}

/* Compact reference rows (4 Cs, metals) — hairline table, no boxes */
.guide-defs {
  max-width: 64ch;
  margin-top: 28px;
  border-top: 0.5px solid var(--border);
}
.guide-defs__row {
  display: grid;
  grid-template-columns: minmax(96px, 22%) 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border);
}
.guide-defs__term {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--plum);
}
.guide-defs__desc {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--near-black);
}

/* Split layout (Tweak): chapter head pins to a sticky left column */
@media (min-width: 860px) {
  .guide--split .guide-chapter {
    display: grid;
    grid-template-columns: 250px 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .guide--split .guide-chapter__head {
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 96px;
  }
  .guide--split .guide-chapter__num { padding-top: 0; }
}

/* ─── Closing CTA ─── */
.guide-cta {
  background: var(--plum);
  color: var(--ivory);
  text-align: center;
  padding: clamp(64px, 9vw, 128px) var(--px);
}
.guide-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.guide-cta__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.guide-cta__title em { font-style: italic; color: var(--gold); }
.guide-cta__sub {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 300;
  color: rgba(250,238,210,0.78);
  max-width: 48ch;
  margin: 0 auto 34px;
  line-height: 1.5;
}
.guide-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 620px) {
  .guide-toc__list { grid-template-columns: 1fr; }
  .guide-toc__item:nth-child(odd) { border-right: 0; }
  .guide-chapter__head { gap: 12px; }
  .guide-defs__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ─── Line icons ─── */
.gicon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
/* Chapter marker: icon in a hairline circle, numeral beneath */
.guide-chapter__head { align-items: center; }
.guide-chapter__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: none;
}
.guide-chapter__icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  border: 0.5px solid var(--gold-line);
  border-radius: 50%;
  color: var(--plum);
  stroke-width: 1.3;
}
.guide-chapter__marker .guide-chapter__num { padding-top: 0; }
@media (min-width: 860px) {
  .guide--split .guide-chapter__head { align-items: flex-start; }
  .guide--split .guide-chapter__marker { flex-direction: row; gap: 14px; align-items: center; }
}
/* TOC icon */
.guide-toc__link { align-items: center; }
.guide-toc__icon { width: 19px; height: 19px; color: var(--plum); }
/* Hero meta icons */
.guide-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.guide-hero__meta .gicon { width: 15px; height: 15px; color: var(--gold-deep); }
/* Takeaway spark */
.guide-take { align-items: center; }
.guide-take__icon { width: 19px; height: 19px; color: var(--gold-deep); }

/* ─── Italic display sizing — Cormorant italics read small beside the
       Raleway sans body, so nudge them up to optical parity. ─── */
.guide-prose .kw,
.guide-prose em,
.article__body .kw,
.article__body em,
.faq__a-inner .kw,
.faq__a-inner em { font-size: 1.22em; }
.guide-defs__term { font-size: 1.3125rem; }
.guide-take__text { font-size: clamp(1.1875rem, 1.95vw, 1.55rem); }