/*
 * The home page under the banner, 13 October 2026.
 *
 * The owner, of the page as it stood: "apart from the poster screen the below screens look too bland and too
 * much white space ... luxury high quality should look like 50k usd website very premium".
 *
 * What was wrong, measured on his 2,000 px screen: body copy at 11 to 14 px and headings that stopped growing
 * at 52 px; four fifths of the page on one flat off-white; columns that held a heading and then nothing; and
 * the five ways into the catalogue shown as thumbnails with a label underneath.
 *
 * What this sheet does, and it is loaded last so that it can:
 *   1. one display size for the section headings, which grows with the screen, in Jost light;
 *   2. the ways into the catalogue as five tall doors, edge to edge, their names set on the photographs;
 *   3. two bands on a deep wine ground (the looks and their rail; the collections), so that silver is seen
 *      on dark as it is on the banner;
 *   4. the three price paths as three studio stills;
 *   5. a studio still in the column beside "Look closer." that held nothing;
 *   6. the film edge to edge.
 *
 * Every picture named here is one the page or a product page already shows, so it is already on the CDN.
 * Nothing here changes what a link does, what a control is called, or the order of the page.
 */

:root {
  --noir: #1d0a13;
  --noir-lift: #34101f;
  --ivory: #faf8f4;
  --ivory-soft: rgb(250 248 244 / .76);
  --ivory-line: rgb(250 248 244 / .22);
  --lux-ease: cubic-bezier(.22, 1, .36, 1);
  --lux-display: clamp(44px, 4.1vw, 92px);
  --lux-body: clamp(14px, .5vw + 7.5px, 18px);
  --lux-small: clamp(12px, .3vw + 8px, 14px);
}

/* ---- 1. Type that grows with the screen ---- */

@media (min-width: 1101px) {
  #main .shop-edit .section-heading h2,
  #main .collection-world .section-heading h2,
  #main .category-intro h2,
  #main .look-heading h2,
  #main .knowledge-head h2,
  #main .faq-head h2,
  #main .product-runway-heading h3,
  #main .celeste-selection .section-heading h3 {
    font-size: var(--lux-display);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.045em;
  }

  #main .section-heading { margin-bottom: clamp(24px, 2.2vw, 48px); }
  #main .section-heading > .text-link,
  #main .section-heading > .text-button,
  #main .category-intro .text-link,
  #main .brand-world-head .text-link,
  #main .real-product-intro .text-link,
  #main .knowledge-head .text-link,
  #main .faq-head .text-link { font-size: var(--lux-body); }

  #main .section-kicker { font-size: var(--lux-small); letter-spacing: .16em; }

  #main .brand-world-head p,
  #main .real-product-intro > p:not(.section-kicker),
  #main .knowledge-head > p:not(.section-kicker),
  #main .faq-head > p:not(.section-kicker),
  #main .knowledge-card p,
  #main .faq-answer p,
  #main .standard-intro,
  #main .standard-points dd { font-size: var(--lux-body); }
}

/* ---- 2. Five doors ---- */

@media (min-width: 768px) {
  #main .category-ribbon { padding-block: clamp(40px, 4vw, 84px) 0; gap: clamp(18px, 1.8vw, 34px); }
  #main .category-grid { gap: 3px; margin-inline: calc(50% - 50vw); }
  #main .category { position: relative; display: block; overflow: hidden; background: var(--noir); }
  #main .category-image,
  #main .category:nth-child(n) .category-image { aspect-ratio: 3 / 4; border-radius: 0; }
  #main .category-image img { transition: transform 1.6s var(--lux-ease); }
  #main .category:hover .category-image img,
  #main .category:focus-visible .category-image img { transform: scale(1.055); }
  #main .category::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(180deg, rgb(29 10 19 / 0), rgb(29 10 19 / .82));
    pointer-events: none;
  }
  #main .category-label {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    min-height: 0;
    padding: 0 clamp(14px, 1.5vw, 30px) clamp(14px, 1.4vw, 28px);
    align-items: end;
    border: 0;
    color: var(--ivory);
    font: 300 clamp(20px, 2.1vw, 44px)/1 Jost, sans-serif;
    letter-spacing: -.03em;
  }
  #main .category-label .icon {
    width: clamp(16px, 1.3vw, 26px);
    height: clamp(16px, 1.3vw, 26px);
    transition: transform .6s var(--lux-ease);
  }
  #main .category:hover .category-label .icon { transform: translateX(6px); }
}

/* ---- 3. The price paths, as three stills ---- */

