/* The one stylesheet pages load: the build inlines each import in order. */
/* Outfit, one variable file for every weight, Latin characters only
   (Spanish and English). License: /fonts/OFL.c676351bf8.txt. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/outfit-latin.6c18d579fd.woff2") format("woff2");
}
/* Design tokens taken from the original site's global kit. Every colour,
   font, size and space in the site comes from here. */
:root {
  --color-ink: #1c1c1c;
  --color-text: #494949;
  --color-muted: #656565;
  --color-footer-text: #919191;
  --color-line: #cfcfcf;
  --color-surface: #fafafa;
  --color-white: #fff;
  --color-black: #000;
  --color-rose: #e5beb5;
  --color-rose-bright: #fbc;
  --color-blush: #f9f3f1;
  /* The rose darkened just enough for controls to reach 3:1 on white. */
  --color-rose-strong: #a8746a;
  /* The original's coral (#ff947c) darkened to reach 3:1 on white, for
     large text. */
  --color-coral: #d9654b;
  /* The original's even veils of the ink colour over its large photos;
     the brand story's is darker, as its title sits mid-photo. */
  --veil-hero: rgb(28 28 28 / 30%);
  --veil-story: rgb(0 0 0 / 55%);
  --veil-banner: rgb(28 28 28 / 20%);

  --font-family: "Outfit", system-ui, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --size-small: 0.8125rem;
  --size-label: 0.875rem;
  --size-button: 0.9375rem;
  --size-body: 1rem;
  --size-nav: 1.0625rem;
  --size-card: 1.3125rem;
  --size-intro: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --size-hero: clamp(1.25rem, 1.05rem + 0.8vw, 1.5625rem);
  --size-lead: clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem);
  --size-section: clamp(1.75rem, 1.2rem + 2.3vw, 2.375rem);
  --line-tight: 1.2;
  --line-text: 1.5;
  --tracking-button: 0.1875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 5rem;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --width-text: 62.5rem;
  --gap-grid: 0.625rem;
  --transition: 200ms ease;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-hover: 700ms;
  --duration-slow: 900ms;
  --duration-reveal: 900ms;
}
/* Reset, typography and the accessibility defaults every page shares. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The page fills the screen at least, so a short page keeps its footer
   at the bottom instead of leaving white below it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-text);
}

h1,
h2,
h3,
p,
ul,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
}

ul {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

/* A cut-out jewel photo (tools/retouch.py): the jewel whole and centred; its
   white multiplies with what lies behind, so the photo takes the colour of
   its card. A jewel cut off by its photo meets that edge of its box instead
   of floating cut in the middle. Each component sets the margin around the
   jewel as --cutout-margin, so the edges below always win over it. */
img[data-cutout] {
  padding: var(--cutout-margin, 0);
  object-fit: contain;
  mix-blend-mode: multiply;
}

img[data-cutout~="top"] {
  object-position: top;
  padding-top: 0;
}

img[data-cutout~="bottom"] {
  object-position: bottom;
  padding-bottom: 0;
}

img[data-cutout~="left"] {
  object-position: left;
  padding-left: 0;
}

img[data-cutout~="right"] {
  object-position: right;
  padding-right: 0;
}

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

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Full width even when centred with auto margins, which in the body's
   column would otherwise shrink it to its content. */
main {
  flex: 1;
  width: 100%;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* A name that draws its underline from left to right when its link is
   pointed at or focused (the link sets the trigger). */
.draw-line {
  padding-bottom: 0.2em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--duration-hover) var(--ease-out), color var(--transition);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Buttons: solid dark, and outlined over a photo. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8125rem;
  padding: 0.9375rem 2.5rem;
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--size-button);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
}

.button:hover {
  background: var(--color-black);
}

.button--outline {
  min-height: 2.25rem;
  padding: 0.625rem 0.9375rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-size: var(--size-label);
}

