/* Hensen Kappers, Bloemendaal
   Basis uit de Winkelierweb-template: alleen reset en toegankelijkheid.
   Al het andere (fonts, kleuren, layout, menu, open/gesloten-status, animaties) is per winkel uniek
   en schrijf je hieronder bij "Design". De class-afspraken met js/main.js staan in index.html. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

/* ---------- Toegankelijkheid ---------- */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Design ---------- */
/* Concept: een modetijdschrift. De homepage is de cover (masthead, coverlines, coverfoto),
   daarna een inhoudsopgave met paginanummers, rubrieken en een colofon als footer.
   Kleuren: papier, inkt, het grijsgroen van het logo en een roestrood uit de kleurfoto's. */

@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #F3EFE8;
  --paper-2: #E9E3D9;
  --ink: #1F2420;
  --sage: #525B52;
  --rouge: #A33A24;
  --line: rgba(31, 36, 32, .2);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--rouge); }
em { font-style: italic; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { background: var(--ink); color: var(--paper); }
::selection { background: var(--rouge); color: #fff; }

/* ---------- typografie ---------- */
.kicker, .pagehead__kicker, .cover__kicker, .colofon__kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); margin-bottom: .9rem;
}
.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 1.25rem; }
.h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.2; margin: 1.75rem 0 .6rem; }
.h2 em, .cover__title em, .pagehead__title em, .notfound__title em { color: var(--rouge); }
p + p { margin-top: 1em; }
.lead { font-family: var(--serif); font-size: 1.4rem; line-height: 1.4; }
.pageno { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 1rem; color: var(--sage); }

/* ---------- knoppen & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.3rem;
  border: 1px solid var(--ink); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-arrow { display: inline-block; margin-top: 1.25rem; font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.link-arrow::after { content: " \2192"; display: inline-block; transition: transform .25s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- issuebar & masthead ---------- */
