.article-page {
  --cream: #f2eadc;
  --campaign: #dfcb92;
  background: var(--cream);
}

.article-page .site-header { background: rgba(242, 234, 220, 0.97); }

.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  min-height: calc(100svh - 7.5rem);
  border-bottom: 1px solid var(--ink);
  background: #0a0a0a;
  color: white;
}

.article-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem);
}

.article-hero__copy .eyebrow { color: var(--campaign); }

.article-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8.5vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.84;
}

.article-deck {
  max-width: 34rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.35;
}

.article-hero__image { min-height: 42rem; overflow: hidden; }
.article-hero__image img { height: 100%; object-fit: cover; object-position: center 63%; }

.article-page--cdg .article-hero h1 {
  max-width: 13ch;
  font-size: clamp(3.7rem, 7vw, 7.5rem);
}

.article-page--cdg .article-hero__image img { object-position: center 35%; }

.article-page--lego {
  --campaign: #ff62c7;
}

.article-page--lego .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 6.8vw, 7.3rem);
}

.article-page--lego .article-hero__image {
  background: #fff;
}

.article-page--lego .article-hero__image img {
  object-fit: contain;
  object-position: center;
}

.article-page--sega { --campaign: #1687ff; }
.article-page--patta { --campaign: #ff8f69; }
.article-page--dior { --campaign: #ff9cc7; }
.article-page--lemonade { --campaign: #f4e44f; }
.article-page--nugguette { --campaign: #ef7f35; }
.article-page--ugg { --campaign: #d9a56d; }
.article-page--ganni { --campaign: #c6ef35; }
.article-page--westwood-bridal { --campaign: #f0d8dc; }
.article-page--westwood-bridal .article-hero h1 { max-width: 12ch; font-size: clamp(3.15rem, 6.1vw, 6.7rem); }
.article-page--westwood-bridal .article-hero__image img { object-position: center 38%; }
.article-page--ugg .article-hero h1,
.article-page--ganni .article-hero h1 { max-width: 13ch; font-size: clamp(3.4rem, 6.7vw, 7.2rem); }
.article-page--ugg .article-hero__image { background: #f4f1ea; }
.article-page--ugg .article-hero__image img { object-fit: contain; object-position: center; }
.article-page--ganni .article-hero__image img { object-position: center; }
.article-page--mulberry { --campaign: #ff6a00; }
.article-page--supreme { --campaign: #ff3b30; }
.article-page--haring { --campaign: #ef2b2d; }
.article-page--sailor { --campaign: #ff4fa3; }
.article-page--milan { --campaign: #ef4035; }
.article-page--sephora { --campaign: #ff6fac; }
.article-page--nike { --campaign: #ff4b35; }
.article-page--elf { --campaign: #9ce7ef; }
.article-page--calendars { --campaign: #f2a7bc; }
.article-page--vinted { --campaign: #2e5bff; }
.article-page--jewellery { --campaign:#f3ff55; background:#fff; }
.article-page--jewellery .site-header { background:rgba(255,255,255,.97); }
.article-page--jewellery .article-hero h1 { max-width:9ch; font-size:clamp(3.8rem,7.8vw,8.3rem); }
.jewel-hero-collage { min-height:42rem; overflow:hidden; background:#f5f0e6; }
.jewel-hero-collage img { width:100%; height:100%; min-height:42rem; object-fit:cover; object-position:center; }
.jewel-intro { padding:clamp(4rem,9vw,9rem) clamp(1rem,10vw,12rem); background:#ff7ac3; border-bottom:1px solid var(--ink); }
.jewel-intro p { max-width:38ch; margin:0 0 1.25rem; font-family:var(--serif); font-size:clamp(2rem,4vw,4.6rem); letter-spacing:-.035em; line-height:1.02; }
.jewel-intro p:last-child { margin-left:auto; max-width:22ch; }
.jewel-edit { padding:clamp(3rem,7vw,7rem) clamp(1rem,4vw,4rem); background:#fff; }
.jewel-edit__heading { display:grid; grid-template-columns:.6fr 1.4fr; align-items:end; gap:2rem; margin-bottom:clamp(2.5rem,6vw,6rem); }
.jewel-edit__heading h2 { margin:0; font-family:var(--serif); font-size:clamp(3.2rem,7vw,7.5rem); font-weight:400; letter-spacing:-.055em; line-height:.86; }
.jewel-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.jewel-card { border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.jewel-card a { display:flex; height:100%; padding-bottom:1.5rem; color:var(--ink); text-decoration:none; flex-direction:column; }
.jewel-card__image { aspect-ratio:4/3; margin-bottom:1.25rem; overflow:hidden; background:#fff; }
.jewel-card__image img { width:100%; height:100%; object-fit:contain; background:#fff; transition:transform 350ms ease; }
.jewel-card:hover .jewel-card__image img { transform:scale(1.035); }
.jewel-card--cobalt .jewel-card__image { background:#2e5bff; }
.jewel-card--pink .jewel-card__image { background:#ff7ac3; }
.jewel-card--acid .jewel-card__image { background:#f3ff55; }
.jewel-card--orange .jewel-card__image { background:#ff6339; }
.jewel-card--lilac .jewel-card__image { background:#c8a7ff; }
.jewel-card--aqua .jewel-card__image { background:#6ee7e2; }
.jewel-card p,.jewel-card h3,.jewel-card strong,.jewel-card span,.jewel-card b { display:block; margin-left:clamp(1rem,2.5vw,2.5rem); margin-right:clamp(1rem,2.5vw,2.5rem); }
.jewel-card p { margin-top:0; margin-bottom:.65rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.jewel-card h3 { margin-top:0; margin-bottom:.65rem; max-width:15ch; font-family:var(--serif); font-size:clamp(2rem,4vw,4.25rem); font-weight:400; letter-spacing:-.045em; line-height:.93; }
.jewel-card strong { margin-bottom:1.5rem; font-size:.85rem; }
.jewel-card span { max-width:42rem; margin-bottom:2rem; font-family:var(--serif); font-size:clamp(1.15rem,1.8vw,1.55rem); line-height:1.18; }
.jewel-card b { margin-top:auto; font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.jewel-card:hover b { text-decoration:underline; text-underline-offset:.25rem; }
.jewel-edit>.article-disclosure { max-width:45rem; margin-top:1.5rem!important; }

.article-hero__art {
  display: flex;
  min-height: 42rem;
  padding: clamp(2rem, 5vw, 5rem);
  align-items: flex-end;
  overflow: hidden;
  background: var(--campaign);
  color: #0a0a0a;
}
.article-hero__art span {
  display: block;
  max-width: 11ch;
  font-family: var(--sans);
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 0.9;
  text-transform: uppercase;
}
.article-page--nike .article-hero__art { background: #f2eadc; }
.article-page--nike .article-hero__art span { color: #ff3b20; }
.article-page--vinted .article-hero__art { background: #2e5bff; color: #fff; }
.article-page--calendars .article-hero__image img,
.article-page--sephora .article-hero__image img { object-position: center; }
.article-page--elf .article-hero__image { background: #dff6f8; }
.article-page--elf .article-hero__image img { object-fit: contain; object-position: center; }

.article-page--sega .article-hero h1,
.article-page--dior .article-hero h1,
.article-page--nugguette .article-hero h1 {
  max-width: 13ch;
  font-size: clamp(3.6rem, 7vw, 7.4rem);
}

.article-page--mulberry .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.4rem, 6.6vw, 7.1rem);
}

.article-page--supreme .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.35rem, 6.5vw, 7rem);
}

.article-page--haring .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.25rem, 6.2vw, 6.8rem);
}

.article-page--milan .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.25rem, 6.1vw, 6.7rem);
}

.article-page--milan .article-hero__image img { object-position: center 45%; }

.article-page--haring .article-hero__image img { object-position: center; }
.article-page--sailor .article-hero__image img { object-position: center; }

.article-page--mulberry .article-hero__image img { object-position: 58% center; }

.article-page--sega .article-hero__image { background: #fff; }
.article-page--sega .article-hero__image img {
  object-fit: contain;
  object-position: center;
}
.article-page--patta .article-hero__image img { object-position: 52% center; }
.article-page--dior .article-hero__image img { object-position: 48% center; }
.article-page--lemonade .article-hero__image img { object-position: 55% center; }
.article-page--nugguette .article-hero__image img { object-position: 55% center; }

.article-body {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  padding: clamp(3.5rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
  border-bottom: 1px solid var(--ink);
}

.article-body__image { position: sticky; top: 1.5rem; }
.article-body__image img { aspect-ratio: 3 / 4; object-fit: cover; }
.article-body__image--square img { aspect-ratio: 1; }
.article-body__image--landscape img { aspect-ratio: 5 / 4; }
.article-triptych__images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  background: var(--ink);
}
.article-triptych__images img {
  width: 100%;
  height: clamp(24rem, 48vw, 44rem);
  object-fit: cover;
  object-position: center;
}
.article-triptych__images img:first-child { object-position: 54% center; }
.article-triptych__images img:last-child { object-position: 58% center; }
.article-body__image figcaption {
  margin-top: 0.65rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-inline-image {
  margin: clamp(2.5rem, 6vw, 5rem) 0;
}

.article-inline-image img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #fff;
}

.article-inline-image figcaption {
  margin-top: 0.65rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-inline-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: clamp(2.5rem, 6vw, 5rem) 0;
}

.article-inline-pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.article-inline-pair figcaption {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-copy { max-width: 48rem; }
.article-copy h2 {
  margin: 2.2em 0 0.8em;
  font-size: clamp(0.78rem, 1.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.article-copy p {
  margin: 0 0 1.4em;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.article-summary {
  margin: 0 0 clamp(2.8rem, 6vw, 5rem);
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--campaign);
}

.article-summary .article-summary__title {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-summary ul {
  margin: 0;
  padding-left: 1.1rem;
}

.article-summary li {
  margin: 0.45rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.35;
}

.article-photo-credit {
  margin-top: 2.5rem !important;
  font-family: var(--sans) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.article-sources {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}

.article-sources p {
  margin: 0 0 0.65rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0;
  line-height: 1.5;
}

.article-sources .article-sources__title {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-sources a { text-underline-offset: 0.18em; }

.article-copy p:first-child::first-letter {
  float: left;
  margin: -0.08em 0.08em 0 0;
  font-size: 3.2em;
  line-height: 0.9;
}

.article-verdict {
  padding-top: 1.2rem;
  border-top: 1px solid var(--ink);
  font-style: italic;
}

.article-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--acid);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-button:hover { background: var(--ink); color: white; }

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.article-actions .article-button { margin-top: 0; }

.article-disclosure {
  margin-top: 1.4rem !important;
  font-family: var(--sans) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  .article-hero { grid-template-columns: 1fr; }
  .article-hero__copy { min-height: 34rem; padding-bottom: 3.5rem; }
  .article-hero h1 { font-size: clamp(3.9rem, 18vw, 6rem); }
  .article-page--cdg .article-hero h1 { font-size: clamp(3.35rem, 15vw, 5.2rem); }
  .article-page--lego .article-hero h1 { font-size: clamp(3.15rem, 14vw, 4.9rem); }
  .article-page--sega .article-hero h1,
  .article-page--dior .article-hero h1,
  .article-page--nugguette .article-hero h1 { font-size: clamp(3.2rem, 14.5vw, 5rem); }
  .article-page--mulberry .article-hero h1 { font-size: clamp(3rem, 13.8vw, 4.8rem); }
  .article-page--supreme .article-hero h1 { font-size: clamp(2.95rem, 13.4vw, 4.7rem); }
  .article-page--haring .article-hero h1 { font-size: clamp(2.75rem, 12.6vw, 4.4rem); }
  .article-page--milan .article-hero h1 { font-size: clamp(2.75rem, 12.2vw, 4.35rem); }
  .article-page--westwood-bridal .article-hero h1 { font-size: clamp(2.75rem, 12.5vw, 4.45rem); }
  .article-page--jewellery .article-hero h1 { font-size:clamp(3.1rem,14vw,5rem); }
  .jewel-hero-collage,
  .jewel-hero-collage img { min-height:72svh; }
  .jewel-edit__heading { grid-template-columns:1fr; }
  .jewel-edit-grid { grid-template-columns:1fr; }
  .article-hero__image { min-height: 75svh; }
  .article-hero__art { min-height: 62svh; }
  .article-body { grid-template-columns: 1fr; }
  .article-body__image { position: static; margin: 0; }
  .article-copy p { font-size: clamp(1.55rem, 7.3vw, 2.2rem); }
}