/* The only type sizes in the site: 20 / 32 / 48 / 80px at a 16px root.
   Small screens reuse the same scale. rem respects the reader's font setting.
   Layout styles intentionally contain no independent font-size declarations. */
:root {
  --type-body: 1.25rem;
  --type-subheading: 2rem;
  --type-heading: 3rem;
  --type-display: 5rem;
  --leading-body: 1.75;
  --space-section: 8rem;
  --muted: #526078;
}
[hidden] { display: none !important; }
.hero-brand-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 650px; gap: 1.5rem; padding: 3rem; background: #dce8fc; color: #2859b5; }
.hero-brand-art .wordmark { font-size: var(--type-heading); z-index: 1; }
.hero-brand-art > p { z-index: 1; text-align: center; }
.brand-orbit { position: absolute; width: 34rem; aspect-ratio: 1; border: 1px solid #6495ed; border-radius: 50%; transform: translate(15%, 30%); }
.story.story-text-only { grid-template-columns: 1fr; }
.catalog-service-note { padding: 2rem; background: var(--pale); color: var(--ink); }
#retry-catalog { margin-top: 1.5rem; }
.site-edition { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.5rem; color: var(--blue-ink); }
.site-edition a { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 760px) { .hero-brand-art { min-height: 360px; padding: 2rem var(--gutter); } }

body { font-size: var(--type-body); line-height: var(--leading-body); }
html { scroll-padding-top: calc(var(--header-height, 100px) + 1rem); }
small { font-size: inherit; }
p, a, button, summary, legend, small, span, h1, h2, h3 { overflow-wrap: anywhere; }
main, section, article, nav, fieldset { min-width: 0; }
h1 { font-size: var(--type-display); }
h2 { font-size: var(--type-heading); }
h3 { font-size: var(--type-subheading); }
.wordmark { font-size: var(--type-subheading); line-height: 1.2; }
.hero h1 { font-size: var(--type-display); line-height: 1.12; margin: 2rem 0; white-space: normal; }
.section-heading h2,
.product-copy h3,
.collection-preview-intro h3,
.story-copy h2,
.gifting h2,
.intro-statement,
.closing > p:nth-child(2),
.gift-dialog h2 {
  font-size: var(--type-heading);
  line-height: 1.25;
}
.ritual-caption h3,
.gift-result h3,
.collection-row .collection-name {
  font-size: var(--type-subheading);
  line-height: 1.35;
}
.button span, .text-link span, summary > span:last-child,
.zoom-icon, .dialog-close, .gallery-navigation button {
  font-size: var(--type-subheading);
  line-height: 1;
}

/* All reading copy, navigation, labels and notes use the same 20px size.
   Weight, color and spacing establish hierarchy instead of smaller text. */
.hero-description,
.intro-description,
.product-description,
.product-details details p,
.collection-preview-intro > p:last-child,
.collection-row-content,
.collection-row-content small,
.story-copy > p:not(.eyebrow),
.section-aside,
.ritual-caption p,
.gifting-copy > p:not(.eyebrow),
.gift-intro,
.gift-result p,
.gift-disclaimer,
.footer-top p {
  line-height: var(--leading-body);
}
.eyebrow, .product-type { line-height: 1.5; letter-spacing: .055em; }
.hero-footnote, .image-label, .status-tag, .size-selector legend,
.size-note, .availability-note, .photo-caption, .story-signature,
.gifting-note, .footer-bottom, .gallery-controls, .collection-mood,
.gift-result > span { line-height: 1.6; }
.hero-description, .intro-description, .product-description, .size-note,
.availability-note, .product-details details p,
.collection-row-content, .collection-row-content small,
.story-copy > p:not(.eyebrow), .section-aside, .ritual-caption p,
.gift-intro, .gift-result p, .gift-disclaimer { color: var(--muted); }
.product-description { max-width: 48ch; margin-block: 2rem; }
.story-copy > p:not(.eyebrow) { max-width: 48ch; margin-bottom: 1.75rem; }
.product-details details p { padding: .5rem 0 2rem; }
.collection-row-content { padding: .25rem 0 2rem 2rem; }
.collection-row-content small { margin-top: 1.5rem; }

/* Reading rhythm: 35px body leading, 24–32px between text groups,
   128px between major sections on desktop and 80px on small screens. */
.intro { padding-block: var(--space-section); }
.intro-statement { margin: 2rem auto; }
.collection { padding-top: 1.5rem; padding-bottom: var(--space-section); }
.section-heading { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; }
.section-heading .eyebrow { margin-bottom: 1.5rem; }
.product-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.product-copy { padding-top: 1rem; }
.product-copy h3 { margin: 2rem 0 1rem; }
.product-kicker { flex-wrap: wrap; gap: 1rem 1.5rem; }
.status-tag { padding: .5rem .75rem; white-space: normal; }
.collection-preview { gap: 4rem; margin-top: 5rem; padding-top: 5rem; }
.collection-preview-intro h3 { margin-block: 1.5rem 2rem; }
.story-copy { padding: 5rem 4rem; }
.story-copy h2 { margin-block: 2rem; }
.story-signature { flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.signature-line { flex-shrink: 0; }
.rituals { padding-block: var(--space-section); }
.ritual-grid { gap: 2.5rem; }
.ritual-caption { padding-top: 1.75rem; gap: 1rem; }
.ritual-caption h3 { margin-bottom: 1rem; }
.ritual-number { padding-top: .5rem; }
.gifting-copy { padding: 5rem 4rem; }
.gifting h2 { margin-block: 2rem; }
.gifting .button { margin-top: 2rem; }
.gifting-note { margin-top: 1.5rem; opacity: 1; }
.closing { padding-block: var(--space-section); }
.closing > p:nth-child(2) { max-width: 24ch; margin: 2rem auto; }
.footer { padding-top: 4rem; padding-bottom: 2rem; }
.footer-top { flex-wrap: wrap; gap: 2rem 3rem; padding-bottom: 3rem; }
.footer-top p { margin: 0 auto 0 0; }
.footer-top nav { flex-wrap: wrap; gap: 1rem 2rem; }
.footer-bottom { flex-wrap: wrap; padding-top: 2rem; gap: 1.5rem 2rem; }

/* Navigation and controls need room for the larger labels. */
.header { height: auto; min-height: 100px; padding-block: 1.25rem; }
.desktop-nav { flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; line-height: 1.5; }
.desktop-nav a { padding-block: .75rem; }
.header-right { flex-shrink: 0; }
.announcement { min-height: 3.5rem; padding-block: .75rem; gap: 1rem 2rem; flex-wrap: wrap; line-height: 1.5; letter-spacing: .02em; }
.announcement-note { opacity: 1; }
.button, .hero .button {
  min-width: 0; max-width: 100%;
  min-height: 4rem;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
  line-height: 1.5;
}
.button span { flex-shrink: 0; }
.hero .button { margin-top: 2rem; }
.text-link { min-height: 3.5rem; padding-block: .5rem; white-space: normal; line-height: 1.5; }
.gallery-link { min-height: 3.5rem; line-height: 1.5; }
.footer-top nav a, .hero-footnote a { display: inline-flex; align-items: center; min-height: 3.5rem; }
summary, .product-details summary { min-height: 4.5rem; padding-block: 1.25rem; line-height: 1.5; gap: 1.5rem; }
.size-selector { min-inline-size: 0; gap: 1rem; }
.size-selector legend { flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.size-selector button { min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; min-height: 6rem; padding: 1rem; line-height: 1.5; }
.size-note { min-height: 0; margin-block: 1.5rem 2rem; }
.product-button { margin-top: 0; }
.availability-note { margin-block: 1.5rem 2rem; text-align: left; }
.thumbnail-row { flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.thumbnail { flex: 0 0 64px; height: 80px; }
.gallery-link { flex-shrink: 0; }
.zoom-icon { width: 48px; height: 48px; }
.collection-row summary { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .75rem 1rem; padding-block: 1.75rem; }
.collection-row .collection-dot { grid-column: 1; grid-row: 1; margin: 0; }
.collection-row .collection-name { grid-column: 2; grid-row: 1; }
.collection-row .collection-mood { display: block; grid-column: 2; grid-row: 2; margin: 0; }
.collection-row summary > span:last-child { grid-column: 3; grid-row: 1 / 3; }

.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-copy { min-width: 0; padding-top: 5rem; padding-bottom: 3rem; }
.hero-footnote { flex-wrap: wrap; align-items: center; padding-top: 3rem; gap: 1rem 2rem; }
.hero-visual { aspect-ratio: auto; min-height: 650px; }
.hero-visual > img { position: absolute; inset: 0; }

/* Captions have opaque backgrounds to keep their contrast predictable. */
.image-label {
  left: 1.5rem; right: 6rem; bottom: 1.5rem;
  width: fit-content; max-width: calc(100% - 7.5rem);
  padding: 1rem 1.25rem; gap: .5rem;
  color: #fff; background: #18345f; text-shadow: none;
}
.image-label span { min-width: 0; overflow-wrap: anywhere; }
.image-label span:first-child { letter-spacing: .055em; }
.image-index { right: 1.5rem; bottom: 1.5rem; padding: .5rem; background: #18345f; }
.photo-caption { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; width: fit-content; max-width: calc(100% - 3rem); padding: 1rem 1.25rem; background: #edf3ff; color: #182b45; letter-spacing: .055em; overflow-wrap: anywhere; }

.skip-link { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; transform: none; }
.skip-link:focus { width: auto; height: auto; padding: 1rem 1.5rem; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
.menu-toggle, .dialog-close, .gallery-navigation button { width: 3rem; height: 3rem; min-width: 48px; min-height: 48px; flex-shrink: 0; }
.menu-toggle { padding: 10px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #182b45; outline-offset: 4px; box-shadow: 0 0 0 3px #fff; }

/* Dialogs share the same four sizes and remain scrollable. */
.gallery-controls { flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; }
.gallery-controls > div:first-child { flex: 1 1 18rem; min-width: 0; }
.gallery-controls p:last-child { max-width: none; margin-top: .75rem; }
.gallery-dialog { max-width: calc(100vw - 24px); }
.gallery-navigation { gap: 1rem; flex-wrap: wrap; max-width: 100%; white-space: normal; }
#gallery-count { white-space: nowrap; }
.gallery-stage { height: min(60dvh, 740px); min-height: 160px; }
.gift-dialog { overflow: auto; width: min(760px, calc(100vw - 40px)); max-width: calc(100vw - 40px); padding: 4rem 2.5rem 2.5rem; }
.gift-dialog h2 { margin-block: 1.5rem; }
.gift-options { gap: 1rem; margin-block: 2rem; }
.gift-options button { min-height: 4rem; padding: 1rem 1.25rem; line-height: 1.5; }
.gift-result { padding: 2rem; }
.gift-result > span { letter-spacing: .055em; }
.gift-result h3 { margin-block: 1.5rem; }
.gift-disclaimer { margin-top: 2rem; }

@media (max-width: 1100px) {
  .header { min-height: 88px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
  .wordmark { min-width: 0; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { max-height: calc(100dvh - 110px); overflow: auto; padding: 1.5rem var(--gutter); }
  .mobile-nav a { min-height: 4rem; padding-block: 1rem; gap: 1rem; line-height: 1.5; }
  .mobile-locale { margin-top: 1.5rem; color: var(--muted); }
  .hero h1 { font-size: var(--type-heading); }
  .hero-copy { padding-top: 4rem; }
  .product-feature { gap: 2.5rem; }
  .story-copy, .gifting-copy { padding: 4rem 2.5rem; }
  .ritual-grid { gap: 2rem; }
  .ritual-caption { flex-direction: column; gap: .5rem; }
}

@media (max-width: 900px) {
  :root { --space-section: 5rem; }
  .product-feature, .collection-preview, .story, .gifting { grid-template-columns: 1fr; }
  .product-feature { gap: 3rem; }
  .product-gallery { max-width: 700px; }
  .product-main-image { max-height: 875px; }
  .product-main-image > img { object-fit: contain; }
  .product-copy { padding-top: 0; }
  .collection-preview { gap: 3rem; }
  .collection-preview-intro h3 br { display: none; }
  .story-image { max-height: 700px; }
  .story-copy, .gifting-copy { padding: 4rem var(--gutter); }
  .story-copy > p:not(.eyebrow) { max-width: 48ch; }
  .ritual-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .ritual-caption { flex-direction: row; gap: 1rem; }
  .ritual-image { aspect-ratio: 1/1; max-height: 680px; }
  .gifting-image { max-height: 700px; }
}

@media (max-width: 760px) {
  .header { min-height: 88px; padding: 1.25rem var(--gutter); }
  .header-right { gap: 1rem; }
  .announcement { justify-content: center; text-align: center; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 4rem var(--gutter) 3rem; }
  .hero-footnote { padding-top: 2.5rem; }
  .hero-visual { display: flex; flex-direction: column; min-height: 0; max-height: none; }
  .hero-visual > img { position: static; height: auto; aspect-ratio: 1/1.05; }
  .hero-visual:after { display: none; }
  .image-label { position: static; width: 100%; max-width: none; padding: 1.5rem var(--gutter); }
  .image-index { display: none; }
  .section-heading { margin-bottom: 2.5rem; }
  .section-heading > .text-link { margin-top: 0; }
  .section-aside { margin-top: 0; }
  .gallery-link { margin-left: 0; }
  .collection-preview { display: grid; margin-top: 4rem; padding-top: 4rem; }
  .collection-list { margin-top: 0; }
  .footer-top { align-items: flex-start; }
  .footer-top nav { justify-content: flex-start; }
  .footer-bottom span:last-child { width: auto; }
  .gift-dialog { padding: 4rem min(1.5rem, 24px) 2rem; }
  .gift-dialog h2 { font-size: var(--type-subheading); }
  .gift-result { padding: 1.5rem min(1.5rem, 24px); }
}

@media (max-width: 480px) {
  .header-right .locale { display: none; }
  .product-kicker { align-items: flex-start; }
  .gallery-link { flex-basis: 100%; justify-content: flex-start; padding-left: 0; }
  .photo-caption { left: 1rem; right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .75rem 1rem; }
  .footer-top p { margin-left: 0; }
}

@media (max-height: 480px) {
  html { scroll-padding-top: 1rem; }
  .header { position: relative; }
  .mobile-nav { max-height: 65dvh; }
  .gallery-stage { min-height: 100px; height: 45dvh; }
  .gallery-controls { padding: 1.5rem; }
}

/* Product formats and the complete collection use the same four-size scale. */
.product-feature { scroll-margin-top: 1.5rem; }
.product-main-image { background: #f7f8fa; }
.product-main-image > img, .thumbnail img { object-fit: contain; }
.size-selector { display: block; }
.size-options { display: flex; flex-wrap: wrap; gap: .75rem; }
.size-options button { flex: 1 1 8rem; }
.size-options button span { margin-left: 0; }
.gallery-navigation button:disabled { opacity: .35; cursor: default; }
.catalog { margin-top: 7rem; padding-top: 6rem; border-top: 1px solid var(--line); }
.catalog-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.catalog-heading h2 { margin-top: 1.5rem; line-height: 1.25; }
.catalog-heading > p { max-width: 34ch; color: var(--muted); }
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.catalog-filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.catalog-filters button { min-height: 3.5rem; padding: .75rem 1.25rem; border: 1px solid #b6c4d6; background: transparent; line-height: 1.5; }
.catalog-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.catalog-filters button:hover { border-color: var(--ink); }
.catalog-size { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.catalog-size select { font: inherit; color: var(--ink); background: #fff; min-height: 3.5rem; max-width: 100%; padding: .75rem 2.5rem .75rem 1rem; border: 1px solid #b6c4d6; border-radius: 0; }
.catalog-size select:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.catalog-count { color: var(--muted); margin-block: 1.5rem 2rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; }
.catalog-card { min-width: 0; display: flex; flex-direction: column; }
.catalog-photo { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f7f8fa; border: 1px solid #edf0f4; }
.catalog-photo img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.catalog-photo:hover img { transform: scale(1.025); }
.catalog-card-copy { padding-top: 1.75rem; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.catalog-card h3 { font-size: var(--type-subheading); line-height: 1.35; margin-bottom: .75rem; }
.catalog-card-sizes { color: var(--muted); margin-bottom: 1rem; }
.catalog-card .text-link { margin-top: auto; gap: 1.5rem; }
.catalog-empty { background: #edf3ff; padding: 2rem; }
.catalog-empty[hidden] { display: none; }
.catalog-empty .text-link { margin-top: 1rem; }
@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .catalog { margin-top: 5rem; padding-top: 4rem; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .catalog-heading { margin-bottom: 2rem; }
  .catalog-filters { width: 100%; }
  .catalog-filters button { flex: 1 1 auto; }
  .catalog-size { width: 100%; }
  .catalog-size select { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-photo img { transition: none; }
  .catalog-photo:hover img { transform: none; }
}