.issuebar { background: var(--ink); color: var(--paper); font-size: .78rem; letter-spacing: .06em; }
.issuebar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.issuebar p { margin: 0; }
.issuebar__ed { display: none; text-transform: uppercase; letter-spacing: .16em; }
.issuebar__tel { text-decoration: none; font-weight: 600; white-space: nowrap; }
.issuebar__tel:hover { color: #fff; text-decoration: underline; }
.open-status { display: inline-flex; align-items: center; gap: .55rem; }
.open-status__dot { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: #9aa39a; flex: none; }
.open-status[data-open="true"] .open-status__dot { background: #6FCF7F; }
.open-status[data-open="true"] .open-status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #6FCF7F; animation: pulse 2.4s 3; }
.open-status[data-open="false"] .open-status__dot { background: #E0806A; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

.masthead { border-bottom: 1px solid var(--ink); background: var(--paper); position: relative; z-index: 20; }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.masthead__logo { display: block; flex: none; }
.masthead__logo img { width: clamp(200px, 28vw, 300px); }
.nav-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .25rem; background: none; border: 0; cursor: pointer;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--rouge); }

@media (max-width: 1023px) {
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav ul { padding: .5rem var(--gutter) 1.5rem; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: .8rem 0; font-family: var(--serif); font-size: 1.6rem; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav ul { display: flex; gap: 1.6rem; }
  .site-nav a { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 0; border-bottom: 1px solid transparent; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-color: currentColor; }
}
@media (min-width: 700px) { .issuebar__ed { display: block; } }

/* ---------- cover (homepage-hero) ---------- */
.cover { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.cover__grid { display: grid; gap: 2rem; }
.cover__title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 9.5vw, 6.1rem); line-height: .95; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.cover__lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.4; max-width: 30ch; }
.coverlines { list-style: none; margin: 1.8rem 0; padding: 0; border-top: 1px solid var(--ink); }
.coverlines li { border-bottom: 1px solid var(--line); }
.coverlines a { display: flex; gap: 1rem; align-items: baseline; padding: .7rem 0; text-decoration: none; font-weight: 600; font-size: .98rem; }
.coverlines__no { font-family: var(--serif); font-style: italic; color: var(--rouge); font-weight: 500; }
.cover__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.cover__photo { position: relative; }
.cover__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.cover__badge {
  position: absolute; left: -.5rem; bottom: 1.5rem; width: 8.5rem; height: 8.5rem; border-radius: 50%;
  background: var(--rouge); color: #fff; display: grid; place-content: center; text-align: center; text-decoration: none; line-height: 1.15;
  transform: rotate(-8deg); box-shadow: 0 10px 30px rgba(31, 36, 32, .25); transition: transform .3s;
}
.cover__badge:hover { color: #fff; transform: rotate(0) scale(1.04); }
.cover__badge strong { font-family: var(--serif); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.cover__badge span { font-size: .7rem; letter-spacing: .1em; margin: .25rem 0; }
.cover__badge small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; max-width: 6rem; }
@media (min-width: 800px) {
  .cover__grid { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .cover__photo img { aspect-ratio: 3 / 4; }
  .cover__badge { left: -3rem; }
}
@media (min-width: 800px) and (min-height: 700px) {
  .cover { min-height: calc(100vh - 7.4rem); min-height: calc(100svh - 7.4rem); display: flex; align-items: center; }
  .cover__grid { width: 100%; }
}
.js .cover__text > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.js .cover__text > :nth-child(2) { animation-delay: .08s; }
.js .cover__text > :nth-child(3) { animation-delay: .16s; }
.js .cover__text > :nth-child(4) { animation-delay: .24s; }
.js .cover__text > :nth-child(5) { animation-delay: .32s; }
.js .cover__photo img { animation: unveil 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes unveil { from { opacity: 0; transform: scale(1.04); } }

/* ---------- inhoudsopgave ---------- */
.toc { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--ink); }
.toc__title { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.5rem; }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 3rem; }
@media (min-width: 800px) { .toc__list { grid-template-columns: 1fr 1fr; } }
.toc__list a { display: grid; grid-template-columns: 4rem 1fr; gap: .1rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.toc__list strong { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.1; transition: color .2s; }
.toc__list a > span:last-child { grid-column: 2; color: var(--sage); font-size: .95rem; }
.toc__list .pageno { grid-row: span 2; padding-top: .35rem; }
.toc__list a:hover strong { color: var(--rouge); }

/* ---------- interview ---------- */
.interview { background: var(--paper-2); padding-block: clamp(3.5rem, 8vw, 7rem); }
.interview__grid { display: grid; gap: 2.5rem; align-items: center; }
.interview__photo img { width: 100%; max-width: 420px; }
.interview__photo figcaption { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin-top: .6rem; }
.pullquote { border-left: 2px solid var(--rouge); padding-left: 1.4rem; margin: 0 0 1.75rem; }
.pullquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.35; }
@media (min-width: 800px) {
  .interview__grid { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .columns { columns: 2; column-gap: 2rem; }
  .columns p { break-inside: avoid; }
}

/* ---------- features ---------- */
.feature { padding-block: clamp(3.5rem, 8vw, 7rem); }
.feature__wide img { width: 100%; aspect-ratio: 980 / 339; object-fit: cover; }
.feature__body { max-width: 44rem; margin-top: 2rem; }
.feature__split { display: grid; gap: 2rem; align-items: center; }
.feature__split img { width: 100%; }
@media (min-width: 800px) { .feature__split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); } }
.feature--dark { background: var(--ink); color: var(--paper); }
.feature--dark .kicker { color: #E7A08E; }
.feature--dark a:hover { color: #E7A08E; }
.products-teaser { padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--line); }

/* ---------- lezerspost (reviews) ---------- */
.letters { padding-block: clamp(3.5rem, 8vw, 7rem); border-top: 1px solid var(--ink); }
.letters__head { max-width: 46rem; margin-bottom: 2.5rem; }
.letters__score { font-size: .95rem; color: var(--sage); }
.letters__score strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; color: var(--ink); margin-right: .4rem; }
.letters__grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .letters__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .letters__grid { grid-template-columns: repeat(4, 1fr); } }
.letter { border-top: 2px solid var(--ink); padding-top: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.letter blockquote { margin: 0; }
.letter blockquote p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; }
.letter blockquote p::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--rouge); margin-bottom: .4rem; }
.letter figcaption { font-weight: 600; font-size: .9rem; }
.letter figcaption span { font-weight: 400; color: var(--sage); }

