/* Layout: centred hero, alternating feature rows of pearl-ringed oval photos, single dark garden-parlour theme */
:root {
  --moss: #2F3B2A;
  --moss-2: #38452F;
  --moss-deep: #263022;
  --line: #5C6B4F;
  --cream: #EDE7D6;
  --cream-muted: #C9CDB8;
  --gold: #C8AE72;
  --font: 'Cormorant Garamond', 'Garamond', 'Times New Roman', Georgia, serif;
  --gutter-l: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--moss); color: var(--cream); font-family: var(--font); font-size: 20px; line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--gold); }
a:hover { color: var(--cream); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.eyebrow { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.h1 { margin: 0; font-weight: 500; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.08; }
.h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 4vw, 44px); line-height: 1.1; }
.btn { display: inline-block; padding: 14px 30px; background: var(--gold); color: var(--moss); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--gold); }
.btn:hover { background: var(--cream); border-color: var(--cream); color: var(--moss); }
.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
.text-link { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.motif { display: block; height: auto; }
.flip { transform: scaleX(-1); }

/* Nav */
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { padding-block: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.wordmark { font-size: 30px; font-style: italic; font-weight: 500; color: var(--cream); text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.nav-links a { color: var(--cream); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.nav-links a:hover { color: var(--gold); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.damask { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.1; }
.hero-inner { position: relative; max-width: 820px; margin: 0 auto; padding: 72px var(--gutter-r) 88px var(--gutter-l); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.hero-inner p { margin: 0; max-width: 560px; }
.hero-herons { width: 200px; margin-bottom: -10px; }
.hero .eyebrow { margin-top: 16px; }

/* Pearl-ringed ovals */
.pearl { border-radius: 50%; border: 9px dotted var(--gold); padding: 8px; aspect-ratio: 5 / 6; max-width: 100%; }
.pearl-inner { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--gold); padding: 8px; }
.pearl-inner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pearl-logo { width: min(300px, 70vw); }
.pearl-logo .pearl-inner { padding: 0; background: var(--moss-2); display: flex; align-items: center; justify-content: center; }
.pearl-logo .pearl-inner img { width: 72%; height: auto; border-radius: 0; object-fit: contain; }

/* Featured */
.featured { padding-block: 88px 40px; display: flex; flex-direction: column; gap: 96px; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 36px; }
.section-head .motif { width: 72px; }
.bead-divider { display: flex; align-items: center; gap: 24px; padding-block: 16px 72px; }
.beads { flex: 1; height: 10px; background: radial-gradient(circle, var(--gold) 3px, transparent 3.6px) 0 50% / 14px 10px repeat-x; }
.bead-divider .owl { width: 180px; flex: 0 0 auto; }
.piece { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.piece.reverse { flex-wrap: wrap-reverse; }
.piece-photo { flex: 1 1 420px; display: flex; justify-content: center; }
.piece-photo .pearl { position: relative; width: min(480px, 100%); }
.piece-text { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.piece-text p { margin: 0; }
.specs { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.price { font-size: 24px; font-weight: 500; }
.inset { position: absolute; left: -28px; bottom: -20px; width: 40%; aspect-ratio: 5 / 6; border-radius: 50%; border: 6px dotted var(--gold); padding: 4px; background: var(--moss); }
.inset img { width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--gold); object-fit: cover; display: block; }

/* Woodland divider */
.woodland-divider { display: flex; align-items: flex-end; gap: 20px; padding-block: 56px 72px; }
.woodland-divider .small { width: 56px; flex: 0 0 auto; }
.woodland-divider .owl { width: 170px; flex: 0 0 auto; }
.woodland-divider .beads { margin-bottom: 16px; }

/* More from the jewellery box */
.more { background: var(--moss-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more .wrap { padding-block: 80px; }
.heron-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 48px; text-align: center; }
.heron-head .motif { width: 40px; flex: 0 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px 28px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--cream); text-align: center; }
.card:hover { color: var(--cream); }
.card .pearl { width: 86%; border-width: 6px; padding: 5px; aspect-ratio: 4 / 5; margin-bottom: 12px; }
.card .pearl-inner { border-width: 1.5px; padding: 0; }
.placeholder { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #44523A, var(--moss) 70%); display: flex; align-items: center; justify-content: center; padding: 22px; color: var(--cream-muted); font-style: italic; font-size: 17px; }
.card .type { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.card .name { font-size: 24px; font-weight: 500; line-height: 1.25; }
.center { display: flex; justify-content: center; margin-top: 52px; }

/* Story */
.story { max-width: 760px; margin: 0 auto; padding: 88px var(--gutter-r) 88px var(--gutter-l); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.story .motif { width: 72px; }
.story p { margin: 0; }

/* Visit */
.visit { border-top: 1px solid var(--line); }
.visit .wrap { padding-block: 56px; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 32px; text-align: center; }
.visit h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.visit p { margin: 0; }
.woodland { display: flex; justify-content: center; padding: 8px var(--gutter-r) 32px var(--gutter-l); }
.woodland img { width: min(340px, 80%); }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--moss-deep); }
.footer .wrap { padding-block: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.footer .logo { width: 100px; }
.signup { flex: 1 1 380px; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.signup label { font-size: 24px; font-weight: 500; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input { flex: 1 1 220px; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); background: var(--moss); color: var(--cream); font: inherit; font-size: 18px; }
.signup button { min-height: 46px; padding: 0 24px; background: var(--gold); color: var(--moss-deep); border: 0; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.signup button:hover { background: var(--cream); }
.signup-status { margin: 0; font-size: 17px; color: var(--cream-muted); min-height: 1.6em; }
.copyright { text-align: center; font-size: 15px; padding: 0 var(--gutter-r) 24px var(--gutter-l); color: var(--cream-muted); margin: 0; }

@media (max-width: 560px) {
  .inset { left: -8px; bottom: -12px; }
  .bead-divider .owl { width: 130px; }
  .woodland-divider .owl { width: 120px; }
  .woodland-divider .small { width: 40px; }
}

/* Dynamic content states */
#collection { display: contents; }
.grid > .status-msg { grid-column: 1 / -1; }
.status-msg { text-align: center; font-style: italic; color: var(--cream-muted); margin: 0; }
.card .pearl-inner img { border-radius: 50%; }
.card .sold, .sold-tag { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-muted); }
.piece-photo .pearl > .pearl-inner { position: relative; }

/* Browse page */
.browse-hero { padding-block: 64px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.browse-hero .motif { width: 72px; }
.cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-bottom: 40px; }
.cat-nav a { font-size: 15px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.category { padding-block: 56px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.category:nth-of-type(even) { background: var(--moss-2); }
.category .grid { display: flex; flex-wrap: wrap; justify-content: center; }
.category .card { width: 250px; }
.card .desc { font-size: 17px; color: var(--cream-muted); max-width: 28ch; }