/* ==========================================================================
   Base: reset, elements, typography, layout primitives, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--wt-med);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { max-width: 100%; display: block; height: auto; }
svg { fill: currentColor; }

/* A <picture> is a plain inline wrapper with no intrinsic size, so an <img>
   inside it cannot resolve height:100% and object-fit/object-position silently
   stop working. Any container meant to be filled by a photograph gets .fill,
   which stretches the wrapper as well as the image. */
.fill, .fill picture { display: block; width: 100%; height: 100%; }
.fill img { width: 100%; height: 100%; object-fit: cover; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
figure, blockquote, dl, dd { margin: 0; }

/* ------------------------------------------------------------- headings */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ff-head);
  color: var(--ink);
  text-wrap: balance;
}

/* Roboto Bold, as on the live site */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--wt-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--wt-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--wt-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-h3);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--wt-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--wt-semi); color: var(--ink); }

/* ---------------------------------------------------------------- links */

a { color: inherit; text-decoration: none; }

.lnk {
  color: var(--red-text);
  font-weight: var(--wt-semi);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
}
.lnk:hover { background-size: 100% 2px; }

.prose a:not(.btn) {
  color: var(--red-text);
  font-weight: var(--wt-med);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size var(--t) var(--ease);
}
.prose a:not(.btn):hover { background-size: 100% 2px; }

/* ---------------------------------------------------------------- focus */

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

.skip {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--red); color: #fff;
  padding: var(--s-3) var(--s-5); z-index: 999;
  font-size: var(--fs-sm); font-weight: var(--wt-semi);
  border-radius: var(--radius-sm);
  transition: top var(--t) var(--ease);
}
.skip:focus { top: var(--s-4); }

::selection { background: var(--red); color: #fff; }

/* ======================================================= layout primitives */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--max-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ------------------------------------------------------------- surfaces */

.on-white { background: var(--white); }
.on-grey { background: var(--slate-wash); }

/* Dark section, used sparingly: the closing CTA and the shop story. Keeps the
   site predominantly light the way the brand reads today. */
.on-dark {
  background: var(--charcoal);
  color: #D8DBDF;
  position: relative;
  isolation: isolate;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: #C2C7CD; }
.on-dark strong { color: #fff; }

/* ------------------------------------------------------------ typography */

/* Lead-in above a heading. Sentence case in bold red, the way the live site
   sets "A Spectrum of Light and Design", rather than tracked-out capitals. */
.eyebrow {
  display: block;
  font-family: var(--ff-text);
  font-size: 1rem;
  font-weight: var(--wt-black);
  letter-spacing: 0;
  text-transform: none;
  color: var(--red-text);
  margin: 0 0 var(--s-2);
  max-width: none;
}
.on-dark .eyebrow { color: #FF8A8E; }


.display {
  font-family: var(--ff-head);
  font-size: var(--fs-display);
  font-weight: var(--wt-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  max-width: 56ch;
}
.on-dark .lead { color: #C2C7CD; }

/* ------------------------------------------------------------------ prose */

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-7); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { max-width: var(--measure); }
.prose li { position: relative; padding-left: var(--s-6); margin-bottom: var(--s-3); }

/* gold check bullets, the accent already used on the live site */
.prose ul > li::before {
  content: '';
  position: absolute; left: 0; top: .48em;
  width: 14px; height: 9px;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n);
  position: absolute; left: 0; top: .18em;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: var(--wt-bold);
  line-height: 1;
}

.rule { height: var(--hair); background: var(--rule); border: 0; margin: 0; }

/* The diagonal band divider, carried over from the live site and cleaned up */
.louver-rule {
  height: 22px;
  background: var(--louver);
  opacity: .55;
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------- utility */

.u-center { text-align: center; }
.u-center p, .u-center .lead { margin-inline: auto; }
/* Centre the lead-in, button row and headings along with the text. */
.u-center .eyebrow { text-align: center; }
.u-center h1, .u-center h2, .u-center h3 { margin-inline: auto; }
.u-center .btn-row, .u-center .ticks { justify-content: center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-measure { max-width: var(--measure); }
.u-nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .drawer, .mobile-cta { display: none !important; }
  body { background: #fff; color: #000; }
}