/* Chempaka site stylesheet.
   Part 1: components (class prefix cj-), from the Chempaka design system.
   Part 2: tokens, header, hero and page layout (class prefix site-).
   Colours: white, black and blue. Token names are kept from the design system: gold = the blue accent. */

/* ===== Part 1: components ===== */

/* ---------- base ---------- */
.cj, .cj * { box-sizing: border-box; }
.cj { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased; }
.cj :where(a) { color: inherit; text-decoration: none; }
.cj :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cj img { display: block; max-width: 100%; }
.cj-icon { width: 1em; height: 1em; font-size: 22px; flex: none; display: inline-block; vertical-align: middle; fill: currentColor; }
.cj-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-12); }
.cj-section { padding: var(--space-24) 0; }
.cj-band { background: var(--surface-raised); }
.cj-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--space-3); }
.cj-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1.02; font-weight: 400; letter-spacing: -.01em; margin: 0; }
.cj-display-l { font-family: var(--font-display); font-size: 48px; line-height: 1.08; font-weight: 400; margin: 0; }
.cj-heading { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 400; margin: 0; }
.cj-title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 500; margin: 0; }
.cj-body-l { font-size: 18px; line-height: 30px; font-weight: 300; color: var(--ink); margin: 0; max-width: var(--measure); }
.cj-muted { color: var(--ink-muted); }
.cj-caption { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cj-rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.cj-ornament { display: flex; align-items: center; gap: var(--space-3); color: var(--gold); }
.cj-ornament::before, .cj-ornament::after { content: ""; height: 1px; width: 40px; background: var(--gold); }
.cj-ornament i { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); display: block; }
.cj-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-12); }
.cj-head--center { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.cj-head--center .cj-ornament { justify-content: center; }

/* ---------- buttons ---------- */
.cj-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-none); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; background: none; color: var(--ink); white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.cj-btn .cj-icon { font-size: 18px; }
.cj-btn--primary { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) { .cj-btn--primary:hover { background: var(--gold-text); } }
.cj-btn--outline { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) { .cj-btn--outline:hover { border-color: var(--ink); background: var(--surface-raised); } }
.cj-btn--gold { background: var(--gold-on-panel); color: var(--ink-deep); }
@media (hover: hover) { .cj-btn--gold:hover { background: var(--chempaka); } }
.cj-btn--on-panel { border-color: var(--on-panel-muted); color: var(--on-panel); }
@media (hover: hover) { .cj-btn--on-panel:hover { border-color: var(--on-panel); } }
.cj-btn--link { height: auto; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--gold); color: var(--ink); letter-spacing: .14em; }
@media (hover: hover) { .cj-btn--link:hover { color: var(--gold-text); } }
.cj-btn--sm { height: 40px; padding: 0 var(--space-4); }
.cj-btn--block { width: 100%; }
.cj-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- badges ---------- */
.cj-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.cj-badge--member { background: var(--chempaka); color: var(--ink-deep); border-color: transparent; }
.cj-badge--sale { background: var(--ruby); color: var(--surface); border-color: transparent; }
.cj-badge--new { background: var(--ink); color: var(--on-ink); border-color: transparent; }

/* ---------- rate ticker / utility bar ---------- */
.cj-utility { background: var(--panel); color: var(--on-panel); font-size: 12px; line-height: 16px; letter-spacing: .06em; }
.cj-utility .cj-container { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: var(--space-6); }
.cj-utility a { color: var(--on-panel-muted); display: inline-flex; align-items: center; gap: 6px; }
@media (hover: hover) { .cj-utility a:hover { color: var(--on-panel); } }
.cj-utility .cj-icon { font-size: 16px; }
.cj-rate { display: inline-flex; align-items: center; gap: var(--space-4); }
.cj-rate__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--chempaka); }
.cj-rate__label { color: var(--on-panel-muted); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; }
.cj-rate b { color: var(--gold-on-panel); font-weight: 500; font-variant-numeric: tabular-nums; }
.cj-utility__links { display: flex; gap: var(--space-6); }

/* ---------- header ---------- */
.cj-header { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.cj-header__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.cj-header__search { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-size: 13px; }
.cj-wordmark { font-family: var(--font-wordmark); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cj-wordmark--sm { font-size: 22px; }
.cj-header__icons { display: flex; justify-content: flex-end; gap: var(--space-4); color: var(--ink); }
.cj-header__icons a { position: relative; display: inline-flex; }
.cj-count { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: 10px; line-height: 16px; text-align: center; font-weight: 500; }
.cj-nav { display: flex; justify-content: center; gap: var(--space-8); height: 40px; align-items: stretch; }
.cj-nav a { display: inline-flex; align-items: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--ink); border-bottom: 2px solid transparent; }
.cj-nav a[aria-current] { border-bottom-color: var(--gold); }
@media (hover: hover) { .cj-nav a:hover { border-bottom-color: var(--gold); } }
.cj-nav a.is-sale { color: var(--ruby); }
.cj-header--mobile .cj-header__top { height: 64px; grid-template-columns: auto 1fr auto; padding: 0 var(--space-4); gap: var(--space-4); }
.cj-header--mobile .cj-wordmark { text-align: center; }

/* ---------- hero ---------- */
.cj-hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 640px; background: var(--surface); }
.cj-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-16) var(--space-12) var(--space-16) max(var(--space-12), calc((100% - var(--container)) / 2 + var(--space-12))); gap: var(--space-6); }
.cj-hero__copy .cj-display-xl em { font-style: italic; color: var(--gold); }
.cj-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.cj-hero__media { position: relative; background: var(--surface-raised) center 20% / cover no-repeat; min-height: 480px; }
.cj-hero__tag { position: absolute; left: var(--space-6); bottom: var(--space-6); background: var(--surface); color: var(--ink); padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 18px; max-width: 260px; }
.cj-hero__tag b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; }

/* ---------- trust strip ---------- */
.cj-trust { background: var(--surface-raised); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cj-trust ul { list-style: none; margin: 0 auto; padding: var(--space-6) var(--space-12); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); max-width: var(--container); }
.cj-trust li { display: flex; gap: var(--space-3); align-items: center; font-size: 14px; line-height: 20px; }
.cj-trust .cj-icon { color: var(--gold); font-size: 28px; }

/* ---------- category tile ---------- */
.cj-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.cj-cat { display: block; }
.cj-cat__img { aspect-ratio: 3 / 4; background: var(--surface-raised) center / cover no-repeat; transition: filter .3s; }
@media (hover: hover) { .cj-cat:hover .cj-cat__img { filter: brightness(1.05); } }
.cj-cat__label { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); font-family: var(--font-display); font-size: 20px; line-height: 26px; }
.cj-cat__label .cj-icon { font-size: 18px; color: var(--gold); transition: transform .2s; }
@media (hover: hover) { .cj-cat:hover .cj-cat__label .cj-icon { transform: translateX(4px); } }