@media (max-width: 47.9375rem) {
  .button {
    padding-inline: 1.75rem;
    font-size: var(--size-small);
  }
}
/* Site header: links left, logo centred, brand menu, WhatsApp and language
   right. It is white with black text; on a page whose body is .has-hero
   (the home page, the brand story) it lies clear over the hero and turns
   white, as in the original, once the page scrolls,
   while the pointer or the keyboard focus is on it, or while a menu in it
   is open. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 8px 25px rgb(0 0 0 / 6%);
  transition: background-color 350ms ease, color 300ms ease, box-shadow 350ms ease;
}

.site-header.is-still,
.site-header.is-still * {
  transition: none;
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 2rem 1.25rem;
  transition: padding 350ms ease;
}

/* The logo grows with the screen, as in the original: 13.4% of the width
   inside the header's side padding. */
.site-header__logo img {
  width: calc((100vw - 2.5rem) * 0.134);
}

.site-header__logo-light {
  display: none;
}

.site-header__cta:hover {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

.has-hero .site-header {
  position: fixed;
  inset: 0 0 auto;
}

.has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}

.has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) .site-header__bar {
  padding-block: 2.1875rem;
}

.has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) .site-header__logo-light {
  display: block;
}

.has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) .site-header__logo-dark {
  display: none;
}

.has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) .site-header__cta:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-black);
}

.site-nav__toggle {
  display: none;
}

.site-nav__list {
  display: flex;
}

.site-nav__list a,
.site-dropdown__button {
  display: block;
  padding: 0.8125rem;
  font-size: var(--size-nav);
  line-height: 1.25rem;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  box-shadow: inset 0 -2px var(--color-rose);
}

.site-nav__mobile-only {
  display: none;
}

.site-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* The brand menu opens as a panel hanging from the header's lower edge,
   with the rose line on top and its text aligned with "Ororosa". A clear
   strip above the panel keeps it open while the pointer travels down. */
.site-dropdown {
  position: relative;
}

.site-dropdown__button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: none;
  cursor: pointer;
}

.site-dropdown__button svg {
  transition: transform var(--transition);
}

.site-dropdown__list {
  position: absolute;
  top: calc(100% + 2rem);
  left: -0.6875rem;
  min-width: 15rem;
  padding: var(--space-3) 0;
  border-top: 2px solid var(--color-rose);
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.375rem);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.site-dropdown__list::before {
  content: "";
  position: absolute;
  inset: -2.125rem 0 100%;
}

.site-dropdown:not(.is-dismissed):hover .site-dropdown__list,
.site-dropdown.is-open .site-dropdown__list {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.site-dropdown:not(.is-dismissed):hover .site-dropdown__button svg,
.site-dropdown.is-open .site-dropdown__button svg {
  transform: rotate(180deg);
}

.site-dropdown__list a {
  display: block;
  padding: 0.875rem var(--space-5);
  font-size: var(--size-button);
  letter-spacing: 0.02em;
  text-decoration: underline transparent;
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--transition);
}

.site-dropdown__list a:hover,
.site-dropdown__list a[aria-current="page"] {
  text-decoration-color: var(--color-rose);
}

/* The language menu: a globe and the current language's code; its panel
   opens towards the inside of the page. */
.site-lang {
  gap: 0.375rem;
  padding-inline: var(--space-1);
  font-size: var(--size-button);
  letter-spacing: 0.05em;
}

.site-dropdown--lang .site-dropdown__list {
  right: -0.6875rem;
  left: auto;
  min-width: 10rem;
}

.site-dropdown__list a[aria-current="true"] {
  text-decoration-color: var(--color-rose);
}

/* Tablets: one row, the logo on the left and the three controls on the
   right, as in the original. */
