/* Contentpagina's (/photos/, /guides/, /press/, 404). Alleen aanvullingen op pages.css, dezelfde tokens.
   Gegenereerd beeld en tekst komen uit tools/pages/. */

/* kop */
.c-head{padding-block:calc(128px + env(safe-area-inset-top,0px)) clamp(40px,7vh,80px);row-gap:0}
.crumbs{grid-column:1 / -1;margin:0 0 18px;color:var(--mute)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--ink-2);padding-block:12px}
.crumbs a:hover{color:var(--ink)}
.c-head .slot{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(32px,6vh,64px)}
.c-head h1{grid-column:1 / span 10;font-size:clamp(2.6rem,6.2vw,6.6rem)}
.c-head .lede{grid-column:7 / span 5;margin:clamp(28px,5vh,56px) 0 0;color:var(--ink-2);font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:46ch}
@media (max-width:860px){.c-head h1,.c-head .lede{grid-column:1 / -1}.c-head .lede{margin-top:26px}}

/* lopende tekst */
.c-body{padding-bottom:clamp(60px,10vh,120px);row-gap:0}
.c-body>*{grid-column:4 / span 6}
.prose h2{font-family:var(--display);font-weight:var(--w-light);font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.04;letter-spacing:-.02em;margin:clamp(56px,9vh,96px) 0 20px;text-wrap:balance}
.prose h3{font-family:var(--display);font-weight:var(--w-text);font-size:clamp(1.25rem,1.6vw,1.55rem);line-height:1.15;letter-spacing:-.01em;margin:40px 0 12px}
.prose p,.prose li{color:var(--ink-2);font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.66}
.prose p{margin:0 0 1.05em;max-width:62ch}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.1em;max-width:62ch}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(237,235,230,.35);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--limb)}
.prose strong{color:var(--ink);font-weight:500}
.prose blockquote{margin:28px 0;padding:0 0 0 22px;border-left:1px solid var(--limb)}
.prose blockquote p{color:var(--ink);font-family:var(--display);font-weight:var(--w-light);font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.25;letter-spacing:-.01em}
.prose blockquote footer,.prose .cite{border:0;padding:0;color:var(--mute)}
@media (max-width:1100px){.c-body>*{grid-column:3 / span 8}}
@media (max-width:860px){.c-body>*{grid-column:1 / -1}}

/* figuren */
.fig{margin:clamp(32px,6vh,64px) 0;display:grid;gap:12px}
.fig picture,.fig img{display:block;width:100%;height:auto}
.fig img{background:var(--deep)}
.fig figcaption{color:var(--mute);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.6;text-transform:none;max-width:78ch}
.fig figcaption a{color:var(--ink-2)}
.c-body>.fig.wide,.c-body>.slider{grid-column:2 / span 10}
.c-body>.fig.full{grid-column:1 / -1}
.fig.tall img{max-height:88vh;width:100%;object-fit:contain;background:none}
.fig.spread img{background:none}
.c-hero{padding-bottom:clamp(20px,4vh,40px)}
.c-hero .fig{grid-column:2 / span 10;margin:0}
.c-hero .fig.tall{grid-column:3 / span 8}
@media (max-width:860px){.c-body>.fig.wide,.c-body>.slider,.c-hero .fig,.c-hero .fig.tall{grid-column:1 / -1}}

/* paar beelden naast elkaar */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.c-body>.pair{grid-column:2 / span 10}
.pair .fig{margin:clamp(24px,4vh,48px) 0}
@media (max-width:860px){.pair{grid-template-columns:1fr}.c-body>.pair{grid-column:1 / -1}.pair .fig{margin:16px 0}}

/* restored vs raw */
.slider{margin:clamp(32px,6vh,64px) 0;display:grid;gap:12px}
.slider .frame{position:relative;overflow:hidden;background:var(--deep);touch-action:pan-y}
.slider .frame img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;pointer-events:none}
.slider .top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.slider .top img{width:100%;height:100%;object-fit:cover}
.slider .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;background:var(--limb);box-shadow:0 0 12px rgba(127,178,230,.8);pointer-events:none}
.slider .lab{position:absolute;top:12px;color:var(--ink);background:rgba(5,6,8,.7);padding:6px 10px;pointer-events:none}
.slider .lab.l{left:12px}.slider .lab.r{right:12px}
.slider input[type=range]{width:100%;margin:0;accent-color:var(--limb);min-height:44px;cursor:ew-resize}
.slider .caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.slider .caps p{margin:0;color:var(--mute);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.6}
.slider .caps a{color:var(--ink-2)}
/* zonder JS: twee beelden naast elkaar */
.slider:not(.js) .frame{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);background:none}
.slider:not(.js) .top{position:static;clip-path:none}
.slider:not(.js) .top{order:-1}
.slider:not(.js) .bar,.slider:not(.js) input,.slider:not(.js) .lab,.slider:not(.js) label{display:none}
@media (max-width:860px){.slider .caps{grid-template-columns:1fr}}