/* ---------- product card ---------- */
.cj-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.cj-product { position: relative; display: flex; flex-direction: column; }
.cj-product__img { position: relative; aspect-ratio: 1 / 1; background: var(--surface-raised) center / cover no-repeat; }
.cj-product__badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-1); }
.cj-product__fav { position: absolute; top: var(--space-2); right: var(--space-2); width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 0; cursor: pointer; }
.cj-product__fav .cj-icon { font-size: 20px; }
.cj-product__body { padding-top: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.cj-product__cat { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.cj-product__name { font-size: 15px; line-height: 22px; font-weight: 500; }
.cj-product__meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cj-price { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; font-size: 15px; line-height: 22px; margin-top: var(--space-1); }
.cj-price__member { color: var(--gold-text); font-weight: 500; }
.cj-price__member small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-right: 4px; }
.cj-price__was { color: var(--ink-muted); text-decoration: line-through; font-size: 13px; }
.cj-price__sale { color: var(--ruby); font-weight: 500; }
.cj-product__cta { margin-top: var(--space-3); }

/* ---------- editorial split ---------- */
.cj-editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--surface-raised); }
.cj-editorial--reverse .cj-editorial__media { order: 2; }
.cj-editorial__media { min-height: 520px; background: var(--surface) center / cover no-repeat; }
.cj-editorial__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: var(--space-16) var(--space-12); }
.cj-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: var(--space-4); }
.cj-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: baseline; }
.cj-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-size: 22px; color: var(--gold); }

/* ---------- gold exchange panel ---------- */
.cj-exchange { background: var(--panel); color: var(--on-panel); }
.cj-exchange .cj-eyebrow { color: var(--gold-on-panel); }
.cj-exchange__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-16); align-items: center; }
.cj-exchange p { color: var(--on-panel-muted); }
.cj-ratecard { border: 1px solid rgba(210, 168, 87, .35); }
.cj-ratecard__row { display: grid; grid-template-columns: 1fr 120px 120px; gap: var(--space-6); align-items: baseline; padding: var(--space-4) var(--space-6); text-align: right; border-bottom: 1px solid rgba(210, 168, 87, .2); }
.cj-ratecard__row:last-child { border-bottom: 0; }
.cj-ratecard__row > :first-child { text-align: left; }
.cj-ratecard__row span { color: var(--on-panel-muted); font-size: 13px; }
.cj-ratecard__row b { font-family: var(--font-sans); font-weight: 400; font-size: 20px; letter-spacing: .02em; color: var(--gold-on-panel); font-variant-numeric: tabular-nums; }
.cj-ratecard__head { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-panel-muted); }
.cj-ratecard__foot { padding: var(--space-3) var(--space-6); font-size: 12px; color: var(--on-panel-muted); background: rgba(210, 168, 87, .06); }

/* ---------- journal card ---------- */
.cj-journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.cj-story { display: flex; flex-direction: column; gap: var(--space-3); }
.cj-story__img { aspect-ratio: 4 / 3; background: var(--surface-raised) center / cover no-repeat; margin-bottom: var(--space-2); }
.cj-story__meta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
.cj-story p { margin: 0; color: var(--ink-muted); }

/* ---------- club / privileges ---------- */
.cj-perks { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.cj-perk { padding: var(--space-8); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--space-2); }
.cj-perk .cj-icon { color: var(--gold); font-size: 30px; margin-bottom: var(--space-2); }
.cj-perk h4 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 500; margin: 0; }
.cj-perk p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }

/* ---------- member card ---------- */
.cj-card { width: 360px; aspect-ratio: 1.586; padding: var(--space-6); background: var(--panel); color: var(--on-panel); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.cj-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border: 1px solid rgba(210, 168, 87, .5); border-radius: var(--radius-pill); }
.cj-card::before { content: ""; position: absolute; right: -20px; top: -20px; width: 120px; height: 120px; border: 1px solid rgba(210, 168, 87, .35); border-radius: var(--radius-pill); }
.cj-card__top { display: flex; justify-content: space-between; align-items: center; }
.cj-card .cj-wordmark { color: var(--on-panel); font-size: 20px; }
.cj-card__tier { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-on-panel); }
.cj-card__chip { width: 40px; height: 30px; border-radius: 4px; background: var(--gold-on-panel); opacity: .9; }
.cj-card__row { display: flex; justify-content: space-between; align-items: end; }
.cj-card__row small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-panel-muted); }
.cj-card__row span { font-size: 15px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */
.cj-form { display: grid; gap: var(--space-6); }
.cj-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cj-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cj-field label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
.cj-input { height: 48px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-none); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; width: 100%; appearance: none; }
.cj-input::placeholder { color: var(--ink-muted); }
.cj-input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.cj-select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 17px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.cj-field--error .cj-input { border-color: var(--ruby); }
.cj-field__msg { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.cj-field--error .cj-field__msg { color: var(--ruby); }
.cj-field__msg .cj-icon { font-size: 16px; }
.cj-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cj-choice { height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.cj-choice[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cj-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cj-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.cj-notice { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hairline); background: var(--surface-raised); font-size: 14px; line-height: 22px; }
.cj-notice .cj-icon { color: var(--success); }
.cj-notice b { display: block; }

/* ---------- boutique ---------- */
.cj-boutique { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hairline); background: var(--surface); }
.cj-boutique__info { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.cj-boutique__info dl { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: 14px; line-height: 22px; }
.cj-boutique__info dt { color: var(--ink-muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-top: 3px; }
.cj-boutique__info dd { margin: 0; }
.cj-boutique__map { background: var(--surface-raised); position: relative; min-height: 260px; overflow: hidden; }
.cj-boutique__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cj-map-road { stroke: var(--hairline); stroke-width: 10; fill: none; }
.cj-map-road--minor { stroke-width: 4; }
.cj-map-pin { fill: var(--gold); }
.cj-map-pin-dot { fill: var(--surface); }

/* ---------- newsletter + footer ---------- */
.cj-footer { background: var(--panel); color: var(--on-panel); }
.cj-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-12); padding: var(--space-16) 0 var(--space-12); }
.cj-footer .cj-wordmark { color: var(--on-panel); font-size: 28px; }
.cj-footer h5 { margin: 0 0 var(--space-4); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--gold-on-panel); }
.cj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cj-footer li a { color: var(--on-panel-muted); font-size: 14px; }
@media (hover: hover) { .cj-footer li a:hover { color: var(--on-panel); } }
.cj-footer p { color: var(--on-panel-muted); font-size: 14px; line-height: 22px; margin: var(--space-4) 0; max-width: 320px; }
.cj-footer__news { display: flex; border-bottom: 1px solid var(--on-panel-muted); max-width: 340px; }
.cj-footer__news input { flex: 1; background: none; border: 0; color: var(--on-panel); font: inherit; font-size: 14px; height: 44px; padding: 0; }
.cj-footer__news input::placeholder { color: var(--on-panel-muted); }
.cj-footer__news button { background: none; border: 0; color: var(--gold-on-panel); cursor: pointer; }
.cj-footer__bottom { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid rgba(243, 236, 223, .14); font-size: 12px; line-height: 18px; color: var(--on-panel-muted); }
.cj-footer__social { display: flex; gap: var(--space-4); }
.cj-footer__social a { color: var(--on-panel-muted); }

/* ---------- article ---------- */
.cj-article { max-width: 720px; margin: 0 auto; }
.cj-article p { font-size: 18px; line-height: 32px; font-weight: 300; margin: 0 0 var(--space-6); }
.cj-article h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 400; margin: var(--space-12) 0 var(--space-4); }
.cj-article blockquote { margin: var(--space-12) 0; padding: var(--space-8) 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1.3; text-align: center; }
.cj-karat { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); margin: var(--space-8) 0; }
.cj-karat div { padding: var(--space-6); border-right: 1px solid var(--hairline); }
.cj-karat div:last-child { border-right: 0; }
.cj-karat b { display: block; font-family: var(--font-display); font-size: 36px; font-weight: 400; color: var(--gold); line-height: 1.1; }
.cj-karat span { font-size: 13px; color: var(--ink-muted); }