@media (max-width: 64rem) {
  .site-header__bar {
    display: flex;
    gap: 0.625rem;
  }

  .site-header__logo {
    order: -1;
    margin: 0 auto 0 3rem;
  }

  .site-header__logo img {
    width: calc((100vw - 2.5rem) * 0.21);
  }

  .site-header__tools {
    gap: 0.625rem;
  }

  .site-header__cta {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .site-dropdown--brand {
    display: none;
  }

  .site-nav__toggle {
    display: grid;
    place-items: center;
    width: 2.0625rem;
    height: 2.0625rem;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgb(0 0 0 / 5%);
    color: var(--color-rose-strong);
    cursor: pointer;
  }

  .has-hero .site-header:not(.is-scrolled, :hover, :focus-within, :has([aria-expanded="true"])) .site-nav__toggle {
    color: var(--color-rose);
  }

  /* Three bars that turn into a cross while the menu is open. */
  .site-nav__bars {
    display: grid;
    gap: 4px;
    width: 1.125rem;
  }

  .site-nav__bars span {
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 300ms var(--ease-out), opacity 200ms ease;
  }

  [aria-expanded="true"] .site-nav__bars span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  [aria-expanded="true"] .site-nav__bars span:nth-child(2) {
    opacity: 0;
  }

  [aria-expanded="true"] .site-nav__bars span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The menu: a white panel that drops from the header's lower edge. */
  .site-nav__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-5);
    border-top: 2px solid var(--color-rose);
    background: var(--color-white);
    color: var(--color-ink);
    box-shadow: 0 18px 40px rgb(0 0 0 / 8%);
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out),
      display 300ms allow-discrete;
  }

  .site-nav__toggle[aria-expanded="true"] + .site-nav__list {
    display: flex;
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .site-nav__toggle[aria-expanded="true"] + .site-nav__list {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .site-nav__list li + li {
    border-top: 1px solid rgb(0 0 0 / 8%);
  }

  .site-nav__list a {
    padding: 1rem 0;
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .site-nav__list a:hover,
  .site-nav__list a[aria-current="page"] {
    box-shadow: none;
  }

  .site-nav__list a[aria-current="page"] {
    text-decoration: underline 2px var(--color-rose);
    text-underline-offset: 0.45em;
  }

  .site-nav__mobile-only {
    display: block;
  }

}

/* Phones: the logo centred on its own row; under it, the menu and the
   language take the same width against each edge, so the button sits
   exactly in the centre, under the logo. */
@media (max-width: 47.9375rem) {
  .site-header__bar {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1.3125rem;
  }

  .site-nav,
  .site-dropdown--lang {
    width: 3rem;
  }

  .site-dropdown--lang {
    display: flex;
    justify-content: flex-end;
  }

  .site-lang {
    padding-inline: 0;
  }

  .site-header__logo {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    margin: 0;
  }

  .site-header__logo img {
    width: calc((100vw - 2.5rem) * 0.42);
  }

  .site-header__tools {
    display: contents;
  }

  .site-header__cta {
    padding-inline: 0.9375rem;
    letter-spacing: 0.125em;
  }
}

@media (max-width: 22.5rem) {
  .site-nav,
  .site-dropdown--lang {
    width: 2.25rem;
  }

  .site-header__cta {
    padding-inline: var(--space-2);
    letter-spacing: 0.05em;
  }

  .site-lang__code {
    display: none;
  }
}
/* Site footer: four columns of equal width (brand, the house's pages, the
   information pages, social), every heading on one line and every list
   aligned under its heading; then a bar with the rights and the credit. */
.site-footer {
  padding: 3.75rem var(--gutter) 0;
  background: var(--color-ink);
  color: var(--color-surface);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 75rem;
  margin-inline: auto;
}

.site-footer__brand img {
  width: 15rem;
  margin-bottom: var(--space-5);
}

.site-footer__brand p {
  max-width: 18rem;
  color: var(--color-footer-text);
  font-size: var(--size-label);
  line-height: 1.6;
}

.site-footer h2 {
  margin-bottom: var(--space-4);
  color: var(--color-surface);
  font-size: 1.25rem;
  line-height: 1;
}

.site-footer__column li + li {
  margin-top: var(--space-2);
}

.site-footer__column a {
  display: inline-block;
  padding-block: 0.1875rem;
  font-size: var(--size-button);
  font-weight: var(--weight-light);
  line-height: 1.25rem;
  transition: color var(--transition);
}

.site-footer__column a:hover,
.site-footer__column a[aria-current="page"] {
  color: var(--color-rose-bright);
}

.site-footer__column a[aria-current="page"] {
  box-shadow: inset 0 -1px var(--color-rose-bright);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
}

.site-footer__social li + li {
  margin-top: 0;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  transition: border-color var(--transition), color var(--transition);
}

.site-footer__social a:hover {
  border-color: var(--color-rose-bright);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  max-width: 75rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-5) 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
  color: var(--color-footer-text);
  font-size: 0.75rem;
}

.site-footer__bar a {
  color: var(--color-surface);
  letter-spacing: 0.08em;
  transition: color var(--transition);
}

.site-footer__bar a:hover {
  color: var(--color-rose-bright);
}

@media (max-width: 64rem) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375rem) {
  .site-footer {
    padding-top: var(--space-6);
  }

  .site-footer__columns {
    gap: var(--space-6) var(--space-4);
  }

  .site-footer__brand,
  .site-footer__columns > :last-child {
    grid-column: 1 / -1;
    text-align: center;
  }

  .site-footer__brand img {
    width: 13rem;
    margin-inline: auto;
  }

  .site-footer__brand p {
    max-width: 22rem;
    margin-inline: auto;
  }

  .site-footer__social {
    justify-content: center;
  }

  .site-footer__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* Full-screen photo with the page title at its foot. */
.hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 100svh;
  padding: 0 var(--gutter) 5rem;
  background: var(--color-ink);
  color: var(--color-surface);
  text-align: center;
  isolation: isolate;
}

