/* September 16 direction: cream, charcoal, burgundy and considered space. */
.line-arrow { width: 1.1em; height: 1.1em; flex: 0 0 1.1em; vertical-align: -.15em; }
.hero-copy > .eyebrow { font-family: Jost, sans-serif; font-size: 1rem; letter-spacing: .035em; }
.page-transition { transition-duration: 450ms; }
.logo-fragments .logo-part { animation-duration: 1150ms; }
.page-transition { overflow: hidden; }
.page-transition > img { width: 160px; height: 160px; }
.page-transition > img, .page-transition .logo-fragments { transition: opacity 450ms ease, scale 450ms ease; }
.page-transition.is-departing > img { visibility: hidden; }
.page-transition.is-departing .logo-part { animation-duration: 600ms; }
.page-transition.is-revealing > img, .page-transition.is-revealing .logo-fragments { opacity: 0; scale: 1.06; }
.page-transition.is-departing .part-0 { --x: -100px; --y: -100px; }
.page-transition.is-departing .part-1 { --x: 100px; --y: -100px; }
.page-transition.is-departing .part-2 { --x: -100px; --y: 100px; }
.page-transition.is-departing .part-3 { --x: 100px; --y: 100px; }
/* Activated only by a supplied, approved campaign film in campaign-media.json. */
.home-hero.has-campaign { padding-inline: 0; }
.has-campaign .hero-layout { position: relative; display: grid; grid-template-columns: 1fr; min-height: calc(100svh - var(--header-height,88px)); padding: 80px var(--gutter) 100px; isolation: isolate; }
.has-campaign .hero-copy { grid-area: 1 / 1; align-self: center; justify-self: center; text-align: center; color: #fff; z-index: 1; pointer-events: none; }
.has-campaign .hero-copy h1 { margin-inline: auto; }
.has-campaign .hero-copy .eyebrow { color: inherit; }
.has-campaign .hero-layout > .campaign-film { position: absolute; inset: 0; margin: 0; background: var(--charcoal); }
.has-campaign .campaign-film::after { content: ''; position: absolute; inset: 0; background: #0009; pointer-events: none; }
.has-campaign .campaign-film video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.has-campaign .campaign-film .film-toggle, .has-campaign .campaign-film .film-status { z-index: 2; }
.has-campaign .hero-cta { padding-inline: var(--gutter); }
.carousel-shell { position: relative; padding-inline: 28px; }
.carousel-shell .product-carousel { grid-auto-columns: calc((100% - 72px) / 3.3); scroll-padding-inline: 0; }
.carousel-shell .carousel-controls { position: absolute; inset: 26px -22px auto; justify-content: space-between; pointer-events: none; }
.carousel-shell .carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; pointer-events: auto; background: transparent; border-color: var(--muted); }
.carousel-shell .carousel-controls button:disabled { opacity: .3; }
.carousel-shell .carousel-controls button:not(:disabled):hover { color: var(--red); border-color: var(--red); }
[data-page=collection] .page-hero { background: var(--red); color: var(--paper); margin-bottom: 52px; }
[data-page=collection] .page-hero .eyebrow { color: #dac8b1; }
[data-page=collection] .page-hero .intro { color: var(--paper); }

/* Client care is useful editorial content, with legible, semantic data. */
[data-page=sizing-guide] .page-hero, [data-page=materials-guide] .page-hero { max-width: none; padding-block: 72px 54px; }
[data-page=sizing-guide] .page-hero .intro { max-width: 62ch; }
.care-lead { font-size: 1.5rem; }
.measure-section { padding-bottom: 64px; }
.measure-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 42px; }
.measure-methods h3 { font-size: 1.25rem; margin-block: 20px 16px; }
.measure-methods p { margin-bottom: 0; max-width: 38ch; }
.measure-number { color: var(--red); font-family: Cinzel, serif; font-size: 2.5rem; }
.size-chart-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; padding-block: 64px; background: #ede9e0; align-items: start; }
.chart-intro h2 { font-size: clamp(2rem,3vw,3rem); }
.chart-intro > p { max-width: 36ch; }
.measure-diagram { width: min(240px,100%); height: auto; display: block; margin: 28px 0; fill: none; stroke: var(--red); stroke-width: 1; }
.measure-diagram text { fill: var(--red); stroke: none; font: 9px Jost,sans-serif; letter-spacing: .6px; }
.size-chart-table { min-width: 0; }
.size-chart-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.size-chart-table caption { text-align: left; font-family: Cinzel,serif; font-size: 1.125rem; padding-bottom: 20px; }
.size-chart-table th, .size-chart-table td { padding: 12px 14px; border-bottom: 1px solid #c6bdae; text-align: center; }
.size-chart-table thead { background: var(--charcoal); color: var(--paper); }
.size-chart-table thead th { font-weight: 400; font-size: .875rem; }
.size-chart-table thead span { display: block; }
.size-chart-table tbody th { font-weight: 500; color: var(--red); }
.size-chart-table tbody tr:nth-child(even) { background: #f8f6f080; }
.chart-source { margin-top: 18px; }
.fit-before { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding-block: 72px; }
.fit-before h2 { font-size: clamp(2rem,3vw,3rem); }
.care-ending { background: var(--charcoal); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-block: 52px; }
.care-ending h2 { font-size: clamp(1.625rem,2.6vw,2.5rem); }
.care-ending p { margin-bottom: 0; max-width: 45ch; }
.care-ending .eyebrow { color: #d6c6ad; margin-bottom: 14px; }
.care-ending .button { border-color: #a99c86; white-space: nowrap; }
.care-ending :focus-visible { outline-color: #e5c989; }
.material-index { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-bottom: 28px; }
.material-index a { padding-block: 14px; font-size: .8125rem; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.material-chapter { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; padding-block: 58px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.material-chapter:nth-of-type(even) { background: #f0ede6; }
.material-chapter h2 { font-size: clamp(1.875rem,3.2vw,3rem); max-width: 16ch; }
.material-purity { font-size: 1.0625rem; max-width: 30ch; }
.material-sample { display: block; width: 68px; height: 68px; border-radius: 50%; margin-bottom: 28px; border: 1px solid #8b7a55; background: linear-gradient(135deg,#a88643,#f0d58c 42%,#bd9850 75%,#8b6c34); }
.sample-14k { background: linear-gradient(135deg,#a38d5c,#eddfb1 42%,#c6ac71 75%,#95804d); }
.sample-white, .sample-silver { border-color: #989b9b; background: linear-gradient(135deg,#aaaeb1,#f6f5f1 42%,#c3c5c4 75%,#8b8f90); }
.sample-rose { border-color: #b17d6b; background: linear-gradient(135deg,#bd8976,#f1cec0 42%,#d2a08b 75%,#ab7461); }
.sample-vermeil { box-shadow: inset 0 0 0 3px #dfded7; }
.material-chapter .prose > p:first-child { margin-top: 0; }
.material-reasons { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 4px; }
.material-reasons h3 { font-size: .875rem; margin-block: 24px 10px; }
.material-reasons p { font-size: 1rem; }
.material-comparison { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; padding-block: 64px; background: var(--charcoal); color: var(--paper); }
.material-comparison .eyebrow { color: #d6c6ad; }
.material-comparison h2 { font-size: clamp(2rem,3.2vw,3rem); }
.material-wear { padding-block: 72px; }
.material-wear h2 { max-width: 24ch; font-size: clamp(1.875rem,3.2vw,3rem); }
.material-wear > p { max-width: 66ch; }
.policy-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: start; padding-block: 64px 72px; }
.policy-layout h1 { font-size: clamp(2.25rem,4.3vw,4rem); margin-block: 22px 30px; }
.policy-layout nav { display: flex; flex-direction: column; align-items: start; gap: 8px; margin-bottom: 24px; }
.policy-layout nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.policy-copy > section { border-top: 1px solid var(--line); padding-block: 30px; }
.policy-copy > section:first-child { border-top: 0; padding-top: 4px; }
.policy-copy h2 { font-size: 1.375rem; margin-block: 0 18px; }
.policy-copy p { max-width: 52ch; }
.policy-copy .text-link { margin-block: 12px 0; }

/* The Archive can grow around real campaign photographs as they arrive. */
[data-page=archive] .page-hero { max-width: none; border-bottom: 1px solid var(--line); padding-block: 64px 48px; }
[data-page=archive] .page-hero h1 { max-width: 22ch; }
[data-page=archive] .archive-entry { position: relative; padding-block: 72px 88px; grid-template-columns: 1.1fr .9fr; align-items: center; background: #efebe2; }
[data-page=archive] .archive-video { justify-self: end; max-width: 380px; box-shadow: 16px 20px 0 #dfd6c6; transform: rotate(-1.2deg); }
[data-page=archive] .archive-caption { padding-bottom: 40px; }
[data-page=archive] .archive-caption > .eyebrow { color: var(--red); }

@media (max-width:1050px) {
  .carousel-shell .product-carousel { grid-auto-columns: calc((100% - 40px) / 2.25); }
  .measure-methods { gap: 24px; }
  .size-chart-section, .material-chapter, .material-comparison, .policy-layout { gap: 36px; }
}
@media (max-width:700px) {
  .carousel-shell { padding-inline: 22px; }
  .carousel-shell .product-carousel { grid-auto-columns: 88%; }
  .carousel-shell .carousel-controls { inset-inline: -22px; }
  .measure-methods, .size-chart-section, .fit-before, .material-chapter, .material-comparison, .policy-layout { grid-template-columns: 1fr; }
  .measure-methods article + article { border-top: 1px solid var(--line); padding-top: 24px; }
  .measure-methods p { max-width: none; }
  .size-chart-table th, .size-chart-table td { padding: 12px 6px; }
  .size-chart-table thead th { font-size: .75rem; overflow-wrap: anywhere; }
  .care-ending { flex-direction: column; align-items: start; gap: 28px; }
  .care-ending .button { white-space: normal; }
  .policy-layout { padding-top: 40px; }
  .policy-layout nav { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .material-chapter, .size-chart-section, .fit-before { padding-block: 44px; }
  .material-chapter header { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; }
  .material-chapter header > :not(.material-sample) { grid-column: 1; }
  .material-sample { grid-column: 2; grid-row: 1 / 4; width: 46px; height: 46px; }
  [data-page=archive] .archive-entry { grid-template-columns: 1fr; padding-block: 44px; gap: 40px; }
  [data-page=archive] .archive-video { justify-self: center; width: calc(100% - 28px); max-width: 330px; }
  [data-page=archive] .archive-caption { padding-bottom: 0; }
}
@media (prefers-reduced-motion:reduce) {
  .page-transition { transition: none; }
  .page-transition > img, .page-transition .logo-fragments { transition: none; }
  .logo-fragments .logo-part { animation: none; }
}