/* ===== Part 2: tokens and layout ===== */
/* Chempaka website redesign.
   Tokens (Ivory and Night), page helpers and responsive rules for the .cj components in
   ds/chempaka/components/bundle.css. Responsive rules use container queries on .site, so a
   page adapts to the width of its artboard, not to the browser window. */

/* ---------- tokens ---------- */
.cj {
  /* White, black and blue. The token names are kept from the design system so every
     component class keeps working: gold = the blue accent, chempaka = light blue fill. */
  --surface: #fcfcfd; --surface-raised: #f0f4fb; --panel: #0a0a0a;
  --ink: #0a0a0a; --ink-muted: #4a5262; --on-ink: #ffffff;
  --gold: #2f5fd0; --gold-text: #1c3f94;
  --chempaka: #a9c4ff; --chempaka-soft: #e3ecff; --ink-deep: #0a0a0a;
  --on-panel: #ffffff; --on-panel-muted: #b6bfce; --gold-on-panel: #8fb0ff;
  --ruby: #0a0a0a; --success: #1c3f94;
  --hairline: #dde4f0; --line-strong: #7b8699; --focus: #2f5fd0;
  --scrim: rgba(10, 10, 10, 0.45);
  --font-wordmark: Cinzel, "Trajan Pro", Georgia, serif;
  --font-display: "Bodoni Moda", Didot, Georgia, serif;
  --font-sans: Jost, Futura, system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-none: 0; --radius-sm: 2px; --radius-pill: 999px;
  --shadow-lift: 0 18px 40px rgba(10, 10, 10, 0.10);
  --container: 1280px; --measure: 640px; --header-height: 112px;
}

/* the design system's bundle.css hard-codes a few gold tints; re-tint them to blue and white */
.cj-card::after { border-color: rgba(143, 176, 255, .5); }
.cj-card::before { border-color: rgba(143, 176, 255, .35); }
.cj-ratecard { border-color: rgba(143, 176, 255, .4); }
.cj-ratecard__row { border-bottom-color: rgba(143, 176, 255, .25); }
.cj-ratecard__foot { background: rgba(143, 176, 255, .08); }
.cj-footer__bottom { border-top-color: rgba(255, 255, 255, .14); }

/* ---------- page shell ---------- */
.site a { cursor: pointer; }

/* header: menu and search icons only show on narrow widths */
.site-hl { display: flex; align-items: center; gap: var(--space-4); }
.site-hl .site-menu { display: none; align-items: center; }
.cj-header__icons { align-items: center; }
.cj-header__icons .site-searchicon { display: none; }
.cj-header__icons .site-acct { gap: 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; align-items: center; }
.cj-nav a.is-club { color: var(--gold-text); }