@media (min-width: 768px) {
  #main .price-paths {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr));
    gap: 3px;
    align-items: stretch;
    margin-top: clamp(40px, 4vw, 84px);
    padding: 0;
    border: 0;
  }
  #main .price-paths p {
    align-self: end;
    padding: 0 24px 6px 0;
    color: var(--berry);
    font: 300 clamp(26px, 2.5vw, 54px)/1.04 Jost, sans-serif;
    letter-spacing: -.04em;
  }
  #main .price-paths p strong { display: block; font-weight: 300; color: var(--signature-ink); }
  #main .price-paths a,
  #main .price-paths a:nth-of-type(n) {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    min-height: clamp(170px, 15.5vw, 320px);
    padding: clamp(16px, 1.5vw, 30px);
    border: 0;
    overflow: hidden;
    background: var(--noir) 50% 50% / cover no-repeat;
    color: var(--ivory);
    font: 300 clamp(15px, 1.9vw, 38px)/1 Jost, sans-serif;
    letter-spacing: -.03em;
    transition: background-size 1.6s var(--lux-ease);
  }
  #main .price-paths a:nth-of-type(1) { background-image: linear-gradient(180deg, rgb(29 10 19 / 0) 40%, rgb(29 10 19 / .72)), url("https://aryamond-assets-cbabcjahhkd0fsbf.z02.azurefd.net/landing/media/revamp/pdp-slbr1002-red-rhodium-still-1-ar0241-840.webp"); background-position: 50% 100%; }
  #main .price-paths a:nth-of-type(2) { background-image: linear-gradient(180deg, rgb(29 10 19 / 0) 40%, rgb(29 10 19 / .72)), url("https://aryamond-assets-cbabcjahhkd0fsbf.z02.azurefd.net/landing/media/revamp/pdp-slpd1001-white-rhodium-still-1-ar0245-840.webp"); background-position: 50% 100%; }
  #main .price-paths a:nth-of-type(3) { background-image: linear-gradient(180deg, rgb(29 10 19 / 0) 40%, rgb(29 10 19 / .72)), url("https://aryamond-assets-cbabcjahhkd0fsbf.z02.azurefd.net/landing/media/revamp/pdp-sler1001-white-rhodium-still-1-ar0230-840.webp"); background-size: 100% 100%, 140% auto; background-position: 50% 50%, 50% 89%; }
  #main .price-paths a > .icon { display: block; width: clamp(18px, 1.4vw, 26px); height: clamp(18px, 1.4vw, 26px); transition: transform .6s var(--lux-ease); }
  #main .price-paths a:hover > .icon { transform: translateX(6px); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  #main .price-paths a > .icon { display: none; }
  #main .price-paths p { font-size: clamp(20px, 2.9vw, 30px); }
}

/* ---- 4. Two bands on deep wine: the looks with their rail, and the collections ---- */

#main .brand-world,
#main .collection-world,
#main .faq-edit {
  position: relative;
  z-index: 0;
  color: var(--ivory);
}
#main .brand-world::before,
#main .collection-world::before,
#main .faq-edit::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(70% 60% at 82% 0%, rgb(122 19 55 / .5), rgb(122 19 55 / 0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgb(52 16 31 / .9), rgb(52 16 31 / 0) 70%),
    var(--noir);
}
#main .brand-world { padding-block: clamp(56px, 5.5vw, 120px) clamp(64px, 6vw, 128px); }
#main .collection-world { padding-block: clamp(64px, 6vw, 128px); }

#main .brand-world h2,
#main .collection-world h2,
#main .faq-edit h2,
#main .faq-edit .faq-question,
#main .brand-world .brand-world-caption strong,
#main .collection-world .mood-card strong,
#main .brand-world .look-product,
#main .brand-world .look-product strong { color: var(--ivory); }

#main .brand-world .brand-world-head p,
#main .brand-world .look-product span,
#main .brand-world .look-product small,
#main .collection-world .mood-card small,
#main .collection-world .more-moods > span,
#main .faq-edit .faq-head > p:not(.section-kicker),
#main .faq-edit .faq-answer p { color: var(--ivory-soft); }

#main .brand-world .text-link,
#main .brand-world .brand-world-caption > span,
#main .collection-world .section-kicker,
#main .collection-world .text-button,
#main .faq-edit .section-kicker,
#main .faq-edit .text-link { color: var(--rose); }

#main .brand-world .look-tabs button { color: var(--ivory-soft); }
#main .brand-world .look-tabs button[aria-pressed="true"],
#main .brand-world .look-tabs button[aria-selected="true"],
#main .brand-world .look-tabs button.is-active { color: var(--ivory); }

