:root {
  color-scheme: light;
  --paper: #eee8dc;
  --paper-deep: #e5ddcf;
  --ink: #24241f;
  --muted: #6f6a60;
  --line: #c9c0b1;
  --green: #455246;
  --wash: rgba(255, 255, 255, 0.28);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 7%, rgba(255,255,255,.68), transparent 28rem),
    radial-gradient(circle at 88% 35%, rgba(90,103,82,.08), transparent 34rem),
    linear-gradient(180deg, var(--paper), var(--paper-deep));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(73,62,43,.08) 0 .55px, transparent .65px 4px);
  mix-blend-mode: multiply;
}

a { color: inherit; }

.shell {
  width: min(76rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 3rem;
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--line);
}

.eyebrow,
.maker,
dt,
.reference,
.home-link,
.site-footer {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow,
.maker,
dt {
  color: var(--muted);
}

.eyebrow { margin: 0 0 1rem; }

h1,
h2,
blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
}

h1 {
  margin: 0;
  font-size: clamp(4.5rem, 12vw, 8.5rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .82;
}

.intro {
  max-width: 42rem;
  margin: 1.75rem 0 0;
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  line-height: 1.4;
}

.home-link {
  padding-top: .25rem;
  color: var(--muted);
  text-decoration: none;
}

.home-link:hover,
.home-link:focus-visible,
.reference:hover,
.reference:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--green);
}

.collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fragrance {
  min-height: 22rem;
  padding: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.fragrance:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.fragrance header {
  min-height: 5.8rem;
  margin-bottom: 1.6rem;
}

.maker { margin: 0 0 .6rem; }

h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: .98;
}

dl { margin: 0; }

dl > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(111,106,96,.26);
}

dt,
dd { margin: 0; }

dd {
  font-size: .98rem;
  line-height: 1.52;
}

blockquote,
.intent {
  margin: 1.6rem 0 1.25rem;
}

blockquote {
  color: var(--green);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.35;
}

.intent {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}

.verdict {
  margin: 1.25rem 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(111,106,96,.26);
  font-size: .95rem;
  line-height: 1.5;
}

.verdict strong {
  margin-right: .45rem;
  color: var(--green);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reference {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
}

.lower-priority {
  background: rgba(255,255,255,.12);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0 0;
  color: var(--muted);
}

.site-footer a { text-decoration: none; }

@media (max-width: 46rem) {
  .shell { width: min(100% - 1.5rem, 76rem); }

  .masthead {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .collection { grid-template-columns: 1fr; }

  .fragrance {
    min-height: 0;
    padding: 2rem 0;
    border-right: 0 !important;
  }

  .fragrance header { min-height: 0; }

  dl > div { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}