/* ARTSTRIA page openings. The offer and its image share the first screen. */
:root {
  --r90-navy: #061f60;
  --r90-ink: #35425b;
  --r90-ivory: #f8f7f4;
  --r90-warm: #eee6d8;
  --r90-edge: #dfd5c3;
  --r90-max: 1360px;
  --r90-gutter: clamp(18px, 4.4vw, 72px);
  --r90-radius: 20px;
}
.r90-hero {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  width: min(100%, var(--r90-max));
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--r90-edge);
  border-radius: var(--r90-radius);
  background: var(--r90-warm);
  color: var(--r90-navy);
  text-align: start;
  overflow: clip;
  isolation: isolate;
}
.r90-hero--catalogue { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.r90-hero--catalogue .r90-media { min-height: min(28vw, 330px); }
.r90-hero--catalogue .r90-copy { padding: clamp(22px, 3.2vw, 44px); }
.r90-surface {
  width: min(var(--r90-max), calc(100% - 2 * var(--r90-gutter)));
  margin: clamp(15px, 2.5vw, 36px) auto clamp(17px, 2vw, 30px);
}
.r90-outer:has(> .r90-surface) { padding-block: 0 !important; background: none; }
.r90-hero .r90-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(23px, 4vw, 57px);
  gap: 14px;
  text-align: start;
}
.r90-hero .r90-copy > * { margin: 0; max-width: 100%; }
.r90-hero .r90-copy > h1 {
  color: var(--r90-navy);
  font: 500 clamp(2.05rem, 4.3vw, 4.55rem)/1.04 Atacama, Georgia, serif;
  letter-spacing: -.025em;
  text-align: start;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.r90-hero--article .r90-copy > h1 { font-size: clamp(1.95rem, 3.4vw, 3.55rem); }
.r90-hero .r90-copy > :is(.r90-lead, .lead, .lede, .r72-lead, .r81-pitch, .qb-lede, .hb-lead) {
  color: var(--r90-ink);
  font: 450 clamp(1rem, 1.35vw, 1.16rem)/1.58 Hellix, system-ui, sans-serif;
  max-width: 60ch;
  text-wrap: pretty;
}
.r90-copy > :is(.r90-kicker, .eyebrow, .section-label, .r81-eyebrow) {
  color: #6a5233;
  font: 650 .83rem/1.35 Hellix, system-ui, sans-serif;
  letter-spacing: .015em;
  text-transform: none;
}
.r90-copy > :is(.hero-sub, .pmeta, .qb-note) { font: 500 .82rem/1.5 Hellix, system-ui, sans-serif; color: var(--r90-ink); }
.r90-copy > :is(.hero-cta, .pg-cta, .hb-cta, .r81-actions, .r90-actions) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 3px 0 0;
}
.r90-copy .r90-actions a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.r90-copy a.r90-primary {
  color: #fff;
  background: var(--r90-navy);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 0 18px;
  border-radius: 999px;
  font: 650 .9rem/1.3 Hellix, system-ui, sans-serif;
}
.r90-copy a.r90-secondary {
  color: var(--r90-navy);
  font: 650 .9rem/1.3 Hellix, system-ui, sans-serif;
  text-underline-offset: .27em;
}
.r90-hero :is(a,button,summary,input,select):focus-visible { outline: 2px solid #956c32; outline-offset: 3px; }
.r90-hero .r90-media { min-width: 0; min-height: min(39vw, 500px); margin: 0; position: relative; background: #ded2bd; }
.r90-hero .r90-media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--r90-object, 50% 50%); }
.r90-media figcaption { position: absolute; inset: auto 11px 10px auto; padding: 4px 8px; border-radius: 5px; color: #fff; background: #131c32d9; font: 500 .73rem/1.35 Hellix, system-ui, sans-serif; }
.r90-shop .r89-shop-header:has(.r90-hero) { padding-block: clamp(16px, 2.6vw, 34px) 12px; }
.r90-hero .r72-search { width: 100%; }
.r90-hero .r72-search input { min-height: 44px; font-size: 1rem; }
.r90-hero .r72-search label { color: var(--r90-navy); }
.r90-hero .r90-copy > .r72-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.r90-hero .r90-copy > .r72-list a { min-height: 44px; display: inline-flex; align-items: center; }
.r90-hero .purpose { text-align: start; }
.r90-section-target { scroll-margin-top: 90px; }
.r90-digital .r81-lineup { padding-block-start: clamp(24px, 4vw, 54px); }
.r90-digital .r81-lineup .r81-intro { margin-block-end: clamp(21px, 3vw, 44px); }
.r90-product-fallback { width: 100%; height: 100%; min-height: min(33vw, 390px); object-fit: cover; }
.r90-detail-photo { position: relative; }
.r90-detail-photo > img { aspect-ratio: 4 / 3; object-fit: cover; }
.r90-detail-photo .r87-silhouette { display: none; }
.r90-detail-photo .r90-family-caption { color: var(--r90-ink); }
@media (max-width: 840px) {
  .r90-hero, .r90-hero--catalogue { grid-template-columns: minmax(0, 1fr); }
  .r90-hero .r90-copy { padding: clamp(20px, 5.1vw, 40px); gap: 11px; }
  .r90-hero .r90-media { min-height: 0; aspect-ratio: 16 / 10; }
  .r90-hero--catalogue .r90-media { aspect-ratio: 16 / 8; }
}
main > .r90-outer { padding-block: 0 !important; background: none; }
.r90-opening-container { max-width: none; }
.r90-opening-container.r90-surface { padding-inline: 0; }
.r90-hero.r90-hero--catalogue .r90-media { min-height: min(28vw, 330px); }
.r90-detail-photo .r87-silhouette {
  position: absolute;
  display: grid;
  top: 12px;
  inset-inline-end: 12px;
  width: clamp(58px, 9vw, 110px);
  border: 1px solid #061f6026;
  border-radius: 8px;
  background: #f8f7f4e8;
}
.r90-hero .r85-search { min-width: 0; width: 100%; }
.r90-copy > .r72-list { list-style: none; padding: 0; }
@media (max-width: 840px) {
  .r90-hero.r90-hero--catalogue .r90-media { min-height: 0; }
}
main > section.r90-digital { padding-block: 0 !important; }
.r90-digital + #r81-digital { padding-block-start: clamp(26px, 4.5vw, 62px); scroll-margin-top: 88px; }
.r90-digital + #r81-digital > .r81-wrap { width: min(var(--r90-max), calc(100% - 2 * var(--r90-gutter))); padding-inline: 0; margin-inline: auto; }
.r90-digital + #r81-digital .r81-intro h2 { font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.08; }
.r90-digital + #r81-digital .r81-intro .r81-eyebrow { margin-block-end: 14px; }
@media (max-width: 520px) {
  .r90-digital .r90-copy > h1 { font-size: clamp(1.9rem, 8.2vw, 2.55rem); }
  .r90-digital .r90-copy > .r90-actions { gap: 4px 10px; }
  .r90-digital .r90-actions a { font-size: .82rem; }
  .r90-digital .r90-actions a.r90-primary { padding-inline: 12px; }
}