.hero__image,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  background: var(--veil-hero);
}

.hero h1 {
  color: inherit;
  font-size: var(--size-hero);
  text-transform: uppercase;
}

.hero p {
  max-width: 62rem;
  margin: var(--space-4) auto 0;
  font-size: var(--size-intro);
  font-weight: var(--weight-light);
}

@media (max-width: 47.9375rem) {
  .hero {
    padding-bottom: 3rem;
  }
}

/* The brand story: a larger title in the middle of a darker photo. */
.hero--story {
  align-content: center;
  padding-top: 5rem;
}

.hero--story::after {
  background: var(--veil-story);
}

.hero--story h1 {
  max-width: 45rem;
  margin-inline: auto;
  font-size: clamp(1.6875rem, 0.9rem + 3.4vw, 4.25rem);
  line-height: 1.1;
}

.hero--story p {
  max-width: 45rem;
  font-size: var(--size-body);
}

@media (max-width: 47.9375rem) {
  .hero--story {
    align-content: end;
    padding-bottom: 6.25rem;
  }
}
/* Centred text sections: a small label over a large sentence, or a
   section title over an introduction, with optional buttons. Spacing is
   the original's: 80px above and below, 40px under a heading, 30px above
   the buttons. */
.statement {
  max-width: calc(var(--width-text) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
  text-align: center;
}

.statement--narrow {
  max-width: calc(53.625rem + 2 * var(--gutter));
}

.statement--wide {
  max-width: none;
}

.statement--flush-top {
  padding-top: 0;
}

.statement--flush-bottom {
  padding-bottom: 0;
}

.statement--roomy-bottom {
  padding-bottom: 5.625rem;
}

.statement--closing {
  padding-bottom: 6.25rem;
}

.statement__label {
  color: var(--color-ink);
  font-size: var(--size-label);
  font-weight: var(--weight-light);
  line-height: 1;
  text-transform: uppercase;
}

.statement__lead {
  margin-top: var(--space-6);
  color: var(--color-ink);
  font-size: var(--size-lead);
  line-height: 1;
}

.statement__title {
  font-size: var(--size-section);
  line-height: 1;
  text-transform: uppercase;
}

.statement__intro {
  max-width: 47.5rem;
  margin: var(--space-6) auto 0;
  color: var(--color-ink);
  font-size: var(--size-intro);
  font-weight: var(--weight-light);
}

.statement--wide .statement__intro {
  max-width: 64vw;
}

.statement__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) 13rem;
  margin-top: 1.875rem;
}

