/* OSSE / Petrol, plum and porcelain. Shared identity for every route. */
:root {
  --brand-petrol: #173d3b;
  --brand-plum: #582a3c;
  --brand-porcelain: #faf9f5;
  --brand-gold: #b39856;
  --brand-champagne: #e5d4b1;
  --brand-text: #203a36;
  --brand-muted: #586864;
  --cream: var(--brand-porcelain);
  --sand: #e8ece8;
  --card: #e7eae6;
  --card-2: #dce3df;
  --ink: var(--brand-text);
  --soft: var(--brand-muted);
  --stone: var(--brand-muted);
  --accent: var(--brand-plum);
  /* Earlier components use these legacy names for text and action colours. */
  --gold: var(--brand-plum);
  --gold-lt: var(--brand-plum);
  --maple: var(--brand-plum);
  --line: #173d3b26;
  --line-2: #173d3b45;
  --atelier-ink: var(--brand-petrol);
  --atelier-burgundy: var(--brand-plum);
  --atelier-paper: var(--brand-porcelain);
  --atelier-gold: var(--brand-gold);
}
html { background: var(--brand-porcelain); color-scheme: light; }
body { background: var(--brand-porcelain); color: var(--brand-muted); }
::selection { background: var(--brand-plum); color: var(--brand-porcelain); }
header, header.solid { background: var(--brand-porcelain); border-bottom: 0; border-top: 1px solid var(--brand-gold); }
.brand { color: var(--brand-plum); font-weight: 500; letter-spacing: .04em; }
.brand sup { color: var(--brand-plum); font-size: .34em; }
header .navlinks a, header .bagbtn { color: var(--brand-petrol); }
.nav-location { color: var(--brand-muted); }
.navlinks a::after { background: var(--brand-gold); }
header .navlinks a:is(:hover,.on), header .bagbtn:hover { color: var(--brand-plum); }
.studio-bands > .announce { background: var(--brand-petrol); color: var(--brand-porcelain); }
.studio-motto { background: var(--brand-plum); color: var(--brand-champagne); }
.studio-motto p { font-weight: 500; letter-spacing: .34em; text-indent: .34em; }
.studio-bands > .announce + .studio-motto::before { background: var(--brand-gold); }
.studio-motto__rule { background: linear-gradient(90deg, transparent, #c8ad7080); }

/* A compact editorial headline, with the second line carrying the gold accent. */
.atelier-hero.s-hero { background: var(--brand-porcelain); color: var(--brand-petrol); }
.atelier-hero::after {
  background: linear-gradient(90deg, #faf9f5fa 0%, #faf9f5eb 27%, #faf9f566 54%, transparent 72%),
              linear-gradient(0deg, #faf9f5e8 0%, #faf9f533 24%, transparent 48%);
}
.atelier-hero__copy { max-width: 65%; bottom: 126px; }
.atelier-hero__copy > p { font-size: 1rem; margin-bottom: 25px; color: var(--brand-petrol); }
.atelier-hero h1 {
  font: 500 clamp(64px, 7.5vw, 120px)/1.02 var(--display);
  letter-spacing: -.045em;
  color: var(--brand-petrol);
  margin: 0 0 35px;
  text-wrap: nowrap;
}
.atelier-hero h1 span { display: block; padding-left: 0; }
.atelier-hero h1 .hero-title__accent { color: var(--brand-plum); font-weight: 450; }
.atelier-hero__top { font-size: .75rem; letter-spacing: .1em; color: var(--brand-petrol); align-items: start; flex-direction: column; gap: 6px; }
.atelier-hero__top > span:last-child { padding: 0; background: none; color: var(--brand-muted); }
.atelier-hero__foot { border-top-color: #173d3b40; color: var(--brand-petrol); }
.atelier-hero .atelier-link--light { color: var(--brand-petrol); border-color: var(--brand-gold); }
.atelier-hero .atelier-link--light > span { color: var(--brand-plum); }

/* Stronger display weights and a consistent rhythm across the collection. */
:root :is(.atelier-intro h2, .tee-story h2, .atelier-sectionhead h2, .atelier-ritual h2,
  .atelier-close h2, .collection-hero h1, .pagehead h1, .pdp h1, .article h1,
  .article .body h2, .sec-head h2, .list h2, .royal-promo__intro h2,
  .collection-status h2, .discover-link h3, .jcard h3) {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--brand-petrol);
}
:root :is(.collection-hero h1, .pagehead h1, .article h1, .atelier-close h2) { color: var(--brand-plum); }
.atelier-intro > .atelier-label, .atelier-sectionhead .atelier-label,
.royal-promo__intro > .s-eyebrow, .product-gift-note { color: var(--brand-plum); }
.atelier-link { color: var(--brand-petrol); border-color: var(--brand-gold); }
.atelier-link:hover { color: var(--brand-plum); }
.atelier-signature { color: var(--brand-plum); font-weight: 500; letter-spacing: -.065em; }
.tee-story { background: #f2f4f0; color: var(--brand-petrol); }
.tee-story__content { background: #f2f4f0; }
.tee-story__number, .tee-story article > p, .product-panel__intro { color: var(--brand-muted); }
.tee-story__progress b { background: var(--brand-plum); }
.study-swatches button { border-color: #f2f4f0; }
.study-swatches button[aria-pressed=true] { outline-color: var(--brand-plum); }
.study-swatches button:focus-visible { outline-color: var(--brand-plum); }
.atelier-ritual__copy { background: #eef2ec; color: var(--brand-petrol); }
:root .atelier-ritual h2 { color: var(--brand-petrol); }
.atelier-ritual__copy > .atelier-label { color: var(--brand-plum); }
.atelier-ritual__copy > p, .atelier-ritual nav a { color: var(--brand-petrol); }
.atelier-ritual nav a { border-color: #173d3b30; }
.atelier-ritual nav a > span { color: var(--brand-plum); }
.collection-hero, .atelier-close { background: var(--brand-porcelain); }
.collection-body .chip.on, .collection-body .chip.on span, .collection-body .chip:hover,
.subchip.on, .subchip:hover { color: var(--brand-plum); border-bottom-color: var(--brand-plum); }
.product-related { background: #f2f4f0; }
.product-price-line, .pcard__price { color: var(--brand-petrol); }
.product-price-line > span, .product-gallery__caption, .product-state { color: var(--brand-muted); }
.product-options .size.on { background: var(--brand-petrol); color: var(--brand-porcelain); border-color: var(--brand-petrol); }
.product-thumbs button[aria-pressed=true], .cdot.on { outline-color: var(--brand-plum); border-color: var(--brand-plum); }
.btn { background: var(--brand-petrol); border-color: var(--brand-petrol); color: var(--brand-porcelain); }
.btn:hover { background: var(--brand-plum); border-color: var(--brand-plum); color: var(--brand-porcelain); }
.btn.ghost { background: transparent; color: var(--brand-petrol); }
.royal-promo, .product-gift-note { border-top-color: #c8ad7070; }
.royal-tier--royal { color: var(--brand-plum); border-left-color: #c8ad7070; }

footer { --ink: var(--brand-text); --cream: var(--brand-porcelain); --soft: var(--brand-muted); --stone: var(--brand-muted); --line: #173d3b26; background: #f1eee8; color: var(--brand-petrol); border-top: 1px solid var(--brand-gold); }
.footer-top { border-color: #173d3b26; }
.footer-top > p, .fbrand, .fbrand sup, .footer-top > a, .footer-top .s-link { color: var(--brand-plum); }
.fcol h5 { color: var(--brand-plum); }
.fgrid p, .fcol a, .fbot { color: var(--brand-muted); }
.fcol a:hover, .fbot a:hover { color: var(--brand-plum); }

/* The OSSE name stays visible; one gold rail handles arrival and scroll progress. */
header nav { height: 96px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 24px; }
header .brand { grid-column: 2; grid-row: 1; justify-self: center; display: flex; flex-direction: column; gap: 5px; font-size: 2.625rem; letter-spacing: .04em; }
.brand-name { display: inline-flex; align-items: flex-start; line-height: 1; }
.brand-name sup { margin: .12em 0 0 .1em; }
header .brand-crest { width: 42px; height: 20px; object-fit: contain; opacity: 1; filter: brightness(.72); }
header .navlinks { grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 22px; font-size: .875rem; }
header .navtools { grid-column: 3; grid-row: 1; }
header .nav-location { display: none; }
header .burger { border-color: #173d3b55; min-height: 44px; }
header .bagbtn { min-width: 44px; }
header .burger span { background: var(--brand-petrol); }
header.is-compact nav { height: 68px; }
header.is-compact .brand { font-size: 1.875rem; gap: 0; }
header.is-compact .brand-crest { height: 0; opacity: 0; }
.header-rule {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  background: #c8ad7038;
  pointer-events: none;
}
.header-rule .progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: var(--brand-gold);
}
.header-rule::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, var(--brand-gold) 44%, #8d642c 65%, transparent);
  opacity: 0;
  transform: translateX(-110%);
}
@keyframes osse-gold-sweep {
  0% { opacity: 0; transform: translateX(-110%); }
  5%, 30% { opacity: 1; }
  40%, 100% { opacity: 0; transform: translateX(450%); }
}
@keyframes osse-title-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  header nav { transition: height .38s cubic-bezier(.22,.61,.36,1); }
  header .brand { transition: font-size .38s cubic-bezier(.22,.61,.36,1), gap .38s; }
  header .brand-crest { transition: height .38s cubic-bezier(.22,.61,.36,1), opacity .25s; }
  .header-rule::after { animation: osse-gold-sweep 6s cubic-bezier(.22,.61,.36,1) .15s infinite both; }
  .atelier-hero h1 > span { animation: osse-title-arrive .8s cubic-bezier(.22,.61,.36,1) .1s both; }
  .atelier-hero h1 > .hero-title__accent { animation-delay: .24s; }
}

@media (max-width: 980px) {
  header nav { height: 88px; gap: 16px; }
  header .brand { font-size: 2.25rem; }
  header .navtools { display: contents; }
  header .burger { grid-column: 1; grid-row: 1; justify-self: start; }
  header .bagbtn { grid-column: 3; grid-row: 1; justify-self: end; }
  header .navlinks { grid-area: auto; background: var(--brand-porcelain); border-bottom-color: #c8ad7066; }
  header.is-compact .brand { font-size: 1.75rem; }
  .atelier-hero h1 { font-size: clamp(64px, 8.2vw, 84px); }
  .atelier-hero__copy { max-width: 76%; }
  header .navlinks a { color: var(--brand-petrol); }
}
@media (min-width: 981px) {
  .atelier-hero__picture img { object-position: 60% 12%; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .tee-story__visual { top: var(--atelier-header, 73px); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  header nav, header .brand { transition-duration: .28s; }
  .header-rule::after { animation-duration: 6s; }
  .atelier-hero h1 > span { animation-duration: .65s; }
}
@media (prefers-reduced-motion: reduce) {
  .header-rule::after { display: none; }
  .atelier-hero h1 > span { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .atelier-hero__copy { max-width: calc(100% - 44px); bottom: 128px; }
  .atelier-hero h1 { font-size: clamp(42px, 12.6vw, 76px); line-height: 1.06; letter-spacing: -.035em; margin-bottom: 29px; }
  .atelier-hero__copy > p { font-size: .9375rem; max-width: 25ch; margin-bottom: 24px; }
  .atelier-hero::after { background: linear-gradient(0deg, #faf9f5fc 0%, #faf9f5f0 31%, #faf9f5b8 50%, transparent 78%); }
  :root :is(.atelier-intro h2, .tee-story h2, .atelier-sectionhead h2, .atelier-close h2,
    .collection-hero h1, .pagehead h1, .pdp h1, .article h1) { letter-spacing: -.03em; }
}
/* Objects are framed in full, with the same daylight direction across categories. */
.collection-hero--objects { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 8%; }
.collection-hero--objects .collection-hero__art { max-width: 580px; width: 100%; justify-self: end; }
.collection-hero--objects .collection-hero__art img { aspect-ratio: 1; object-fit: contain; object-position: center; }
.shopgrid .pcard--object .pcard__img, .pcard--object .pcard__img { aspect-ratio: 1; background: #f4f1eb; }
.pcard--object .pcard__img img { object-fit: contain; object-position: center; }
@media(max-width:760px) {
  .collection-hero--objects .collection-hero__art { max-width: 100%; }
  .collection-hero--objects .collection-hero__art img { aspect-ratio: 1; object-position: center; }
}