:root {
  --ink: #201d1a;
  --paper: #f1ede5;
  --cream: #fbf8f1;
  --wine: #7b1f31;
  --rust: #b95c36;
  --sage: #6f7565;
  --line: rgba(32, 29, 26, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
img { display: block; width: 100%; }
figure { margin: 0; }

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 4vw;
  color: #fff;
}
.wordmark {
  font-family: "Bodoni 72", Didot, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.topbar nav { display: flex; gap: 28px; }
.topbar nav a {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}
.topbar nav a:hover, .topbar nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.topbar nav .seasonal-nav {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
}

.language-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px !important;
  margin-left: 22px;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.language-switch a,
.language-switch span {
  min-width: 34px;
  padding: 7px 9px;
  border-radius: 999px;
  font: 800 .62rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
}
.language-switch [aria-current="page"] { color: var(--ink); background: #fff; }
.shape-topbar .language-switch { color: var(--ink); }
.shape-topbar .language-switch [aria-current="page"] { color: #fff; background: var(--wine); }

.hero {
  position: relative;
  min-height: 780px;
  display: grid;
  grid-template-columns: 68% 32%;
  overflow: hidden;
  color: #fff;
  background: var(--wine);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 7vw 90px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.07), transparent 28%),
    var(--wine);
}
.eyebrow {
  margin: 0 0 24px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero h1, .opening h2, .timeline h2, .era h3, .sixties-feature h3,
.forms h2, .form-card h3, .closing h2, .sources h2 {
  font-family: "Bodoni 72", Didot, Georgia, serif;
  font-weight: 500;
}
.hero h1 {
  margin: 0;
  font-size: clamp(4.2rem, 8.7vw, 9.2rem);
  line-height: 0.79;
  letter-spacing: -0.075em;
}
.hero h1 em, .closing h2 em { font-weight: 400; }
.standfirst {
  max-width: 570px;
  margin: 48px 0 34px 12%;
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.65;
}
.read-link {
  align-self: flex-start;
  margin-left: 12%;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}
.read-link span { margin-left: 12px; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-left: 12%; }
.hero-actions .read-link { margin-left: 0; }
.seasonal-cta {
  max-width: 310px;
  padding: 16px 20px;
  color: var(--ink);
  background: #f0c66f;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.seasonal-cta:hover, .seasonal-cta:focus-visible { transform: translateY(-2px); background: #f6d88e; }
.seasonal-cta span { display: block; margin-bottom: 6px; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.seasonal-cta strong { display: block; font: 600 .95rem/1.35 Georgia, serif; }
.hero-image { position: relative; min-height: 780px; background: #222; }
.hero-image img { height: 100%; object-fit: cover; object-position: center 44%; filter: sepia(.08) contrast(1.04); }
.hero-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 50px 0 80px rgba(45,8,17,.18); pointer-events: none; }
.hero-image figcaption, .era-image figcaption, .sixties-gallery figcaption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  right: 20px;
  z-index: 2;
  color: rgba(255,255,255,.9);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.issue-mark { position: absolute; left: 4vw; bottom: 28px; display: flex; align-items: baseline; gap: 10px; }
.issue-mark span { font: 500 2rem/1 "Bodoni 72", Didot, serif; }
.issue-mark small { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }

.summer-promo { display: grid; grid-template-columns: 58% 42%; min-height: 610px; color: #fff; background: var(--rust); }
.summer-promo-image { position: relative; min-height: 610px; overflow: hidden; }
.summer-promo-image img { height: 100%; object-fit: cover; object-position: center 45%; }
.summer-promo-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, rgba(104,37,20,.25)); pointer-events: none; }
.summer-promo-image figcaption { position: absolute; right: 22px; bottom: 18px; left: 22px; z-index: 2; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 7px rgba(0,0,0,.6); }
.summer-promo-copy { display: flex; flex-direction: column; justify-content: center; padding: 75px 6vw; }
.summer-promo-copy .eyebrow { color: #f7d9a1; }
.summer-promo-copy h2 { margin: 0; font: 500 clamp(3.2rem, 5.5vw, 6.4rem)/.88 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.06em; }
.summer-promo-copy > p:not(.eyebrow) { max-width: 520px; margin: 34px 0; font: 1.05rem/1.75 Georgia, serif; }
.summer-promo-copy > a { align-self: flex-start; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.summer-promo-copy > a span { margin-left: 10px; }

.section-pad { padding: 110px 8vw; }
.section-label {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.opening-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 9vw; padding-top: 70px; }
.opening h2 { margin: 0; font-size: clamp(3rem, 5.5vw, 6.2rem); line-height: .96; letter-spacing: -.055em; }
.opening-text { max-width: 690px; }
.opening-text p { margin: 0 0 25px; font: 1.15rem/1.85 Georgia, serif; }
.dropcap::first-letter { float: left; margin: 8px 10px 0 0; color: var(--wine); font: 6.5rem/.67 "Bodoni 72", Didot, serif; }

.plate-section { position: relative; display: grid; grid-template-columns: 76% 24%; background: #d9d1c3; }
.plate { min-height: 660px; overflow: hidden; }
.plate img { height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: contrast(.88) sepia(.16); }
.plate figcaption { display: flex; justify-content: space-between; gap: 30px; padding: 18px 3vw; font-size: .6rem; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.plate figcaption span { font-weight: 800; }
.plate-note { display: flex; flex-direction: column; justify-content: flex-end; padding: 50px 3vw; border-left: 1px solid rgba(32,29,26,.15); background: var(--rust); color: white; }
.note-number { font: 500 clamp(4rem, 7vw, 7rem)/.9 "Bodoni 72", Didot, serif; letter-spacing: -.07em; }
.plate-note p { max-width: 220px; margin: 24px 0 0; font: 1.05rem/1.65 Georgia, serif; }

.timeline { padding-top: 150px; }
.timeline-head { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 85px; }
.timeline-head .eyebrow { color: var(--wine); }
.timeline h2 { margin: 0; font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .9; letter-spacing: -.06em; }
.period-index { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 150px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.period-index-item { min-height: 150px; display: flex; flex-direction: column; padding: 18px 12px; border-right: 1px solid var(--line); }
.period-index-item:last-child { border-right: 0; }
.period-index-item span { color: var(--wine); font: 600 1.5rem/1 Georgia, serif; }
.period-index-item strong { margin-top: auto; font: 600 .88rem/1.25 Georgia, serif; }
.period-index-item small { margin-top: 7px; color: #6f675f; font-size: .58rem; letter-spacing: .08em; }

.era { position: relative; margin: 0 0 160px; }
.era-text-only { display: grid; grid-template-columns: .4fr 1.1fr .8fr; gap: 7vw; align-items: start; padding: 80px 6vw; border: 1px solid var(--line); }
.era-number { color: var(--wine); font: 500 4.2rem/1 "Bodoni 72", Didot, serif; }
.era-date { margin: 0 0 18px; color: var(--wine); font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.era h3, .sixties-feature h3 { margin: 0 0 32px; font-size: clamp(2.7rem, 5vw, 5.8rem); line-height: .96; letter-spacing: -.05em; }
.era-copy > p:not(.era-date), .sixties-copy > p:not(.era-date) { margin: 0 0 22px; font: 1.05rem/1.82 Georgia, serif; }
.era blockquote { margin: 40px 0 0; color: var(--sage); font: italic 2rem/1.35 Georgia, serif; }
.era-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: center; }
.era-split.reverse { grid-template-columns: .95fr 1.05fr; }
.era-split.reverse .era-image { order: 2; }
.era-image { position: relative; overflow: hidden; background: #d5cec1; }
.era-image.tall { height: 760px; }
.era-image.landscape { height: 590px; }
.era-image img { height: 100%; object-fit: cover; }
.era-image.tall img { object-position: center; }
.era-image.landscape img { object-position: center; }
.warm { background: #d8c5aa; border: 0; }
.warm .side-caption { align-self: end; margin: 0; font: italic 1.7rem/1.35 Georgia, serif; }

.sixties-feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; margin: 0 -8vw 170px; padding: 100px 8vw; color: #fff; background: var(--wine); }
.era-number.light { color: #e6b6bc; }
.sixties-copy .era-date { margin-top: 80px; color: #e6b6bc; }
.sixties-gallery { position: relative; min-height: 850px; }
.gallery-main, .gallery-small { position: absolute; overflow: hidden; background: #eee; }
.gallery-main { top: 0; right: 0; width: 72%; height: 560px; }
.gallery-small { left: 0; bottom: 0; width: 53%; height: 410px; border: 10px solid var(--wine); }
.sixties-gallery img { height: 100%; object-fit: cover; }
.gallery-main img { object-position: center; }
.gallery-small img { object-position: center 32%; }
.final-era { margin-bottom: 40px; }

.forms { color: #f7f0e7; background: #24211e; }
.forms-intro { display: grid; grid-template-columns: .6fr 1.5fr .65fr; gap: 4vw; align-items: end; margin-bottom: 80px; }
.forms-intro .eyebrow { color: #d59aa7; }
.forms h2 { margin: 0; font-size: clamp(3rem, 6vw, 6.6rem); line-height: .93; letter-spacing: -.055em; }
.forms-intro > p:last-child { margin: 0; color: #c3bbb1; font: 1rem/1.7 Georgia, serif; }
.forms-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); }
.form-card { min-height: 300px; display: flex; flex-direction: column; padding: 25px; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); color: inherit; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.form-card span { color: #d59aa7; font: 1.2rem/1 Georgia, serif; }
.form-card h3 { margin: 80px 0 15px; font-size: 2rem; }
.form-card p { margin: 0; color: #c3bbb1; font: .92rem/1.65 Georgia, serif; }
.form-card b { margin-top: auto; padding-top: 30px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.form-card:hover, .form-card:focus-visible { color: var(--ink); background: #d8c5aa; outline: 0; }
.form-card:hover span, .form-card:focus-visible span { color: var(--wine); }
.form-card:hover p, .form-card:focus-visible p { color: #524b45; }

.shape-page { min-height: 100vh; background: var(--cream); }
.shape-topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 4vw; border-bottom: 1px solid var(--line); background: var(--cream); }
.shape-overview-link { padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.shape-article { display: grid; grid-template-columns: 42% 58%; }
.shape-title-panel { min-height: 690px; display: flex; flex-direction: column; justify-content: center; padding: 80px 7vw; color: #fff; background: var(--wine); }
.shape-title-panel .eyebrow { color: #e6b6bc; }
.shape-title-panel h1 { max-width: 7ch; margin: 0; font: 500 clamp(4.2rem, 7.3vw, 8.5rem)/.82 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.07em; }
.shape-kicker { margin: 38px 0 0; font: italic clamp(1.25rem, 2vw, 1.8rem)/1.35 Georgia, serif; }
.shape-intro { max-width: 490px; margin: 22px 0 0; color: #eadde0; font: 1rem/1.7 Georgia, serif; }
.shape-hero-image { position: relative; min-height: 690px; overflow: hidden; background: #d4cec4; }
.shape-hero-image img { height: 100%; object-fit: cover; }
.shape-hero-image figcaption { position: absolute; right: 22px; bottom: 18px; left: 22px; padding: 12px 14px; color: #fff; background: rgba(22,18,16,.68); font-size: .58rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.shape-hero-image figcaption a { text-underline-offset: 3px; }
.shape-body { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10vw; padding: 110px 12vw 130px; background: var(--paper); }
.shape-story { max-width: 760px; }
.shape-story p { margin: 0 0 30px; font: 1.18rem/1.9 Georgia, serif; }
.shape-story p:first-child::first-letter { float: left; margin: 10px 10px 0 0; color: var(--wine); font: 6.5rem/.67 "Bodoni 72", Didot, serif; }
.shape-characteristics { align-self: start; border-top: 1px solid var(--line); }
.shape-characteristics > p { margin: 0; padding: 20px 0; color: var(--wine); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.shape-characteristics ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.shape-characteristics li { padding: 17px 0; border-top: 1px solid var(--line); font: 1rem/1.35 Georgia, serif; }
.shape-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 55px 6vw; color: #fff; background: #24211e; }
.shape-pagination > a { display: flex; flex-direction: column; gap: 9px; color: inherit; text-decoration: none; }
.shape-pagination span, .shape-pagination-center { color: #c3bbb1; font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.shape-pagination strong { font: 500 1.6rem/1.15 "Bodoni 72", Didot, Georgia, serif; }
.shape-pagination-center { display: block !important; padding: 8px 0; border-bottom: 1px solid #c3bbb1; }
.shape-pagination-next { text-align: right; }
.shape-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 36px 4vw; color: #fff; background: var(--wine); }
.shape-footer p { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.shape-footer > a:last-child { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }

.closing { padding: 170px 8vw; background: var(--rust); color: #fff; text-align: center; }
.closing > p { margin: 0 0 25px; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.closing h2 { margin: 0; font-size: clamp(4rem, 9vw, 10rem); line-height: .82; letter-spacing: -.075em; }

.sources { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10vw; background: var(--cream); }
.sources .eyebrow { color: var(--wine); }
.sources h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .94; letter-spacing: -.05em; }
.source-copy > p { margin: 0 0 35px; font: 1.05rem/1.8 Georgia, serif; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 22px 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
details ul { margin: 0 0 28px; padding-left: 20px; }
details li { margin-bottom: 12px; font: .88rem/1.55 Georgia, serif; }
details a { text-underline-offset: 3px; }

footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 40px 4vw; color: #fff; background: var(--wine); }
footer p, footer > a:last-child { margin: 0; font-size: .65rem; letter-spacing: .08em; }
footer > a:last-child { text-transform: uppercase; }
.footer-links { display: flex; align-items: center; gap: 24px; }
.footer-links a { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }

/* Colofon */
.colophon-page { min-height: 100vh; background: var(--paper); }
.colophon-topbar { background: var(--paper); }
.colophon-article { display: grid; grid-template-columns: .92fr 1.08fr; min-height: calc(100vh - 165px); }
.colophon-intro { display: flex; flex-direction: column; justify-content: center; padding: 110px 8vw; color: #fff; background: var(--wine); }
.colophon-intro .eyebrow { color: #e6b6bc; }
.colophon-intro h1 { margin: 0; font: 500 clamp(4.8rem, 9vw, 9.5rem)/.82 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.075em; }
.colophon-lead { max-width: 590px; margin: 52px 0 0; font: 1.25rem/1.75 Georgia, serif; }
.colophon-details { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 90px 9vw; background: var(--cream); }
.colophon-details section { max-width: 710px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.colophon-details section:first-child { padding-top: 0; }
.colophon-details section:last-child { padding-bottom: 0; border-bottom: 0; }
.colophon-label { margin: 0 0 16px !important; color: var(--wine); font: 800 .65rem/1.4 Arial, sans-serif !important; letter-spacing: .17em; text-transform: uppercase; }
.colophon-details h2 { margin: 0 0 22px; font: 500 clamp(2.2rem, 3.4vw, 4rem)/1 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.045em; }
.colophon-details p { margin: 0; font: 1.04rem/1.78 Georgia, serif; }
.contact-mail { display: inline-block; margin-top: 25px; padding-bottom: 6px; border-bottom: 1px solid var(--wine); color: var(--wine); font: 700 .8rem/1.3 Arial, sans-serif; letter-spacing: .08em; text-decoration: none; }
.contact-mail:hover, .contact-mail:focus-visible { border-bottom-width: 2px; }
.colophon-footer > a:last-child { text-transform: none; }

/* Tijdelijke zomerspecial */
.summer-page { background: var(--cream); }
.summer-topbar { position: relative; z-index: 5; }
.summer-article { overflow: hidden; }
.summer-hero { display: grid; grid-template-columns: 44% 56%; min-height: 760px; }
.summer-title-panel { display: flex; flex-direction: column; justify-content: center; padding: 90px 6vw; color: #fff; background: var(--rust); }
.summer-title-panel .eyebrow { color: #f6dda8; }
.summer-title-panel h1 { margin: 0; font: 500 clamp(4.1rem, 7.1vw, 8.4rem)/.82 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.075em; }
.summer-title-panel h1 em { display: block; font-weight: 400; }
.summer-title-panel > p:last-child { max-width: 460px; margin: 44px 0 0; font: italic clamp(1.25rem, 2vw, 1.8rem)/1.4 Georgia, serif; }
.summer-hero-image { position: relative; min-height: 760px; overflow: hidden; background: #9c8e75; }
.summer-hero-image img { height: 100%; object-fit: cover; object-position: center; }
.summer-hero-image figcaption,
.summer-feature-photo figcaption,
.summer-photo-story figcaption { position: absolute; right: 22px; bottom: 18px; left: 22px; z-index: 2; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.summer-hero-image figcaption a,
.summer-feature-photo figcaption a { text-underline-offset: 3px; }

.summer-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 9vw; padding: 125px 12vw; background: var(--paper); }
.summer-intro p { margin: 0; font: 1.1rem/1.85 Georgia, serif; }
.summer-intro .summer-lead { font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.6; }
.summer-lead::first-letter { float: left; margin: 11px 12px 0 0; color: var(--rust); font: 6.8rem/.62 "Bodoni 72", Didot, Georgia, serif; }

.summer-section { padding: 125px 10vw; background: var(--cream); }
.summer-section-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.summer-number { margin: 0 0 24px; color: var(--rust); font: 500 3.8rem/1 "Bodoni 72", Didot, Georgia, serif; }
.summer-section h2,
.summer-photo-story h2,
.summer-advice h2,
.summer-heat-warning h2,
.summer-ending h2 { margin: 0; font: 500 clamp(3rem, 5vw, 5.8rem)/.94 "Bodoni 72", Didot, Georgia, serif; letter-spacing: -.055em; }
.summer-copy { max-width: 760px; }
.summer-copy > p,
.summer-photo-story > div > p:not(.summer-number),
.summer-advice > div:last-child p,
.summer-heat-warning > div p,
.summer-ending > div p { margin: 0 0 25px; font: 1.08rem/1.85 Georgia, serif; }
.summer-combinations { margin: 38px 0; padding: 28px 32px; border-left: 5px solid var(--rust); background: var(--paper); }
.summer-combinations > p { margin: 0 0 16px; color: var(--rust); font-size: .65rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.summer-combinations ul { margin: 0; padding-left: 20px; }
.summer-combinations li { margin: 8px 0; font: 1rem/1.5 Georgia, serif; }

.summer-feature-photo { position: relative; display: grid; place-items: center; padding: 100px 20vw; overflow: hidden; background: #241e1c; }
.summer-feature-photo img { height: auto; object-fit: contain; }
.summer-feature-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -160px 160px rgba(0,0,0,.2); pointer-events: none; }

.summer-photo-story { display: grid; grid-template-columns: 52% 48%; color: #fff; background: #25211f; }
.summer-photo-story figure { position: relative; min-height: 0; aspect-ratio: 2 / 3; overflow: hidden; }
.summer-photo-story figure img { height: 100%; object-fit: cover; object-position: center; }
.summer-photo-story > div { display: flex; flex-direction: column; justify-content: center; padding: 90px 7vw; }
.light-number { color: #e9a988; }
.summer-photo-story h2 { margin-bottom: 38px; }
.summer-photo-story > div > p:not(.summer-number) { color: #e1d9d1; }
.compact-section { padding-top: 140px; padding-bottom: 140px; }

.summer-advice { display: grid; grid-template-columns: .95fr 1.05fr; gap: 8vw; padding: 125px 10vw; color: #fff; background: var(--wine); }
.summer-advice .eyebrow { color: #e8abb7; }
.summer-advice h2 { max-width: 760px; }
.summer-advice > div:last-child { padding-top: 50px; }
.summer-advice > div:last-child p { color: #eadde0; }

.summer-heat-warning { padding: 140px 12vw; background: #e2cda8; }
.summer-heat-warning .eyebrow { color: var(--wine); }
.summer-heat-warning h2 { max-width: 1100px; }
.summer-heat-warning > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 65px; }

.summer-ending { padding: 150px 10vw; color: #fff; background: var(--rust); }
.summer-ending > p { margin: 0 0 28px; color: #f6dda8; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.summer-ending h2 { max-width: 1050px; font-size: clamp(4rem, 7vw, 8rem); }
.summer-ending > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin: 85px 0 75px; }
.summer-ending > div p { color: #fff6ee; font-size: 1rem; }
.summer-ending-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
.summer-ending-links a { display: inline-block; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.summer-ending-links a span { margin-left: 11px; }

/* Herfst- en wintertrends 2026–2027 */
.trend-page .summer-title-panel { background: #59604a; }
.trend-page .summer-title-panel .eyebrow { color: #ead9b5; }
.trend-page .summer-lead::first-letter,
.trend-page .summer-number { color: var(--wine); }
.trend-page .summer-combinations { border-left-color: var(--wine); }
.trend-page .summer-combinations > p { color: var(--wine); }
.trend-page .autumn-wide-photo { padding-top: 80px; padding-bottom: 80px; background: #302a24; }
.trend-page .autumn-photo-story { background: #3d332d; }
.trend-page .autumn-photo-story figure img { object-position: center 55%; }
.trend-page .autumn-materials { background: #59604a; }
.trend-page .autumn-materials .eyebrow { color: #ead9b5; }
.trend-page .autumn-outsiders { background: #d8c5aa; }
.trend-page .autumn-ending { background: #5d3d2d; }
.trend-page .autumn-ending > p { color: #ead9b5; }
.trend-sources { margin: 0 0 65px; border-color: rgba(255,255,255,.35); color: #fff; }
.trend-sources:last-of-type { border-bottom-color: rgba(255,255,255,.35); }
.trend-sources summary { color: #f2e2c7; }
.trend-sources ul { max-width: 850px; }
.trend-sources li { color: #fff6ee; }
.trend-sources a { color: inherit; }

@media (max-width: 900px) {
  .topbar nav { display: none; }
  .topbar .language-switch { display: inline-flex; margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 620px; padding: 120px 7vw 80px; }
  .hero h1 { font-size: clamp(4rem, 17vw, 7rem); }
  .standfirst, .read-link { margin-left: 0; }
  .hero-image { min-height: 650px; }
  .issue-mark { display: none; }
  .opening-grid, .timeline-head, .era-split, .era-split.reverse,
  .sixties-feature, .forms-intro, .sources { grid-template-columns: 1fr; }
  .opening-grid { gap: 50px; }
  .plate-section { grid-template-columns: 1fr; }
  .plate { min-height: 500px; }
  .plate-note { min-height: 280px; border-left: 0; }
  .period-index { grid-template-columns: repeat(2, 1fr); }
  .period-index-item { border-bottom: 1px solid var(--line); }
  .era-text-only { grid-template-columns: .25fr 1fr; }
  .era blockquote, .warm .side-caption { grid-column: 2; }
  .era-split.reverse .era-image { order: 0; }
  .era-image.tall, .era-image.landscape { height: 600px; }
  .sixties-feature { margin-left: -8vw; margin-right: -8vw; }
  .sixties-copy .era-date { margin-top: 35px; }
  .forms-grid { grid-template-columns: repeat(2, 1fr); }
  .shape-article { grid-template-columns: 1fr; }
  .shape-title-panel { min-height: 570px; }
  .shape-hero-image { min-height: 650px; }
  .shape-body { grid-column: 1; padding-right: 8vw; padding-left: 8vw; }
  .summer-promo { grid-template-columns: 1fr; }
  .summer-promo-image { min-height: 560px; }
  .summer-promo-copy { min-height: 520px; }
  .summer-hero { grid-template-columns: 1fr; }
  .summer-title-panel { min-height: 620px; }
  .summer-hero-image { min-height: 680px; }
  .summer-intro, .summer-section-grid, .summer-advice { grid-template-columns: 1fr; }
  .summer-intro { gap: 50px; }
  .summer-photo-story { grid-template-columns: 1fr; }
  .summer-photo-story figure { min-height: 0; }
  .summer-photo-story > div { min-height: 580px; }
  .summer-ending > div { grid-template-columns: 1fr; gap: 18px; }
  .colophon-article { grid-template-columns: 1fr; }
  .colophon-intro { min-height: 600px; }
}

@media (max-width: 560px) {
  .section-pad { padding: 78px 6vw; }
  .topbar { padding: 22px 6vw; }
  .wordmark { font-size: 1.05rem; }
  .hero-copy { min-height: 575px; padding-left: 6vw; padding-right: 6vw; }
  .hero h1 { font-size: clamp(3.8rem, 18vw, 5.5rem); }
  .standfirst { margin-top: 35px; font-size: 1rem; line-height: 1.55; }
  .hero-image { min-height: 560px; }
  .opening-grid { padding-top: 48px; }
  .opening h2, .timeline h2, .forms h2, .sources h2 { font-size: 3rem; }
  .opening-text p { font-size: 1rem; }
  .plate { min-height: 380px; }
  .plate figcaption { display: block; padding: 15px 6vw; }
  .plate figcaption span { display: block; margin-bottom: 6px; }
  .timeline { padding-top: 100px; }
  .timeline-head { gap: 20px; margin-bottom: 55px; }
  .period-index { margin-bottom: 90px; }
  .period-index-item { min-height: 120px; }
  .era { margin-bottom: 95px; }
  .era-text-only { grid-template-columns: 1fr; gap: 25px; padding: 45px 7vw; }
  .era blockquote, .warm .side-caption { grid-column: 1; }
  .era-number { font-size: 3rem; }
  .era h3, .sixties-feature h3 { font-size: 3rem; }
  .era-image.tall, .era-image.landscape { height: 480px; }
  .sixties-feature { margin-bottom: 100px; padding: 75px 6vw; }
  .sixties-gallery { min-height: 650px; }
  .gallery-main { width: 85%; height: 430px; }
  .gallery-small { width: 64%; height: 300px; }
  .forms-grid { grid-template-columns: 1fr; }
  .form-card { min-height: 240px; }
  .form-card h3 { margin-top: 50px; }
  .shape-topbar { flex-wrap: wrap; padding: 22px 6vw; }
  .shape-topbar .shape-overview-link { order: 3; width: 100%; margin-top: 4px; border-bottom: 0; }
  .shape-topbar .language-switch { margin-left: auto; }
  .shape-title-panel { min-height: 510px; padding: 90px 7vw 65px; }
  .shape-title-panel h1 { font-size: clamp(4rem, 18vw, 5.8rem); }
  .shape-hero-image { min-height: 520px; }
  .shape-body { grid-template-columns: 1fr; gap: 55px; padding: 78px 7vw 90px; }
  .shape-story p { font-size: 1.03rem; }
  .shape-pagination { grid-template-columns: 1fr 1fr; }
  .shape-pagination-center { display: none !important; }
  .shape-footer { align-items: flex-start; flex-direction: column; gap: 14px; padding: 32px 6vw; }
  .closing { padding: 105px 6vw; }
  .closing h2 { font-size: clamp(3.8rem, 17vw, 6rem); }
  footer { align-items: flex-start; flex-direction: column; padding: 35px 6vw; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-left: 0; }
  .seasonal-cta { max-width: 100%; }
  .summer-promo-image { min-height: 420px; }
  .summer-promo-copy { min-height: 500px; padding: 65px 8vw; }
  .summer-promo-copy h2 { font-size: 3.7rem; }
  .summer-topbar { align-items: flex-start; gap: 20px; padding: 22px 6vw; }
  .summer-topbar .shape-overview-link { max-width: none; text-align: left; line-height: 1.45; }
  .summer-title-panel { min-height: 540px; padding: 80px 8vw; }
  .summer-title-panel h1 { font-size: clamp(4rem, 18vw, 5.7rem); }
  .summer-hero-image { min-height: 520px; }
  .summer-intro { padding: 80px 8vw; }
  .summer-intro .summer-lead { font-size: 1.35rem; }
  .summer-section { padding: 85px 8vw; }
  .summer-section h2, .summer-photo-story h2, .summer-advice h2, .summer-heat-warning h2 { font-size: 3.1rem; }
  .summer-number { font-size: 3rem; }
  .summer-feature-photo { padding: 55px 0; }
  .summer-photo-story figure { min-height: 0; }
  .summer-photo-story > div { min-height: 560px; padding: 75px 8vw; }
  .summer-advice { padding: 85px 8vw; gap: 30px; }
  .summer-advice > div:last-child { padding-top: 10px; }
  .summer-heat-warning { padding: 90px 8vw; }
  .summer-heat-warning > div { grid-template-columns: 1fr; gap: 10px; margin-top: 45px; }
  .summer-ending { padding: 100px 8vw; }
  .summer-ending h2 { font-size: 4rem; }
  .summer-ending > div { margin: 60px 0 55px; }
  .summer-ending > .summer-ending-links { margin: 0; }
  .footer-links { align-items: flex-start; flex-direction: column; gap: 13px; }
  .colophon-intro { min-height: 500px; padding: 85px 8vw; }
  .colophon-intro h1 { font-size: clamp(4.6rem, 22vw, 7rem); }
  .colophon-lead { margin-top: 40px; font-size: 1.08rem; }
  .colophon-details { padding: 72px 8vw; }
  .colophon-details section { padding: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Anatomie van een laars / Anatomy of a boot */
.anatomy-page { background: var(--paper); }
.anatomy-hero { display:grid; grid-template-columns: 43% 57%; min-height:760px; background:#e7dfd3; }
.anatomy-title { display:flex; flex-direction:column; justify-content:center; padding:100px 6vw; color:#fff; background:#5d3d2d; }
.anatomy-title .eyebrow { color:#ead9b5; }
.anatomy-title h1,.anatomy-grid h2,.anatomy-combination h2,.anatomy-ending h2 { font-family:"Bodoni 72",Didot,Georgia,serif; font-weight:500; }
.anatomy-title h1 { margin:0; font-size:clamp(4rem,7vw,8rem); line-height:.84; letter-spacing:-.065em; }
.anatomy-title > p:last-child { max-width:520px; margin:42px 0 0; font:1.15rem/1.7 Georgia,serif; }
.anatomy-diagram { display:flex; flex-direction:column; justify-content:center; padding:55px 4vw 30px; }
.anatomy-diagram img { width:100%; max-height:680px; object-fit:contain; }
.anatomy-diagram figcaption { margin-top:12px; color:#665d55; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.anatomy-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:8vw; padding:110px 9vw; }
.anatomy-lead { margin:0; font:1.75rem/1.55 Georgia,serif; }
.anatomy-intro div p { margin:0 0 22px; font:1.05rem/1.8 Georgia,serif; }
.anatomy-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin:0 8vw 130px; }
.anatomy-grid article { min-height:470px; display:flex; flex-direction:column; padding:55px 4vw; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.anatomy-grid article:last-child { grid-column:1 / -1; min-height:390px; padding-right:28vw; }
.anatomy-grid span { color:var(--wine); font:500 2.2rem/1 Georgia,serif; }
.anatomy-grid h2 { margin:48px 0 5px; font-size:clamp(2.8rem,4.5vw,5rem); line-height:.95; letter-spacing:-.045em; }
.anatomy-grid h3 { margin:0 0 25px; color:#746b63; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.anatomy-grid p { margin:0; font:1.03rem/1.78 Georgia,serif; }
.anatomy-grid b { margin-top:auto; padding-top:35px; color:var(--wine); font-size:.62rem; letter-spacing:.11em; line-height:1.6; text-transform:uppercase; }
.anatomy-combination { padding:125px 9vw; color:#fff; background:#24211e; }
.anatomy-combination .eyebrow { color:#d8b46d; }
.anatomy-combination h2 { max-width:950px; margin:0; font-size:clamp(4rem,7vw,8rem); line-height:.9; letter-spacing:-.06em; }
.anatomy-combination > div { display:grid; grid-template-columns:repeat(3,1fr); gap:4vw; margin-top:80px; }
.anatomy-combination p:not(.eyebrow) { color:#d9d1c8; font:1rem/1.75 Georgia,serif; }
.anatomy-ending { padding:130px 9vw; color:#fff; background:var(--rust); }
.anatomy-ending > p:first-child { color:#f6dda8; font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.anatomy-ending h2 { max-width:1000px; margin:28px 0 40px; font-size:clamp(4rem,7vw,8rem); line-height:.9; letter-spacing:-.06em; }
.anatomy-ending > p:not(:first-child) { max-width:780px; font:1.1rem/1.75 Georgia,serif; }
.anatomy-ending .summer-ending-links { margin-top:70px; }
.anatomy-promo { display:grid; grid-template-columns:42% 58%; min-height:400px; background:#e7dfd3; }
.anatomy-promo-copy { display:flex; flex-direction:column; justify-content:center; padding:60px 6vw; }
.anatomy-promo-copy .eyebrow { color:var(--wine); }
.anatomy-promo-copy h2 { margin:0 0 22px; font:500 clamp(2.8rem,4.5vw,5rem)/.92 "Bodoni 72",Didot,Georgia,serif; letter-spacing:-.05em; }
.anatomy-promo-copy p { margin:0 0 26px; font:1rem/1.7 Georgia,serif; }
.anatomy-promo-copy a { align-self:flex-start; padding-bottom:7px; border-bottom:1px solid var(--ink); font-size:.65rem; font-weight:800; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.anatomy-promo figure { padding:30px 4vw; display:flex; align-items:center; }
.anatomy-promo img { max-height:350px; object-fit:contain; }
@media(max-width:900px){.anatomy-hero,.anatomy-intro,.anatomy-promo{grid-template-columns:1fr}.anatomy-title{min-height:600px}.anatomy-diagram{min-height:580px}.anatomy-grid{grid-template-columns:1fr}.anatomy-grid article:last-child{grid-column:auto;padding-right:4vw}.anatomy-combination>div{grid-template-columns:1fr}.anatomy-promo figure{order:-1;min-height:380px}}
@media(max-width:560px){.anatomy-title{min-height:520px;padding:80px 7vw}.anatomy-title h1{font-size:clamp(4rem,17vw,5.5rem)}.anatomy-diagram{min-height:430px;padding:35px 3vw}.anatomy-intro{padding:80px 7vw}.anatomy-lead{font-size:1.35rem}.anatomy-grid{margin:0 6vw 90px}.anatomy-grid article{min-height:430px;padding:45px 7vw}.anatomy-grid h2{font-size:3.2rem}.anatomy-combination,.anatomy-ending{padding:90px 8vw}.anatomy-combination h2,.anatomy-ending h2{font-size:4rem}.anatomy-combination>div{margin-top:55px}.anatomy-promo-copy{padding:60px 8vw}.anatomy-promo figure{min-height:300px}}