/* Dorpel r6 (Moreno, Fri 16 Oct evening). Loaded after r5.css. */

/* ---- 1 · header: out of the way while you read down, back the moment you scroll up ---- */
.site-head{transition:transform .42s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.site-head.away{transform:translateY(-100%);box-shadow:none}
.home-bar.on{transition:opacity .25s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
.home-bar.on.away{transform:translateY(-100%);box-shadow:none}
@media (prefers-reduced-motion: reduce){.site-head,.home-bar.on{transition:none}}

/* ---- 2 · hover: a pencil loop, drawn once around the link (no underline hovers on this site) ---- */
.has-pl{position:relative}
.tl.has-pl{display:inline-block;transition:text-decoration-color .25s ease,color .25s ease}
.pl{position:absolute;left:-.62em;right:-.62em;top:-.5em;bottom:-.42em;width:calc(100% + 1.24em);height:calc(100% + .92em);overflow:visible;pointer-events:none;transform:rotate(var(--r,0deg))}
.pl path{fill:none;stroke:var(--brass-deep);stroke-width:1.15;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .2s ease,opacity .2s ease}
.has-pl:hover .pl path,.has-pl:focus-visible .pl path{stroke-dashoffset:0;opacity:.9;transition:stroke-dashoffset .55s cubic-bezier(.35,.1,.25,1),opacity .08s linear}
.tl.has-pl:hover,.tl.has-pl:focus-visible{text-decoration-color:transparent;color:var(--ink)}
.hero .pl path{stroke:#e8cf9f}
.site-head nav a.has-pl:hover,.foot-line nav a.has-pl:hover{color:var(--ink)}
.has-pl:focus-visible{outline:none}
@media (prefers-reduced-motion: reduce){.has-pl:hover .pl path,.has-pl:focus-visible .pl path,.pl path{transition:none}}

/* ---- 3 · voor/na examples: three rhythms, each ties its words to its half of the photo ---- */
.ex-head{display:grid;justify-items:center;text-align:center;margin-bottom:calc(44*var(--u))}
.num.hand,.ex .num.hand{font:500 max(calc(30*var(--u)),22px)/1 "Jost",sans-serif;letter-spacing:0;color:var(--brass-deep);display:block;transform:rotate(-3deg);margin-bottom:calc(10*var(--u))}

/* A · centred: the photo full width; under it "Voor …" on the left half, "Na …" on the right half, the buttons between them */
.ex-cap{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:calc(40*var(--u));margin-top:calc(26*var(--u))}
.ex-cap p{margin:0;font:400 max(calc(16*var(--u)),14px)/1.55 var(--sans);color:var(--ink-soft);max-width:calc(440*var(--u));transition:opacity .4s ease}
.ex-cap p b{display:block;font:500 max(calc(11*var(--u)),9.7px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:calc(10*var(--u))}
.ex-cap .c-na{justify-self:end;text-align:right}
.ex-cap .vn-ctl{margin:0;flex-direction:column;align-items:center;gap:calc(10*var(--u))}
.ex-cap .vn-ctl > div{display:flex}
.ex-cap .vn-ctl .small{margin:0;white-space:nowrap}
.vn[data-at="voor"] .ex-cap .c-na,.vn[data-at="na"] .ex-cap .c-voor{opacity:.38}

/* B · split: the words beside the drawing */
.ex-b{display:grid;grid-template-columns:3fr 9fr;gap:calc(64*var(--u));align-items:center;margin-right:calc(-1*var(--side))}
.ex-b .plan svg g[font-size]{font-size:20px}   /* the drawing runs to the page edge; its room names stay readable at this scale */
.ex-b .ex-txt .body{margin-top:calc(22*var(--u))}
.ex-b .plan{padding:calc(40*var(--u)) calc(44*var(--u)) calc(32*var(--u))}
.ex-b .plan .bar{flex-wrap:wrap;row-gap:calc(16*var(--u))}

/* C · offset: the photo on the left, its story and the control on the right, sitting on the photo's baseline */
.ex-c{display:grid;grid-template-columns:8fr 4fr;gap:calc(64*var(--u));align-items:end}
.ex-c .vn-stage{aspect-ratio:4/3}
.ex-c .ex-side{padding-bottom:calc(6*var(--u))}
.ex-c .ex-side .body{margin-top:calc(22*var(--u))}
.ex-c .vn-ctl{margin-top:calc(36*var(--u));padding-top:calc(24*var(--u));border-top:1px solid rgba(35,31,27,.16)}
.ex-c .vn-ctl .small{flex-basis:100%;margin:calc(12*var(--u)) 0 0}

/* ---- 4 · Projecten: three projects, three rhythms (r5 left the photo in the narrow column) ---- */
.proj.ex{display:grid;grid-template-columns:repeat(12,1fr);column-gap:calc(48*var(--u));row-gap:calc(36*var(--u))}
.proj.ex .info{display:block !important;grid-template-columns:none;grid-column:auto}
.proj.ex .info h2{margin-bottom:calc(10*var(--u))}
.proj.ex .info .story{margin:calc(22*var(--u)) 0 0;max-width:calc(460*var(--u))}
.proj.ex .info dl{margin:calc(28*var(--u)) 0 0 !important}
.proj.ex .info .tl{margin-top:calc(30*var(--u))}
/* 01 wide: the photo across the page, the words in three columns under it */
.proj.ex-wide > .vn{grid-column:1 / -1;grid-row:1}
.proj.ex-wide .vn-stage{aspect-ratio:21/9}
.proj.ex-wide .info{grid-column:1 / -1;grid-row:2;display:grid !important;grid-template-columns:5fr 4fr 3fr;column-gap:calc(48*var(--u));align-items:start;margin-top:calc(20*var(--u))}
.proj.ex-wide .info .story{margin-top:0}
.proj.ex-wide .info .tl{justify-self:end;margin-top:0}
.proj.ex-wide .info dl{margin-top:calc(16*var(--u)) !important}
/* 02 words left, photo right */
.proj.ex-l .info{grid-column:1 / 6;align-self:center}
.proj.ex-l > .vn{grid-column:6 / -1}
/* 03 photo left, words right on its baseline */
.proj.ex-r > .vn{grid-column:1 / 8;grid-row:1}
.proj.ex-r .info{grid-column:8 / -1;grid-row:1;align-self:end;padding-bottom:calc(64*var(--u))}
.proj.ex-r .vn-stage{aspect-ratio:4/3}
.proj.ex > .table{grid-column:1 / -1}
.proj.ex-plan .info{grid-column:1 / -1;display:grid !important;grid-template-columns:5fr 7fr;column-gap:calc(48*var(--u));align-items:end}
.proj.ex-plan .info dl{margin-top:0 !important}

/* ---- 5 · logo B (Moreno's pick): Cormorant Garamond 600 capitals, no mark. Same 24 hu box as before, so the header row does not move;
   the word sits centred in it at 22 hu (cap height ≈ the old wordmark's letters). ---- */
.mark.logo svg{height:max(calc(22*var(--u)),18px)}
.hero .mark.logo svg,.site-head .mark.logo svg{height:calc(22*var(--hu));margin-top:calc(1*var(--hu))}
.foot-line .mark.logo svg{height:max(calc(14*var(--u)),12.5px)}

/* every chapter number on the case pages in the same pencil hand */
.ch-head .num{font:500 max(calc(30*var(--u)),22px)/1 "Jost",sans-serif;letter-spacing:0;color:var(--brass-deep);transform:rotate(-3deg);transform-origin:left bottom}