/* ---------- announcement bar and header: Menu at left, wordmark centred, icons at right ---------- */
.site-promo { background: var(--panel); color: var(--on-panel); font-size: 13px; line-height: 18px; letter-spacing: .02em; }
.site-promo .cj-container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.site-promo__msg { margin: 0; text-align: center; font-weight: 500; }
.site-promo__msg a { margin-left: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.site-promo__x { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: var(--on-panel); cursor: pointer; }
.site-promo__x .cj-icon { font-size: 20px; }
.site-hdr { --hdr-h: 122px; position: sticky; top: 0; z-index: 60; background: #0a0a0a; color: #fff; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid transparent; transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out; }
.site-hdr a:not(.cj-btn) { color: inherit; }
.site-hdr__meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 36px; font-size: 12px; letter-spacing: .04em; }
.site-hdr__meta a { display: inline-flex; align-items: center; gap: 6px; }
.site-hdr__meta .cj-icon { font-size: 16px; }
.site-hdr__rate { display: inline-flex; gap: var(--space-4); }
.site-hdr__rate b { font-weight: 500; font-variant-numeric: tabular-nums; }
.site-hdr__metar { display: inline-flex; gap: var(--space-6); justify-self: end; }
.site-hdr__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.site-hdr__menu { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 15px; justify-self: start; }
.site-hdr__menu .cj-icon { font-size: 28px; }
.site-hdr__icons { display: inline-flex; align-items: center; gap: var(--space-4); justify-self: end; }
.site-hdr__icons > a:not(.cj-btn) { display: inline-flex; }
.site-hdr .cj-wordmark { font-size: 36px; color: inherit; }

/* ---------- full-width hero: copy at left, photograph at right, arrows and dots ---------- */
.site-herowrap { position: relative; }
.site-hero { position: relative; overflow: hidden; background: #0a0a0a; color: var(--on-panel); min-height: 640px; display: flex; align-items: center; }
.site-hero__img { position: absolute; top: 0; bottom: 0; right: 0; width: 70%; background: #0a0a0a center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%); mask-image: linear-gradient(to right, transparent 0, #000 32%); }
.site-hero .cj-container { position: relative; z-index: 1; width: 100%; padding-top: 112px; padding-bottom: 96px; }
.site-hero__copy { max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.site-hero__eyebrow { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--gold-on-panel); }
.site-hero__title { margin: 0; font-family: var(--font-display); font-size: 64px; line-height: 1.04; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.site-hero__title em { font-style: italic; color: var(--gold-on-panel); }
.site-hero__body { margin: 0; font-size: 17px; line-height: 28px; font-weight: 300; color: var(--on-panel); }
.site-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.site-btn-white { background: #fff; color: #0a0a0a; border-color: #fff; }
@media (hover: hover) { .site-btn-white:hover { background: var(--gold-on-panel); border-color: var(--gold-on-panel); } }
.site-btn-line { color: #fff; border-color: #fff; }
@media (hover: hover) { .site-btn-line:hover { background: rgba(255, 255, 255, .14); } }
.site-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; }
.site-hero__arrow--prev { left: var(--space-6); }
.site-hero__arrow--next { right: var(--space-6); }
.site-hero__arrow .cj-icon { font-size: 40px; }
.site-hero__dots { position: absolute; left: 0; right: 0; bottom: var(--space-4); z-index: 2; display: flex; justify-content: center; gap: var(--space-1); }
.site-hero__dot { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.site-hero__dot::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-pill); border: 1px solid #fff; }
.site-hero__dot[aria-current="true"]::before { background: #fff; }

/* gold-rate panel, plain two-column lists */
.site-quote { border: 1px solid rgba(143, 176, 255, .4); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.site-quote__label { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-panel-muted); }
.site-quote__fig { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 48px; line-height: 1.1; color: var(--on-panel); }
.site-quote__fig span:not([data-gold-916]) { font-family: var(--font-sans); font-size: 15px; color: var(--on-panel-muted); }
.site-quote__note { margin: 0; font-size: 13px; line-height: 20px; color: var(--on-panel-muted); }
.cj-exchange .site-list .cj-icon { color: var(--gold-on-panel); }
.site-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-12); }
.site-cols > div { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.site-cols h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 500; }
.site-cols p { margin: 0; color: var(--ink-muted); }
.site-bullets { margin: 0; padding-left: 20px; display: grid; gap: var(--space-2); }

/* ---------- page helpers ---------- */
.site-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items: center; }
.site-split--form { grid-template-columns: 1fr 1.2fr; gap: var(--space-24); align-items: start; }
.site-split--even { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.site-stack { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.site-stack--center { align-items: center; text-align: center; }
.site-sticky { position: sticky; top: var(--space-6); }
.site-panel { background: var(--surface-raised); padding: var(--space-12); }
.site-services { grid-template-columns: repeat(4, 1fr); }
.site-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-list li { display: flex; gap: var(--space-3); align-items: center; font-size: 15px; line-height: 22px; }
.site-list .cj-icon { color: var(--gold); font-size: 20px; }
.site-art-img { height: 420px; background: var(--surface-raised) center 40% / cover no-repeat; margin-bottom: var(--space-16); }
.site-cardwrap { display: flex; justify-content: center; }
.cj-card { width: 100%; max-width: 360px; }
.site-kicker { display: flex; align-items: center; gap: var(--space-3); }
.cj-hero__copy .cj-display-xl em, .site em.site-gold { font-style: italic; color: var(--gold); }
.site-subhead { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--space-3); }

/* admin: tables and visually hidden text */
.site-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-tablewrap { width: 100%; overflow-x: auto; border: 1px solid var(--hairline); background: var(--surface); }
.site-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.site-table th { text-align: left; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); padding: var(--space-4); border-bottom: 1px solid var(--line-strong); background: var(--surface-raised); }
.site-table td { padding: var(--space-4); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.site-table tr:last-child td { border-bottom: 0; }
.site-table__act { text-align: right; }
.site-login { max-width: 460px; margin: 0 auto; padding: var(--space-12); background: var(--surface-raised); display: flex; flex-direction: column; gap: var(--space-6); }

/* showcase: chapter index, piece viewer, spec table */
.site-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
.site-index a { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--gold); }
.site-index b { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--gold); }
.site-index span { font-size: 15px; line-height: 22px; }
.site-showimg { aspect-ratio: 4 / 5; background: var(--surface-raised) center / cover no-repeat; }
.site-split--flip .site-showimg { order: 2; }
.site-price { font-family: var(--font-display); font-size: 32px; line-height: 1.1; margin: 0; }
.site-specs { margin: 0; width: 100%; border-top: 1px solid var(--hairline); }
.site-specs > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.site-specs dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); padding-top: 3px; }
.site-specs dd { margin: 0; font-size: 15px; line-height: 24px; }
.site-estimate { display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; padding: var(--space-4); border: 1px solid var(--gold); background: var(--surface); }
.site-estimate .cj-icon { color: var(--gold); }
.site-estimate b { display: block; font-weight: 500; font-variant-numeric: tabular-nums; }
.site-estimate span.site-estimate__note { display: block; font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- tablet and below ---------- */
@media (max-width: 900px) {
  .cj-container { padding: 0 var(--space-8); }
  .cj-section { padding: var(--space-16) 0; }
  .cj-display-xl { font-size: 52px; }
  .cj-display-l { font-size: 38px; }
  .cj-heading { font-size: 28px; }
  .cj-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-8); }
  .cj-head--center { align-items: center; }

  .site-hdr__meta, .site-hdr__join { display: none; }
  .site-hdr__main { height: 64px; }
  .site-hdr .cj-wordmark { font-size: 24px; }
  .site-promo__x { right: var(--space-4); }
  .site-hero { min-height: 680px; align-items: flex-end; }
  .site-hero__img { width: 100%; height: 60%; bottom: auto; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
  .site-hero .cj-container { padding-top: 0; padding-bottom: 72px; }
  .site-hero__title { font-size: 44px; }
  .site-hero__arrow { display: none; }
  .cj-utility__links { display: none; }
  .cj-nav { display: none; }
  .cj-header__top { height: 64px; }
  .cj-header .cj-wordmark { font-size: 24px; }
  .site-hl .site-menu { display: inline-flex; }
  .site-hl .cj-header__search { display: none; }
  .cj-header__icons .site-searchicon { display: inline-flex; }
  .cj-header__icons .site-wish, .cj-header__icons .site-joinbtn, .cj-header__icons .site-acct__t { display: none; }

  .cj-hero { grid-template-columns: 1fr; min-height: 0; }
  .cj-hero__copy { padding: var(--space-16) var(--space-8); }
  .cj-hero__media { min-height: 460px; }
  .cj-trust ul { grid-template-columns: 1fr 1fr; padding: var(--space-6) var(--space-8); }

  .cj-cats { display: flex; overflow-x: auto; gap: var(--space-4); scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--space-8)); padding: 0 var(--space-8) var(--space-1); }
  .cj-cat { flex: 0 0 38%; scroll-snap-align: start; }
  .cj-products { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .cj-journal { display: flex; overflow-x: auto; gap: var(--space-6); scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--space-8)); padding: 0 var(--space-8) var(--space-1); }
  .cj-story { flex: 0 0 46%; scroll-snap-align: start; }

  .cj-editorial { grid-template-columns: 1fr; }
  .cj-editorial--reverse .cj-editorial__media { order: 0; }
  .cj-editorial__media { min-height: 380px; }
  .cj-editorial__copy { padding: var(--space-16) var(--space-8); }

  .cj-exchange__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .cj-ratecard__row { grid-template-columns: 1fr 96px 96px; gap: var(--space-3); padding: var(--space-4); }
  .cj-perks { grid-template-columns: 1fr 1fr; }
  .site-services { grid-template-columns: 1fr 1fr; }
  .cj-boutique { grid-template-columns: 1fr; }
  .cj-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); padding: var(--space-12) 0 var(--space-8); }

  .site-split, .site-split--form, .site-split--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .site-cols { grid-template-columns: 1fr; }
  .site-quote { padding: var(--space-6); }
  .site-quote__fig { font-size: 40px; }
  .site-sticky { position: static; }
  .site-split--flip .site-showimg { order: 0; }
  .site-index { grid-template-columns: 1fr 1fr; }
  .site-panel { padding: var(--space-8); }
  .site-art-img { height: 300px; margin-bottom: var(--space-12); }

  .cj-karat { grid-template-columns: 1fr; }
  .cj-karat div { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .cj-karat div:last-child { border-bottom: 0; }
  .cj-article blockquote { font-size: 24px; }
}