/* ---------- salon-spread ---------- */
.spread { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--paper-2); }
.spread__grid { display: grid; gap: 1.5rem; }
.spread__grid img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
@media (min-width: 800px) {
  .spread__grid { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .spread__b { margin-bottom: -3rem; }
}

/* ---------- nieuws ---------- */
.news { padding-block: clamp(3.5rem, 8vw, 7rem); }
.news__grid { display: grid; gap: 2rem; margin-top: 1rem; }
@media (min-width: 800px) { .news__grid { grid-template-columns: repeat(3, 1fr); } }
.newscard { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.newscard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s; }
.newscard:hover img { transform: scale(1.03); }
.newscard__date { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-top: .5rem; }
.newscard strong { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }

/* ---------- afspraak-callout ---------- */
.callout { margin-block: clamp(3rem, 6vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--ink); text-align: center; display: grid; justify-items: center; gap: .75rem; }
.callout__q { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; }
.callout__txt { margin: 0 0 .75rem; color: var(--sage); }

/* ---------- subpagina's ---------- */
.pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.pagehead__kicker .pageno { margin-right: .75rem; }
.pagehead__title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -.02em; border-bottom: 1px solid var(--ink); padding-bottom: 1.5rem; }
.pagehead__lead { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; max-width: 44rem; margin-top: 1.5rem; }

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-block: 1rem 2rem; }
.strip img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
@media (min-width: 800px) { .strip { grid-template-columns: repeat(4, 1fr); } .strip img:nth-child(even) { margin-top: 2.5rem; } }

.chapter { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.chapter__img img { width: 100%; }
.chapter__no { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--rouge); margin-bottom: .4rem; }
@media (min-width: 800px) {
  .chapter { grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .chapter--flip .chapter__img { order: 2; }
  .chapter__img { position: sticky; top: 1.5rem; }
}
.menu-list { margin: 1rem 0 0; }
.menu-list > div { padding: .9rem 0; border-top: 1px solid var(--line); }
.menu-list dt { font-family: var(--serif); font-size: 1.3rem; }
.menu-list dd { margin: .2rem 0 0; color: #3d443e; }
.aside { margin-top: 2rem; padding: 1.5rem 1.75rem; background: var(--paper-2); border-left: 2px solid var(--rouge); }
.aside .h3 { margin-top: 0; }
.aside--wide { max-width: 50rem; margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); margin-right: var(--gutter); margin-bottom: 2rem; }

/* prijslijst */
.pricenav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.pricenav a { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: .55rem .9rem; border: 1px solid var(--line); min-height: 44px; display: inline-flex; align-items: center; }
.pricenav a:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.pricegrid { display: grid; gap: 3rem 4rem; }
@media (min-width: 900px) { .pricegrid { grid-template-columns: 1.2fr 1fr; } .pricegrid > #dames { grid-row: span 3; } }
.pricelist__title { font-family: var(--serif); font-weight: 500; font-size: 2.2rem; border-bottom: 2px solid var(--ink); padding-bottom: .4rem; margin-bottom: .5rem; }
.pricelist table { width: 100%; border-collapse: collapse; }
.pricelist tbody + tbody tr:first-child > * { padding-top: 1.4rem; }
.pricelist th { text-align: left; font-weight: 400; padding: .45rem 1rem .45rem 0; vertical-align: top; }
.pricelist td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding: .45rem 0; vertical-align: top; font-weight: 600; }
.pricelist tr { border-bottom: 1px dotted rgba(31, 36, 32, .35); }
.pricelist abbr { text-decoration: none; font-weight: 400; color: var(--sage); font-size: .85em; }
.pricelist__note { display: block; font-size: .85rem; color: var(--sage); }

/* producten */
.brands { display: grid; gap: 2.5rem; }
.brand img { width: 100%; }
.brand__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--ink); padding: .9rem 0; }
.brand__bar .link-arrow { margin: 0; }
.brand__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.brand--story { background: var(--paper-2); padding: clamp(1.5rem, 4vw, 3rem); }
.brand--story .brand__name { margin-bottom: 1rem; }
.brand__row { margin-top: 2rem; mix-blend-mode: multiply; }