#main .brand-world .brand-world-arrow,
#main .brand-world .look-pause {
  border-color: var(--ivory-line);
  color: var(--ivory);
  background: transparent;
}
#main .brand-world .brand-world-arrow:hover,
#main .brand-world .look-pause:hover { border-color: var(--ivory); }
#main .brand-world .brand-world-progress { background: var(--ivory-line); }
#main .brand-world .brand-world-progress-thumb { background: var(--ivory); }
#main .brand-world .look-product { border-color: var(--ivory-line); }
#main .brand-world .look-shop-button { background: var(--ivory); color: var(--berry); border-color: var(--ivory); }
#main .brand-world .look-shop-button:hover { background: var(--rose); border-color: var(--rose); }

#main .brand-world .shop-look { background: transparent; }
#main .brand-world .look-tabs button::after { background: var(--ivory); }
#main .brand-world .look-price { color: var(--ivory-soft); }
#main .brand-world .look-product-image { background: var(--noir-lift); }

#main .collection-world .mood-card { color: var(--ivory); }
#main .collection-world .more-moods,
#main .faq-edit .faq-item,
#main .faq-edit .faq-list { border-color: var(--ivory-line); }
#main .faq-edit .faq-mark,
#main .faq-edit .faq-item > summary { color: var(--ivory); }
#main .collection-world .more-moods a { color: var(--ivory); }
#main .collection-world .more-moods a:hover { color: var(--rose); }

#main .brand-world :focus-visible,
#main .collection-world :focus-visible,
#main .faq-edit :focus-visible { outline-color: var(--ivory); }
#main .faq-edit { padding-block: clamp(64px, 6vw, 128px); }

@media (min-width: 1101px) {
  #main .mood-grid { gap: 3px; }
  #main .mood-image { height: clamp(380px, 31vw, 700px); }
  #main .mood-card > span { padding-top: clamp(16px, 1.4vw, 28px); }
  #main .mood-card strong { font-size: clamp(30px, 2.5vw, 54px); font-weight: 300; letter-spacing: -.04em; }
  #main .mood-card small { font-size: var(--lux-body); }
  #main .more-moods { margin-top: clamp(28px, 3vw, 60px); }
  #main .more-moods > span { font-size: var(--lux-small); }
  #main .more-moods a { font-size: clamp(24px, 2vw, 42px); font-weight: 300; }
  #main .brand-world .brand-world-caption strong { font-size: clamp(19px, 1.25vw, 26px); font-weight: 300; }
  #main .brand-world .brand-world-caption > span { font-size: var(--lux-small); }
}

/* ---- 5. Look closer: the column that held nothing ---- */

@media (min-width: 1101px) {
  #main .real-product-feature { grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(36px, 3.6vw, 84px); align-items: stretch; }
  #main .real-product-intro { position: static; display: flex; flex-direction: column; padding-top: 0; }
  #main .real-product-intro h2 { font-size: clamp(72px, 7.6vw, 172px); font-weight: 300; line-height: .88; letter-spacing: -.055em; margin-bottom: clamp(20px, 1.8vw, 40px); }
  #main .real-product-intro::after {
    content: "";
    flex: 1 1 auto;
    min-height: 260px;
    margin-top: clamp(28px, 2.6vw, 56px);
    background: var(--noir) url("https://aryamond-assets-cbabcjahhkd0fsbf.z02.azurefd.net/landing/media/revamp/pdp-slfr1001-white-rhodium-still-2-ar0232-1080.webp") 50% 62% / cover no-repeat;
  }
}

/* ---- 6. The film, edge to edge ---- */

#main .motion-editorial { width: 100%; max-width: none; padding-bottom: 0; }

/* ---- 6b. The gift: its note hangs from the photograph's foot, so it covers neither earring at any width ---- */

/*
 * The note stood on the photograph, bottom left, 360px wide. The earrings begin half-way across the picture, so
 * on any frame narrower than about 800px the note lay over one of them (operator, 13 October 2026: "earrings
 * getting covered"). Now the frame is as tall as the photograph and the note together: the photograph keeps its
 * height, the note follows it and overlaps only its lowest strip, which is paper. The frame no longer clips, so
 * the photograph does not drift in it.
 */
#main .gift-portrait {
  --gift-photo: 520px;
  --gift-lap: 56px;
  height: auto;
  overflow: visible;
  background: none;
}
#main .gift-portrait > img {
  height: var(--gift-photo);
  object-position: 65% 50%;
  background: var(--rose);
  animation: none;
  transform: none;
}
#main .gift-portrait .gift-personal-note {
  position: relative;
  inset: auto;
  width: min(360px, calc(100% - 56px));
  max-width: none;
  margin: calc(-1 * var(--gift-lap)) 0 0 28px;
  box-shadow: 0 18px 40px rgb(122 19 55 / .14);
}