/* ---------- phone ---------- */
@media (max-width: 560px) {
  .cj-container { padding: 0 var(--space-4); }
  .cj-section { padding: var(--space-12) 0; }
  .cj-display-xl { font-size: 44px; }
  .cj-display-l { font-size: 34px; }
  .cj-body-l { font-size: 17px; line-height: 28px; }
  .cj-head { margin-bottom: var(--space-6); }

  .site-promo { font-size: 12px; }
  .site-promo .cj-container { padding-left: 48px; padding-right: 48px; }
  .site-promo__x { right: var(--space-2); }
  .site-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .site-hero__body { font-size: 16px; line-height: 26px; }
  .cj-utility .cj-container { height: 36px; }
  .cj-rate { gap: var(--space-3); }
  .cj-rate__label { display: none; }

  .cj-hero__copy { padding: var(--space-12) var(--space-4); gap: var(--space-4); }
  .cj-hero__media { min-height: 340px; }
  .cj-hero__actions { flex-direction: column; align-items: stretch; }
  .cj-hero__actions .cj-btn--primary, .cj-hero__actions .cj-btn--outline, .cj-hero__actions .cj-btn--gold, .cj-hero__actions .cj-btn--on-panel { width: 100%; }
  .cj-trust ul { padding: var(--space-6) var(--space-4); gap: var(--space-4); }
  .cj-trust li { flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: 13px; line-height: 18px; }

  .cj-cats { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1); }
  .cj-cat { flex-basis: 58%; }
  .cj-cat__label { font-size: 18px; }
  .cj-products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1); }
  .cj-product { flex: 0 0 62%; scroll-snap-align: start; }
  .cj-journal { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1); gap: var(--space-4); }
  .cj-story { flex-basis: 82%; }

  .cj-editorial__media { min-height: 300px; }
  .cj-editorial__copy { padding: var(--space-12) var(--space-4); gap: var(--space-4); }
  .cj-exchange .cj-section, .cj-exchange { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .cj-ratecard__row { grid-template-columns: 1fr 80px 80px; padding: var(--space-3) var(--space-4); }
  .cj-ratecard__row b { font-size: 17px; }
  .cj-ratecard__foot { padding: var(--space-3) var(--space-4); }

  .cj-perks, .site-services { grid-template-columns: 1fr; }
  .cj-perk { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-4); }
  .cj-perk .cj-icon { grid-row: 1 / span 2; margin: 0; font-size: 28px; }
  .cj-perk h4, .cj-perk p { grid-column: 2; }

  .cj-boutique__info { padding: var(--space-6) var(--space-4); }
  .cj-boutique__info dl { grid-template-columns: 70px 1fr; }
  .cj-form__row { grid-template-columns: 1fr; }
  .site-panel { padding: var(--space-6) var(--space-4); }
  .site-art-img { height: 240px; }
  .cj-karat b { font-size: 30px; }
  .site-showimg { aspect-ratio: 1 / 1; }
  .site-index { gap: var(--space-4); margin-top: var(--space-8); }
  .site-specs > div { grid-template-columns: 110px 1fr; gap: var(--space-3); }
  .cj-article p { font-size: 17px; line-height: 30px; }
  .cj-article h2 { font-size: 26px; margin-top: var(--space-8); }

  .cj-footer__top > :first-child { grid-column: 1 / -1; }
  .cj-footer__bottom { flex-direction: column; gap: var(--space-3); }
}

/* ===== Part 3: behaviour that only exists on the live site ===== */
html { scroll-behavior: smooth; }
body.cj { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.cj > main { flex: 1 0 auto; }
.site-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: var(--space-3) var(--space-4); }
.site-skip:focus { top: var(--space-4); }
[hidden] { display: none !important; }

/* header buttons are real <button>s */
.site-promo__msg a, .site-hdr a { transition: opacity .2s; }
.site-hdr button.site-hdr__menu { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.site-hdr__icons > button { display: inline-flex; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.site-hdr__icons .cj-icon { font-size: 26px; }
.site-hdr__meta { gap: var(--space-4); }
.site-hdr__announce { text-align: center; }

/* hero: two slides, manual only */
.site-hero__slide { position: absolute; inset: 0; display: flex; align-items: center; }
.site-hero__slide .cj-container { width: 100%; position: relative; z-index: 1; padding-top: 112px; padding-bottom: 96px; }
.site-hero__slide .site-hero__img { position: absolute; top: 0; bottom: 0; right: 0; }
.site-hero { min-height: 640px; }
.site-hero .cj-container { padding-top: 112px; padding-bottom: 96px; }

/* menu drawer and search overlay */
.site-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
.site-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 91; width: min(420px, 100%); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); transform: translateX(-102%); transition: transform .25s ease; display: flex; flex-direction: column; overflow-y: auto; visibility: hidden; }
.site-drawer.is-open { transform: none; visibility: visible; }
.site-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--hairline); }
.site-drawer__top button { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; padding: 0; }
.site-drawer nav { padding: var(--space-6); display: grid; gap: var(--space-8); }
.site-drawer h2 { margin: 0 0 var(--space-3); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); }
.site-drawer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-drawer li a { display: block; padding: var(--space-2) 0; font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
@media (hover: hover) { .site-drawer li a:hover { color: var(--gold-text); } }
.site-search { position: fixed; inset: 0; z-index: 95; background: var(--surface); padding: var(--space-12) var(--space-12) var(--space-8); display: flex; flex-direction: column; gap: var(--space-8); }
.site-search form { display: flex; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--ink); }
.site-search input { flex: 1; border: 0; background: none; font: inherit; font-family: var(--font-display); font-size: 32px; padding: var(--space-3) 0; color: var(--ink); outline: none; }
.site-search button { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; }
.site-search__close { align-self: flex-end; }
.site-search ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-search ul a { border-bottom: 1px solid var(--gold); }
body.is-locked { overflow: hidden; }

