/* Dorpel r4 · "de drempel: voor en na, met potlood" (PATTERNS-sites-r4, Dorpel D1–D8).
   Loaded after each page's own <style>, so these rules win at equal specificity. The approved hero is scoped under .hero and untouched. */

/* D1 · limewash white, a pale plaster grey as the only second fill, no dark bands; oak only in photos */
:root{
  --plaster:#f6f3ee;
  --plaster-2:#ebe8e3;
  --frame:#e4e0d9;          /* the plaster passe-partout around photos */
  --graphite:#4f4842;       /* pencil on limewash: 8.4:1 */
  --ink-mute:#71675c;       /* captions on limewash: 5.0:1 */
}
html,body{background:var(--plaster)}
.site-head{background:var(--plaster)}

/* D2 · headings below the hero: roman, centred, narrow measure; the eyebrow becomes a pencil label on the left */
.h-xl em,.h-l em,.h-m em{font-style:normal;color:inherit}
.eyebrow:not(.hero .eyebrow){font:400 max(calc(24*var(--u)),19px)/1.1 "Jost",sans-serif;letter-spacing:0;text-transform:none;color:var(--graphite)}
.sh{display:grid;justify-items:center;text-align:center;margin-bottom:calc(80*var(--u))}
.sh .eyebrow{justify-self:start;transform:rotate(-2deg);margin:0 0 calc(18*var(--u)) calc(8*var(--u))}
.sh .eyebrow::after{content:" ↓"}
.sh h1,.sh h2{max-width:calc(760*var(--u))}
.sh .body{max-width:calc(560*var(--u));margin-top:calc(24*var(--u))}
.sh .tl{margin-top:calc(28*var(--u))}
.p-head{display:block;padding-top:calc(96*var(--u));padding-bottom:calc(88*var(--u))}
.p-head .sh{margin-bottom:0}

/* links instead of ghost buttons: serif, brass underline. One solid button per page (the doorway, or Verstuur on contact). */
.tl{font:500 max(calc(20*var(--u)),17px)/1.3 var(--serif);color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:.3em;text-transform:none;letter-spacing:0;transition:color .25s ease,text-decoration-color .25s ease;cursor:pointer}
.tl:hover{color:var(--brass-deep);text-decoration-color:var(--brass-deep)}

/* the plaster passe-partout (frame-in-frame, as in the hero) */
.frame{background:var(--frame);padding:calc(18*var(--u));box-shadow:inset 0 0 0 1px rgba(35,31,27,.05)}
.frame.wide{padding:calc(22*var(--u))}
.frame img{display:block;width:100%}
.people.bleed .frame{margin:0 var(--side)}
.people .frame img{aspect-ratio:16/8;object-fit:cover}

/* D4 · project cards: voor/na with the brass line; the pointer drags it */
.compare.hov{aspect-ratio:16/10;cursor:ew-resize}
.card.big .compare.hov{aspect-ratio:4/3}
.compare .line{width:2px;margin-left:-1px}
.card .meta{display:block;margin-top:calc(22*var(--u))}
.card .meta .small{margin-top:calc(8*var(--u))}
.card .media,.card .voor{display:none}
.work{background:var(--plaster-2)}
.idea-pair .frame .compare{aspect-ratio:16/9}

/* home · one design */
.scopes{margin-top:0}

/* D5 · one plan drawn five times */
.grow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0 calc(32*var(--u));position:relative}
.grow::before{content:"";position:absolute;left:0;right:0;top:calc(var(--gh) + 1px);height:1px;background:var(--brass)}
.grow{--gh:calc(196*var(--u))}
.grow li{display:grid;grid-template-rows:var(--gh) auto auto;align-content:start}
.g-media{margin:0;display:flex;align-items:flex-end;justify-content:center;height:100%}
.g-media svg{width:100%;height:100%;font-family:"Jost",sans-serif;overflow:visible}
.g-media svg path{vector-effect:non-scaling-stroke}
.g-media.ph-step img{width:100%;height:100%;object-fit:cover;background:var(--frame);outline:calc(10*var(--u)) solid var(--frame);outline-offset:calc(-10*var(--u))}
.grow h3{margin-top:calc(28*var(--u))}
.grow .hand{margin-top:calc(6*var(--u))}

/* D3 · the long table from above, with pencil leader lines to the hands */
.table-top{position:relative;margin:0 auto;width:100%;padding:0 18% calc(96*var(--u)) 18%}
.table-top .frame img{aspect-ratio:3/2;object-fit:cover}
.table-top .leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.table-top .leaders path{vector-effect:non-scaling-stroke}
.tl-lab{position:absolute;display:grid;gap:calc(2*var(--u));max-width:16%;margin:0}
.tl-lab b.hand{font-size:max(calc(34*var(--u)),26px);color:var(--ink);font-weight:500}
.tl-lab .small{color:var(--ink-mute)}
.tl-lab .line{font-size:max(calc(21*var(--u)),17px);color:var(--graphite);margin-top:calc(4*var(--u))}
.tl-lab.ilse{left:0;top:6%;text-align:right;transform:rotate(-2deg)}
.tl-lab.mina{right:0;top:38%;transform:rotate(1.5deg)}
.tl-lab.joris{left:50%;bottom:0;max-width:30%;transform:translateX(-50%) rotate(-1deg);text-align:center}
.bios{list-style:none;max-width:calc(760*var(--u));margin:calc(72*var(--u)) auto 0;border-top:1px solid rgba(35,31,27,.14)}
.bios li{display:grid;grid-template-columns:calc(120*var(--u)) calc(200*var(--u)) 1fr;gap:calc(24*var(--u));align-items:baseline;padding:calc(24*var(--u)) 0;border-bottom:1px solid rgba(35,31,27,.14)}

