@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  color-scheme: light;
  --bg: #f8f2e6;
  --panel: #fcf8ef;
  --panel2: #eee5d3;
  --ink: #282c22;
  --muted: #505749;
  --orange: #215638;
  --violet: #285a3c;
  --line: #d9cfbc;
  --display: Newsreader, Georgia, serif;
  --body: "DM Sans", "Segoe UI", sans-serif;
}

body { font-family: var(--body); background: linear-gradient(#f9f4e9d9, #f9f4e9d9), url("/assets/cotton-weave.webp") center top / 1400px auto repeat, var(--bg); }
.wrap { width: min(1240px, 92%); }
.utility { background: #efe6d4; color: #315340; border-color: var(--line); }
.utility-in { min-height: 35px; font-size: .7rem; letter-spacing: .055em; }
.utility i, .eyebrow i { box-shadow: none; }
.mast { min-height: 78px; }
.brand > b { font: 600 clamp(1.42rem, 2.5vw, 2rem)/1.1 var(--display); letter-spacing: -.035em; }
.brand b span { color: #579069; font: inherit; margin: 0; }
.mast nav a { font-weight: 600; }
.mast nav a:hover, .line-link:hover, .foot a:hover { text-decoration: underline; }
.bag, .close, select, input { background: white; border: 1px solid #91ad96; color: var(--ink); border-radius: 6px; }
.bag span { color: white; }
.button { border-radius: 6px; }
.button.primary { background: #215638; color: white; }
.button.primary:hover { background: #173e2a; }
.button.secondary { color: #215638; border-color: #91ad96; background: white; }
.button.secondary:hover { background: #e9f4e7; }

.hero { display: flex; min-height: clamp(470px, 41vw, 630px); background: #f2e9da; border-color: var(--line); justify-content: center; }
.hero-bg { inset: 0 0 0 52%; background-position: 64% center; }
.hero::after { background: none; }
.hero-body { padding-block: clamp(60px, 9vw, 145px); }
.hero h1 { color: var(--ink); font-size: clamp(2.9rem, 5vw, 5.7rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; max-width: 50%; text-shadow: none; }
.hero p { color: var(--muted); max-width: min(43%, 420px); font-size: 1.02rem; }
.hero h1, .inner-hero h1, h2 { text-transform: none; }
h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); line-height: 1.12; font-weight: 500; letter-spacing: -.025em; }
.eyebrow { letter-spacing: .1em; }
.strip { background: #e7e7d4; color: #234432; border-color: var(--line); }
.strip span { font-family: var(--body); letter-spacing: .08em; }
.perks { padding-block: 23px; }
.gem { background: #f2e9da; color: #215638; box-shadow: none; border-color: #c7dfc9; }
.band, .inner-hero { background: #f1e9da; border-color: var(--line); }
.inner-hero { padding-block: 36px 42px; }
.inner-hero h1 { max-width: 940px; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.06; font-weight: 500; letter-spacing: -.035em; }
.pill { background: white; border-radius: 6px; }
.tee-pill { background: #d7ebd4; color: #215638; }
.look, .article-card, .catalog-card, .feature img { border: 1px solid var(--line); border-radius: 8px; }
.look { color: white; background: #64776d; }
.look::after { background: linear-gradient(0deg,#14271ee8,transparent); }
.look strong { font-size: clamp(1.04rem, 1.65vw, 1.4rem); font-weight: 700; }
.look > div b { color: white; }
.look .code, .product-photo .code, .catalog-image .code { background: #d5ead1; color: #204632; }
.look-grid { scrollbar-color: #8faf95 #f2e9da; }
.light::before { background: radial-gradient(circle at var(--mx,50%) var(--my,50%),#e2f4c479,transparent 49%); }
.catalog-image, .product-photo { background: #f4eee2; border-radius: 8px; }
.product-photo { padding: clamp(.7rem,2.8vw,2.8rem); }
.organic-notes { margin-top: 2.5rem; padding: clamp(1rem,4vw,2.6rem); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.organic-notes p { max-width: 76ch; }
.guide-links { padding-left: 1.2rem; }
.guide-links li { margin-block: .35rem; }
.feature article { max-width: 72ch; }
.feature article h2, .policy h2 { font-family: var(--display); letter-spacing: -.03em; }
.signup { background: #f5eddf; border-color: var(--line); border-radius: 10px; }
footer { background: #eee5d4; }
dialog { background: white; border-color: #91ad96; border-radius: 10px; }
dialog::backdrop, .traffic-preferences::backdrop { background: #16211a70; }
#signal { background: white; border-color: #8eae95; }
.signal-screen { min-height: 240px; display: grid; place-content: center; justify-items: center; background: #efe6d4; }
.signal-screen b { font: 800 clamp(3.5rem,12vw,8rem)/1 var(--display); color: var(--orange); }
.signal-screen small { color: #315340; font-weight: 700; letter-spacing: .12em; }
.traffic-settings { color: var(--muted); background: none; border: 0; text-decoration: underline; }
.traffic-preferences { max-width: min(30rem,92vw); padding: 1.4rem; }
.traffic-preferences button { background: #f2e9da; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: .65rem; margin: .2rem; }

@media (max-width: 720px) {
  .hero { display: grid; min-height: auto; }
  .hero-bg { position: relative; inset: auto; aspect-ratio: 16 / 9; grid-row: 2; background-position: 55% 44%; }
  .hero-body { padding-block: 32px 28px; }
  .hero h1, .hero p { max-width: 100%; }
  .hero h1 { font-size: clamp(2.5rem,9vw,4.1rem); }
  .mast nav { gap: 13px; overflow: auto; white-space: nowrap; padding: 8px 0; }
  .mast nav a { font-size: .82rem; }
}

.hero, .inner-hero {
  background: linear-gradient(#f6eddeb3, #f6eddeb3), url('/assets/cotton-weave.webp') center / cover no-repeat, var(--panel2);
}
.product h1, .article-card h3, .section > h1, .feature article h2, .policy h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.025em;
}
.utility-in, .eyebrow, .brand small, .code, .scene { font-family: var(--body); }
.scene { color: #fff9ee; }
.traffic-settings[data-consent="unset"] { font-weight: 700; color: var(--orange); }
@media (max-width: 380px) {
  .brand > b { font-size: 1.48rem; }
}
.traffic-notice { background: var(--panel); border-block: 1px solid var(--line); }
.traffic-notice-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding-block: .65rem; }
.traffic-notice p { flex: 1 1 18rem; margin: 0; color: var(--muted); font-size: .88rem; }
.traffic-notice button { min-height: 36px; padding: .35rem .8rem; border: 1px solid #91ad96; border-radius: 6px; background: var(--panel); color: var(--ink); font-size: .84rem; font-weight: 700; }
.traffic-notice button:hover { background: var(--panel2); }