/* radio chips: the label looks like .cj-choice, the input stays accessible */
.cj-choices label { position: relative; }
.cj-choices input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cj-choices input[type="radio"]:checked + .cj-choice { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cj-choices input[type="radio"]:focus-visible + .cj-choice { outline: 2px solid var(--focus); outline-offset: 2px; }
.cj-choices .cj-choice { display: inline-flex; align-items: center; }
/* radio-style chips (a label around a hidden radio): the click goes to the label, so the chip itself ignores the pointer. Real buttons (tabs, piece switchers) must stay clickable. */
.cj-choices label .cj-choice { pointer-events: none; }
.cj-field--error .cj-field__msg { display: flex; }
.cj-field__msg[hidden] { display: none; }
.cj-notice { margin-top: var(--space-4); }
.cj-notice[hidden] { display: none; }
.cj-btn[disabled] { opacity: .45; cursor: not-allowed; }
input[type="date"].cj-input { appearance: auto; }
textarea.cj-input { height: auto; padding: var(--space-3) var(--space-4); min-height: 96px; resize: vertical; }

/* showcase */
.site-pieces { scroll-margin-top: var(--space-8); }
.site-searchnote { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); background: var(--surface-raised); font-size: 14px; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.site-searchnote a { text-decoration: underline; }
.site-showimg[data-fit="contain"] { background-size: contain; background-color: #fff; }

/* article pages */
.cj-article ul { margin: 0 0 var(--space-6); padding-left: 20px; font-size: 18px; line-height: 32px; font-weight: 300; }

/* member card on the retrieve section */
.cj-card small + span { font-variant-numeric: tabular-nums; }
.cj-card[data-state="pending"] .cj-card__tier { color: var(--on-panel-muted); }

/* admin */
.site-admin-bar { background: var(--panel); color: var(--on-panel); }
.site-admin-bar .cj-container { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--space-4); }
.site-admin-bar a, .site-admin-bar button { color: var(--on-panel-muted); background: none; border: 0; font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
@media (hover: hover) { .site-admin-bar a:hover, .site-admin-bar button:hover { color: var(--on-panel); } }
.site-admin-bar .cj-icon { font-size: 16px; }
.site-form-error { margin: 0; color: var(--ruby); font-size: 14px; display: flex; gap: 6px; align-items: flex-start; }
.site-table td button { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; color: var(--gold-text); }
.site-table td button + button { margin-left: var(--space-4); color: var(--ink-muted); }
@media (hover: hover) { .site-table td button:hover { text-decoration: underline; } }

@media (max-width: 900px) {
  .site-hero__slide { align-items: flex-end; }
  .site-hero__slide .cj-container { padding-top: 0; padding-bottom: 72px; }
  .site-hero__slide .site-hero__img { width: 100%; height: 60%; bottom: auto; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to bottom, #000 58%, transparent); }
  .site-search { padding: var(--space-6) var(--space-4); }
  .site-search input { font-size: 24px; }
}
@media (max-width: 560px) {
  .site-hero { min-height: 700px; }
}

/* ===== Part 4: photography ===== */
.img-ring { background-image: url(../images/ring_category.jpg); }
.img-bracelet { background-image: url(../images/bracelet_category.jpg); }
.img-necklace { background-image: url(../images/necklace_category.jpg); }
.img-custom { background-image: url(../images/custom_category.jpg); }
.img-newin { background-image: url(../images/new_in_category.jpg); }
.img-model { background-image: url(../images/hero_model_jewelry.jpg); }
.img-hijab { background-image: url(../images/hero_model_hijab.jpg); }
.img-ruby { background-image: url(../images/ruby_necklace.jpg); }
.img-diamond { background-image: url(../images/diamond_necklaces.png); }
.img-hero-blue { background-image: url(../images/hero_background_blue_2200.jpg); }
/* second hero slide: the ring and flower sit right of centre on a wide screen, centred on a phone, clear of the headline */
.img-hero-ring { background-image: url(../images/hero_blue_ring.jpg); background-position: 30% 55%; }
@media (max-width: 900px) { .img-hero-ring { background-position: 50% 55%; } }
/* studio photography, gold on black */
.img-a-hero { background-image: url(../images/album/hero-layered-necklace.jpg); }
.img-a-bead { background-image: url(../images/album/necklace-bead.jpg); }
.img-a-chains { background-image: url(../images/album/layered-chains.jpg); }
/* the bust sits right of centre in this shot; in the square product card the crop is moved over so it is centred */
.cj-product__img.img-a-chains { background-position: 74% 50%; }
.img-a-woven { background-image: url(../images/album/bracelet-woven.jpg); }
.img-a-mesh { background-image: url(../images/album/bracelet-flower-mesh.jpg); }
.img-a-tricolour { background-image: url(../images/album/bracelet-tricolour.jpg); }
.img-a-floral { background-image: url(../images/album/bracelet-floral.jpg); }
.img-a-curb { background-image: url(../images/album/chain-curb.jpg); }

/* fieldsets used as labelled groups */
fieldset.cj-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.cj-field legend { padding: 0; margin: 0 0 var(--space-2); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
.cj-field__msg { color: var(--ruby); }
.cj-field--error .cj-input { border-color: var(--ruby); border-width: 2px; }

/* ===== Part 5: motion and the layout rhythm of the home page ===== */
/* the site is always white, whatever colour scheme the visitor's system uses */
:root { color-scheme: light; }

/* hero slides cross-fade; slide 1 is the default when scripts are off */
.site-hero__slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.site-hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-hero .cj-container, .site-hero__slide .cj-container { padding-top: 96px; }

/* bento collections: five tiles, one large */
.site-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(220px, 21vw)); gap: var(--space-4); }
.site-bento__tile { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: var(--space-6); color: #fff; background-color: var(--surface-raised); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; isolation: isolate; }
.site-bento__tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 10, .72), rgba(10, 10, 10, 0) 58%); }
.site-bento__tile--lg { grid-column: 1 / 3; grid-row: 1 / 3; }
.site-bento__label { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.site-bento__tile--lg .site-bento__label { font-size: 40px; }
.site-bento__tile .cj-icon { font-size: 22px; transition: transform .25s ease; }
@media (hover: hover) { .site-bento__tile:hover .cj-icon { transform: translateX(4px); } }

/* journal: one large story, two compact ones */
.cj-journal { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-8); }
.cj-journal .cj-story:first-child { grid-row: 1 / span 2; }
.cj-journal .cj-story:first-child .cj-title { font-size: 30px; }
.cj-journal .cj-story:not(:first-child) { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--space-4); align-content: start; }
.cj-journal .cj-story:not(:first-child) .cj-story__img { grid-row: 1 / span 3; margin-bottom: 0; aspect-ratio: 1 / 1; }

/* home journal: with four stories the large one spans three rows, so the compact ones sit evenly beside it */
.cj-journal--four { grid-template-rows: repeat(3, auto); }
.cj-journal--four .cj-story:first-child { grid-row: 1 / span 3; }

/* visit us: the boutique card sits on a live Google map (left in Google's own colours so the pin stays visible) */
.site-visit { position: relative; min-height: 560px; display: flex; align-items: center; padding: var(--space-16) 0; background: var(--surface-raised); overflow: hidden; }
.site-visit__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-visit .cj-container { position: relative; width: 100%; pointer-events: none; }
.site-visit__card { pointer-events: auto; max-width: 440px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-lift); }

/* showcase chapters keep the photograph on the left; the page does not zigzag */
.site-split--flip .site-showimg { order: 0; }
.site-index b { display: none; }
.site-index a { padding-top: var(--space-3); }

/* press feedback on buttons */
.cj-btn:active { transform: translateY(1px); }

/* motion: entrances only, and only when the visitor has not asked for less */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .site-hero__slide.is-active .site-hero__copy > * { animation: site-rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .site-hero__slide.is-active .site-hero__copy > :nth-child(2) { animation-delay: .08s; }
  .site-hero__slide.is-active .site-hero__copy > :nth-child(3) { animation-delay: .16s; }
  .site-hero__slide.is-active .site-hero__copy > :nth-child(4) { animation-delay: .24s; }
  .site-bento__tile { transition: filter .4s ease; }
  .site-bento__tile:hover { filter: brightness(1.06); }
}
@keyframes site-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-hero__slide, .site-drawer { transition: none; }
}

@media (max-width: 900px) {
  .site-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 280px 200px 200px; gap: var(--space-3); }
  .site-bento__tile--lg { grid-column: 1 / 3; grid-row: 1; }
  .site-bento__tile { padding: var(--space-4); }
  .site-bento__label { font-size: 22px; }
  .site-bento__tile--lg .site-bento__label { font-size: 32px; }
  .cj-journal .cj-story:first-child, .cj-journal .cj-story:not(:first-child) { display: flex; flex-direction: column; grid-row: auto; }
  .cj-journal .cj-story:not(:first-child) .cj-story__img { aspect-ratio: 4 / 3; margin-bottom: var(--space-2); }
  .cj-journal .cj-story:first-child .cj-title { font-size: 22px; }
  .site-hero__slide .cj-container { padding-top: 0; }
  .site-visit { display: block; min-height: 0; padding: 0; }
  .site-visit__map { position: static; display: block; height: 320px; }
  .site-visit .cj-container { padding: 0; pointer-events: auto; }
  .site-visit__card { max-width: none; border-width: 1px 0 0; box-shadow: none; }
}

/* snap points respect the scroller's own padding */
@media (max-width: 900px) { .cj-journal, .cj-products { scroll-padding-inline: var(--space-8); } }
@media (max-width: 560px) { .cj-journal, .cj-products { scroll-padding-inline: var(--space-4); } }

