/* ==========================================================================
   Premier Studio — NFC product pages
   Mobile-first. Every visitor arrives by tapping a tag beside the real piece.
   Tokens lifted verbatim from the Premier Studio Design System.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

@font-face {
  font-family: 'Chatillon';
  src: url('../fonts/Chatillon-Regular.woff2') format('woff2'),
       url('../fonts/Chatillon-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Gold foil — sampled from the 2022 GOLD PS monogram */
  --gold-900:#6E4A21; --gold-700:#9A6B33; --gold-500:#C08A4A;
  --gold-400:#D2A468; --gold-300:#DDB88A; --gold-200:#EBD3AE; --gold-100:#F7EBD7;

  /* Warm ink neutrals */
  --ink-900:#221D16; --ink-700:#4A4239; --ink-500:#6F6558;
  --ink-300:#A79B8B; --ink-200:#CFC5B7; --ink-100:#E8E1D6;

  /* Paper */
  --paper:#FFFFFF; --ivory:#FAF6F0; --linen:#F3EDE3;

  --text-heading:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-on-dark:#F7F3EC;
  --surface-page:var(--paper); --surface-tint:var(--ivory); --surface-dark:var(--ink-900);
  --accent:var(--gold-500); --accent-strong:var(--gold-700); --accent-soft:var(--gold-100);
  --border-subtle:var(--ink-100); --border-strong:var(--ink-200); --border-accent:var(--gold-300);
  --focus-ring:0 0 0 3px rgba(192,138,74,.35);

  --font-display:'Chatillon','Jost',sans-serif;
  --font-body:'Jost',sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,serif;

  --tracking-caps:.18em;
  --leading-body:1.65;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:2px; --radius-md:4px; --radius-pill:999px;
  --content-max:720px;

  --shadow-card:0 1px 2px rgba(34,29,22,.06),0 8px 24px rgba(34,29,22,.08);
  --shadow-lift:0 2px 6px rgba(34,29,22,.10),0 16px 40px rgba(34,29,22,.14);
  --overlay-protect:linear-gradient(180deg,rgba(34,29,22,0) 30%,rgba(34,29,22,.78) 100%);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-standard:280ms;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-heading);
  line-height: 1.15;
  margin: 0;
}
a { color: var(--accent-strong); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* --- shell ---------------------------------------------------------------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--ink-900); }
/* Full width, natural ratio — the whole image is visible, never cropped.
   Height follows from the width/height attributes on the <img>. */
.hero__img {
  width: 100%;
  height: auto;
}
/* Title overlays the top of the image. Several heroes have a pale wall up
   there, so the scrim runs top-down to keep the type legible. */
.hero__veil {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 62%;
  background: linear-gradient(180deg,
              rgba(34,29,22,.82) 0%,
              rgba(34,29,22,.48) 45%,
              rgba(34,29,22,0) 100%);
  pointer-events: none;
}
.hero__text {
  position: absolute;
  inset-inline: 0;
  top: 0;
  padding: var(--space-6) var(--space-5) var(--space-7);
  text-align: center;
}
.hero__eyebrow {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0 0 var(--space-3);
}
.hero__title {
  font-size: clamp(38px, 12vw, 60px);
  color: #fff;
  letter-spacing: .02em;
  margin: 0;
}
.hero__rule {
  width: 52px; height: 1px;
  background: var(--gold-400);
  margin: var(--space-4) auto 0;
  border: 0;
}

/* --- masthead ------------------------------------------------------------- */
.masthead {
  background: var(--ink-900);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}
.masthead img { height: 26px; width: auto; margin-inline: auto; opacity: .95; }

/* --- sections ------------------------------------------------------------- */
.section { padding: var(--space-7) 0; }
.section--tint { background: var(--surface-tint); }

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 6vw, 27px);
  line-height: 1.4;
  color: var(--ink-900);
  text-align: center;
  margin: 0;
}

.lede { font-size: 17px; color: var(--text-body); margin: 0 0 var(--space-4); }
.lede:last-child { margin-bottom: 0; }

