/* Dorpel · site styles (inner pages + the sections under the approved hero).
   Palette from the hero photo: warm plaster ground, smoked-oak ink, pale oak, brass for the threshold line only. */
[hidden]{display:none!important}
:root{
  --plaster:#f2ece2;      /* page ground */
  --plaster-2:#e9e1d4;    /* quiet band */
  --oak:#2a2622;          /* smoked oak: dark bands, ink on light */
  --ink:#231f1b;
  --ink-soft:#5b5248;     /* body on plaster: 7.0:1 */
  --ink-mute:#7a6f63;     /* captions on plaster: 4.6:1 */
  --brass:#c9a46a;        /* lines only, never text on plaster */
  --brass-deep:#7d5f31;   /* brass as text on plaster: 5.3:1 */
  --cream:#f4efe6;        /* text on oak */
  --cream-soft:rgba(244,239,230,.78);
  --serif:"Cormorant Garamond",Garamond,serif;
  --sans:"Jost",system-ui,sans-serif;
  --u:clamp(.75px,calc(100vw / 1440),1.25px);
  --gut:calc(64*var(--u));
  --maxw:calc(1312*var(--u));   /* content width at 1440 = 1312; capped at 1640 */
  --side:max(var(--gut),calc((100% - var(--maxw)) / 2));   /* % resolves where used: full-width blocks */
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--plaster)}
body{font-family:var(--sans);color:var(--ink);background:var(--plaster);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* header on plaster pages (the home hero keeps its own) */
.site-head{display:flex;align-items:center;justify-content:space-between;padding:calc(36*var(--u)) var(--side);position:sticky;top:0;z-index:20;background:var(--plaster);transition:padding .35s ease,box-shadow .35s ease}
/* once scrolled: a slimmer bar with a hairline, so the menu and the way to contact stay in reach on long pages */
.site-head.stuck{padding-top:calc(20*var(--u));padding-bottom:calc(20*var(--u));box-shadow:0 1px 0 rgba(35,31,27,.12)}
.home-bar{position:fixed;left:0;right:0;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);padding-top:calc(20*var(--u));padding-bottom:calc(20*var(--u));box-shadow:0 1px 0 rgba(35,31,27,.12)}
.home-bar.on{transform:none}
.site-head nav a:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){.site-head,.home-bar{transition:none}}
.site-head .mark{font:500 max(calc(15*var(--u)),13.2px)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;padding-bottom:calc(9*var(--u))}
.site-head .mark::after{content:"";position:absolute;left:0;right:.42em;bottom:0;height:1px;background:var(--brass)}
.site-head nav{display:flex;gap:calc(40*var(--u))}
.site-head nav a{font:400 max(calc(14*var(--u)),12.3px)/1 var(--sans);letter-spacing:.04em;color:var(--ink-soft);text-decoration:none;position:relative}
.site-head nav a[aria-current]{color:var(--ink)}
.site-head nav a[aria-current]::before{content:"";position:absolute;left:50%;top:calc(100% + calc(9*var(--u)));width:calc(4*var(--u));height:calc(4*var(--u));margin-left:-2px;border-radius:50%;background:var(--brass)}

