/* ---------- Fonts ---------- */
@font-face{ font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 400; font-display: swap; src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Manrope'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Manrope'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root{
    --bg: #EFEAE2;
    --bg-soft: #F5F2EB;
    --ink: #262421;
    --ink-soft: #55504A;
    --line: #DDD5C7;
    --paper: #FBF9F5;
    --accent: #9C4A2E;
    --accent-deep: #7E3A22;
    --white: #FFFFFF;
}

/* ---------- Basis ---------- */
*, ::after, ::before{ box-sizing: border-box; }
body{ margin: 0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
hr{ margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
h1, h2, h3, h4, h5, h6, .section-title{ margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; color: inherit; }
h1{ font-size: calc(1.375rem + 1.5vw); }
h2, .section-title{ font-size: calc(1.325rem + .9vw); }
h3{ font-size: calc(1.3rem + .6vw); }
h4{ font-size: calc(1.275rem + .3vw); }
h5{ font-size: 1.25rem; }
h6{ font-size: 1rem; }
p{ margin-top: 0; margin-bottom: 1rem; }
abbr[title]{ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }
address{ margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul{ padding-left: 2rem; }
dl, ol, ul{ margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul{ margin-bottom: 0; }
dt{ font-weight: 700; }
dd{ margin-bottom: .5rem; margin-left: 0; }
blockquote{ margin: 0 0 1rem; }
b, strong{ font-weight: bolder; }
small{ font-size: .875em; }
mark{ padding: .1875em; color: #212529; background-color: #fff3cd; }
sub, sup{ position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub{ bottom: -.25em; }
sup{ top: -.5em; }
a{ color: inherit; text-decoration: underline; }
a:hover{ color: var(--accent); }
a:not([href]):not([class]), a:not([href]):not([class]):hover{ color: inherit; text-decoration: none; }
code, kbd, pre, samp{ font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 1em; }
pre{ display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
pre code{ font-size: inherit; color: inherit; word-break: normal; }
code{ font-size: .875em; color: #d63384; word-wrap: break-word; }
a>code{ color: inherit; }
kbd{ padding: .1875rem .375rem; font-size: .875em; color: #fff; background-color: #212529; border-radius: .25rem; }
kbd kbd{ padding: 0; font-size: 1em; }
figure{ margin: 0 0 1rem; }
img, svg{ vertical-align: middle; }
table{ caption-side: bottom; border-collapse: collapse; }
caption{ padding-top: .5rem; padding-bottom: .5rem; color: rgba(33, 37, 41, 0.75); text-align: left; }
th{ text-align: inherit; text-align: -webkit-match-parent; }
tbody, td, tfoot, th, thead, tr{ border-color: inherit; border-style: solid; border-width: 0; }
label{ display: inline-block; }
button{ border-radius: 0; }
button:focus:not(:focus-visible){ outline: 0; }
button, input, optgroup, select, textarea{ margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select{ text-transform: none; }
[role=button]{ cursor: pointer; }
select{ word-wrap: normal; }
select:disabled{ opacity: 1; }
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{ display: none!important; }
[type=button], [type=reset], [type=submit], button{ -webkit-appearance: button; }
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled){ cursor: pointer; }
::-moz-focus-inner{ padding: 0; border-style: none; }
textarea{ resize: vertical; }
fieldset{ min-width: 0; padding: 0; margin: 0; border: 0; }
legend{ float: left; width: 100%; padding: 0; margin-bottom: .5rem; font-size: calc(1.275rem + .3vw); line-height: inherit; }
@media (min-width: 1200px){
    h1{ font-size: 2.5rem; }
    h2, .section-title{ font-size: 2rem; }
    h3{ font-size: 1.75rem; }
    h4{ font-size: 1.5rem; }
    legend{ font-size: 1.5rem; }
}
legend+*{ clear: left; }
::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-year-field{ padding: 0; }
::-webkit-inner-spin-button{ height: auto; }
[type=search]{ -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration{ -webkit-appearance: none; }
::-webkit-color-swatch-wrapper{ padding: 0; }
::-webkit-file-upload-button{ font: inherit; -webkit-appearance: button; }
::file-selector-button{ font: inherit; -webkit-appearance: button; }
output{ display: inline-block; }
iframe{ border: 0; }
summary{ display: list-item; cursor: pointer; }
progress{ vertical-align: baseline; }
[hidden]{ display: none!important; }
.container{ width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px){
    .container{ max-width: 540px; }
}
@media (min-width: 768px){
    .container{ max-width: 720px; }
}
@media (min-width: 992px){
    .container{ max-width: 960px; }
}
@media (min-width: 1200px){
    .container{ max-width: 1140px; }
}
@media (min-width: 1400px){
    .container{ max-width: 1320px; }
}
.visually-hidden{ width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.visually-hidden:not(caption){ position: absolute!important; }
.d-flex{ display: flex!important; }
.justify-content-between{ justify-content: space-between!important; }
.align-items-center{ align-items: center!important; }
.mx-auto{ margin-right: auto!important; margin-left: auto!important; }
.fst-italic{ font-style: italic!important; }
.text-center{ text-align: center!important; }

::selection{ background: var(--accent); color: var(--white); }
html{ scroll-behavior: smooth; }

body{
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-serif, .section-title,
.intro-title, .story-opener-title, .page-header-heading{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.01em;
}

p{ color: var(--ink-soft); }

b, strong{ font-weight: 500; }

blockquote.text-quote{
    margin: 2.75rem 0;
    padding-left: 1.75rem;
    border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
blockquote.text-quote p{
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink);
}
blockquote.text-quote p + p{ margin-top: 1rem; }
blockquote.text-quote p:first-child::before{ content: '\201C'; }
blockquote.text-quote p:last-child::after{ content: '\201D'; }

.container-narrow{ max-width: 640px; }

/* ---------- Navigation ---------- */
.nav-overlay{
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    padding: 2.5rem 0;
    transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}

.nav-overlay.is-inline{
    position: fixed;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0;
    animation: navSlideOut 0.45s ease-out;
}

.nav-overlay.is-static{ animation: none; transition: none; }

@keyframes navSlideOut{
    from{ transform: translateY(-100%); }
    to{ transform: translateY(0); }
}

.nav-overlay.is-inline .brand{ font-size: 1.35rem; }

.nav-overlay .brand{
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    letter-spacing: 0.08em;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-overlay .brand .logo-mark{
    height: 30px;
    transition: height 0.3s ease;
}

.nav-overlay.is-inline .brand .logo-mark{ height: 24px; }

.brand-text{ display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-tagline{
    margin-top: 0.35rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
}
.nav-overlay.is-inline .brand-tagline{ margin-top: 0.25rem; font-size: 0.47rem; letter-spacing: 0.28em; }

.brand-tagline{
    display: flex;
    justify-content: center;
    gap: 0.6em;
    width: 0;
    min-width: 100%;
    white-space: nowrap;
}
.brand-tagline::before{ content: '\2013'; content: '\2013' / ''; }
.brand-tagline::after{ content: '\2013'; content: '\2013' / ''; letter-spacing: 0; }

/* Logo */
.logo-mark{ width: auto; display: block; flex-shrink: 0; }
.logo-mark .logo-ring{ fill: currentColor; opacity: 0.45; }
.logo-mark .logo-ring-accent{ fill: currentColor; opacity: 0.75; }
.logo-mark .logo-heart{ fill: currentColor; }
.logo-mark .logo-corners{ fill: none; stroke: currentColor; stroke-width: 1.417; }

.nav-overlay.is-inline .brand{ color: var(--ink); }

.nav-overlay .nav-links a{
    color: var(--white);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    margin-left: 2.75rem;
    opacity: 0.88;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.nav-overlay .nav-links a:hover{ opacity: 1; }

.nav-overlay .nav-links a{ position: relative; }
.nav-overlay .nav-links a::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.55em;
    width: 1rem;
    height: 1px;
    margin-left: -0.5rem;
    background: currentColor;
    opacity: 0.6;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-overlay .nav-links a:hover::after,
.nav-overlay .nav-links a:focus-visible::after,
.nav-overlay .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }

.nav-overlay.is-inline .nav-links a{ color: var(--ink); }

/* Hamburger */
.nav-toggle{
    display: none;
    width: 26px;
    height: 18px;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 60;
}

.nav-toggle span{
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--white);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

.nav-overlay.is-inline .nav-toggle span{ background: var(--ink); }

.nav-toggle span:nth-child(1){ top: 0; }
.nav-toggle span:nth-child(2){ top: 8px; }
.nav-toggle span:nth-child(3){ top: 16px; }

.nav-toggle.is-open span{ background: var(--ink); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-menu{
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 29;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.mobile-menu.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu a{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-style: italic;
    color: var(--ink);
    text-decoration: none;
}

.mobile-menu a{ position: relative; }
.mobile-menu a[aria-current="page"]::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2em;
    width: 1.25rem;
    height: 1px;
    margin-left: -0.625rem;
    background: currentColor;
    opacity: 0.45;
}

@media (max-width: 767px){
    .nav-overlay .nav-links{ display: none; }
    .nav-overlay{ padding: 1.25rem 0 2rem; }
    .nav-toggle{ display: block; }

    .nav-overlay .brand{ font-size: 1.35rem; gap: 0.75rem; }
    .nav-overlay .brand .logo-mark{ height: 24px; }
    .brand-tagline{ margin-top: 0.25rem; font-size: 0.47rem; letter-spacing: 0.28em; }

    .nav-overlay.is-inline{
        background: transparent;
        border-bottom: none;
        padding: 1.25rem 0;
        pointer-events: none;
    }
    .nav-overlay.is-inline .nav-toggle,
    .nav-overlay.menu-open .brand{ pointer-events: auto; }

    .nav-overlay.is-inline .brand{ visibility: hidden; }

    .nav-overlay.menu-open{ position: fixed; }
    .nav-overlay.menu-open .brand{ visibility: visible; color: var(--ink); }
}

/* ---------- Hero slider ---------- */
.hero{
    position: relative;
    width: 100%;
    height: min(66.667vw, 85svh);
    min-height: 480px;
    overflow: hidden;
    background: #1b1a18;
    isolation: isolate;
    --slide-duration: 5s;
}

.hero-slide{
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: var(--bg-pos, center);
    opacity: 0;
    will-change: opacity, transform;
}

@media (max-width: 767px){
    .hero{ height: auto; min-height: 0; aspect-ratio: 2 / 3; }
    .hero-slide{ background-image: var(--bg-mobile, var(--bg)); background-position: var(--bg-pos-mobile, center); }
}

.hero:not(.is-ready) .hero-slide:first-child{ opacity: 1; z-index: 1; transform: scale(1.0097); }
.hero.is-ready .hero-slide.is-active,
.hero.is-ready .hero-slide.is-leaving{
    opacity: 1;
    animation: heroIn calc(var(--slide-duration) * 0.24) linear both, heroZoom calc(var(--slide-duration) * 1.24) linear both;
}
.hero.is-ready .hero-slide.is-active{ z-index: 2; }
.hero.is-ready .hero-slide.is-leaving{ z-index: 1; }

@keyframes heroIn{
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heroZoom{
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

.hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    z-index: 3;
}

@media (prefers-reduced-motion: reduce){
    .hero-slide:not(:first-child){ display: none; }
}

/* ---------- Buttons ---------- */
.btn-quiet{
    --btn-fill: rgba(38, 36, 33, 0.05);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-block;
    padding: 0.95rem 2.4rem;
    border: 1px solid rgba(38, 36, 33, 0.4);
    color: var(--ink);
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: border-color 0.6s ease;
}

.btn-quiet::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn-quiet:hover,
.btn-quiet:focus-visible{
    color: var(--ink);
    border-color: rgba(38, 36, 33, 0.7);
}

.btn-quiet:hover::before,
.btn-quiet:focus-visible::before{
    transform: scaleX(1);
    transform-origin: left;
}

.btn-quiet-light{
    display: inline-block;
    padding: 0.6rem 1.7rem;
    border: 1px solid rgba(255,255,255,0.85);
    color: var(--white);
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.35s ease, background-color 0.35s ease;
}

.btn-quiet-light:hover{
    background: var(--white);
    color: var(--ink);
}

.link-quiet{
    position: relative;
    display: inline-block;
    width: fit-content;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding-bottom: 3px;
}

.link-quiet::before{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: color-mix(in srgb, currentColor 20%, transparent);
}

.link-quiet::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.link-quiet:hover::after,
.link-quiet:focus-visible::after{
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- Sections ---------- */
section{ padding: 10.5rem 0; }
@media (max-width: 767px){
    section{ padding: 5.5rem 0; }
}

.intro-section{
    position: relative;
    background-color: var(--bg-soft);
}
@media (min-width: 768px){
    .intro-section--top{ padding-top: 4.5rem; padding-bottom: 6rem; }
}

.intro-kicker{ margin-bottom: 1.6rem; }

.intro-section .intro-title{
    display: block;
    font-size: clamp(2.1rem, 4.2vw, 3.1rem);
    line-height: 1.32;
    letter-spacing: -0.01em;
    margin-bottom: 1.9rem;
}

.intro-section p{
    font-size: 1.08rem;
    margin-bottom: 1.8rem;
}

.intro-signature{
    display: block;
    margin-bottom: 2.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--ink);
}

.intro-signature small{
    display: block;
    margin-top: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.intro-section--top .intro-kicker,
.intro-section--top .intro-title,
.intro-section--top p,
.intro-section--top .intro-signature,
.intro-section--top .btn-quiet{
    opacity: 0;
    animation: revealUp 1.4s ease forwards;
}
.intro-section--top .intro-kicker{ animation-delay: 0.1s; }
.intro-section--top .intro-title{ animation-delay: 0.25s; }
.intro-section--top p{ animation-delay: 0.45s; }
.intro-section--top .intro-signature{ animation-delay: 0.6s; }
.intro-section--top .btn-quiet{ animation-delay: 0.75s; }

@keyframes revealUp{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
    .intro-section--top .intro-kicker, .intro-section--top .intro-title, .intro-section--top p, .intro-section--top .intro-signature, .intro-section--top .btn-quiet{
        animation: none; opacity: 1;
    }
}

.editorial{ background: var(--bg-soft); padding: 10.5rem 0; }

/* Magazine split */
.magazine-block{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 5.5rem;
    align-items: center;
}

.magazine-block.reverse{ grid-template-columns: 5fr 7fr; }
.magazine-block.reverse .magazine-photo{ order: 2; }
.magazine-block.reverse .magazine-note{ order: 1; }

.magazine-photo{ margin: 0; }

.magazine-photo img{
    width: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 901px){
    .magazine-photo{ align-self: stretch; display: flex; flex-direction: column; }
    .magazine-photo img{ flex: 1 0 auto; height: auto; aspect-ratio: 1; }
    .magazine-block--wide{ max-width: 1240px; grid-template-columns: 3fr 2fr; align-items: center; }
    .magazine-block--wide.reverse{ grid-template-columns: 2fr 3fr; }
    .magazine-block--wide .magazine-photo{ align-self: center; }
    .magazine-block--wide .magazine-photo img{ flex: none; aspect-ratio: auto; }
    .magazine-block--tall .magazine-photo{ position: relative; min-height: 24rem; }
    .magazine-block--tall .magazine-photo img{ position: absolute; top: 0; left: 0; width: auto; max-width: 100%; height: 100%; aspect-ratio: auto; }
    .magazine-block--tall.reverse .magazine-photo img{ left: auto; right: 0; }
    .magazine-video{ align-self: center; display: block; }
}

.magazine-photo figcaption{
    margin-top: 1.1rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.magazine-note{
    position: relative;
    padding-left: 3rem;
}

.magazine-note::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px;
    background: var(--line);
    transform-origin: top;
}

.magazine-block.reverse .magazine-note{
    padding-left: 0;
    padding-right: 3rem;
}

.magazine-block.reverse .magazine-note::before{ left: auto; right: 0; }

.magazine-note p{ font-size: 1.02rem; margin-bottom: 1.5rem; }
.magazine-note > :last-child{ margin-bottom: 0; }
.magazine-note h2:not(.kicker),
.magazine-note .section-title{
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-style: italic;
    margin-bottom: 1.4rem;
}
.editorial + .editorial{ padding-top: 0; }
.magazine-details{
    margin: 2rem 0 1.75rem;
    padding: 1.4rem 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
.magazine-details li{ font-size: 0.95rem; line-height: 1.9; color: var(--ink-soft); }
.magazine-details a{
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color 0.4s ease;
}
.magazine-details a:hover{ text-decoration-color: currentColor; }
.magazine-social{ display: flex; gap: 1.4rem; margin: 0 0 1.5rem; }
.magazine-social a{ color: var(--ink-soft); transition: color 0.4s ease; }
.magazine-social a:hover{ color: var(--ink); }
.magazine-social svg{
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.magazine-video iframe{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: var(--line);
}

/* Tekstblok */
.text-block{ background: var(--bg-soft); padding: 7rem 0; }
.page-header + .text-block,
.page-header + .editorial,
.editorial + .text-block,
.text-block + .text-block,
.text-block + .editorial{ padding-top: 0; }
.story-opener + .text-block,
.story-opener + .editorial{ padding-top: 4.5rem; }
@media (max-width: 767px){
    .story-opener + .text-block,
    .story-opener + .editorial{ padding-top: 0; }
}
.text-block-inner{ max-width: 46rem; margin: 0 auto; }
.text-block h2:not(.kicker),
.text-block .section-title{
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-style: italic;
    margin-bottom: 1.4rem;
}
.text-block h3{ font-size: 1.4rem; font-style: italic; margin: 2rem 0 0.8rem; }
.text-block h4{ font-size: 1.2rem; font-style: italic; margin: 1.75rem 0 0.7rem; }
.text-block p,
.text-block li{ font-size: 1.02rem; color: var(--ink-soft); }
/* Opsomming in tekst */
.text-block ul,
.magazine-note ul:not(.magazine-details),
.story-opener:not(:has(.story-opener-aside)) .story-text ul{ margin: 0 0 1.5rem; padding: 0; list-style: none; }
.text-block ul li,
.magazine-note ul:not(.magazine-details) li,
.story-opener:not(:has(.story-opener-aside)) .story-text ul li{ position: relative; padding-left: 2rem; margin-bottom: 0.75rem; font-size: 1.02rem; color: var(--ink-soft); }
.text-block ul li::before,
.magazine-note ul:not(.magazine-details) li::before,
.story-opener:not(:has(.story-opener-aside)) .story-text ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

@media (max-width: 900px){
    .magazine-block,
    .magazine-block.reverse{ grid-template-columns: 1fr; gap: 2.5rem; }
    .magazine-block.reverse .magazine-photo{ order: 1; }
    .magazine-block.reverse .magazine-note{ order: 2; }
    .magazine-photo img{ height: auto; max-height: 75svh; }
    .magazine-note,
    .magazine-block.reverse .magazine-note{
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .magazine-note::before{ display: none; }
}

/* Portfolio-mozaïek */
.portfolio-mag{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(88px, auto);
    gap: 1.75rem;
}

.portfolio-mag figure{ margin: 0; position: relative; overflow: hidden; }

.portfolio-mag img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s ease;
}

.portfolio-mag figure:hover img{ transform: scale(1.05); }
@media (min-width: 768px){
    .portfolio-mag img{ position: absolute; inset: 0; }
}

.portfolio-mag figure::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,17,14,0.6) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.portfolio-mag figure:hover::after{ opacity: 1; }
.portfolio-mag figure::after,
.portfolio-mag .cap{ pointer-events: none; }

.portfolio-mag .cap{
    position: absolute;
    left: 1.3rem;
    bottom: 1rem;
    z-index: 2;
    color: var(--white);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.portfolio-mag figure:hover .cap{ opacity: 1; transform: translateY(0); }
.portfolio-mag .cap small{
    display: block;
    margin-top: 0.15rem;
    line-height: 1.3;
    font-family: 'Manrope', sans-serif;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
}
.portfolio-mag figure > a{ display: block; height: 100%; }

.m-text{
    grid-column: 1 / 5;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 1.5rem;
}

.m-text h2:not(.kicker),
.m-text .section-title{
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    font-style: italic;
    margin-bottom: 1.4rem;
}

.m-text p{ max-width: 340px; margin-bottom: 1.75rem; }

.m-a{ grid-column: 5 / 9;  grid-row: 1 / 8; }
.m-b{ grid-column: 9 / 13; grid-row: 1 / 5; }
.m-c{ grid-column: 9 / 11; grid-row: 5 / 8; }
.m-d{ grid-column: 11 / 13; grid-row: 5 / 8; }
.m-e{ grid-column: 1 / 5;  grid-row: 4 / 8; }

.portfolio-mag--b .m-text{ grid-column: 9 / 13; padding-right: 0; padding-left: 1.5rem; }
.portfolio-mag--b .m-a{ grid-column: 5 / 9; }
.portfolio-mag--b .m-b{ grid-column: 1 / 5; }
.portfolio-mag--b .m-c{ grid-column: 1 / 3; }
.portfolio-mag--b .m-d{ grid-column: 3 / 5; }
.portfolio-mag--b .m-e{ grid-column: 9 / 13; }

.portfolio-mag--c .m-text{ grid-column: 1 / 13; grid-row: 1 / 3; align-items: center; text-align: center; padding: 0; }
.portfolio-mag--c .m-text .kicker{ justify-content: center; }
.portfolio-mag--c .m-text p{ margin-left: auto; margin-right: auto; }
.portfolio-mag--c .m-a{ grid-column: 1 / 6;  grid-row: 3 / 10; }
.portfolio-mag--c .m-b{ grid-column: 6 / 9;  grid-row: 3 / 7; }
.portfolio-mag--c .m-c{ grid-column: 9 / 13; grid-row: 3 / 7; }
.portfolio-mag--c .m-d{ grid-column: 6 / 10; grid-row: 7 / 10; }
.portfolio-mag--c .m-e{ grid-column: 10 / 13; grid-row: 7 / 10; }

@media (min-width: 901px){
    .portfolio-mag--a:not(:has(.m-e)) .m-text,
    .portfolio-mag--b:not(:has(.m-e)) .m-text{ grid-row: 1 / 8; }
    .portfolio-mag--a:not(:has(.m-d)) .m-c{ grid-column: 9 / 13; }
    .portfolio-mag--b:not(:has(.m-d)) .m-c{ grid-column: 1 / 5; }
    .portfolio-mag--c:not(:has(.m-e)) .m-d{ grid-column: 6 / 13; }
    .portfolio-mag--c:not(:has(.m-d)) .m-b{ grid-row: 3 / 10; }
    .portfolio-mag--c:not(:has(.m-d)) .m-c{ grid-row: 3 / 10; }
}

@media (max-width: 900px){
    .portfolio-mag{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .portfolio-mag figure{ height: auto; overflow: visible; margin-bottom: 1.5rem; }
    .portfolio-mag figure img{ height: 62vw; max-height: 420px; }
    .m-text{ order: -1; margin-bottom: 0.5rem; padding-right: 0; }
    .m-c, .m-d{ display: none; }
    .portfolio-mag figure::after{ display: none; }
    .portfolio-mag .cap{
        position: static;
        opacity: 1;
        transform: none;
        color: var(--ink-soft);
        font-size: 0.95rem;
        display: block;
        margin-top: 0.6rem;
    }
}

@media (max-width: 900px){
    .portfolio-mag--tiles{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.25rem 0.9rem;
        padding-bottom: 3rem;
    }
    .portfolio-mag--tiles > *{ grid-column: auto; grid-row: auto; }
    .portfolio-mag--tiles .m-text{ grid-column: 1 / -1; margin-bottom: 0; }
    .portfolio-mag--tiles{ align-items: start; }
    .portfolio-mag--tiles figure{ display: block; height: auto; margin: 0; }
    .portfolio-mag--tiles figure > a{ height: auto; }
    .portfolio-mag--tiles .m-c,
    .portfolio-mag--tiles .m-d{ display: block; }
    .portfolio-mag--tiles .m-e{ display: none; }
    .portfolio-mag--tiles .m-b,
    .portfolio-mag--tiles .m-d{ position: relative; top: 3rem; }
    .portfolio-mag--tiles figure img{ height: auto; max-height: none; aspect-ratio: 3 / 4; margin-bottom: 1rem; }
    .portfolio-mag--tiles .cap{
        margin-top: 0;
        font-size: 1.2rem;
        line-height: 1.15;
        color: var(--ink);
    }
    .portfolio-mag--tiles .cap small{
        margin-top: 0.5rem;
        font-size: 0.56rem;
        letter-spacing: 0.18em;
        color: #9a9388;
        opacity: 1;
    }
}

/* Testimonial */
.quote-band{ color: var(--bg); }

.quote-inner{
    display: grid;
    align-items: center;
}

.quote-photo{
    margin: 0;
    position: relative;
}

.quote-photo img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.quote-text{
    position: relative;
    z-index: 1;
}

/* Spread */
.quote-band--spread{ background: var(--bg-soft); }
.quote-band--spread .quote-inner{
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(90deg, transparent 50%, var(--ink) 50%);
}
.quote-band--spread .quote-photo{ align-self: stretch; min-height: 720px; }
.quote-band--spread .quote-text{
    max-width: 640px;
    padding: 8rem clamp(2rem, 7vw, 7rem);
}

/* Overlap */
.quote-band--overlap{ background: var(--bg-soft); }
.quote-band--overlap .quote-inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    grid-template-columns: repeat(12, 1fr);
}
.quote-band--overlap .quote-photo{ grid-column: 1 / 7; grid-row: 1; aspect-ratio: 4/5; }
.quote-band--overlap .quote-text{
    grid-column: 6 / 13;
    grid-row: 1;
    background: var(--ink);
    padding: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 5rem);
}

/* Zonder foto */
.quote-band.is-text .quote-inner{ display: block; background: none; }
.quote-band.is-text .quote-text{ max-width: 760px; margin: 0 auto; background: var(--ink); }

.quote-kicker{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    line-height: 1.75;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(239, 234, 226, 0.55);
}

.quote-kicker::before{
    content: "";
    width: 36px;
    height: 1px;
    background: rgba(239, 234, 226, 0.35);
}

.quote-band blockquote{ margin: 0 0 3rem; }

.quote-band .quote-lead{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2.1rem, 3.8vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--white);
    margin-bottom: 1.75rem;
}

.quote-band blockquote p:not(.quote-lead){
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(239, 234, 226, 0.68);
    max-width: 440px;
    margin: 0;
}

.quote-sign{
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    padding-top: 1.75rem;
    max-width: 440px;
}

.quote-sign::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(239, 234, 226, 0.14);
    transform-origin: left;
}

.quote-band cite{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--bg);
}

.quote-band .quote-link{
    margin-top: 2.25rem;
    color: rgba(239, 234, 226, 0.68);
    transition: color 0.3s ease;
}

.quote-band .quote-link:hover{ color: var(--bg); }

.quote-stars{
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
}

.quote-stars svg{
    width: 18px;
    height: 18px;
    fill: rgba(239, 234, 226, 0.75);
}

@media (max-width: 900px){
    .quote-inner{ display: block; }
    .quote-band--spread .quote-inner{ background: none; }
    .quote-band--spread .quote-photo{ min-height: 0; height: 70vh; max-height: 560px; }
    .quote-band--spread .quote-text{ max-width: none; padding: 4.5rem 1.5rem 5.5rem; background: var(--ink); }
    .quote-band--overlap .quote-photo{ margin-right: 3rem; }
    .quote-band--overlap .quote-text{ margin: -5rem 0 0 2rem; padding: 3.5rem 1.75rem 3rem; }
}

/* Kicker */
.kicker{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    line-height: 1.75;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.kicker::before{
    content: "";
    flex-shrink: 0;
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.kicker--center{ justify-content: center; }
.kicker--center::after{
    content: "";
    flex-shrink: 0;
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

/* CTA */
.cta-section{
    position: relative;
    min-height: clamp(520px, 72vh, 760px);
    padding: 7.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.cta-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: -2;
}

.cta-section::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(20,18,16,0.22) 0%, rgba(20,18,16,0.1) 45%, rgba(20,18,16,0) 75%);
    pointer-events: none;
}

.cta-content{
    max-width: 760px;
    color: var(--white);
    text-shadow: 0 1px 2px rgba(20,18,16,0.25), 0 2px 24px rgba(20,18,16,0.35);
}

.cta-section .btn-quiet{
    --btn-fill: rgba(255, 255, 255, 0.14);
    color: var(--white);
    background: rgba(20, 18, 16, 0.06);
    border-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.cta-section .btn-quiet:hover,
.cta-section .btn-quiet:focus-visible{ color: var(--white); border-color: var(--white); }

.cta-kicker{
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    line-height: 1.75;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
}

.cta-kicker::before,
.cta-kicker::after{
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.cta-section h2:not(.cta-kicker),
.cta-section .section-title{
    color: inherit;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.cta-section p{
    font-size: 1.02rem;
    color: inherit;
    margin: 0 auto 2.5rem;
    max-width: 440px;
}

@media (max-width: 767px){
    .cta-section{ min-height: 78svh; padding: 5rem 1.5rem; }
    .cta-section .section-title br{ display: none; }
    .cta-photo{ object-position: 18% bottom; }
}

/* ---------- Footer ---------- */
.site-footer{
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 7rem 0 2.5rem;
}

.footer-top{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 3rem;
    padding-bottom: 5.5rem;
}

.footer-brand .logo-mark{
    height: 30px;
    margin-bottom: 1.5rem;
    color: var(--ink);
}

.footer-brand .brand{
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.footer-tagline{
    display: block;
    margin-top: 0.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink-soft);
}

.footer-brand p{
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
}

.footer-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.footer-title{
    margin-bottom: 0.6rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a9388;
}

.site-footer a{
    color: var(--ink-soft);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.4s ease;
}

.site-footer a:hover{ color: var(--ink); }

.footer-col > a,
.footer-bottom a,
.footer-bottom button{ position: relative; }
.footer-col > a::after,
.footer-bottom a::after,
.footer-bottom button::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.45em;
    width: 1rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.footer-col > a:hover::after,
.footer-col > a:focus-visible::after,
.footer-bottom a:hover::after,
.footer-bottom a:focus-visible::after,
.footer-bottom button:hover::after,
.footer-bottom button:focus-visible::after{ transform: scaleX(1); }

.footer-social{
    display: flex;
    gap: 1.4rem;
    margin-top: 0.8rem;
}

.footer-social svg{
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    font-size: 0.75rem;
    color: #9a9388;
}

.footer-bottom div{ display: flex; gap: 2rem; }
.site-footer .footer-bottom a{ font-size: 0.75rem; color: #9a9388; }
.site-footer .footer-bottom a:hover{ color: var(--ink); }
.footer-bottom button{
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    color: #9a9388;
    cursor: pointer;
    transition: color 0.4s ease;
}
.footer-bottom button:hover{ color: var(--ink); }

/* Cookiemelding */
.prefs-panel{
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
    max-width: 28rem;
    padding: 1.6rem 1.75rem 1.5rem;
    background-color: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(38, 36, 33, 0.08);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.prefs-panel.is-open{ opacity: 1; transform: none; }
.prefs-panel p{ margin: 0 0 1.25rem; font-size: 0.88rem; line-height: 1.7; color: var(--ink-soft); }
.prefs-panel p a{
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.prefs-panel-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.prefs-panel-actions .btn-quiet{ padding: 0.8rem 1.4rem; }
.prefs-panel .link-quiet{ padding: 0 0 3px; border: 0; background: none; font-family: inherit; cursor: pointer; }
.prefs-panel-more{ margin-top: 1.1rem; }
.prefs-panel-title{
    display: block;
    margin-bottom: 1rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.prefs-option{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
}
.prefs-option:last-of-type{ border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.prefs-option strong{ display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.prefs-option small{ display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft); }
.prefs-option input{
    flex-shrink: 0;
    position: relative;
    width: 2.1rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: 1rem;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.prefs-option input::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    transform: translateY(-50%);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.prefs-option input:checked{ background-color: var(--ink); border-color: var(--ink); }
.prefs-option input:checked::after{ background: var(--paper); transform: translate(0.92rem, -50%); }
.prefs-option input:disabled{ opacity: 0.45; cursor: default; }
.prefs-option input:focus-visible{ outline: 1px solid var(--ink-soft); outline-offset: 3px; }

@media (max-width: 767px){
    .prefs-panel{ left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; padding: 1.4rem 1.4rem 1.3rem; }
}

@media (max-width: 900px){
    .footer-top{ grid-template-columns: 1fr 1fr; gap: 3.5rem 2rem; }
    .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 767px){
    .site-footer{ padding: 5rem 0 2rem; text-align: center; }
    .site-footer .container{ padding-left: 1.5rem; padding-right: 1.5rem; }
    .footer-top{ gap: 3rem 1.5rem; padding-bottom: 3.5rem; }
    .footer-brand .logo-mark{ margin: 0 auto 1.25rem; }
    .footer-brand p{ margin-top: 1rem; }
    .footer-col{ align-items: center; }
    .footer-col:last-child{ grid-column: 1 / -1; }
    .footer-social{ justify-content: center; margin-top: 1rem; }
    .footer-bottom{ flex-direction: column-reverse; gap: 1rem; }
    .footer-col > a::after,
    .footer-bottom a::after{ left: 50%; margin-left: -0.5rem; transform-origin: center; }
}

/* ---------- Paginakop ---------- */
.page-header{
    background-color: var(--bg-soft);
    padding: 14.5rem 0 0;
}
.page-header-grid{
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 5rem;
    align-items: end;
    padding-bottom: 5rem;
}
.page-header-grid > :first-child{ align-self: start; }
.page-header .kicker{
    margin: 0 0 1.25rem;
    font-family: 'Manrope', sans-serif;
    line-height: 1.75;
}
.page-header-heading{
    display: block;
    margin: 0;
    max-width: 28ch;
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.08;
    color: var(--ink);
}
.page-header-text p{
    max-width: 44ch;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.page-header-text p:last-child{ margin-bottom: 0; }
.page-header-link{ margin-top: 2rem; }
.page-header--ruled .page-header-grid{ border-bottom: 1px solid var(--line); }
.page-header--ruled + .editorial,
.page-header--ruled + .text-block{ padding-top: 6rem; }
@media (max-width: 767px){
    .page-header--ruled + .editorial,
    .page-header--ruled + .text-block{ padding-top: 3.5rem; }
}
.page-header-text a{
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: text-decoration-color 0.4s ease;
}
.page-header-text a:hover{ text-decoration-color: currentColor; }

.page-header-nav{
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    padding: 2.25rem 0 4rem;
    border-top: 1px solid var(--line);
}
.page-header-nav a{
    position: relative;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.4s ease;
}
.page-header-nav a:hover,
.page-header-nav a[aria-current="page"]{ color: var(--ink); }
.page-header-nav a::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.7em;
    width: 1rem;
    height: 1px;
    margin-left: -0.5rem;
    background: currentColor;
    opacity: 0.6;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-header-nav a:hover::after,
.page-header-nav a:focus-visible::after,
.page-header-nav a[aria-current="page"]::after{ transform: scaleX(1); }

@media (max-width: 900px){
    .page-header-grid{ grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 767px){
    .page-header{ position: relative; padding-top: 9rem; }
    .page-header .kicker{
        position: absolute;
        top: 28px;
        left: 1.75rem;
        gap: 0.9rem;
        margin: 0;
        font-size: 0.58rem;
        line-height: 1.6;
        letter-spacing: 0.18em;
    }
    .page-header .kicker::before{ width: 20px; }
    .page-header-grid{ padding-bottom: 3.25rem; }
    .page-header .container{ padding-left: 1.75rem; padding-right: 1.75rem; }
    .page-header-nav{
        gap: 1.75rem;
        margin: 0 -1.75rem;
        padding: 1.75rem 1.75rem 2.5rem;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-header-nav a:first-child{ margin-left: auto; }
    .page-header-nav a:last-child{ margin-right: auto; }
    .page-header-nav::-webkit-scrollbar{ display: none; }
}

/* ---------- Portfolio-galerij ---------- */
.gallery-section{ padding: 0 0 10.5rem; background-color: var(--bg-soft); }

.gallery-wrap{ container-type: inline-size; }
.gallery{
    --u: calc(100cqi / 62);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--u);
    grid-auto-flow: dense;
    column-gap: var(--u);
}
.gallery-item{
    display: block;
    grid-row: span var(--span);
    padding-bottom: var(--u);
    cursor: zoom-in;
}
.gallery-item.is-featured{ grid-column: span 2; }
.gallery-item img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--line);
    transition: opacity 0.4s ease;
}
.gallery-item:hover img{ opacity: 0.92; }

.has-motion .gallery-item img{ opacity: 0; transition: opacity 0.8s ease; }
.has-motion .gallery-item img.is-loaded{ opacity: 1; }
.has-motion .gallery-item:hover img.is-loaded{ opacity: 0.92; }

@media (max-width: 767px){
    .gallery-section{ padding-bottom: 4rem; }
    .gallery-section .container{ padding-left: 4px; padding-right: 4px; }
    .gallery{
        --g: 3px;
        grid-auto-rows: calc((100cqi - 2 * var(--g)) / 3 * 4 / 3);
        gap: var(--g);
    }
    .gallery-item{ grid-row: span 1; padding-bottom: 0; }
    .gallery-item.is-featured{ grid-row: span 2; }
}

/* ---------- Tegels ---------- */
.tile-section{ padding: 0 0 14rem; background-color: var(--bg-soft); }

.tile-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7rem 3.5rem;
}
.tile-grid > .tile:nth-child(3n + 2){ position: relative; top: 8rem; }

.collection{ background-color: var(--bg-soft); padding-bottom: 6rem; }
.story-opener--portrait + .collection{ padding-top: 2.25rem; }
.tile-grid--four{ grid-template-columns: repeat(4, 1fr); gap: 5rem 2.25rem; }
.tile-grid--four > .tile:nth-child(3n + 2){ top: 0; }
.tile-grid--four > .tile:nth-child(2n){ position: relative; top: 4rem; }

.tile{
    display: block;
    color: var(--ink);
    text-decoration: none;
}
.tile-photo{
    position: relative;
    margin: 0 0 1.75rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--line);
}
.tile-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tile-photo-alt{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
@media (hover: hover){
    .tile:hover .tile-photo-alt{ opacity: 1; }
}
@media (hover: none){
    .tile-photo-alt{ display: none; }
}

.tile-meta{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9a9388;
}
.tile-index{ display: flex; align-items: center; gap: 0.9rem; }
.tile-index::after{
    content: '';
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.tile-title{
    margin: 0;
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.15;
}
.tile-title span{
    padding-bottom: 0.18em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.tile:hover .tile-title span,
.tile:focus-visible .tile-title span{ background-size: 100% 1px; background-position: 0 100%; }

.tile-subtitle{
    display: block;
    margin-top: 0.75rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink-soft);
}
.tile-section .tile-subtitle{
    font-family: 'Manrope', sans-serif;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9a9388;
}

.has-motion .tile-photo img:not(.tile-photo-alt){ opacity: 0; transition: opacity 0.8s ease; }
.has-motion .tile-photo img.is-loaded:not(.tile-photo-alt){ opacity: 1; }

.collection .tile-photo img:not(.tile-photo-alt){ transition: transform 1.6s ease, opacity 0.8s ease; }
.collection .tile:hover .tile-photo img:not(.tile-photo-alt){ transform: scale(1.04); }

@media (max-width: 900px){
    .tile-grid{ gap: 5rem 2rem; }
    .tile-grid > .tile:nth-child(3n + 2){ top: 5rem; }
    .tile-grid--four{ grid-template-columns: repeat(2, 1fr); }
    .tile-grid--four > .tile:nth-child(3n + 2){ top: 0; }
}

@media (max-width: 767px){
    .tile-section{ padding-bottom: 5.5rem; }
    .tile-grid{ grid-template-columns: repeat(2, 1fr); gap: 3.25rem 0.9rem; }
    .tile-grid > .tile:nth-child(3n + 2){ top: 0; }
    .tile-grid > .tile:nth-child(2n){ position: relative; top: 3rem; }
    .tile-photo{ margin-bottom: 1rem; }
    .tile-meta{ gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.56rem; letter-spacing: 0.18em; }
    .tile-index{ gap: 0.6rem; }
    .tile-index::after{ width: 1rem; }
    .tile-title{ font-size: 1.2rem; }
    .tile-subtitle{ margin-top: 0.3rem; font-size: 0.92rem; }
    .tile-section .tile-subtitle{ margin-top: 0.5rem; font-size: 0.56rem; letter-spacing: 0.18em; }
}

/* ---------- Reportage ---------- */

.story-opener{
    padding: calc(66px + 4.5rem) 0 6rem;
    background-color: var(--bg-soft);
}
.story-opener-grid{
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 5.5rem;
    align-items: start;
}
.story-opener-text{ padding: 5.875rem 0 2rem; }
.back-link{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 3rem;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a9388;
    text-decoration: none;
    transition: color 0.4s ease;
}
.back-link span{ display: inline-block; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.back-link:hover{ color: var(--ink); }
.back-link:hover span{ transform: translateX(-4px); }

.story-opener-kicker{
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.story-opener-kicker::before{
    content: '';
    flex-shrink: 0;
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.story-opener-title{
    display: block;
    margin: 0;
    font-size: clamp(2.6rem, 4.4vw, 4.3rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.02;
    color: var(--ink);
}
.story-opener-subtitle{
    display: block;
    margin-top: 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--ink-soft);
}
.story-opener-rule{
    display: block;
    width: 3rem;
    height: 1px;
    margin: 2.5rem 0;
    background: var(--ink);
    opacity: 0.25;
}
.story-opener-rule--hidden{ background: none; }
.story-text{ max-width: 46ch; }
.story-text p{
    margin: 0 0 1.2rem;
    font-size: 0.92rem;
    line-height: 1.95;
    color: var(--ink-soft);
}
.story-text a,
.page-header-text p a,
.intro-section p a,
.magazine-note p a,
.text-block p a,
.text-block li a{
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    transition: text-decoration-color 0.4s ease;
}
.story-text a:hover,
.page-header-text p a:hover,
.intro-section p a:hover,
.magazine-note p a:hover,
.text-block p a:hover,
.text-block li a:hover{ text-decoration-color: currentColor; }
.story-text h2, .story-text h3{
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
}
.story-text h4{ margin: 1.75rem 0 0.8rem; font-size: 1.25rem; font-style: italic; font-weight: 300; }
.story-opener-link{ margin-top: 1rem; }
.story-opener-aside{ padding-top: 4rem; }
.story-opener:has(.story-opener-aside) .story-text ul{ margin: 1.75rem 0 0; padding: 0; list-style: none; }
.story-opener:has(.story-opener-aside) .story-text li{ display: inline; font-size: 0.95rem; color: var(--ink-soft); }
.story-opener:has(.story-opener-aside) .story-text li + li::before{ content: '\00a0\00b7\00a0 '; }

/* Brief */
.letter{
    padding: 3.5rem 3.25rem 3rem;
    background-color: var(--paper);
    border: 1px solid var(--line);
}
.letter-greeting,
.letter-line,
.letter-words,
.letter-closing{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-style: italic;
    line-height: 2.1;
    color: var(--ink);
}
.letter-greeting{ margin: 0 0 0.75rem; }
.letter-line{ margin: 0; }
.letter-input{
    max-width: 100%;
    margin: 0 0.2rem;
    padding: 0 0.15rem 0.05rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
    border-radius: 0;
    background: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: normal;
    color: var(--ink);
    outline: none;
    transition: border-color 0.4s ease;
}
.letter-field:last-child .letter-input{ margin-right: 0; }
.letter-input[type="date"]{ width: 7.6em; font-style: normal; }
.letter-input[type="date"]::-webkit-datetime-edit{ padding: 0; font-family: 'Cormorant Garamond', serif; }
.letter-input[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding: 0; }
.letter-input[type="date"].is-empty{ color: #a39b8f; font-style: italic; }
.letter-input[type="date"].is-empty::-webkit-datetime-edit{ color: #a39b8f; }
.letter-input[type="date"]::-webkit-calendar-picker-indicator{
    width: 0.85rem;
    height: 0.85rem;
    margin-left: 0.4rem;
    padding: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23262421' stroke-width='1'%3E%3Crect x='1.5' y='2.5' width='13' height='12'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.4s ease;
}
.letter-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.letter-input[type="date"]:focus::-webkit-calendar-picker-indicator{ opacity: 0.8; }
.letter-input::placeholder{ color: #a39b8f; font-style: italic; }
.letter-input:focus{ border-bottom-color: var(--ink); }
.letter-input.has-error,
.letter-input.freeform-has-errors{ border-bottom-color: var(--accent); }
.letter-paragraph{ margin-top: 1.25rem; }
.letter-paragraph .letter-words{ margin: 0; }
.letter-paragraph + .letter-line{ margin-top: 1.25rem; }
textarea.letter-input{
    display: block;
    width: 100%;
    min-height: 8.4rem;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    line-height: 2.1rem;
    resize: vertical;
    background-image: linear-gradient(transparent calc(2.1rem - 1px), color-mix(in srgb, var(--ink) 18%, transparent) calc(2.1rem - 1px));
    background-size: 100% 2.1rem;
    background-attachment: local;
}
.letter-error,
.letter .freeform-errors{
    display: inline;
    margin: 0 0 0 0.35rem;
    padding: 0;
    list-style: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-style: normal;
    color: var(--accent);
}
.letter-error li,
.letter .freeform-errors li{ display: inline; }
.letter-paragraph .freeform-errors{ display: block; margin: 0.5rem 0 0; }
.letter-line .freeform-errors,
.letter-line .letter-error{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.letter-closing{ margin: 2rem 0 0; }
.letter [data-freeform-turnstile-container]{ float: right; margin-top: 2.6rem; zoom: 0.85; }
.letter-form::after{ content: ''; display: block; clear: both; }
.letter-send{ margin-top: 2.25rem; }
.letter-feedback{
    margin: 1.1rem 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--accent);
}
.letter-message{ margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.letter-message--error,
.letter .freeform-form-errors{ color: var(--accent); }
.letter .freeform-form-errors{ margin: 0 0 1.5rem; font-size: 0.9rem; }
.letter .freeform-form-errors p{ margin: 0; color: inherit; }
.story-facts{
    margin: 2.5rem 0 0;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9a9388;
}
@media (max-width: 1100px){
    .story-opener-grid{ grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.story-opener-photo{
    margin: 0;
    background: var(--line);
}
.story-opener-photo img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 80svh;
    object-fit: cover;
}
@media (min-width: 768px){
    .story-opener-photo{ align-self: center; }
    .story-opener--portrait .story-opener-photo img{ aspect-ratio: 3 / 4; max-height: none; }
}
@media (min-width: 1101px){
    .story-opener--portrait .story-opener-grid{ grid-template-columns: 6fr 5fr; }
}

/* Hoofdstukken */
.chapter{
    padding: 8rem 0;
    background-color: var(--bg-soft);
}
.chapter > .container{ max-width: 980px; }
.chapter > section{ padding: 0; }
.chapter .portfolio-mag a{ display: block; height: 100%; cursor: zoom-in; }

/* Favoriet */
.favorite{
    padding: 6rem 0;
    background-color: var(--bg);
}
.favorite-grid{
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 4.5rem;
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
}
.favorite-photo{ display: block; cursor: zoom-in; }
.favorite-photo img{ display: block; width: 100%; height: auto; max-height: 58vh; object-fit: cover; }
.favorite-title{
    margin: 0 0 1.4rem;
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;
}
.favorite.is-solo .favorite-grid{ grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
.favorite.is-solo .favorite-head{ margin-bottom: 2.25rem; }
.favorite.is-solo .favorite-head .kicker{ justify-content: center; }
.favorite.is-solo .favorite-title{ margin: 0; }
.favorite.is-solo .favorite-photo{ width: min(100%, 400px); }
.favorite-text blockquote{ margin: 0; }
.favorite-text blockquote p{
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink-soft);
}
.favorite-text blockquote p::before{ content: '\201C'; }
.favorite-text blockquote p::after{ content: '\201D'; }
.favorite-text cite{
    display: block;
    margin-top: 1.5rem;
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a9388;
}
.favorite-text cite::before{ content: '— '; }

/* Alle foto's */
.story-all{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7rem 0;
    background-color: var(--bg-soft);
    text-align: center;
}
.story-all .kicker{ justify-content: center; }
.story-all--after{ padding-top: 0; background-color: var(--bg); }
section:has(+ .story-all--after){ padding-bottom: 4rem; }

/* Volgend verhaal */
.next-story-section{
    padding: 5rem 0;
    background-color: var(--bg-soft);
    border-top: 1px solid var(--line);
}
.next-story{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem;
    color: var(--ink);
    text-decoration: none;
}
.next-story img{
    flex-shrink: 0;
    width: 120px;
    height: 150px;
    object-fit: cover;
    background: var(--line);
    transition: opacity 0.4s ease;
}
.next-story:hover img{ opacity: 0.9; }
.next-story-text{ display: block; }
.next-story-kicker{
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9a9388;
}
.next-story-title{
    display: inline;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.15;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.next-story:hover .next-story-title{ background-size: 100% 1px; }
.next-story-back{ margin: 2.75rem 0 0; text-align: center; }
.next-story-subtitle{
    display: block;
    margin-top: 0.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--ink-soft);
}

@media (max-width: 767px){
    .story-opener{ padding: 28px 0 4.5rem; }
    .story-opener .container{ padding-left: 1.75rem; padding-right: 1.75rem; }
    .story-opener-grid{ grid-template-columns: 1fr; gap: 0; }
    .story-opener-text{ display: contents; }
    .story-opener-text > .back-link,
    .story-opener-kicker,
    .story-opener-photo{ order: -1; }
    .back-link{ justify-self: start; }
    .story-opener-kicker{ margin-bottom: 1.25rem; }
    .story-opener-photo{ margin: 0 -1.75rem 2.5rem; }
    .story-opener-aside{ padding-top: 2.5rem; }
    .letter{ padding: 2.25rem 1.5rem 2rem; }
    .letter [data-freeform-turnstile-container]{ float: none; margin-top: 1.5rem; }
    .letter-greeting, .letter-line, .letter-words, .letter-closing{ font-size: 1.2rem; }
    .story-opener-photo img{ max-height: none; }
    .story-opener-kicker{ font-size: 0.58rem; letter-spacing: 0.18em; }
    .story-opener-kicker::before{ width: 20px; }
    .story-opener-rule{ margin: 2rem 0; }
    .back-link{ margin-bottom: 1.25rem; }

    .chapter{ padding: 3.5rem 0 4rem; }
    .chapter .container{ padding-left: 4px; padding-right: 4px; }
    .favorite{ padding: 5rem 0; }
    .favorite-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
    .favorite.is-solo .favorite-head{ margin-bottom: 2rem; }
    .favorite .container{ padding-left: 1.5rem; padding-right: 1.5rem; }

    .story-all{ padding: 5rem 1.5rem; }
    .next-story-section{ padding: 3.5rem 0; }
    .next-story{ gap: 1.25rem; justify-content: flex-start; }
    .next-story img{ width: 88px; height: 110px; }
}

@media (max-width: 900px){
    .chapter .portfolio-mag{ display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 4px; }
    .chapter .portfolio-mag figure{ overflow: hidden; }
    .chapter .portfolio-mag figure{ grid-column: auto; grid-row: auto; margin: 0; aspect-ratio: 4 / 5; }
    .chapter .portfolio-mag figure img{ height: 100%; max-height: none; }
    .chapter .portfolio-mag .is-mobile-highlight,
    .chapter .portfolio-mag .is-mobile-wide{ grid-column: 1 / -1; aspect-ratio: 4 / 5; }
    .chapter .portfolio-mag .is-mobile-highlight{ order: -1; }
    .chapter .portfolio-mag .m-c, .chapter .portfolio-mag .m-d{ display: block; }
    .chapter .portfolio-mag .m-text{ order: -2; grid-column: 1 / -1; grid-row: auto; padding: 0 1.5rem 1.5rem; text-align: left; align-items: flex-start; }
    .chapter .portfolio-mag--c .m-text .kicker{ justify-content: flex-start; }
}

/* ---------- Prijskaart ---------- */
.price-menu{ background-color: var(--bg-soft); padding: 0 0 10rem; }
.price-menu-card{ max-width: 760px; margin: 0 auto; }

.price-course{ padding: 4rem 0 3rem; border-top: 1px solid var(--line); }
.price-course:first-child{ border-top: none; }
.price-course-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 2rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
}
.price-course-title span{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

.price-item{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0 1rem;
    padding: 1.15rem 0;
    text-decoration: none;
}
a.price-item:focus-visible{ outline: 1px solid var(--ink-soft); outline-offset: 4px; }
a.price-item .price-item-name{ transition: opacity 0.4s ease; }
a.price-item:hover .price-item-name{ opacity: 0.7; }
a.price-item{ grid-template-columns: auto 1fr auto 1.25rem; }
.price-item-arrow{
    justify-self: end;
    font-size: 0.95rem;
    color: var(--ink-soft);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.4s ease;
}
a.price-item:hover .price-item-arrow{ transform: translateX(3px); color: var(--ink); }

.price-item-name{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-style: italic;
    line-height: 1.2;
    color: var(--ink);
}
.price-item-leader{
    align-self: end;
    height: 2px;
    margin-bottom: 0.55rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--ink) 45%, transparent) 0.8px, transparent 1.1px) 0 50% / 7px 2px repeat-x;
}
.price-item-price{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    color: var(--ink);
}
.price-item-note{
    grid-column: 1 / -1;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.price-included{ max-width: 760px; margin: 4rem auto 0; padding-top: 4rem; border-top: 1px solid var(--line); text-align: center; }
.price-included ul{ margin: 1.75rem 0 0; padding: 0; list-style: none; }
.price-included li{ display: inline; font-size: 0.95rem; line-height: 2.1; color: var(--ink-soft); }
.price-included li + li::before{ content: '\00a0\00b7\00a0 '; }

.price-menu--headed{ padding-top: 10.5rem; }
.price-menu-head{ margin-bottom: 0; }
.price-menu + .editorial{ padding-top: 0; }
.price-menu--headed .price-course:first-child{ padding-top: 2.5rem; }

.price-note{ max-width: 560px; margin: 3.5rem auto 0; text-align: center; }
.price-note p{
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-soft);
}

@media (max-width: 767px){
    .price-menu{ padding-bottom: 6rem; }
    .price-menu--headed{ padding-top: 6rem; }
    .collection{ padding-bottom: 4rem; }
    .price-course{ padding: 3rem 0 2rem; }
    .price-item{ gap: 0 0.6rem; }
    .price-item-name{ font-size: 1.4rem; }
    .price-item-price{ font-size: 1.2rem; }
}

/* Vragen */
.faq{ padding: 7rem 0; background-color: var(--bg-soft); }
.faq + .faq{ padding-top: 0; }
.faq-head{ margin-bottom: 2.5rem; }
.faq-card{ max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
    display: grid;
    grid-template-columns: 1fr 1.25rem;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.4rem 0;
    list-style: none;
    cursor: pointer;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
    content: '+';
    justify-self: end;
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--ink-soft);
    transition: transform 0.4s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:focus-visible{ outline: 1px solid var(--ink-soft); outline-offset: 4px; }
.faq-question{
    margin: 0;
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.3;
    color: var(--ink);
}
.faq-answer{ max-width: 40rem; padding: 0 0 1.9rem; }
.faq-answer p{ font-size: 0.98rem; line-height: 1.85; color: var(--ink-soft); margin-bottom: 1.1rem; }
.faq-item[open] .faq-answer{ animation: priceOpen 0.6s ease both; }
@keyframes priceOpen{
    from{ opacity: 0; transform: translateY(-6px); }
    to{ opacity: 1; transform: none; }
}

/* Formulier */
.form-block{ padding: 9rem 0; background-color: var(--bg); }
.form-block-grid{ display: grid; grid-template-columns: 5fr 7fr; gap: 5.5rem; align-items: start; }
.form-block-text{ padding-top: 4rem; }
.form-block-text h2:not(.kicker),
.form-block-text .section-title{ font-size: clamp(1.9rem, 3vw, 2.5rem); font-style: italic; margin: 0 0 1.4rem; }
.form-block-text p{ font-size: 1.02rem; }

@media (max-width: 900px){
    .form-block{ padding: 6rem 0; }
    .form-block-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
    .form-block-text{ padding-top: 0; }
}

@media (max-width: 767px){
    .faq{ padding: 5rem 0; }
    .faq-question{ font-size: 1.25rem; }
}

/* Pakketpagina */
.package-detail{ background-color: var(--bg-soft); padding: 4rem 0 10rem; }
.package-detail-card{ max-width: 760px; margin: 0 auto; }

.package-contents{ text-align: center; }
.package-contents ul{
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 3.5rem;
    text-align: left;
}
.package-contents li{
    break-inside: avoid;
    padding: 0.85rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.package-price{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--line);
    text-align: center;
}
.package-price-amount{
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    line-height: 1;
    color: var(--ink);
}
.package-price-note{
    margin: 0.9rem 0 2.25rem;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.package-extras{ max-width: 560px; margin: 2rem auto 0; font-size: 0.82rem; line-height: 1.7; color: var(--ink-soft); }
.package-rows{ align-self: stretch; margin-bottom: 2.75rem; }
.package-rows .package-alt:hover .price-item-name{ opacity: 1; }

.package-alternatives{ margin-top: 5rem; padding-top: 4rem; border-top: 1px solid var(--line); text-align: center; }
.package-alt{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0 1rem;
    padding: 1.15rem 0;
    text-align: left;
    text-decoration: none;
}
.package-alternatives .kicker + .package-alt{ margin-top: 1.5rem; }
.package-alt .price-item-note{ grid-column: 1 / -1; }
.package-alt .price-item-name{ transition: opacity 0.4s ease; }
.package-alt:hover .price-item-name{ opacity: 0.7; }

@media (max-width: 767px){
    .package-detail{ padding: 2rem 0 6rem; }
    .package-contents ul{ columns: 1; }
}

/* ---------- Reviews ---------- */

.review-quote{ margin: 0; }
.review-lead{
    margin: 0 0 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}
.review-body{
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--ink-soft);
}
.review-toggle,
.link-caps{
    display: inline-block;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    background: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.4s ease;
}
.review-toggle:hover,
.link-caps:hover{ border-bottom-color: currentColor; }
.review-toggle{ margin: 0 0 1.25rem; }
.quote-band .review-toggle{ color: inherit; margin: 0.25rem 0 0; }
.link-caps span{ display: inline-block; margin-left: 0.3rem; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.link-caps:hover span{ transform: translateX(3px); }

.review-footer{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.75rem;
    margin-top: 0.75rem;
}
.review-footer cite{
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a9388;
}

.review-spreads{ padding: 3rem 0 8rem; background-color: var(--bg-soft); }
.review-spread{
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 6rem;
    align-items: center;
    padding: 6rem max(0px, (100% - 1040px) / 2);
}
.review-spread{ border-top: 1px solid var(--line); }
.review-spreads:first-of-type{ padding-top: 0; }
.review-spread.is-reverse{ grid-template-columns: 1fr 360px; }
.review-spread.is-reverse .review-spread-photo{ order: 2; }
.review-spread-photo{ display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.review-spread-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover){ .review-spread:hover .review-spread-photo img{ transform: scale(1.04); } }

.review-spread.is-text{ grid-template-columns: 1fr; padding-left: max(0px, (100% - 820px) / 2); padding-right: max(0px, (100% - 820px) / 2); text-align: center; }
.review-spread.is-text .review-body{ margin-left: auto; margin-right: auto; }
.review-spread.is-text .review-footer{ justify-content: center; }

.review-spread .review-lead{
    margin-bottom: 1.5rem;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 300;
    line-height: 1.28;
}
.review-spread .review-lead::before{ content: '\201C'; }
.review-spread .review-lead::after{ content: '\201D'; }
.review-spread .review-body{ max-width: 56ch; }
.review-spread .review-footer{ align-items: center; gap: 0.6rem 1.25rem; margin-top: 1.75rem; }
.review-spread .review-footer cite::after{
    content: '';
    display: inline-block;
    width: 2rem;
    height: 1px;
    margin-left: 1.25rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.5;
}
.review-spread .review-footer cite:last-child::after{ display: none; }
.review-spread .review-role{ font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-style: italic; color: var(--ink-soft); }

.review-more-all{ padding: 3rem 0 0; text-align: center; }

@media (max-width: 1000px){
    .review-spread{ grid-template-columns: 280px 1fr; gap: 3.5rem; }
    .review-spread.is-reverse{ grid-template-columns: 1fr 280px; }
}
@media (max-width: 767px){

    .review-spreads{ padding: 1rem 0 5rem; }
    .review-spreads .container{ padding-left: 1.75rem; padding-right: 1.75rem; }
    .review-spread,
    .review-spread.is-reverse,
    .review-spread.is-text{ grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 0; }
    .review-spread.is-reverse .review-spread-photo{ order: 0; }
    .review-spread-photo{ aspect-ratio: 4 / 3; }
}

/* ---------- Kenmerken ---------- */
.features{ background-color: var(--bg-soft); }
.features-grid{
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 6rem;
    align-items: start;
}
.collection + .features{ padding-top: 12rem; }
.features + .editorial{ padding-top: 3.5rem; }
.features-text{ padding-top: 2rem; }
.features--reverse .features-grid{ grid-template-columns: 6fr 5fr; }
.features--reverse .features-media{ order: -1; }
.features-head{ margin-bottom: 2.75rem; }
.features-head .section-title{ font-size: clamp(1.8rem, 2.8vw, 2.35rem); font-style: italic; margin-bottom: 1.4rem; }
.features-head p{ max-width: 30rem; margin-bottom: 0; }

.features-list{ border-top: 1px solid var(--line); }
.feature{ border-bottom: 1px solid var(--line); }
.feature-head{ margin: 0; }
.feature-toggle{
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    width: 100%;
    padding: 1.35rem 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}
.feature-toggle:focus-visible{ outline: 1px solid var(--ink-soft); outline-offset: 4px; }
.feature-num{
    flex-shrink: 0;
    width: 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
}
.feature-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.55;
    transition: opacity 0.5s ease;
}
.feature-toggle:hover .feature-title,
.feature.is-open .feature-title{ opacity: 1; }

.feature-body{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.feature.is-open .feature-body{ grid-template-rows: 1fr; }
.feature-body-inner{ overflow: hidden; padding-left: 2.75rem; }
.feature-body-inner > :first-child{ margin-top: 0; }
.feature-body-inner p{ max-width: 30rem; font-size: 0.95rem; line-height: 1.85; color: var(--ink-soft); margin-bottom: 1rem; }
.feature-body-inner > :last-child{ margin-bottom: 1.6rem; }

.features-media{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.features-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.features-img.is-active{ opacity: 1; }

@media (max-width: 991px){
    .features-grid{ gap: 3.5rem; }
}
@media (max-width: 767px){
    .features-grid{ grid-template-columns: 1fr; gap: 2rem; }
    .features-media{ order: -1; aspect-ratio: 4 / 3; }
    .features-head{ order: -2; margin-bottom: 0; }
    .features-text{ display: contents; }
    .feature-title{ font-size: 1.3rem; }
}

/* ---------- Fotorijen ---------- */
.photo-rows-head{ max-width: 560px; margin: 0 auto 3rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.photo-rows-head .section-title{ font-size: clamp(1.8rem, 2.8vw, 2.35rem); font-style: italic; margin-bottom: 0; }
.photo-row{ display: flex; gap: 1.75rem; }
.photo-row + .photo-row{ margin-top: 1.75rem; }
.photo-row-item{ flex-basis: 0; min-width: 0; display: block; overflow: hidden; }
.photo-row-item img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s ease; }
a.photo-row-item{ cursor: zoom-in; }
a.photo-row-item:hover img{ transform: scale(1.03); }

@media (max-width: 767px){
    .photo-row{ flex-wrap: wrap; gap: 0.75rem; }
    .photo-row + .photo-row{ margin-top: 0.75rem; }
    .photo-row-item{ flex-basis: calc(50% - 0.375rem); }
    .photo-row-item:only-child,
    .photo-row-item:first-child:nth-last-child(odd){ flex-basis: 100%; }
}

/* ---------- Referenties ---------- */
.credentials{ background-color: var(--bg-soft); padding: 4rem 0; }
.editorial + .credentials{ padding-top: 0; }
.credentials .container{ max-width: 1080px; }
.credentials-head{ max-width: 560px; margin: 0 auto 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.credentials-head .section-title{ font-size: 1.5rem; font-style: italic; margin-bottom: 0.6rem; }
.credentials-head p{ font-size: 0.9rem; margin-bottom: 0; }
.credentials-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}
.credential{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
    color: inherit;
    text-decoration: none;
}
.credential-photo{ display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.credential-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s ease; }
a.credential:hover .credential-photo img{ transform: scale(1.04); }
.credential-text{ display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.credential-title{
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.3;
    color: var(--ink);
    transition: opacity 0.4s ease;
}
a.credential:hover .credential-title{ opacity: 0.7; }
a.credential:focus-visible{ outline: 1px solid var(--ink-soft); outline-offset: 4px; }
.credential-note{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

@media (max-width: 767px){
    .credentials{ padding: 3rem 0; }
    .credentials-list{
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 62%;
        gap: 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-right: -0.75rem;
        padding-right: 0.75rem;
    }
    .credentials-list::-webkit-scrollbar{ display: none; }
    .credential{ scroll-snap-align: start; }
}

/* ---------- Journal ---------- */
.journal-head,
.collection-head,
.price-menu-head,
.faq-head{
    max-width: 560px;
    margin: 0 auto 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.journal-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.journal-head .section-title,
.collection-head .section-title,
.price-menu-head .section-title,
.faq-head .section-title{
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    font-style: italic;
    margin-bottom: 1.4rem;
}

.journal-head p,
.collection-head p,
.faq-head p{ margin-bottom: 0; }

.journal-card a{ display: block; color: inherit; text-decoration: none; }

.journal-card figure{
    margin: 0 0 1.6rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.journal-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s ease;
}

.journal-card a:hover img{ transform: scale(1.04); }

.journal-card-text{ display: flex; flex-direction: column; align-items: flex-start; }

.journal-label{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.journal-label::before{
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.journal-card h3{
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    text-wrap: balance;
}

.journal-card a:hover .link-quiet::after,
.journal-card a:focus-visible .link-quiet::after{
    transform: scaleX(1);
    transform-origin: left;
}

.has-motion .journal-card:nth-child(2) .reveal{ transition-delay: calc(var(--reveal-delay, 0s) + 0.15s); }
.has-motion .journal-card:nth-child(3) .reveal{ transition-delay: calc(var(--reveal-delay, 0s) + 0.3s); }

@media (max-width: 900px){
    .journal-head{ margin-bottom: 2.8rem; }
    .journal-row{
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-right: -0.75rem;
        padding-right: 0.75rem;
    }
    .journal-row::-webkit-scrollbar{ display: none; }
    .journal-card{ scroll-snap-align: start; }
    .journal-card h3{ font-size: 1.3rem; }
}

/* ---------- Lightbox ---------- */
.lightbox{
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg-soft);
    color: var(--ink);
}
.lightbox::backdrop{ background: var(--bg-soft); }
.lightbox[open]{ display: flex; align-items: center; justify-content: center; animation: lightboxIn 0.35s ease; }
@keyframes lightboxIn{ from{ opacity: 0; } to{ opacity: 1; } }

.lightbox-img{
    max-width: calc(100vw - 10rem);
    max-height: calc(100dvh - 8rem);
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.lightbox-img.is-loading{ opacity: 0; }

.lightbox button{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.3s ease;
}
.lightbox button:hover{ color: var(--ink); }
.lightbox button svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1; }
.lightbox-close{ top: 1.5rem; right: 1.5rem; }
.lightbox-prev{ left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 1.5rem; top: 50%; transform: translateY(-50%); }
.is-single .lightbox-prev,
.is-single .lightbox-next,
.is-single .lightbox-count{ display: none; }

.lightbox-count{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: #9a9388;
}

@media (max-width: 767px){
    .lightbox-img{ max-width: 100vw; max-height: calc(100dvh - 9rem); }
    .lightbox-prev, .lightbox-next{ top: auto; bottom: 1rem; transform: none; }
    .lightbox-prev{ left: 1rem; }
    .lightbox-next{ right: 1rem; }
    .lightbox-count{ bottom: 2rem; }
}

.lightbox-feed[open]{ display: block; }
.feed-scroll{
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}
.feed-scroll::-webkit-scrollbar{ display: none; }
.feed-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.feed-slide img{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 8rem);
    object-fit: contain;
    background: var(--line);
}
.lightbox-feed .lightbox-close{ top: 0.75rem; right: 0.75rem; z-index: 2; }
.lightbox-feed .lightbox-count{ bottom: 1.25rem; z-index: 2; }

/* ---------- Scroll motion ---------- */

.has-motion .reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.has-motion .reveal.is-visible{
    opacity: 1;
    transform: none;
}

.has-motion .magazine-note::before{
    transform: scaleY(0);
    transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.has-motion .kicker::before,
.has-motion .quote-kicker::before,
.has-motion .cta-kicker::before{ transform-origin: right; }
.has-motion .cta-kicker::after{ transform-origin: left; }

.has-motion .kicker::before,
.has-motion .quote-kicker::before,
.has-motion .cta-kicker::before,
.has-motion .cta-kicker::after{
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

.has-motion .quote-sign::before{
    transform: scaleX(0);
    transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

.has-motion .magazine-note.is-drawn::before{ transform: scaleY(1); }
.has-motion .kicker--center::after{
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

.has-motion .is-visible.kicker::before,
.has-motion .is-visible.kicker--center::after,
.has-motion .is-visible.quote-kicker::before,
.has-motion .is-visible.cta-kicker::before,
.has-motion .is-visible.cta-kicker::after,
.has-motion .is-visible.quote-sign::before{ transform: scaleX(1); }

/* Kicker in CKEditor-tekst */
p.kicker{
    max-width: none;
    margin: 0 0 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.text-center p.kicker,
.intro-inner p.kicker{ justify-content: center; }
.text-center p.kicker::after,
.intro-inner p.kicker::after{
    content: "";
    flex-shrink: 0;
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.has-motion .text-center p.kicker::after,
.has-motion .intro-inner p.kicker::after{
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}
.has-motion .text-center p.kicker.is-visible::after,
.has-motion .intro-inner p.kicker.is-visible::after{ transform: scaleX(1); }

/* Review-voorbeeld (CP) */
.preview-label{ padding: 4rem 0 1rem; background: var(--bg-soft); }
.preview-label:first-child{ padding-top: 9rem; }
.preview-label .kicker{ margin-bottom: 0; }