@media (max-width: 47.9375rem) {
  .statement__lead {
    line-height: 1.15;
  }

  .statement--wide .statement__intro {
    max-width: none;
  }

  .statement__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
}
/* A row that scrolls sideways and snaps to each item. It works by touch,
   trackpad and keyboard alone; site.js adds the arrows, the counter and the
   dots. --per-view is how many items show at once, --gap the space between. */
.carousel {
  position: relative;
}

.carousel__track {
  --per-view: 1;
  --gap: var(--gap-grid);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track > * {
  scroll-snap-align: start;
}

.carousel__arrow {
  position: absolute;
  top: var(--arrow-top, 50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--color-rose-strong);
  cursor: pointer;
  transform: translateY(-50%);
}

.carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel__arrow--prev {
  left: -2.75rem;
}

.carousel__arrow--next {
  right: -2.75rem;
}

.carousel__counter {
  color: var(--color-black);
  font-size: var(--size-button);
  font-variant-numeric: tabular-nums;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.carousel__dots button {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel__dots button::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-footer-text);
}

.carousel__dots button[aria-current="true"]::before {
  background: var(--color-black);
}

.carousel__dots[hidden] {
  display: none;
}
/* The four collections: tall photos with their name below. A row on wide
   screens, a sideways row on phones. */
.categories {
  padding-top: 1.875rem;
}

.categories .carousel__track {
  --per-view: 4;
}

/* On hover the card fills with blush, the photo included (multiply). */
.category {
  display: block;
  padding-bottom: 1.875rem;
  isolation: isolate;
  transition: background-color var(--duration-hover) var(--ease-out);
}

.category:is(:hover, :focus-visible) {
  background: var(--color-blush);
}

/* Margins in proportion to the card, so a wide ring and a tall necklace
   carry the same visual weight. */
.category img {
  width: 100%;
  height: 28.8125rem;
  --cutout-margin: 18% 16%;
  transition: transform var(--duration-hover) var(--ease-out);
}

.category h2 {
  width: fit-content;
  margin: 1.25rem 1.25rem 0;
  color: var(--color-text);
  font-size: 1.1875rem;
  line-height: 1;
}

.category:is(:hover, :focus-visible) h2 {
  color: var(--color-ink);
  background-size: 100% 1px;
}

@media (hover: hover) {
  .category:hover img {
    transform: scale(1.05);
  }
}

@media (max-width: 64rem) {
  .categories .carousel__track {
    --per-view: 2.15;
  }
}

@media (max-width: 47.9375rem) {
  .categories .carousel__track {
    --per-view: 1.15;
  }

  .category img {
    height: 20.5rem;
  }
}
/* A jewel in a list: photo, name, short description and price. The whole
   card is the link. */
.selection {
  padding: var(--space-7) 2.5rem 6.5rem;
}

.selection__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.selection__head h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.1875rem);
  line-height: 1;
}

.selection .carousel {
  --arrow-top: 13.125rem;
}

.selection .carousel__arrow {
  width: 2.5rem;
}

.selection .carousel__arrow--prev {
  left: -2.5rem;
}

.selection .carousel__arrow--next {
  right: -2.5rem;
}

.selection .carousel__track {
  --per-view: 3;
  --gap: 1.25rem;
}