/* type */
.eyebrow{font:500 max(calc(12*var(--u)),10.6px)/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.h-xl{font:400 calc(64*var(--u))/1.04 var(--serif);letter-spacing:-.012em}
.h-l{font:400 calc(46*var(--u))/1.08 var(--serif);letter-spacing:-.01em}
.h-m{font:400 calc(32*var(--u))/1.15 var(--serif)}
.h-s{font:500 calc(22*var(--u))/1.2 var(--serif)}
em{font-style:italic}
.h-xl em,.h-l em,.h-m em{color:var(--brass-deep)}
.body{font:400 max(calc(17*var(--u)),15.0px)/1.6 var(--sans);color:var(--ink-soft)}
.small{font:400 max(calc(14*var(--u)),12.3px)/1.55 var(--sans);color:var(--ink-mute)}
.num{font:500 max(calc(12*var(--u)),10.6px)/1 var(--sans);letter-spacing:.18em;color:var(--brass-deep)}

/* buttons: solid + ghost, no underline, no arrows */
.btn{display:inline-flex;align-items:center;height:calc(50*var(--u));padding:0 calc(26*var(--u));font:500 max(calc(14*var(--u)),12.3px)/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer}
.btn.solid{background:var(--ink);color:var(--plaster)}
.on-oak .btn{border-color:var(--cream);color:var(--cream)}
.on-oak .btn.solid{background:var(--cream);color:var(--ink)}

/* the dorpel: one brass hairline, the site's only ornament */
.sill{height:1px;background:var(--brass);border:0}

/* layout */
.wrap{padding-left:var(--side);padding-right:var(--side)}
.section{padding-top:calc(160*var(--u));padding-bottom:calc(160*var(--u))}
.on-oak{background:var(--oak);color:var(--cream)}
.on-oak .body{color:var(--cream-soft)}
.on-oak .eyebrow,.on-oak .small{color:rgba(244,239,230,.66)}
.on-oak .h-xl em,.on-oak .h-l em,.on-oak .h-m em{color:#e8d3ad}

/* voor / na pair, static */
.pair{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 calc(28*var(--u));align-items:end}
.pair .sep{background:var(--brass);align-self:stretch}
.pair figure{margin:0}
.pair figcaption{margin-top:calc(14*var(--u));display:flex;justify-content:space-between;font:400 max(calc(13*var(--u)),11.4px)/1.4 var(--sans);color:var(--ink-mute)}
.pair figcaption b{font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:max(calc(11*var(--u)),9.7px);color:var(--ink)}
.ph{aspect-ratio:16/9;object-fit:cover;width:100%;background:#d9cfc0}

/* voor / na compare: the upright threshold, moved by the reader */
.compare{position:relative;aspect-ratio:16/9;overflow:hidden;background:#d9cfc0;user-select:none;--x:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .na{clip-path:inset(0 0 0 var(--x))}
.compare .line{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:var(--brass);pointer-events:none}
.compare .grip{position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);height:calc(40*var(--u));padding:0 calc(16*var(--u));display:flex;align-items:center;gap:calc(14*var(--u));background:rgba(35,31,27,.82);color:var(--cream);font:500 max(calc(11*var(--u)),9.7px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;pointer-events:none;white-space:nowrap}
.compare .grip i{width:1px;height:calc(14*var(--u));background:var(--brass)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare input:focus-visible ~ .grip{outline:1px solid var(--brass);outline-offset:calc(4*var(--u))}
.compare .tag{position:absolute;bottom:calc(20*var(--u));font:500 max(calc(11*var(--u)),9.7px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);text-shadow:0 0 calc(12*var(--u)) rgba(30,24,20,.6);pointer-events:none}
.compare .tag.l{left:calc(24*var(--u))}.compare .tag.r{right:calc(24*var(--u))}

/* contact band + footer */
.cta-band{padding:calc(150*var(--u)) var(--side) calc(140*var(--u));display:grid;grid-template-columns:7fr 5fr;gap:calc(64*var(--u));align-items:end}
.cta-band .ctas{display:flex;gap:calc(14*var(--u));justify-content:flex-end}
.site-foot{padding:calc(80*var(--u)) var(--side) calc(56*var(--u));display:grid;grid-template-columns:4fr 3fr 3fr 2fr 2fr;gap:calc(40*var(--u));align-items:start;border-top:1px solid rgba(244,239,230,.14)}
.site-foot .mark{display:inline-block;font:500 max(calc(13*var(--u)),11.4px)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--cream);text-decoration:none;padding-bottom:calc(8*var(--u));position:relative;margin-bottom:calc(22*var(--u))}
.site-foot .mark::after{content:"";position:absolute;left:0;right:.42em;bottom:0;height:1px;background:var(--brass)}
.site-foot b{display:block;font:500 max(calc(11*var(--u)),10px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,239,230,.5);margin-bottom:calc(16*var(--u))}
.site-foot nav,.site-foot > div:last-child{display:flex;flex-direction:column;gap:calc(10*var(--u))}
.site-foot a:not(.mark),.site-foot p{font:400 max(calc(14*var(--u)),12.3px)/1.6 var(--sans);color:rgba(244,239,230,.72);text-decoration:none}
.site-foot a:not(.mark):hover,.f-base a:hover{color:var(--cream)}
.f-base{display:flex;justify-content:space-between;padding:calc(22*var(--u)) var(--side) calc(28*var(--u));border-top:1px solid rgba(244,239,230,.1);font:400 max(calc(12*var(--u)),11px)/1.4 var(--sans);color:rgba(244,239,230,.5)}
.f-base a{color:rgba(244,239,230,.72);text-decoration:none}

/* hover + focus: quiet, the same everywhere */
.btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.btn:not(.solid):hover{background:var(--ink);color:var(--plaster)}
.btn.solid:hover{background:#3a332c;border-color:#3a332c}
.on-oak .btn:not(.solid):hover{background:var(--cream);color:var(--ink)}
.on-oak .btn.solid:hover{background:#fff;border-color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--brass-deep);outline-offset:4px}
.on-oak a:focus-visible,.on-oak button:focus-visible{outline-color:var(--brass)}
.card .media > img{transition:filter .5s ease}
.card:hover .media > img{filter:brightness(1.04)}
.card:hover h3{color:var(--brass-deep)}
.card h3{transition:color .25s ease}

/* one quiet arrival per section: lift 12 px + fade, once; nothing for reduced motion */
.rise{opacity:0;transform:translateY(calc(12*var(--u)));transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rise{opacity:1;transform:none;transition:none}}
html.shot .rise{opacity:1;transform:none;transition:none}
.nw{white-space:nowrap}

/* ===== r3 · people + personality ===== */
/* signature: before/after pencil sketches in the margin, in Jost for the annotations */
.hand{font:400 max(calc(21*var(--u)),17px)/1.2 "Jost",sans-serif;color:#5d544a}
.sketch{margin:0;transform:rotate(-1.2deg)}
.sketch svg{width:100%;height:auto;display:block;font-family:"Jost",sans-serif;overflow:visible}
.sketch svg path{vector-effect:non-scaling-stroke}
.sketch figcaption{margin-top:calc(6*var(--u));padding-left:calc(18*var(--u))}
.with-margin{display:grid;grid-template-columns:1fr calc(300*var(--u));gap:calc(56*var(--u));align-items:start}

/* people: a wide photo with one plain line about the moment */
.people{margin:0}
.people img{width:100%;aspect-ratio:16/8;object-fit:cover;background:#d6ccbd}
.people figcaption{margin-top:calc(18*var(--u));display:flex;justify-content:space-between;gap:calc(40*var(--u));font:400 max(calc(14*var(--u)),12.3px)/1.5 var(--sans);color:var(--ink-mute)}
.people figcaption .hand{white-space:nowrap}
.people.bleed{margin:0}
.people.bleed figcaption{padding:0 var(--side)}

/* team: portraits with first name, role and one human line */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(48*var(--u))}
.team figure{margin:0}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#d6ccbd}
.team figcaption{margin-top:calc(22*var(--u));padding-top:calc(18*var(--u));border-top:1px solid var(--brass)}
.team .who{display:flex;justify-content:space-between;align-items:baseline;gap:calc(16*var(--u))}
.team .who b{font:400 calc(30*var(--u))/1 var(--serif)}
.team .who span{font:500 max(calc(11*var(--u)),9.7px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.team p{margin-top:calc(14*var(--u))}
.team .hand{margin-top:calc(12*var(--u));display:block}

/* founder note: a letter, signed by hand */
.letter{display:grid;grid-template-columns:5fr 7fr;gap:calc(64*var(--u));align-items:start}
.letter .text{max-width:calc(620*var(--u))}
.letter .text .body + .body{margin-top:calc(20*var(--u))}
.letter .lead{font:400 calc(30*var(--u))/1.3 var(--serif);color:var(--ink);margin-bottom:calc(28*var(--u))}
.letter .sign{margin-top:calc(32*var(--u));display:flex;align-items:baseline;gap:calc(18*var(--u))}
.letter .sign .hand{font-size:max(calc(40*var(--u)),30px);color:var(--ink)}
.letter .sign .small{letter-spacing:.04em}

/* the open drawing table: the reason to come back */
.tafel{display:grid;grid-template-columns:7fr 5fr;gap:calc(80*var(--u));align-items:center}
.tafel img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#d6ccbd}
.tafel .when{margin:calc(28*var(--u)) 0 calc(28*var(--u));padding:calc(18*var(--u)) 0;border-top:1px solid rgba(35,31,27,.16);border-bottom:1px solid rgba(35,31,27,.16);display:grid;grid-template-columns:auto 1fr;gap:calc(10*var(--u)) calc(28*var(--u))}
.tafel .when dt{font:500 max(calc(11*var(--u)),9.7px)/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.tafel .when dd{font:400 max(calc(15*var(--u)),13.2px)/1.5 var(--sans);color:var(--ink)}
.tafel .ctas{display:flex;gap:calc(14*var(--u));margin-top:calc(32*var(--u))}
.people img[src$="mens-tafel.jpg"],.tafel img[src$="mens-tafel.jpg"]{object-position:50% 22%}

/* r4 · skip link */
.skip{position:absolute;left:var(--side,24px);top:-100px;z-index:100;background:var(--ink);color:var(--plaster);padding:10px 16px;font:500 13px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
.fn{color:var(--ink-soft);font-size:.86em}