/* =====================================================================
   Origin Marble — dark gallery
   Photography-led single page. Bodoni Moda + Inter. Minimal JS.
   The stone is the only colour; everything else is near-black and bone.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
  --bg:        #0e0d0b;          /* warm near-black */
  --bg-lift:   #16140f;          /* barely-lifted panel */
  --bone:      #efe9df;          /* stone white text */
  --mute:      #a89f93;          /* muted captions */
  --faint:     #6e675c;          /* faint labels */
  --line:      rgba(239,233,223,0.14);
  --line-2:    rgba(239,233,223,0.30);

  --display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --rail: max(var(--gutter), calc(50vw - var(--container) / 2));   /* aligns the rack's first slab to the container edge */

  --step: clamp(72px, 12vh, 168px);    /* vertical section rhythm */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  color: var(--bone);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--bone); outline-offset: 4px; }
::selection { background: var(--bone); color: var(--bg); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.0; letter-spacing: -0.015em; text-wrap: balance; }

/* Small wide-tracked label — the only repeated motif */
.label {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

.container { inline-size: min(100% - calc(var(--gutter) * 2), var(--container)); margin-inline: auto; }

/* skip link */
.skip { position: absolute; left: var(--gutter); top: -200px; background: var(--bone); color: var(--bg); padding: 12px 20px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; z-index: 100; }
.skip:focus-visible { top: 16px; }

/* ---- HEADER ---------------------------------------------------- */
.site-header { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 10; }
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: clamp(20px, 3vw, 34px); gap: var(--gutter); }
.brand { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.005em; color: var(--bone); }
.nav__links { display: flex; gap: clamp(20px, 3vw, 44px); align-items: center; }
.nav__links a { font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); opacity: 0.82; transition: opacity 0.2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { border: 1px solid var(--line-2); padding: 10px 18px; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.nav__cta:hover { background: var(--bone); color: var(--bg); opacity: 1; }
@media (max-width: 720px) { .nav__hide { display: none; } }

/* ---- HERO ------------------------------------------------------ */
.hero { position: relative; min-block-size: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,13,11,0.60) 0%, rgba(14,13,11,0.10) 24%, rgba(14,13,11,0.40) 54%, rgba(14,13,11,0.95) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block-end: clamp(48px, 9vh, 120px); padding-block-start: 140px; }
.hero .label { margin-block-end: clamp(20px, 3vh, 34px); color: var(--bone); opacity: 0.85; }
.hero__title { font-size: clamp(3rem, 8.4vw, 7.8rem); font-weight: 600; font-variation-settings: 'wght' 600, 'opsz' 54; letter-spacing: -0.015em; line-height: 0.96; max-inline-size: 16ch; text-shadow: 0 1px 26px rgba(8,7,6,0.5); }
.hero__sub { margin-block-start: clamp(20px, 3vh, 32px); max-inline-size: 46ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--bone); opacity: 0.9; }
.hero__more { display: inline-flex; align-items: center; gap: 12px; margin-block-start: clamp(28px, 4vh, 44px); font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; padding-block-end: 6px; border-block-end: 1px solid var(--line-2); }
.hero__more svg { inline-size: 14px; transition: transform 0.25s var(--ease); }
.hero__more:hover svg { transform: translateY(3px); }
/* On phones the title hits its size floor (~48px); at opsz 54 Bodoni's hairline strokes
   thin below one device pixel and drop out until you zoom. Use a sturdier optical size and
   a little more weight so the strokes always render, plus a tight shadow for edge definition. */
@media (max-width: 720px) {
  .hero__title {
    font-weight: 640;
    font-variation-settings: 'wght' 640, 'opsz' 24;
    text-shadow: 0 1px 2px rgba(8,7,6,0.65), 0 1px 26px rgba(8,7,6,0.5);
  }
  /* The same dropout hits every Bodoni display element at small sizes (the browser's auto
     optical sizing tracks the px size, so small text still gets thin display hairlines).
     Pin a sturdier opsz across all of them. They run weight 400 on the solid dark
     background, so opsz alone is enough — no extra weight. Italics stay italic (the italic
     face is chosen by font-style, not by this axis). */
  .brand, .section__title, .section__lede, .specimen__name, .meta__v, .chip__v,
  .lb__cap, .band__text, .point__v, .enquire__contact a, .sent {
    font-variation-settings: 'wght' 400, 'opsz' 24;
  }
}

/* ---- SECTION shell --------------------------------------------- */
.section { padding-block: var(--step); }
.section__head { max-inline-size: 60ch; }
.section__head .label { margin-block-end: clamp(18px, 2.4vh, 28px); }
.section__title { font-size: clamp(2rem, 1.4rem + 3.2vw, 4.4rem); }
.section__lede { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.9rem); line-height: 1.35; color: var(--mute); margin-block-start: clamp(18px, 2.4vh, 28px); max-inline-size: 40ch; }