/* On hover the card fills with blush, the photo included (multiply). */
.jewel-card {
  display: block;
  padding-bottom: 1.25rem;
  color: var(--color-ink);
  isolation: isolate;
  transition: background-color var(--duration-hover) var(--ease-out);
}

.jewel-card:is(:hover, :focus-visible) {
  background: var(--color-blush);
}

.jewel-card :is(h2, h3, p) {
  margin-inline: 1.25rem;
}

/* A worn photo fills its card; a cut-out jewel sits whole on it, its white
   taking the card's colour. */
.jewel-card img {
  width: 100%;
  height: 20rem;
}

/* A worn photo has no signature under it; its card keeps the signature's
   room (its line and the name's margin, which this margin absorbs), so the
   names in a row line up. */
.jewel-card img:not([data-cutout]) {
  margin-bottom: 2.25rem;
  object-fit: cover;
}

.jewel-card img[data-cutout] {
  --cutout-margin: 2.5rem 14%;
  transition: transform var(--duration-hover) var(--ease-out);
}

/* The house's signature under each photo, as in the original (there it was
   part of the photo; here it is text, so the photos can be cleaned). */
.jewel-card__brand {
  display: block;
  margin: 0.375rem 1.25rem 0 auto;
  width: fit-content;
  color: var(--color-muted);
  font-size: 0.5625rem;
  line-height: 1rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.jewel-card :is(h2, h3) {
  width: fit-content;
  margin-top: 0.875rem;
  font-size: var(--size-card);
  line-height: 1;
}

.jewel-card p {
  margin-top: var(--space-2);
  color: var(--color-text);
  font-size: var(--size-small);
  font-weight: var(--weight-light);
}

.jewel-card__price {
  font-size: var(--size-label);
}

.jewel-card:is(:hover, :focus-visible) :is(h2, h3) {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .jewel-card:hover img[data-cutout] {
    transform: scale(1.05);
  }
}

@media (max-width: 64rem) {
  .selection .carousel__track {
    --per-view: 2;
  }
}

@media (max-width: 47.9375rem) {
  .selection .carousel__track {
    --per-view: 1;
  }

}
/* A collection's jewels: its title over a grid of cards, as many columns as
   fit (four on desktops, one on phones), with the original's spacing. */
.catalog {
  max-width: calc(75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 4.375rem var(--gutter) 7.25rem;
}

.catalog h1 {
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: var(--weight-light);
  line-height: 1;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.875rem;
  margin-top: 3.75rem;
}

.catalog .jewel-card img {
  height: auto;
  aspect-ratio: 5 / 6;
}
/* A jewel's page: its photos beside its name, description and price, with
   the invitation to design it at the foot of the column, as in the
   original; one column on phones. */
.jewel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.25rem;
  max-width: calc(75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 4.5rem var(--gutter) 0;
}

/* Without JavaScript a thumbnail jumps to its photo: it stops below the
   header. */
.jewel__gallery li {
  scroll-margin-top: 8rem;
}

/* Every photo whole, in a square. */
.jewel__gallery img {
  --cutout-margin: 6%;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.carousel__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.carousel__thumbs a {
  width: 6rem;
  border: 1px solid transparent;
  transition: border-color var(--transition);
}

.carousel__thumbs a:hover,
.carousel__thumbs a[aria-current="true"] {
  border-color: var(--color-rose);
}

.carousel__thumbs img {
  --cutout-margin: 0.375rem;
}

.carousel__thumbs img:not([data-cutout]) {
  object-fit: cover;
}

.jewel__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2rem;
}

.jewel__info h1 {
  color: var(--color-ink);
  font-size: 1.5625rem;
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
}

.jewel__summary {
  margin-top: var(--space-5);
}

.jewel__price {
  margin-top: var(--space-2);
  color: var(--color-ink);
  font-size: 1.125rem;
}

.jewel__note {
  max-width: 26rem;
  margin-top: 1.875rem;
  padding-left: 1.5rem;
  border-left: 0.3125rem solid var(--color-rose);
  font-size: var(--size-small);
}

.jewel__story {
  margin-top: auto;
  padding-top: var(--space-6);
}

.jewel__cta {
  gap: 0.625rem;
  margin-top: 1.875rem;
  padding: 0.75rem 1.5rem;
  letter-spacing: normal;
  text-transform: none;
}

/* The next jewels of the collection: white cards with a soft shadow. */
.related {
  max-width: calc(75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 6.25rem var(--gutter) 7.5rem;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.875rem;
}

.related .jewel-card {
  height: 100%;
  box-shadow: 0 0 0.625rem rgb(0 0 0 / 8%);
}

.related .jewel-card img {
  height: auto;
  aspect-ratio: 10 / 7;
  --cutout-margin: 1.25rem 14%;
}

.related .jewel-card h3 {
  font-size: var(--size-body);
  line-height: var(--line-tight);
}

@media (max-width: 64rem) {
  .related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375rem) {
  .jewel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-6);
  }

  .jewel__info {
    padding-top: 0;
  }

  .jewel__cta {
    align-self: center;
  }

  .related {
    padding-top: var(--space-7);
  }

  .related__grid {
    gap: 0.625rem;
  }
}
/* Photo blocks: a pair side by side, a full-width banner that links to the
   collection, and the clients' gallery. */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid);
  padding-bottom: var(--space-7);
}