/* lijst met foto's (hub) */
.era-h{margin-top:clamp(64px,11vh,120px) !important;padding-top:16px;border-top:1px solid var(--line)}
.era-h .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--limb);margin-bottom:14px}
.era-intro{color:var(--mute) !important}
.item{margin:clamp(36px,6vh,64px) 0 0;scroll-margin-top:90px}
.item h3{margin-top:0}
.item .fig{margin:0 0 18px}
.item .more{margin:10px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.item .more a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;background:linear-gradient(var(--line),var(--line)) 0 calc(100% - 10px) / 100% 1px no-repeat}
.item .more a:hover{background-image:linear-gradient(var(--limb),var(--limb))}
.item .nofig{margin:0 0 12px;color:var(--mute);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}

/* tijdlijn (firsts) */
.tl-item{position:relative;margin:clamp(44px,7vh,72px) 0 0;padding-left:28px;border-left:1px solid var(--line);scroll-margin-top:90px}
.tl-item::before{content:"";position:absolute;left:-5px;top:.55em;width:9px;height:9px;background:var(--limb);box-shadow:0 0 10px rgba(127,178,230,.7)}
.tl-item h2{margin-top:0 !important}
.tl-item .when{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--limb);margin-bottom:10px}
.tl-item .src{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--mute)}
.tl-item .fig{margin:18px 0}
@media (max-width:860px){.tl-item{padding-left:18px}}

/* korte feiten en gebruik */
.facts{list-style:none;padding:0 !important;margin:24px 0 32px !important;border-top:1px solid var(--line);max-width:none !important}
.facts li{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.facts li span:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.use{margin:32px 0;padding:20px 22px;border:1px solid var(--line);background:var(--deep)}
.use p{margin:0 0 8px !important}
.use .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.use code{font-family:var(--mono);font-size:13px;color:var(--ink);user-select:all;word-break:break-word}

/* bronnen */
.sources{margin-top:clamp(56px,9vh,96px) !important;padding-top:16px;border-top:1px solid var(--line)}
.sources h2{margin-top:0 !important;font-size:clamp(1.3rem,1.8vw,1.6rem) !important}
.sources ol{padding-left:1.3em}
.sources li{font-size:15px !important;line-height:1.55 !important;margin-bottom:6px;overflow-wrap:anywhere}

/* boekverwijzing onderaan */
.inbook{margin-top:clamp(48px,8vh,80px) !important;display:grid;grid-template-columns:120px 1fr;gap:var(--gap);align-items:center;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inbook img{width:120px;height:auto}
.inbook p{margin:0 !important}
@media (max-width:860px){.inbook{grid-template-columns:84px 1fr}.inbook img{width:84px}}

/* pers */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--gap)}
.c-body>.pgrid{grid-column:2 / span 10}
.pgrid .fig{margin:0}
.pgrid .fig img{aspect-ratio:1 / 1;object-fit:cover}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.c-body>.pgrid{grid-column:1 / -1}}

/* footer met kolommen */
.foot-nav{row-gap:28px;padding-bottom:clamp(28px,5vh,48px);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,5vh,48px)}
.foot-nav div{grid-column:span 3;display:grid;gap:2px;align-content:start}
.foot-nav .k{color:var(--mute);margin-bottom:8px}
.foot-nav a{color:var(--ink-2);text-decoration:none;padding-block:7px;line-height:1.4}
.foot-nav a:hover{color:var(--ink)}
.foot-credit{margin:0;color:var(--ink-2)}
@media (max-width:860px){.foot-nav div{grid-column:span 6}}

/* 404 */
.nf{min-height:70vh}

/* maten: niet groter tonen dan het bestand */
.c-body>.slider{width:100%;max-width:896px;justify-self:center}
.item .fig{max-width:620px}
.item .fig img,.tl-item .fig img{max-height:72vh;width:auto;max-width:100%}
.tl-item .fig{max-width:560px}

/* GEO/AEO: bijgewerkt-regel, samenvatting bovenaan, vraagkoppen en overzichtstabel */
.c-head .updated{grid-column:7 / span 5;margin:18px 0 0;color:var(--mute);font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
@media (max-width:860px){.c-head .updated{grid-column:1 / -1}}
.summary{margin:0 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.summary .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--limb);margin:0 0 14px}
.prose .summary .tldr{color:var(--ink);font-size:clamp(17.5px,1.3vw,20px);line-height:1.6}
.summary .facts{margin-bottom:0 !important}
.prose .answer{color:var(--ink)}
.prose h2.q{scroll-margin-top:90px}
.tbl{overflow-x:auto;margin:8px 0 32px;max-width:100%}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl th{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tbl td:first-child{white-space:nowrap;font-family:var(--mono);font-size:12.5px;color:var(--mute);padding-top:12px}
@media (max-width:600px){.tbl td:first-child{white-space:normal}.tbl th,.tbl td{padding-right:8px}}