/* D6 · send your plan, we draw back */
.plan-sec{background:var(--plaster-2)}
.plan-split{display:grid;grid-template-columns:7fr 5fr;gap:calc(80*var(--u));align-items:center}
.scan-frame{margin:0;transform:rotate(-.8deg)}
.scan-frame svg{width:100%;height:auto;display:block;font-family:"Jost",sans-serif}
.scan-frame figcaption{margin-top:calc(10*var(--u));text-align:right}
.plan-txt .body{margin-top:calc(20*var(--u))}
.plan-txt .links{display:flex;gap:calc(32*var(--u));margin-top:calc(32*var(--u))}

/* studio */
.big-img{margin:0 var(--side)}
.big-img .frame img{aspect-ratio:16/8;object-fit:cover}
.big-img figcaption{padding:0}
.begin .with-margin{max-width:calc(1000*var(--u));margin:0 auto}
.begin .text .body + .body{margin-top:calc(20*var(--u))}
.area{background:var(--plaster-2)}
.towns{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14*var(--u)) calc(44*var(--u));max-width:calc(900*var(--u));margin:0 auto}
.towns li{font:400 calc(28*var(--u))/1.2 var(--serif)}

/* werkwijze: the drawing per step instead of a numeral */
.steps-v li{grid-template-columns:calc(200*var(--u)) 4fr 5fr 5fr}
.steps-v li .g-media{height:calc(170*var(--u));flex-direction:column;align-items:stretch;justify-content:flex-start;gap:calc(4*var(--u))}
.steps-v li .g-media svg,.steps-v li .g-media img{height:calc(140*var(--u))}
.steps-v li .g-media figcaption{font-size:max(calc(18*var(--u)),15px)}
.faq{display:block}
.faq .qs,.prices > div:last-child{max-width:calc(760*var(--u));margin:0 auto}
.prices .sh .body{margin-left:auto;margin-right:auto}

/* cases: centred title, pencil label */
.c-head .eyebrow{display:block;text-align:left;transform:rotate(-1.5deg)}
.c-head h1{margin:0 auto;text-align:center;max-width:calc(900*var(--u))}

/* contact */
.plan-up .pick{display:flex;align-items:baseline;gap:calc(20*var(--u));flex-wrap:wrap}
.plan-up:has(input:focus-visible) label.tl,.photos:has(input:focus-visible) label.tl{outline:1px solid var(--brass-deep);outline-offset:4px}
.plan-up.ask{box-shadow:0 0 0 1px var(--brass);padding:calc(14*var(--u));margin:calc(-14*var(--u))}
.c-side .where .direct{gap:calc(28*var(--u))}
form,.sent{background:var(--plaster-2)}
.photos label.tl{margin:0}

/* D7 · the closing doorway: a small frame-in-frame of the threshold, one line, one button */
.doorway{display:grid;justify-items:center;text-align:center;padding-top:calc(150*var(--u));padding-bottom:calc(130*var(--u))}
.frame.door{padding:calc(36*var(--u)) calc(36*var(--u)) 0;width:calc(380*var(--u));margin:0 0 calc(56*var(--u))}
.frame.door img{aspect-ratio:4/5;object-fit:cover;object-position:52% 60%}
.doorway .body{max-width:calc(520*var(--u));margin-top:calc(22*var(--u))}
.dw-act{display:flex;align-items:center;gap:calc(32*var(--u));margin-top:calc(40*var(--u))}

/* D1/S8 · footer: one line on plaster, under a drawn threshold */
.foot-line{padding:0 var(--side) calc(40*var(--u))}
.foot-line .sill-line{display:block;width:100%;height:12px}
.foot-line .fl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(14*var(--u)) calc(36*var(--u));padding-top:calc(22*var(--u));font:400 max(calc(13*var(--u)),11.4px)/1.5 var(--sans);color:var(--ink-mute)}
.foot-line .mark{font:500 max(calc(13*var(--u)),11.4px)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.foot-line nav{display:flex;gap:calc(22*var(--u))}
.foot-line a{color:var(--ink-soft);text-decoration:none}
.foot-line a:hover{color:var(--ink)}

/* page styles that out-rank the r4 head */
.p-head > div.sh{display:grid;flex-direction:initial;align-items:initial}
.area ul.towns{display:flex}
.area .towns li{border:0;padding:0}
.proj > .frame{grid-column:1 / -1}
.proj .info .tl{align-self:flex-start;margin-top:auto;white-space:nowrap}
.next .ctas{display:flex;gap:calc(32*var(--u));align-items:baseline}

/* r4.1 · the new logo (Moreno's pick, b4r8, one colour): outlined SVG inline, colour from currentColor; it carries its own sill, so no underline */
.mark.logo{display:block;line-height:0;padding-bottom:0}
.mark.logo::after{display:none}
.mark.logo svg{display:block;width:auto;height:max(calc(28*var(--u)),23px)}
.hero .mark.logo{color:#f4efe6;filter:drop-shadow(0 0 calc(14*var(--hu)) rgba(40,32,26,.55))}
.hero .mark.logo svg{height:calc(28*var(--hu))}
.site-head .mark.logo{color:var(--ink)}
.foot-line .mark.logo{color:var(--ink)}
.foot-line .mark.logo svg{height:max(calc(17*var(--u)),15px)}
/* approved hero: the logo box keeps the old wordmark's height (15 + 9 hu), so the header row and the nav do not move */
.hero .mark.logo{height:calc(24*var(--hu))}
.hero .mark.logo svg{margin-top:calc(-2*var(--hu))}