/* Reset, typography scale, motifs. Logical properties only (RTL-ready). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--offwhite);
  color: var(--navy);
  font: 400 16px/26px var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--navy); text-decoration-color: var(--mustard); text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* Focus must always be visible */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.on-teal :focus-visible, .btn--secondary:focus-visible { outline-color: var(--navy); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Type scale: desktop / mobile (<760px) */
.h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.h1 { font-size: 64px; line-height: 64px; }
.h2 { font-size: 48px; line-height: 50px; }
.h3 { font-size: 32px; line-height: 36px; }
.h4, .h5, .h6 { font-family: var(--font-body); font-weight: 700; margin: 0; }
.h4 { font-size: 24px; line-height: 30px; letter-spacing: -.01em; }
.h5 { font-size: 20px; line-height: 26px; }
.h6 { font-size: 17px; line-height: 23px; }
.body-l { font-size: 19px; line-height: 29px; margin: 0; }
.small { font-size: 14px; line-height: 21px; }
.label { font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { font: 500 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.mono { font: 500 13px/1.4 var(--font-mono); }
.muted { color: var(--muted-text); }
.price { font: 700 20px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.price--sale { color: var(--sale); }
.price-old { font-size: 15px; color: var(--muted-text); text-decoration: line-through; font-variant-numeric: tabular-nums; }

@media (max-width: 759px) {
  .h1 { font-size: 40px; line-height: 40px; }
  .h2 { font-size: 32px; line-height: 34px; }
  .h3 { font-size: 26px; line-height: 30px; }
  .h4 { font-size: 20px; line-height: 26px; }
  .h5 { font-size: 18px; line-height: 24px; }
}

/* Layout */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin); }
@media (max-width: 1440px) { .container { padding-inline: 40px; } }
@media (max-width: 759px) { .container { padding-inline: var(--margin); } }

.state-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s7) var(--margin); text-align: center;
}

/* Coming soon */
.soon { min-height: 100vh; display: grid; place-items: center; padding: 48px var(--margin); text-align: center; }
.soon.rays::before { opacity: .5; }
.soon__inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.soon__badge { width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(31, 60, 70, .18)); }
.soon__text { max-width: 520px; }
@media (max-width: 759px) { .soon__badge { width: 160px; height: 160px; } }

/* Motifs */
.grain {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .23 0 0 0 0 .27 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rays { position: relative; overflow: hidden; }
.rays::before {
  content: ""; position: absolute; inset: auto 0 -40% 0; height: 140%; pointer-events: none;
  background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(174, 126, 53, .28) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 18%, #000 19%, #000 60%, transparent 75%);
  mask: radial-gradient(circle at 50% 100%, transparent 18%, #000 19%, #000 60%, transparent 75%);
}
.rays > * { position: relative; }
.stripe {
  background: repeating-linear-gradient(135deg, #E6D6B9 0 10px, #EBDFCB 10px 20px);
}
.stripe--off { background: repeating-linear-gradient(135deg, #EEF1E9 0 10px, #E4E8E5 10px 20px); }
.stripe--teal { background: repeating-linear-gradient(135deg, #C4D2D0 0 10px, #D3DEDC 10px 20px); }
.stripe--sand { background: repeating-linear-gradient(135deg, #E4D3B6 0 10px, #EBDFCB 10px 20px); }
.stripe--grey { background: repeating-linear-gradient(135deg, #CED7D7 0 10px, #D9DFDE 10px 20px); }