/* ===== Part 6: a calmer phone layout: more air, larger tap targets, fewer things per screen ===== */
@media (max-width: 560px) {
  .cj-container { padding-left: 20px; padding-right: 20px; }
  .cj-section { padding: var(--space-16) 0; }
  .cj-head { margin-bottom: var(--space-8); gap: var(--space-3); }
  .cj-display-l { font-size: 32px; line-height: 1.12; }
  .cj-body-l { font-size: 17px; line-height: 28px; }
  .cj-steps { gap: var(--space-6); }

  /* announcement bar: message on top, link on its own line */
  .site-promo .cj-container { padding-top: 10px; padding-bottom: 10px; }
  .site-promo__msg a { display: block; margin: 0; padding: 6px 0 2px; }
  .site-promo__x { width: 40px; height: 40px; }

  /* header: icon buttons with a 44px hit area */
  .site-hdr__icons { gap: var(--space-1); }
  .site-hdr__icons > button, .site-hdr__icons > a:not(.cj-btn) { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .site-hdr button.site-hdr__menu { height: 44px; }

  /* hero: photograph on top, copy below it with room to breathe */
  .site-hero { min-height: 740px; }
  .site-hero__slide .site-hero__img { height: 52%; -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent); mask-image: linear-gradient(to bottom, #000 38%, transparent); }
  .site-hero__slide .cj-container { padding-bottom: 64px; }
  .site-hero__title { font-size: 40px; }
  .site-hero__copy { gap: var(--space-4); }
  .site-hero__actions { gap: var(--space-3); margin-top: var(--space-2); }

  /* calls to action: more space between them, link buttons keep a 44px hit area */
  .cj-hero__actions { gap: var(--space-4); }
  .cj-hero__actions .cj-btn--link { align-self: flex-start; }
  .cj-btn--link { position: relative; }
  .cj-btn--link::before { content: ""; position: absolute; inset: -12px 0; }
  .cj-choice { height: 44px; }

  /* editorial blocks, cards and panels */
  .cj-editorial__media { min-height: 340px; }
  .cj-editorial__copy { padding: var(--space-12) 20px; gap: var(--space-5, 20px); }
  .cj-boutique__info { padding: var(--space-8) 20px; }
  .site-panel { padding: var(--space-8) 20px; }
  .site-quote { padding: var(--space-6) 20px; }
  .cj-exchange__grid { gap: var(--space-8); }

  /* swipe rows line up with the 20px gutter and show a little less of the next card */
  .cj-products, .cj-journal { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; }
  .cj-product { flex-basis: 72%; }
  .cj-story { flex-basis: 84%; }
  .site-bento { gap: var(--space-3); }

  /* showcase */
  .site-specs > div { padding: var(--space-4) 0; }
  .site-index a { padding-top: var(--space-4); padding-bottom: var(--space-1); }

  /* footer */
  .cj-footer__top { gap: var(--space-8) var(--space-6); padding: var(--space-12) 0 var(--space-8); }
  .cj-footer ul { gap: 0; }
  .cj-footer li a { display: block; padding: 11px 0; }
  .cj-footer__social { gap: var(--space-6); }
  .cj-footer__social a { padding: 12px 0; }
  .cj-footer__bottom { gap: var(--space-2); }
}

/* ===== Part 7: navbar spacing ===== */
.site-hdr__meta { height: 40px; }
.site-hdr__main { height: 80px; }
.site-hdr__icons { gap: 20px; }
@media (max-width: 900px) {
  .site-hdr { --hdr-h: 74px; }
  .site-hdr__main { height: 72px; }
}
@media (max-width: 560px) {
  /* phones: icon-only menu button, so the wordmark has room on both sides */
  .site-hdr button.site-hdr__menu { min-width: 44px; }
  .site-hdr__menu span { display: none; }
  .site-hdr .cj-wordmark { font-size: clamp(17px, 5vw, 22px); }
  .site-hdr__icons { gap: 0; }
  .site-hdr__icons > button, .site-hdr__icons > a:not(.cj-btn) { width: 40px; }
}

/* once the page has scrolled (class set by site.js) the header is solid white on every page, with a black Join button */
.site-hdr.is-stuck { background: var(--surface); color: var(--ink); border-top-color: var(--hairline); border-bottom-color: var(--hairline); }
.site-hdr.is-stuck .site-hdr__join { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* header: black bar; the whole bar turns white while the pointer is over it or focus is inside it */
.site-hdr__join { background: #fff; color: #0a0a0a; border-color: #fff; transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out; }
@media (hover: hover) {
  .site-hdr:hover { background: var(--surface); color: var(--ink); border-top-color: var(--hairline); border-bottom-color: var(--hairline); }
  .site-hdr:hover .site-hdr__join { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .site-hdr:hover .site-hdr__join:hover { background: var(--gold-text); border-color: var(--gold-text); }
}
.site-hdr:has(:focus-visible) { background: var(--surface); color: var(--ink); border-top-color: var(--hairline); border-bottom-color: var(--hairline); }
.site-hdr:has(:focus-visible) .site-hdr__join { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .site-hdr, .site-hdr__join { transition: none; } }

/* ===== Part 8: blue hero; on the home page the header floats over it (white on hover) ===== */
.site-hdr--overlay { margin-bottom: calc(-1 * var(--hdr-h)); background: transparent; border-top-color: transparent; }
.site-hero { background: radial-gradient(70% 90% at 72% 45%, #2f5fd0 0%, #1c3f94 52%, #12296b 100%); }
@media (min-width: 901px) {
  .site-hero { min-height: 680px; }
  .site-hero .cj-container, .site-hero__slide .cj-container { padding-top: 136px; }
}
/* a soft blue scrim keeps the floating header legible over the photograph; it fades out when the header turns white */
.site-hdr--overlay::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 41, 107, .68), rgba(18, 41, 107, 0)); transition: opacity .25s ease; }
@media (hover: hover) { .site-hdr--overlay:hover::before { opacity: 0; } }
.site-hdr--overlay:has(:focus-visible)::before, .site-hdr--overlay.is-stuck::before { opacity: 0; }

/* the sticky header must not cover the target of an in-page link or scrollIntoView */
html { scroll-padding-top: 140px; }
@media (max-width: 900px) { html { scroll-padding-top: 90px; } }
/* zero-size marker at the top of every page: when it scrolls out of view the header turns white */
.site-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 120px; pointer-events: none; visibility: hidden; }

/* member card: the Chempaka emblem sits where the chip was */
.cj-card__chip { width: 52px; height: 41px; border-radius: 0; background: url(../images/brand/logo-mark-white.png) left center / contain no-repeat; opacity: .95; }

/* member card: rounded corners like a real card (the radius is a share of the card, so it scales with it) */
.cj-card { border-radius: 4.4% / 7%; }

/* full-screen card for the staff (opened from the membership page; see membership.js) */
.site-cardview { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: #0a0a0a; color: #fff; }
.site-cardview[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); }
.site-cardview::backdrop { background: #0a0a0a; }
.site-cardview__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; }
@media (hover: hover) { .site-cardview__close:hover { border-color: #fff; } }
.site-cardview__close .cj-icon { font-size: 24px; }
.site-cardview__stage { flex: none; }
.site-cardview .cj-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.site-cardview__info { text-align: center; display: grid; gap: var(--space-2); padding: 0 var(--space-6); }
.site-cardview__info[hidden] { display: none; }
.site-cardview__status { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-on-panel); }
.site-cardview__name { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; }
.site-cardview__id { margin: 0; font-size: 32px; line-height: 40px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.site-cardview__hint { margin: var(--space-4) auto 0; max-width: 320px; font-size: 13px; line-height: 20px; color: var(--on-panel-muted); }

/* ===== Part 9: a more readable menu panel ===== */
.site-drawer { width: min(440px, 92vw); }
.site-drawer__top { min-height: 72px; padding: var(--space-3) var(--space-6); }
.site-drawer__top button { width: 44px; height: 44px; justify-content: center; }
@media (hover: hover) { .site-drawer__top button:hover { color: var(--gold-text); } }
.site-drawer nav { gap: 0; padding: var(--space-6) var(--space-6) var(--space-12); }
.site-drawer nav > div { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.site-drawer nav > div:first-child { padding-top: 0; border-top: 0; }
.site-drawer h2 { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; letter-spacing: .18em; font-weight: 500; color: var(--ink-muted); }
.site-drawer ul { gap: 0; }
.site-drawer li a { display: flex; align-items: center; min-height: 44px; padding: 0; font-family: var(--font-sans); font-size: 19px; line-height: 1.3; font-weight: 400; letter-spacing: .01em; color: var(--ink); }
@media (hover: hover) { .site-drawer li a:hover { color: var(--gold-text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; } }

/* ===== Part 10: admin panel ===== */
.site-admin-bar__email { font-size: 12px; color: var(--on-panel-muted); }
.site-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .site-linkbtn:hover { color: var(--ink); } }

.site-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-8); }
.site-stats > div { padding: var(--space-4) var(--space-6); border: 1px solid var(--hairline); background: var(--surface); }
.site-stats dt { font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.site-stats dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: 36px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.site-stats > div.is-attn { border-color: var(--gold); }
.site-stats > div.is-attn dd { color: var(--gold-text); }

.site-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.site-toolbar .cj-field { margin: 0; }
.site-toolbar__actions { display: flex; gap: var(--space-2); }
.site-more { margin-top: var(--space-4); }
/* gold price post: the picture beside its controls */
.site-postprev { display: flex; justify-content: center; align-items: flex-start; }
.site-postprev canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; border: 1px solid var(--hairline); background: var(--surface-raised); }
.cj-choice .cj-badge { margin-left: var(--space-2); }
.cj-notice .site-linkbtn { margin-left: var(--space-1); }

/* dialogs: add or edit a member, confirmations, change password */
.site-dialog { border: 0; padding: var(--space-8); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); }
.site-dialog--sm { width: min(440px, calc(100vw - 32px)); }
.site-dialog::backdrop { background: var(--scrim); }
.site-dialog .cj-form { gap: var(--space-4); }
.site-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }

@media (max-width: 900px) {
  .site-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-toolbar__search { grid-column: 1 / -1; }
  .site-toolbar__actions { grid-column: 1 / -1; }
}
/* phones: each table row becomes a labelled card instead of a wide table to scroll sideways */
@media (max-width: 760px) {
  .site-tablewrap { border: 0; background: none; }
  .site-table { min-width: 0; display: block; }
  .site-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-table tbody { display: grid; gap: var(--space-3); }
  .site-table tr { display: block; padding: var(--space-4); border: 1px solid var(--hairline); background: var(--surface); }
  .site-table tr:last-child td { border-bottom: 0; }
  .site-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; border: 0; overflow-wrap: anywhere; }
  .site-table td[data-label]::before { content: attr(data-label); font-size: 11px; line-height: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
  .site-table td[colspan] { display: block; padding: var(--space-2) 0; color: var(--ink-muted); }
  .site-table td.site-table__act { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--hairline); text-align: left; }
  .site-table td button { min-height: 44px; padding: 0 var(--space-1); }
  .site-table td button + button { margin-left: 0; }
}
@media (max-width: 560px) {
  .site-stats { gap: var(--space-3); }
  .site-stats > div { padding: var(--space-3) var(--space-4); }
  .site-stats dd { font-size: 30px; }
  .site-toolbar { grid-template-columns: minmax(0, 1fr); }
  .site-toolbar__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .site-dialog { padding: var(--space-6) var(--space-4); }
  .site-dialog__actions { flex-direction: column-reverse; }
  .site-dialog__actions .cj-btn { width: 100%; }
  .site-admin-bar .cj-container { height: auto; padding-top: var(--space-3); padding-bottom: var(--space-3); flex-wrap: wrap; }
  .site-admin-bar__email { display: none; }
}
.site-counter-details { display: inline-block; margin-top: var(--space-1); font-size: 13px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* ===== Part 11: phones and touch =====
   Bigger touch targets, 16px text in forms (iOS zooms the page in on anything smaller), no double-tap delay, a swipeable
   hero, and photographs that load as they come near the screen (assets/js/site.js). Hover effects are only for pointers. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(47, 95, 208, .14); }
a, button, summary, label, [role="button"], input, select, textarea { touch-action: manipulation; }

/* photographs below the first screen: no request until assets/js/site.js marks them .is-near (it adds .js-lazy to the page first) */
.js-lazy [class*="img-"]:not(.is-near):not(.img-hero-blue):not(.img-hero-ring) { background-image: none; }

/* a larger area to tap, without moving anything: the invisible extension reaches past the text */
.cj-btn--link, .site-promo__msg a, .cj-footer__social a, a.cj-wordmark { position: relative; }
.cj-btn--link::after, .site-promo__msg a::after, .cj-footer__social a::after { content: ""; position: absolute; inset: -12px -8px; }
a.cj-wordmark::after { content: ""; position: absolute; inset: -14px -10px; }
.site-promo__x::after { content: ""; position: absolute; inset: -6px; }

/* the home hero is swiped on a phone: dots with a full-size target, and sideways drags go to the script */
.site-hero { touch-action: pan-y; }
.site-hero__dot { width: 44px; height: 44px; }
.site-hero__dots { bottom: calc(var(--space-4) - 6px); }

@media (pointer: coarse), (max-width: 900px) {
  .cj-input, .cj-select, textarea.cj-input { font-size: 16px; }
  .cj-check { min-height: 44px; align-items: center; }
  .cj-check input { width: 22px; height: 22px; margin: 0; }
  .cj-footer__social { gap: var(--space-6); }
  .site-drawer, .site-search { overscroll-behavior: contain; }
  .cj-btn--sm { height: 44px; }
  .site-hdr__icons > button, .site-hdr__icons > a:not(.cj-btn) { min-width: 44px; min-height: 44px; display: inline-flex; justify-content: center; align-items: center; }
}
@media (max-width: 900px) {
  .cj-product__cat, .cj-story__meta, .cj-card__tier, .site-subhead, .cj-field label, .site-stats dt, .cj-boutique__info dt, .site-specs dt { font-size: 12px; }
  .cj-card__row small { font-size: 11px; }
}

/* the narrowest phones: the two header side columns are no longer forced to the same width, so 44px icons still fit */
@media (max-width: 340px) {
  .site-hdr__main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-hdr__main .cj-wordmark { justify-self: center; }
}

/* lighter photographs on a phone (assets/images/m); the full-size ones stay for larger screens */
@media (max-width: 700px) {
  .img-a-hero { background-image: url(../images/m/hero-layered-necklace.jpg); }
  .img-diamond { background-image: url(../images/m/diamond_necklaces.jpg); }
  .img-a-bead { background-image: url(../images/m/necklace-bead.jpg); }
  .img-a-chains { background-image: url(../images/m/layered-chains.jpg); }
  .img-a-woven { background-image: url(../images/m/bracelet-woven.jpg); }
  .img-a-mesh { background-image: url(../images/m/bracelet-flower-mesh.jpg); }
  .img-a-floral { background-image: url(../images/m/bracelet-floral.jpg); }
  .img-a-tricolour { background-image: url(../images/m/bracelet-tricolour.jpg); }
  .img-a-curb { background-image: url(../images/m/chain-curb.jpg); }
}