/* ---- COLLECTION (stone cards: photo left, full brochure spec right) ----
   13 cards in a 2-column grid (7 rows; the last row carries one), each the
   brochure plate laid sideways. Markup is generated by tools/build_collection.py
   from the same STONES data as the PDF, so the specs can never drift apart. */
.specimens { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: clamp(30px, 3.2vw, 60px) clamp(24px, 2.6vw, 46px); margin-block-start: clamp(40px, 6vh, 72px); }
@media (max-width: 900px) { .specimens { grid-template-columns: 1fr; grid-auto-rows: auto; gap: clamp(30px, 5vh, 52px); } }   /* equal-height cards only side-by-side; stacked on mobile they size to content */

.specimen { display: flex; flex-direction: column; padding-block-start: clamp(20px, 2.6vh, 30px); border-block-start: 1px solid var(--line); }

/* photo — a full-width band of stone crowning the card, a uniform 3:2 banner so every
   card's photo is the same height and the specs below all start at the same level
   (the gentle crop barely trims the ~5:3 source). Click to enlarge in the lightbox.
   Keeps the .stone__frame class so the existing lightbox JS still binds to it. */
.specimen__photo { position: relative; display: block; inline-size: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; background: var(--bg-lift); overflow: hidden; cursor: zoom-in; }
.specimen__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; filter: brightness(0.92) contrast(1.02); transition: filter 0.5s var(--ease), transform 0.9s var(--ease); -webkit-user-drag: none; }
.specimen__photo:hover img, .specimen__photo:focus-visible img { filter: brightness(1.05) contrast(1.03); transform: scale(1.03); }
.specimen__plate { position: absolute; inset-block-start: 0; inset-inline-start: 0; background: var(--bg); color: var(--mute); font-family: var(--body); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 11px; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); }

.specimen__body { min-inline-size: 0; margin-block-start: clamp(18px, 2vh, 24px); }
.specimen__head { position: relative; padding-block-end: 12px; border-block-end: 1px solid var(--line-2); }
.specimen__name { font-family: var(--display); font-size: clamp(1.45rem, 1.15rem + 1vw, 2.05rem); line-height: 1.05; color: var(--bone); padding-inline-end: 42%; white-space: nowrap; }
/* origin floats top-right and is taken out of flow, so its length (1–3 lines) never
   changes the heading height — that keeps the spec block starting at the same level in
   every card (the stone name alone sets the heading height). */
.specimen__origin { position: absolute; inset-block-start: 0.25em; inset-inline-end: 0; inline-size: 40%; text-align: right; font-family: var(--body); font-size: 0.62rem; line-height: 1.45; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 540px) {
  .specimen__name { padding-inline-end: 0; white-space: normal; }
  .specimen__origin { position: static; inline-size: auto; text-align: left; margin-block-start: 6px; }
}

/* meta strip (colour / stone / slab size / application / finishes) */
.meta { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-block-start: 16px; }
.meta__item { display: flex; flex-direction: column; gap: 3px; }
.meta__item--wide { flex-basis: 100%; }
.meta__k { font-family: var(--body); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.meta__v { font-family: var(--display); font-size: 1.02rem; line-height: 1.2; color: var(--bone); }

/* spec tables — the brochure's two-up now that the photo no longer takes a column;
   stacks to one column on phones where two would be too cramped */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-block-start: 20px; }
@media (max-width: 540px) { .specs { grid-template-columns: 1fr; gap: 16px; } }
.spec-col__t { font-family: var(--body); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); padding-block-end: 8px; margin-block-end: 6px; border-block-end: 1px solid var(--line); }
.spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-block: 4px; font-size: 0.82rem; line-height: 1.35; }
.spec__k { color: var(--mute); }
.spec__dots { flex: 1 1 12px; min-inline-size: 12px; border-block-end: 1px dotted var(--line); transform: translateY(-3px); }
.spec__v { color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums; margin-inline-start: auto; }   /* a too-long value wraps to its own line, still right-aligned */