@media (max-width: 767px) {
  /* A wide, short frame would cut the picture's foot, where the earrings end: the photograph grows with the window. */
  #main .gift-portrait { --gift-photo: max(310px, 62vw); --gift-lap: 24px; }
  #main .gift-portrait .gift-personal-note { width: min(300px, calc(100% - 40px)); margin-left: 20px; }
}

/* ---- 7. The guides and the questions, at a size that can be read across a room ---- */

@media (min-width: 1101px) {
  #main .knowledge-card h3 { font-size: clamp(19px, 1.4vw, 30px); font-weight: 300; letter-spacing: -.02em; }
  #main .knowledge-eyebrow,
  #main .knowledge-go { font-size: var(--lux-small); }
  #main .faq-question { font: 300 clamp(18px, 1.3vw, 27px)/1.3 Jost, sans-serif; letter-spacing: -.015em; }
  #main .faq-item > summary { padding-block: clamp(16px, 1.3vw, 26px); }
}

/* ---- 8. Four colours: the four pictures at a size that fills their half ---- */

@media (min-width: 1101px) {
  #main .colour-scroll-scene .stone-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 3px; align-self: stretch; align-content: center; }
  #main .colour-scroll-scene .stone-tile > img { height: clamp(120px, calc((100svh - 470px) / 2), 330px); }
  /* A short screen shows a band of each picture, so the band is the one with the ring in it. */
  #main .colour-scroll-scene .stone-tile > img { object-position: 50% 74%; }
  #main .colour-scroll-scene .stone-tile[aria-pressed="true"] { transform: none; outline-offset: -2px; z-index: 1; }
  #main .colour-scroll-scene .stone-tile > span { font-size: var(--lux-small); }
  #main .colour-scroll-scene .stage-copy strong { font-size: clamp(30px, 2.6vw, 56px); font-weight: 300; letter-spacing: -.04em; }
  #main .colour-scroll-scene .stage-copy > span,
  #main .colour-scroll-scene .stage-bottom > p,
  #main .colour-scroll-scene .stage-hint,
  #main .colour-scroll-scene .colour-status,
  #main .colour-scroll-scene .section-heading > p { font-size: var(--lux-small); }
  #main .colour-scroll-scene .stage-bottom #stage-price { font-size: clamp(14px, 1.1vw, 22px); }
  #main .colour-scroll-scene .stage-bottom .button { font-size: var(--lux-small); }
}

/* ---- 9. Small type on a large screen: nothing under 12 px, and it grows from there ---- */

@media (min-width: 1500px) {
  #main .product-collection,
  #main .merch-badge,
  #main .listed-price,
  #main .discount-label,
  #main .product-rating,
  #main .product-detail-link,
  #main .card-view-button,
  #main .shopping-reassurance a,
  #main .real-product-story small,
  #main .illustration-story-card small,
  #main .illustration-story-card span,
  #main .product-runway-card small,
  #main .product-runway-controls p,
  #main .runway-end-card small,
  #main .runway-end-card span,
  #main .pairings-heading p,
  #main .pairing-piece span,
  #main .gift-personal-note span,
  #main .gift-personal-note small,
  #main .standard-visual figcaption,
  #main .tested-frames figcaption,
  #main .care-steps li > span,
  #main .care-steps li p,
  #main .care-note,
  #main .care-kit li,
  #main .care-kit-intro p,
  #main .materials-disclosure,
  #main .men-launch-intro,
  #main .men-launch-pair figcaption,
  #main .men-launch-detail > span { font-size: var(--lux-small); }

  #main .product-card h3,
  #main .product-price .sale-price,
  #main .product-runway-card strong,
  #main .sale-price,
  #main .look-tabs button,
  #main .look-product strong,
  #main .look-price,
  #main .pairing-piece strong,
  #main .standard-details p,
  #main .standard-details summary,
  #main .motion-editorial-copy p,
  #main .gift-story > p:not(.section-kicker),
  #main .button,
  #main .text-link,
  #main .text-button { font-size: var(--lux-body); }

  #main .real-product-story strong,
  #main .care-steps li h3,
  #main .care-kit h4 { font-size: clamp(17px, 1.05vw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  #main .category-image img,
  #main .category-label .icon,
  #main .price-paths a,
  #main .price-paths a > .icon { transition: none; }
  #main .category:hover .category-image img { transform: none; }
}