.photo-pair img {
  width: 100%;
  height: 35rem;
  object-fit: cover;
}


.banner {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 100svh;
  padding-bottom: 3.75rem;
  overflow: hidden;
  color: var(--color-surface);
  isolation: isolate;
}

.banner__image,
.banner::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.banner::after {
  content: "";
  background: var(--veil-banner);
}

.banner__label {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.banner:is(:hover, :focus-visible) .banner__label {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .banner:hover .banner__image img {
    transform: scale(1.04);
  }

  .gallery li:hover img {
    transform: scale(1.04);
  }
}

.gallery {
  padding-bottom: var(--space-4);
}

.gallery .carousel__track {
  --per-view: 4;
}

.gallery li {
  overflow: hidden;
}

/* As tall as three quarters of the screen, as in the original. */
.gallery img {
  width: 100%;
  height: 75svh;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

@media (max-width: 64rem) {
  .gallery .carousel__track {
    --per-view: 2;
  }
}

@media (max-width: 47.9375rem) {
  .photo-pair {
    grid-template-columns: 1fr;
  }

  .photo-pair img {
    height: 18.75rem;
  }

  .banner {
    min-height: 31.25rem;
    padding-bottom: 3rem;
  }

  .gallery .carousel__track {
    --per-view: 1;
  }
}
/* Four reasons to choose the house: icon, title and a sentence each. */
.features {
  padding: var(--space-7) var(--gutter) 8.6875rem;
}

.features .carousel__track {
  --per-view: 4;
  --gap: 1.25rem;
  max-width: 75rem;
  margin-inline: auto;
}

.feature {
  padding: 1.875rem var(--space-4) 0;
  text-align: center;
}

.feature img {
  width: 3.75rem;
  margin: 0 auto 1.75rem;
  transition: transform var(--duration-hover) var(--ease-out);
}

@media (hover: hover) {
  .feature:hover img {
    transform: translateY(-0.375rem);
  }
}

.feature h3 {
  color: var(--color-black);
  font-size: var(--size-body);
}

.feature p {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--size-small);
  font-weight: var(--weight-light);
}

@media (max-width: 64rem) {
  .features .carousel__track {
    --per-view: 2;
  }
}

@media (max-width: 47.9375rem) {
  .features .carousel__track {
    --per-view: 1;
  }

  .feature {
    padding-inline: var(--space-5);
  }
}
/* The brand story: text beside a photo (or after it, --reverse), a lone
   portrait, a quote, and the mission and vision beside a video. */
.story,
.purpose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-6);
  max-width: calc(73.75rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 6.25rem var(--gutter) 0;
}