.section__label {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 var(--space-5);
  text-align: center;
}

/* --- feature bullets ------------------------------------------------------ */
.features { list-style: none; margin: 0; padding: 0; }
.features li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: 16px;
}
.features li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border: 1px solid var(--gold-500);
  transform: rotate(45deg);
}
.features li:last-child { margin-bottom: 0; }

/* --- price list ----------------------------------------------------------- */
.sizes { border-top: 1px solid var(--border-subtle); margin: 0; }
.size {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.size__label { font-size: 16px; color: var(--ink-900); }
.size__metric { display: block; font-size: 13px; color: var(--text-muted); }
/* Prices stay in the body face, not Chatillon — figures need to be read at a
   glance, and the display face's numerals are hard work at this size. */
.size__price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--accent-strong);
  white-space: nowrap;
}
/* Sets list their individual canvases on a second line */
.size--set { flex-wrap: wrap; }
.size__parts-label {
  flex: 0 0 100%;
  margin: var(--space-4) 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-700);
}
.size__parts {
  flex: 0 0 100%;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-4);
  border-left: 1px solid var(--border-accent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.size__parts li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-1);
}
.size__parts li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px;
  background: var(--gold-400);
  border-radius: 50%;
}
.size__parts li:last-child { margin-bottom: 0; }
.size__price--poa {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sizes__note {
  font-size: 13px;
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  text-align: center;
}

/* --- call to action ------------------------------------------------------- */
.cta { background: var(--ink-900); color: var(--text-on-dark); text-align: center; }
.cta .section__label { color: var(--gold-300); }
.cta h2 { color: #fff; font-size: clamp(26px, 7vw, 34px); margin-bottom: var(--space-4); }
.cta p { color: rgba(247,243,236,.8); margin: 0 auto var(--space-6); max-width: 40ch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                 /* comfortable one-handed tap target */
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: background var(--dur-standard) var(--ease-standard),
              color var(--dur-standard) var(--ease-standard);
}
.btn--gold { background: var(--gold-500); color: #fff; }
.btn--gold:hover { background: var(--gold-400); color: #fff; }
.btn--ghost {
  border: 1px solid rgba(247,243,236,.45);
  color: var(--text-on-dark);
  background: transparent;
}
.btn--ghost:hover { background: rgba(247,243,236,.1); color: #fff; }
.btn + .btn { margin-top: var(--space-3); }
.btn-stack { display: flex; flex-direction: column; align-items: stretch; }

/* --- footer --------------------------------------------------------------- */
.footer {
  background: var(--ink-900);
  border-top: 1px solid rgba(247,243,236,.12);
  padding: var(--space-6) var(--space-5) var(--space-7);
  text-align: center;
}
.footer img { height: 34px; width: auto; margin: 0 auto var(--space-4); opacity: .85; }
.footer p { font-size: 12px; color: rgba(247,243,236,.55); margin: 0; }
.footer a { color: rgba(247,243,236,.75); }

.back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-4) 0;
}

/* --- room size switcher ---------------------------------------------------
   The same room shot at each size, swapped with :checked. No JavaScript, so a
   cold tap on an NFC tag shows the right size immediately with no flash.
   Supports up to 6 sizes; add more nth-of-type rules if a product needs it. */
.roomswitch { position: relative; }
.roomswitch__in {                      /* focusable for keyboards, invisible to eyes */
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.roomswitch__stage {
  position: relative;
  overflow: hidden;
  background: var(--linen);
}
.roomswitch__stage > picture {
  display: block;
  opacity: 0;
  transition: opacity var(--dur-standard) var(--ease-standard);
}
/* The first shot stays in flow so it sets the stage height; the rest overlay it. */
.roomswitch__stage > picture:first-child { opacity: 1; }
.roomswitch__stage > picture:first-child img { width: 100%; height: auto; }
.roomswitch__stage > picture:not(:first-child) { position: absolute; inset: 0; }
.roomswitch__stage > picture:not(:first-child) img { width: 100%; height: 100%; object-fit: cover; }

.roomswitch__in:nth-of-type(n+2):checked ~ .roomswitch__stage > picture:first-child { opacity: 0; }
.roomswitch__in:nth-of-type(2):checked ~ .roomswitch__stage > picture:nth-child(2),
.roomswitch__in:nth-of-type(3):checked ~ .roomswitch__stage > picture:nth-child(3),
.roomswitch__in:nth-of-type(4):checked ~ .roomswitch__stage > picture:nth-child(4),
.roomswitch__in:nth-of-type(5):checked ~ .roomswitch__stage > picture:nth-child(5),
.roomswitch__in:nth-of-type(6):checked ~ .roomswitch__stage > picture:nth-child(6) { opacity: 1; }

.roomswitch__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.roomswitch__tabs > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;                    /* one-handed tap target */
  min-width: 78px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);          /* matches the price caption below it */
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-standard) var(--ease-standard),
              border-color var(--dur-standard) var(--ease-standard),
              color var(--dur-standard) var(--ease-standard);
}
.roomswitch__in:nth-of-type(1):checked ~ .roomswitch__tabs > label:nth-child(1),
.roomswitch__in:nth-of-type(2):checked ~ .roomswitch__tabs > label:nth-child(2),
.roomswitch__in:nth-of-type(3):checked ~ .roomswitch__tabs > label:nth-child(3),
.roomswitch__in:nth-of-type(4):checked ~ .roomswitch__tabs > label:nth-child(4),
.roomswitch__in:nth-of-type(5):checked ~ .roomswitch__tabs > label:nth-child(5),
.roomswitch__in:nth-of-type(6):checked ~ .roomswitch__tabs > label:nth-child(6) {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #fff;
}
.roomswitch__in:nth-of-type(1):focus-visible ~ .roomswitch__tabs > label:nth-child(1),
.roomswitch__in:nth-of-type(2):focus-visible ~ .roomswitch__tabs > label:nth-child(2),
.roomswitch__in:nth-of-type(3):focus-visible ~ .roomswitch__tabs > label:nth-child(3),
.roomswitch__in:nth-of-type(4):focus-visible ~ .roomswitch__tabs > label:nth-child(4),
.roomswitch__in:nth-of-type(5):focus-visible ~ .roomswitch__tabs > label:nth-child(5),
.roomswitch__in:nth-of-type(6):focus-visible ~ .roomswitch__tabs > label:nth-child(6) { box-shadow: var(--focus-ring); }

.roomswitch__caps { margin: var(--space-4) 0 0; text-align: center; }
.roomswitch__cap { display: none; font-size: 14px; color: var(--text-muted); }
.roomswitch__cap:first-child { display: block; }
.roomswitch__in:nth-of-type(n+2):checked ~ .roomswitch__caps > .roomswitch__cap:first-child { display: none; }
.roomswitch__in:nth-of-type(2):checked ~ .roomswitch__caps > .roomswitch__cap:nth-child(2),
.roomswitch__in:nth-of-type(3):checked ~ .roomswitch__caps > .roomswitch__cap:nth-child(3),
.roomswitch__in:nth-of-type(4):checked ~ .roomswitch__caps > .roomswitch__cap:nth-child(4),
.roomswitch__in:nth-of-type(5):checked ~ .roomswitch__caps > .roomswitch__cap:nth-child(5),
.roomswitch__in:nth-of-type(6):checked ~ .roomswitch__caps > .roomswitch__cap:nth-child(6) { display: block; }
.roomswitch__cap i { font-style: normal; color: var(--ink-200); margin: 0 var(--space-2); }
.roomswitch__cap b {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--accent-strong);
}
.roomswitch__note {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-300);
}

/* --- larger screens ------------------------------------------------------- */
@media (min-width: 700px) {
  /* Keep the uncropped image at a sane size on desktop rather than letting a
     portrait hero run ~2000px tall. Constrain the hero, don't crop it. */
  .hero { max-width: 520px; margin-inline: auto; }
  .section { padding: var(--space-8) 0; }
  .btn-stack { flex-direction: row; justify-content: center; gap: var(--space-3); }
  .btn + .btn { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}