/* team */
.team { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
@media (min-width: 600px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .team { grid-template-columns: repeat(5, 1fr); } }
.member img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; filter: grayscale(.25); transition: filter .4s; }
.member:hover img { filter: none; }
.member__name { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin-top: .8rem; }
.member__days { font-size: .9rem; color: var(--sage); }

/* shows */
.feature__split .dhc-logo { width: 120px; margin-bottom: 1.5rem; }
.pagehead + .feature__split { padding-bottom: clamp(3rem, 6vw, 5rem); }
.videos { display: grid; gap: 1.25rem; }
.video { position: relative; display: block; text-decoration: none; color: #fff; overflow: hidden; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s; }
.video:hover img { transform: scale(1.03); }
.video__play { position: absolute; top: 50%; left: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: var(--rouge); }
.video__play::after { content: ""; position: absolute; left: 1.6rem; top: 1.25rem; border-left: 1.2rem solid #fff; border-block: .75rem solid transparent; }
.video__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem .8rem; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.feature--dark .video:hover { color: #fff; }

/* blog */
.posts { display: grid; gap: 0; }
.post { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.post__img img { width: 100%; }
.post__date { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); font-weight: 600; margin-bottom: .6rem; }
.post .h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
@media (min-width: 800px) { .post { grid-template-columns: 4fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } }

/* contact */
.visit { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 800px) { .visit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .visit { grid-template-columns: repeat(3, 1fr) 1.1fr; align-items: start; } }
.visit__card { border-top: 2px solid var(--ink); padding-top: .5rem; }
.visit__card .h3 { margin-top: .75rem; }
.visit__big { font-family: var(--serif); font-size: 1.8rem; margin-top: .8rem; }
.visit__big a { text-decoration: none; }
.visit .btnrow { margin-top: 1.25rem; }
.visit__photo img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.open-status--big { margin-top: 1rem; padding: .6rem .9rem; background: var(--ink); color: var(--paper); font-size: .9rem; }
.social { padding-block: 2rem 4rem; border-top: 1px solid var(--line); }
.social .btnrow { margin-top: 1rem; }

/* privacy */
.prose { max-width: 48rem; padding-bottom: 4rem; margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.prose ul { padding-left: 1.2rem; margin: 1rem 0; }
.prose li + li { margin-top: .35rem; }

/* ---------- colofon (footer) ---------- */
.colofon { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.colofon__kicker { color: #E7A08E; }
.colofon__grid { display: grid; gap: 2.5rem; border-top: 1px solid rgba(243, 239, 232, .3); padding-top: 2rem; }
@media (min-width: 800px) { .colofon__grid { grid-template-columns: 1.1fr 1.2fr 1fr; } }
.colofon__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-bottom: .8rem; }
.colofon a:hover { color: #E7A08E; }
.colofon__note { color: #c6c9c3; font-style: italic; margin-top: .8rem; }
.colofon__links { margin-top: .5rem; }
.colofon__nav { list-style: none; padding: 0; margin: 0; columns: 2; }
.colofon__nav a { display: inline-block; padding: .25rem 0; text-decoration: none; }
.colofon__social { display: flex; gap: 1.25rem; margin-top: 1rem; }
.colofon__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(243, 239, 232, .3); font-size: .85rem; color: #c6c9c3; }
.colofon__end img { width: min(260px, 60vw); opacity: .9; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: .38rem 0; border-bottom: 1px solid rgba(243, 239, 232, .15); font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-closed td { color: #a9ada6; }
.hours .is-today th, .hours .is-today td { font-weight: 600; color: #fff; }
.hours .is-today th::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #E7A08E; margin-right: .5rem; vertical-align: middle; }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.notfound__in { max-width: 40rem; text-align: center; display: grid; justify-items: center; gap: 1rem; }
.notfound__in img { width: 240px; margin-bottom: 2rem; }
.notfound__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; }

/* ---------- scroll-animatie ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .cover__text > *, .js .cover__photo img { animation: none; }
}