.story--reverse .story__text {
  order: 1;
  padding-top: 6.25rem;
}

.story h2 {
  font-size: var(--size-section);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  text-transform: uppercase;
}

.story__text p {
  color: var(--color-ink);
  font-weight: var(--weight-light);
  line-height: 1.75;
}

.story h2 + p {
  margin-top: var(--space-3);
}

.story img {
  width: 100%;
}

.story-portrait {
  width: min(33.75rem, 100% - 2 * var(--gutter));
  margin: 6.25rem auto 0;
}

.story-quote {
  max-width: calc(var(--width-text) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 7.5rem var(--gutter) 1.25rem;
  color: var(--color-coral);
  font-size: var(--size-lead);
  font-weight: var(--weight-light);
  letter-spacing: -0.05em;
  text-align: center;
}

.purpose {
  grid-template-columns: minmax(0, 31rem) minmax(0, 18.5rem);
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding-bottom: 6.25rem;
}

.purpose h2 {
  color: var(--color-black);
  font-size: var(--size-card);
}

.purpose h2 ~ h2 {
  margin-top: 4.5rem;
}

.purpose p {
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-weight: var(--weight-light);
  line-height: 1.5;
}

.purpose video {
  width: 100%;
  height: auto;
  background: var(--color-ink);
}

@media (max-width: 47.9375rem) {
  .story,
  .purpose {
    grid-template-columns: 1fr;
    padding-top: var(--space-7);
  }

  .story--reverse .story__text {
    padding-top: 0;
  }

  .story-portrait {
    margin-top: var(--space-7);
  }

  .story-quote {
    padding-top: var(--space-7);
  }

  .purpose {
    gap: var(--space-6);
    padding-bottom: var(--space-7);
  }

  .purpose h2 ~ h2 {
    margin-top: var(--space-6);
  }

  .purpose video {
    width: min(18.5rem, 100%);
    margin-inline: auto;
  }
}
/* Long legal text: one readable centred column. */
.legal {
  max-width: calc(46rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
  overflow-wrap: break-word;
}

.legal h1 {
  font-size: var(--size-section);
}

.legal h2 {
  margin-top: var(--space-6);
  font-size: var(--size-card);
}

.legal h1 + *,
.legal h2 + * {
  margin-top: var(--space-5);
}

.legal p,
.legal ul {
  line-height: 1.7;
}

.legal p + p,
.legal p + ul,
.legal ul + p,
.legal ul + ul {
  margin-top: var(--space-4);
}

.legal ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.legal li + li {
  margin-top: var(--space-2);
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal strong {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}
/* Motion: blocks marked data-reveal rise into view as the page scrolls to
   them, tied to their place on the screen by the browser (a scroll-driven
   animation), not to a clock: whatever is on screen when a page opens or
   reloads is already in place on the first frame, and no script measures
   anything. data-reveal="stagger" does it for each child, one slightly
   after another, while the row comes in. A browser without scroll-driven
   animations, or a visitor who asks for reduced motion, sees every block
   in place. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal]:not([data-reveal="stagger"]) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    /* The row's own place drives its children, so a carousel's items rise
       with the page, not with their row's sideways scroll. */
    [data-reveal="stagger"] {
      view-timeline: --reveal-row block;
    }

    [data-reveal="stagger"] > * {
      --offset: 0%;
      animation: rise linear both;
      animation-timeline: --reveal-row;
      animation-range: entry var(--offset) entry calc(50% + var(--offset));
    }

    [data-reveal="stagger"] > :nth-child(2) {
      --offset: 8%;
    }

    [data-reveal="stagger"] > :nth-child(3) {
      --offset: 16%;
    }

    [data-reveal="stagger"] > :nth-child(n + 4) {
      --offset: 24%;
    }
  }
}