:root {
  color-scheme: light;
  --ink: #16201e;
  --paper: #f4f1e8;
  --surface: #fffdf8;
  --line: #d5d2c7;
  --muted: #65706d;
  --serif: "Newsreader", serif;
  --sans: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }
.collection-nav { min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 10px clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: var(--surface); }
.collection-nav > a:first-child { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.collection-nav img { border-radius: 50%; object-fit: cover; }
.collection-nav span { display: grid; }
.collection-nav strong { font: 600 17px/1.1 var(--serif); }
.collection-nav small, .collection-nav > a:last-child { color: var(--muted); font-size: 11px; }
.collection-nav > a:last-child { font-weight: 600; text-underline-offset: 4px; }
.collection-hero { min-height: 78vh; display: grid; grid-template-columns: minmax(180px, .6fr) minmax(440px, 1.4fr) minmax(220px, .7fr); align-items: end; gap: clamp(24px, 4vw, 70px); padding: clamp(70px, 10vw, 150px) clamp(24px, 6vw, 90px) clamp(45px, 6vw, 90px); background: radial-gradient(circle at 78% 22%, rgba(181, 80, 51, .12), transparent 31%), linear-gradient(125deg, #f7f3e8, #eef2ed); border-bottom: 1px solid var(--line); }
.collection-hero > p { align-self: start; margin: 8px 0 0; color: #9d3f31; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
h1 { font-size: clamp(52px, 7vw, 104px); line-height: .82; text-wrap: balance; }
.collection-hero > div { display: grid; gap: 34px; padding-bottom: 6px; }
.collection-hero span { color: var(--muted); font: 500 18px/1.5 var(--serif); }
.collection-hero strong { font: 500 13px/1.5 var(--mono); }
.collection-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 34px clamp(24px, 6vw, 90px); color: white; background: var(--ink); }
.collection-intro p { margin: 0; font: 600 21px/1.3 var(--serif); }
.collection-intro span { max-width: 620px; color: #bac4c1; font-size: 13px; line-height: 1.6; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1400px; margin: 0 auto; border-inline: 1px solid var(--line); }
.collection-card { --card-accent: #9d3f31; position: relative; min-height: 340px; display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: clamp(28px, 5vw, 68px); background: var(--surface); border-bottom: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.collection-card:nth-child(odd) { border-right: 1px solid var(--line); }
.collection-card::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--card-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.collection-card:hover::after { transform: scaleX(1); }
.collection-card__number { color: var(--card-accent); font: 500 12px/1 var(--mono); }
.collection-card > div { display: flex; flex-direction: column; }
.collection-card p { margin: 0 0 14px; color: var(--muted); font: 10px/1.3 var(--mono); text-transform: uppercase; }
.collection-card h2 { max-width: 500px; font-size: clamp(36px, 4vw, 58px); line-height: .95; }
.collection-card strong { margin-top: 14px; color: var(--card-accent); font: 600 18px/1.25 var(--serif); }
.collection-card div > span { max-width: 520px; margin-top: 28px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.collection-card small { grid-column: 2; align-self: end; margin-top: 28px; color: var(--ink); font: 500 11px/1 var(--mono); }
.collection-footer { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 40px; align-items: center; padding: 50px clamp(24px, 6vw, 90px); color: white; background: var(--ink); }
.collection-footer span { color: #bac4c1; font-size: 12px; }
.collection-footer a { font-size: 12px; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .collection-hero { min-height: 68vh; grid-template-columns: 1fr; align-items: start; }
  .collection-hero > p { align-self: auto; }
  .collection-hero > div { grid-template-columns: 1fr 1fr; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card:nth-child(odd) { border-right: 0; }
  .collection-footer { grid-template-columns: 1fr 1fr; }
  .collection-footer a { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .collection-nav small { display: none; }
  .collection-hero { min-height: 0; padding-top: 70px; }
  h1 { font-size: clamp(56px, 18vw, 86px); }
  .collection-hero > div, .collection-intro { grid-template-columns: 1fr; gap: 18px; }
  .collection-card { min-height: 300px; grid-template-columns: 34px 1fr; padding: 38px 22px; }
  .collection-card h2 { font-size: 42px; }
  .collection-footer { grid-template-columns: 1fr; gap: 14px; }
  .collection-footer a { grid-column: auto; }
}