/* composition chips + petrographic note */
.comp { margin-block-start: 18px; }
.comp__t { font-family: var(--body); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin-block-end: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--line); padding: 5px 11px; }
.chip__k { font-family: var(--body); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--mute); }
.chip__v { font-family: var(--display); font-size: 0.92rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.note { margin-block-start: 16px; font-size: 0.8rem; line-height: 1.55; color: var(--mute); }

/* ---- LIGHTBOX (expand a slab; scrolls when taller than the screen) */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); background: rgba(8,7,6,0.96); opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease); }
.lb.is-open { opacity: 1; pointer-events: auto; }
/* comfortable size with margins all round; scaled DOWN only, never up (so it never pixelates) */
.lb__img { inline-size: auto; block-size: auto; max-inline-size: min(90vw, 800px); max-block-size: 72vh; display: block; }
.lb__cap { position: absolute; inset-block-end: clamp(14px, 3vh, 28px); inset-inline: 0; text-align: center; font-family: var(--display); font-size: 1.15rem; color: var(--bone); pointer-events: none; text-shadow: 0 1px 12px rgba(8,7,6,0.85); }
.lb__cap span { font-family: var(--body); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-inline-start: 14px; }
.lb__btn { position: absolute; z-index: 2; inline-size: 48px; block-size: 48px; background: rgba(8,7,6,0.5); border: 1px solid var(--line-2); color: var(--bone); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.lb__btn:hover { background: rgba(239,233,223,0.1); border-color: var(--bone); }
.lb__close { inset-block-start: clamp(14px, 3vh, 26px); inset-inline-end: clamp(14px, 3vw, 26px); }
.lb__prev, .lb__next { inset-block-start: 50%; transform: translateY(-50%); inline-size: 52px; block-size: 52px; }
.lb__prev { inset-inline-start: clamp(10px, 2vw, 26px); }
.lb__next { inset-inline-end: clamp(10px, 2vw, 26px); }
@media (max-width: 560px) { .lb__prev, .lb__next { display: none; } }

/* ---- BAND with provenance map ---------------------------------- */
.band { background: var(--bg); padding-block: var(--step); border-block: 1px solid var(--line); }
.band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 880px) { .band__grid { grid-template-columns: 1.02fr 1fr; } }
.band__text { font-family: var(--display); font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.3rem); line-height: 1.2; max-inline-size: 18ch; }
.band__legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block-start: clamp(24px, 3.4vh, 38px); }
.band__legend li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.band__legend li::before { content: ""; inline-size: 11px; block-size: 11px; background: var(--bone); flex-shrink: 0; }
.band__map { margin: 0; }
.region-map { inline-size: 100%; block-size: auto; display: block; overflow: hidden; }
.region { fill: var(--bg-lift); stroke: rgba(239,233,223,0.18); stroke-width: 0.9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.region--source { fill: var(--bone); stroke: var(--bg); stroke-width: 1.1; vector-effect: non-scaling-stroke; }

/* ---- SOURCING three-up ----------------------------------------- */
.threeup { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 56px); margin-block-start: clamp(48px, 7vh, 80px); }
.point { border-block-start: 1px solid var(--line-2); padding-block-start: clamp(20px, 3vh, 32px); }
.point__k { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.point__v { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.1; margin-block-start: 16px; }
@media (max-width: 760px) { .threeup { grid-template-columns: 1fr; gap: 0; } .point { padding-block: clamp(24px, 4vh, 36px); } }

/* ---- ENQUIRE --------------------------------------------------- */
.enquire-grid { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .enquire-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.enquire__contact { display: flex; flex-direction: column; gap: 10px; margin-block-start: clamp(28px, 4vh, 40px); }
.enquire__contact a { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem); border-block-end: 1px solid transparent; transition: border-color 0.25s; align-self: flex-start; }
.enquire__contact a:hover { border-block-end-color: var(--line-2); }
.enquire__meta { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--mute); }

.form { display: grid; gap: clamp(22px, 3vh, 30px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--body); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.field input, .field textarea {
  font: inherit; color: var(--bone); background: transparent;
  border: 0; border-block-end: 1px solid var(--line-2); padding: 10px 0; border-radius: 0;
  transition: border-color 0.2s;
}
.field textarea { resize: vertical; min-block-size: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: none; border-block-end-color: var(--bone); }
.field[data-bad] input, .field[data-bad] textarea { border-block-end-color: #c06a55; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn { justify-self: start; font-family: var(--body); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); background: transparent; border: 1px solid var(--line-2); padding: 15px 34px; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.btn:hover { background: var(--bone); color: var(--bg); }
.btn:disabled { opacity: 0.5; cursor: default; }
.form__note { font-size: 0.8rem; color: var(--mute); }
.form__note[data-bad] { color: #c06a55; }
.sent { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.2; }

/* ---- FOOTER ---------------------------------------------------- */
.footer { border-block-start: 1px solid var(--line); padding-block: clamp(48px, 7vh, 80px) clamp(28px, 4vh, 40px); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(28px, 4vw, 64px); }
.footer__brand .brand { display: inline-block; margin-block-end: 14px; }
.footer__tag { color: var(--mute); max-inline-size: 34ch; font-size: 0.92rem; }
.footer__col h4 { font-family: var(--body); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-block-end: 14px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: var(--mute); }
.footer__col a:hover { color: var(--bone); }
.footer__bottom { margin-block-start: clamp(40px, 6vh, 64px); padding-block-start: 22px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }