/* ===================================================================
   Body Naturalz - shared stylesheet
   Brand system per brand deck v1.0. Ink dominates, ivory carries text,
   gold appears where you want the eye.
   =================================================================== */

:root {
  --ink:          #1C2419;
  --surface:      #242E1E;
  --surface-2:    #2B3623;
  --ivory:        #F2EDE3;
  --ivory-dim:    rgba(242, 237, 227, 0.62);
  --ivory-faint:  rgba(242, 237, 227, 0.48);
  --hairline:     rgba(242, 237, 227, 0.10);
  --hairline-2:   rgba(242, 237, 227, 0.18);
  --gold:         #D9A441;
  --gold-light:   #E8C377;
  --sage:         #8FA37E;

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 1180px;
  --gutter:  1.5rem;
  --radius:  18px;
}

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

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

body {
  background-color: #0E1310;
  background-image: linear-gradient(180deg, #131A13 0%, #0E1310 52%, #080B07 100%);
  color: var(--ivory);
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- ambient depth -------------------------------------------
   The background is built from four cheap layers rather than one gradient:
   pools of warm light, a slow specular sweep, a vignette, and fine grain.
   Together they read as light sitting on something wet. All layers are
   position:fixed, which keeps them out of the body flex flow, and all sit
   at z-index 0 so main (z-index 1) always paints above them.
   -------------------------------------------------------------------- */

/* 1 + 2: pools of light, drifting slowly against each other */
.sheen,
.sheen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sheen {
  background:
    radial-gradient(17vw 13vh at 63% 3%,  rgba(255, 243, 214, 0.30), transparent 70%),
    radial-gradient(34vw 27vh at 63% 5%,  rgba(240, 199, 122, 0.24), transparent 68%),
    radial-gradient(26vw 24vh at 99% 44%, rgba(214, 158, 58, 0.20),  transparent 66%),
    radial-gradient(30vw 26vh at 1% 84%,  rgba(126, 150, 108, 0.16), transparent 68%);
  animation: drift 26s ease-in-out infinite alternate;
}
.sheen::after {
  background:
    radial-gradient(20vw 17vh at 14% 30%, rgba(232, 195, 119, 0.13), transparent 70%),
    radial-gradient(24vw 20vh at 88% 92%, rgba(214, 158, 58, 0.13),  transparent 70%);
  animation: drift-counter 34s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04); }
  to   { transform: translate3d( 2.5%,  1.5%, 0) scale(1.10); }
}
@keyframes drift-counter {
  from { transform: translate3d( 2%,  1%, 0) scale(1.08); }
  to   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
}

/* 3: a slow specular sweep, the highlight that makes a surface read as wet,
      plus a vignette so the edges fall away and the centre feels lit */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(102deg,
      transparent 30%,
      rgba(242, 237, 227, 0.05) 43%,
      rgba(255, 236, 194, 0.11) 48%,
      rgba(255, 245, 222, 0.14) 50%,
      rgba(255, 236, 194, 0.10) 52%,
      rgba(242, 237, 227, 0.04) 57%,
      transparent 70%);
  animation: sweep 30s ease-in-out infinite alternate;
}
@keyframes sweep {
  from { transform: translate3d(-9%, 0, 0); }
  to   { transform: translate3d( 9%, 0, 0); }
}

/* 4: fine grain. Kills gradient banding and gives the dark a tactile,
      printed quality rather than a flat digital wash. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* vignette rides on the page shell so it never covers content */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(96vw 88vh at 56% 28%, transparent 18%, rgba(4, 6, 4, 0.86) 96%),
    linear-gradient(to bottom, rgba(4, 6, 4, 0.30) 0%, transparent 22%, transparent 58%, rgba(4, 6, 4, 0.62) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sheen, .sheen::after, body::before { animation: none; }
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 940px; }

main { position: relative; z-index: 1; flex: 1 0 auto; }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section + section { border-top: 1px solid var(--hairline); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--hairline);
  background: rgba(11, 16, 12, 0.76);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding-block: 0.7rem;
  flex-wrap: wrap;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ivory);
}
.brandmark svg { width: 38px; height: 38px; flex: none; }
.brandmark span {
  font-family: var(--display);
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ivory-dim);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ivory); }
.site-nav a[aria-current="page"] {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}
.site-nav a.nav-cta {
  color: var(--ink);
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  border: none;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.5rem 1.05rem;
}
.site-nav a.nav-cta:hover { color: var(--ink); filter: brightness(1.07); }

@media (max-width: 620px) {
  .site-header .wrap {
    justify-content: center;
    text-align: center;
    min-height: 0;
    padding-block: 0.55rem;
    gap: 0.4rem;
  }
  .brandmark svg { width: 30px; height: 30px; }
  .brandmark span { font-size: 1.12rem; }
  .site-nav { gap: 0.9rem; justify-content: center; width: 100%; }
  .site-nav a { font-size: 0.68rem; letter-spacing: 0.09em; padding-block: 0.2rem; }
  /* the pill is too heavy for a sticky bar this size: demote it to a gold link */
  .site-nav a.nav-cta {
    background: none;
    color: var(--gold-light);
    padding: 0.2rem 0;
    font-weight: 600;
    border-radius: 0;
  }
  .site-nav a.nav-cta:hover { color: var(--gold); filter: none; }
}

/* ---------- type ---------- */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.eyebrow--sage { color: var(--sage); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); max-width: 16ch; }
h2 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); max-width: 22ch; }
h3 { font-size: 1.45rem; font-weight: 500; }
em { font-style: italic; color: var(--gold-light); }

p { max-width: 68ch; }
.lede {
  font-size: clamp(1.03rem, 1.6vw, 1.18rem);
  color: var(--ivory-dim);
  margin-top: 1.3rem;
  max-width: 56ch;
}
.muted { color: var(--ivory-dim); }
.small { font-size: 0.85rem; }
.fine  { font-size: 0.78rem; color: var(--ivory-faint); }

a { color: var(--gold-light); }
a:hover { color: var(--gold); }

.stack > * + * { margin-top: 1.05rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0.88rem 1.7rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold {
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  color: var(--ink);
}
.btn--gold:hover { color: var(--ink); filter: brightness(1.07); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--hairline-2);
  color: var(--ivory);
}
.btn--ghost:hover { color: var(--ivory); border-color: var(--gold); }
.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- cards / grids ---------- */
.grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: linear-gradient(158deg, rgba(48, 60, 40, 0.78), rgba(28, 36, 25, 0.82));
  border: 1px solid rgba(242, 237, 227, 0.11);
  border-radius: var(--radius);
  padding: 1.85rem 1.65rem;
  box-shadow:
    0 22px 46px -28px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(242, 237, 227, 0.07);
}
.card h3 {
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 0.55rem;
}
.card p { color: var(--ivory-dim); font-size: 0.95rem; }
.card .num {
  font-family: var(--display);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

/* ---------- badges ---------- */
.badges {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.9rem;
}
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid rgba(143, 163, 126, 0.35);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  white-space: nowrap;
}

/* ---------- definition rows (ingredients, specs) ---------- */
.rows { border-top: 1px solid var(--hairline); margin-top: 2rem; }
.row {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) 2fr;
  gap: 0.6rem 2rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.row dt {
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--gold-light);
}
.row dd { color: var(--ivory-dim); font-size: 0.95rem; }
.row dd .latin {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ivory-faint);
  font-style: italic;
  margin-top: 0.25rem;
}
@media (max-width: 620px) {
  .row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------- "not in it" list ---------- */
.freelist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem 1.4rem;
  margin-top: 1.6rem;
}
.freelist li {
  color: var(--ivory-dim);
  font-size: 0.93rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.75;
}
.freelist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--sage);
}

/* ---------- forms ---------- */
.form { margin-top: 2.2rem; max-width: 620px; }
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 0.45rem;
}
.field .req { color: var(--gold); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(242, 237, 227, 0.05);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  color: var(--ivory);
  font-family: var(--body);
  font-weight: 300;
  font-size: 0.98rem;
  padding: 0.82rem 1rem;
  transition: border-color 0.18s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D9A441' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
.field select option { background: var(--surface); color: var(--ivory); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(242, 237, 227, 0.32); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(242, 237, 227, 0.32); }
.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1rem;
}
.hp { position: absolute; left: -9999px; }
.form-note { margin-top: 1rem; font-size: 0.78rem; color: var(--ivory-faint); }

/* inline notify form (hero) */
.notify {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.notify input {
  background: rgba(242, 237, 227, 0.06);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  color: var(--ivory);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.85rem 1.3rem;
  width: min(320px, 100%);
  flex: 1 1 220px;
}
.notify input::placeholder { color: rgba(242, 237, 227, 0.4); }

/* ---------- lifestyle gallery ---------------------------------------
   Three uniform 4:5 tiles per product. Same glass treatment as the
   panels so the photography sits in the page rather than on it. On
   narrow screens it becomes a snap-scroll strip: three tiles across a
   phone would be thumbnails, and stacking them would be endless.
   -------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.2rem;
}
.gallery figure { margin: 0; position: relative; }
.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(242, 237, 227, 0.11);
  box-shadow:
    0 24px 50px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(242, 237, 227, 0.07);
}
@media (max-width: 760px) {
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { scroll-snap-align: start; }
}

/* ---------- lifestyle block (home) ---------- */
.lifestyle {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .lifestyle { grid-template-columns: 1fr; } }
.lifestyle .shot { max-width: 420px; }

/* ---------- quiet email strip -------------------------------------
   The site is a showcase, not a capture funnel. The email option stays
   available but deliberately subordinate: no card, no gold heading, a
   ghost button rather than the primary one.
   ------------------------------------------------------------------ */
.notify-strip { padding-block: clamp(2.2rem, 4vw, 3rem); }
.notify-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2.5rem;
  flex-wrap: wrap;
}
.notify-strip p {
  max-width: 48ch;
  font-size: 0.9rem;
  color: var(--ivory-dim);
  margin: 0;
}
.notify-strip .notify {
  margin-top: 0;
  flex: 0 1 auto;
  width: min(430px, 100%);
  flex-wrap: nowrap;
}
.notify-strip .notify input {
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
@media (max-width: 560px) { .notify-strip .notify { flex-wrap: wrap; } }
.notify-strip .notify .btn { font-size: 0.88rem; padding: 0.7rem 1.25rem; }

/* ---------- callout ---------- */
.callout {
  background: linear-gradient(158deg, rgba(48, 60, 40, 0.74), rgba(28, 36, 25, 0.84));
  border: 1px solid rgba(242, 237, 227, 0.11);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 4vw, 2.8rem);
  box-shadow:
    0 26px 54px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(242, 237, 227, 0.07);
}

/* ---------- placeholder marker -----------------------------------
   Anything wrapped in .tbd is content Sam has to supply. Visibly
   flagged so it cannot ship by accident. Delete the class with the
   text when the real content lands. See PLACEHOLDERS.md.
   ------------------------------------------------------------------ */
.tbd {
  outline: 1px dashed var(--gold);
  outline-offset: 2px;
  background: rgba(217, 164, 65, 0.07);
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tbd::before {
  content: "TBD ";
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
  vertical-align: 0.15em;
}

/* ---------- footer ---------- */
.site-footer {
  flex: none;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(to bottom, transparent, rgba(4, 6, 4, 0.55));
  padding-block: 3rem 2.4rem;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem 2rem;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin-bottom: 0.9rem;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a {
  color: var(--ivory-dim);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-grid a:hover { color: var(--gold-light); }
.footer-brand p { font-size: 0.88rem; color: var(--ivory-dim); max-width: 32ch; margin-top: 0.9rem; }
.footer-bottom {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--ivory-faint);
}

/* ---------- hero (two column, product led) ---------- */
.section--flush { padding-block: 0; border-top: 0; }

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 2.8rem; }
}
.hero .seal { width: clamp(104px, 12vw, 132px); height: auto; margin-bottom: 1.4rem; }
.hero h1 { margin: 0; }

/* ---------- product shot ---------- */
.shot { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.shot::before {
  content: "";
  position: absolute;
  inset: -6% -8% -4%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(242, 206, 133, 0.34), transparent 64%),
    radial-gradient(ellipse at 50% 88%, rgba(217, 164, 65, 0.20), transparent 60%);
  filter: blur(44px);
  z-index: 0;
}
.shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(242, 237, 227, 0.12);
  box-shadow:
    0 40px 70px -34px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(242, 237, 227, 0.08);
}
.shot figcaption {
  position: relative;
  z-index: 1;
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

/* ---------- product spotlight (alternating image + copy) ---------- */
.spotlight {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.spotlight--flip { grid-template-columns: 1.2fr 0.8fr; }
.spotlight--flip .shot { order: 2; }
@media (max-width: 880px) {
  .spotlight, .spotlight--flip { grid-template-columns: 1fr; }
  .spotlight--flip .shot { order: 0; }
}
.spotlight .rows { margin-top: 1.8rem; }
.spotlight .shot { max-width: 340px; }

/* ---------- product cards ---------- */
.product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.product-card {
  background: linear-gradient(158deg, rgba(48, 60, 40, 0.78), rgba(28, 36, 25, 0.84));
  box-shadow:
    0 24px 50px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(242, 237, 227, 0.07);
  border: 1px solid rgba(242, 237, 227, 0.11);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.product-card:hover {
  border-color: rgba(217, 164, 65, 0.55);
  transform: translateY(-3px);
  color: inherit;
  box-shadow:
    0 32px 60px -28px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(242, 237, 227, 0.10);
}
/* height:auto is load-bearing. Without it the HTML height attribute applies as
   a presentational hint, both dimensions become definite, and aspect-ratio is
   ignored, so each card takes the image's full intrinsic height. */
.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.product-card .pc-body { padding: 1.5rem 1.5rem 1.7rem; }
.product-card h3 {
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 0.15rem;
}
.product-card .pc-kind {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}
.product-card p { color: var(--ivory-dim); font-size: 0.93rem; margin-top: 0.7rem; }
.product-card .pc-meta {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--ivory-faint);
  letter-spacing: 0.06em;
}

/* ---------- standard / principles strip ---------- */
.standard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem 2rem;
  margin-top: 2.4rem;
}
.standard div { border-top: 1px solid var(--hairline-2); padding-top: 1.1rem; }
.standard h3 {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
  min-height: 3em; /* two lines, so a wrapping heading does not offset its neighbours */
}
@media (max-width: 620px) { .standard h3 { min-height: 0; } }
.standard p { color: var(--ivory-dim); font-size: 0.93rem; }