/* ==========================================================================
   District: het atelier — brug tussen mws.css (componenten-demo's) en de
   papieren huisstijl. Laadt NA mws.css: hertypografeert naar DM Serif/Manrope,
   levert de papieren navbar/crumb/fotokaart/footer (kopieën uit origami.css —
   bewust gedupliceerd zodat de componenten-tokens van mws.css intact blijven).
   ========================================================================== */
@font-face{font-family:"Manrope";src:url('../fonts/Manrope-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}

:root{
  --cream:#fbf8f1;--petrol:#12525b;--deep:#0c3a41;--crimson:#b8324f;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --paper-texture:url('../assets/origami/paper-texture-v1.webp');
  --paper-surface:var(--cream) var(--paper-texture) 0 0/720px 720px repeat;
  --font-display:"DM Serif Display",Georgia,serif;
  --font-serif:"DM Serif Display",Georgia,serif;
  --font-body:Manrope,Arial,sans-serif;
  --serif:var(--font-display);--sans:var(--font-body);
}
/* DM Serif Display bestaat alleen in 400 — voorkom synthetische vet */
h1,h2,h3,.serif,.gradient-text{font-weight:400}
body{background:var(--paper-surface)}
body *{letter-spacing:0!important}

/* ==========================================================================
   Papieren navbar — kaartlegenda (ongewijzigd uit v1)
   ========================================================================== */
.site-header{position:fixed;top:1rem;left:50%;width:min(1240px,calc(100% - 2.4rem));padding:0;transform:translateX(-50%);z-index:30;pointer-events:none;transition:top .45s var(--ease),width .45s var(--ease);color:var(--ink)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:1.28rem;font-weight:700;letter-spacing:-.04em}
.brand-pin{width:1rem;height:1.42rem;object-fit:contain;flex:none}
.nav-paper{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;min-height:4.35rem;padding:.65rem 1.1rem .78rem 1.35rem;overflow:hidden;color:var(--ink);background:var(--paper-surface);border:1px solid rgba(28,43,46,.2);box-shadow:0 .55rem 0 rgba(28,43,46,.08),0 1.25rem 2.5rem rgba(28,43,46,.1);clip-path:polygon(0 0,96.5% 0,100% 18%,100% 100%,3% 100%,0 82%);transform-origin:50% 0;transition:min-height .45s var(--ease),padding .45s var(--ease),transform .55s var(--ease),box-shadow .45s var(--ease);pointer-events:auto}
.nav-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.58;background:linear-gradient(115deg,transparent 26%,rgba(18,82,91,.08) 26.15%,transparent 26.4%),linear-gradient(68deg,transparent 75%,rgba(28,43,46,.1) 75.15%,transparent 75.4%)}
.nav-paper::after{content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:.35rem;height:1px;background:rgba(28,43,46,.17);pointer-events:none}
.paper-fold{position:absolute;z-index:0;pointer-events:none;opacity:.75}
.paper-fold--left{left:0;bottom:0;width:3.7rem;height:2.5rem;background:rgba(244,200,75,.28);clip-path:polygon(0 0,100% 100%,0 100%)}
.paper-fold--right{right:0;top:0;width:3rem;height:2.1rem;background:rgba(184,50,79,.16);clip-path:polygon(0 0,100% 100%,100% 0)}
.nav-paper .brand,.nav-paper nav,.nav-cta,.paper-menu{position:relative;z-index:2}
.nav-paper .brand{font-size:1.02rem;white-space:nowrap}
.nav-paper .brand-pin{width:.9rem;height:1.28rem}
.nav-paper nav{display:flex;justify-content:center;gap:.3rem;font-size:.92rem}
.nav-link{position:relative;padding:.55rem .8rem .7rem;font-size:.84rem;font-weight:700;letter-spacing:.01em;transition:color .22s var(--ease),transform .22s var(--ease)}
.nav-link:hover{color:var(--crimson);transform:translateY(-2px) rotate(-1deg)}
.nav-link::after{content:"";position:absolute;left:50%;bottom:.19rem;width:.34rem;height:.34rem;background:var(--crimson);opacity:0;transform:translateX(-50%) rotate(45deg) scale(.35);transition:opacity .22s,transform .3s var(--ease)}
.nav-link:hover::after{opacity:1;transform:translateX(-50%) rotate(45deg) scale(1)}
.nav-link.is-current{color:var(--crimson)}
.nav-link.is-current::after{opacity:1;transform:translateX(-50%) rotate(45deg) scale(1)}
/* Contact blijft mobiel-only wanneer een pagina die extra link gebruikt;
   op desktop vervult de vaste CTA die route. */
.nav-link--contact{display:none}
@media (min-width:781px) and (max-width:1120px){.nav-paper nav{gap:.05rem}.nav-link{padding:.55rem .55rem .7rem;font-size:.78rem}}
.nav-cta{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.55rem .82rem .55rem 1rem;color:#fff;background:var(--crimson);font-size:.8rem;font-weight:700;box-shadow:.38rem .35rem 0 rgba(244,200,75,.75);clip-path:polygon(0 0,94% 0,100% 20%,100% 100%,6% 100%,0 80%);transition:transform .25s var(--ease),box-shadow .25s}
.nav-cta i{width:.42rem;height:.42rem;background:var(--amber);transform:rotate(45deg)}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:.55rem .5rem 0 rgba(244,200,75,.8)}
.paper-menu{display:none}
.site-header.is-compact{top:.7rem;width:min(1080px,calc(100% - 2.4rem))}
.site-header.is-compact .nav-paper{min-height:3.55rem;padding-top:.42rem;padding-bottom:.56rem;transform:perspective(700px) rotateX(2deg);box-shadow:0 .38rem 0 rgba(28,43,46,.08),0 .8rem 1.8rem rgba(28,43,46,.12)}
.site-header.is-compact .paper-fold--left{height:1.8rem}
.site-header.is-compact .nav-paper::after{bottom:.26rem}

/* Kruimelpad (kopie uit origami-district.css) */
.route-crumb{display:flex;align-items:center;gap:.65rem;margin:0 0 2.2rem;font:500 .76rem/1.4 var(--font-mono)}
.route-crumb a{color:var(--petrol)}
.route-crumb a:hover{color:var(--crimson)}
.route-crumb svg{width:.48rem;height:.48rem;overflow:visible;background:var(--crimson);transform:rotate(45deg);flex:none}
.route-crumb svg path{display:none}
.route-crumb strong{color:var(--crimson)}


/* Fotokaart — terugkerend element: een papieren foto met plakstrip, licht gedraaid */
.photocard{position:relative;margin:0;background:#fff;padding:.85rem .85rem 1.1rem;border:1px solid rgba(28,43,46,.14);box-shadow:0 1.1rem 2.6rem rgba(28,43,46,.16);transform:rotate(1.6deg)}
.photocard--tilt-l{transform:rotate(-1.4deg)}
.photocard::before{content:"";position:absolute;top:-.7rem;left:50%;width:5.5rem;height:1.5rem;transform:translateX(-50%) rotate(-2deg);background:rgba(244,200,75,.5);border:1px solid rgba(28,43,46,.08);pointer-events:none}
.photocard img{display:block;width:100%;height:auto}
.photocard figcaption{margin-top:.7rem;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--petrol);text-align:center}

/* Atelier-intro: tekst + werkbank-fotokaart */
.atelier-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* Papieren CTA en footer */
.atelier-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:center;overflow:visible;padding:clamp(2.2rem,5vw,4rem);text-align:left;border:1px solid rgba(28,43,46,.2);border-radius:0;background:var(--paper-surface);box-shadow:.85rem .85rem 0 rgba(18,82,91,.12);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.atelier-cta::before{content:"";position:absolute;right:0;top:0;width:31px;height:31px;background:rgba(244,200,75,.68);clip-path:polygon(0 0,100% 100%,100% 0)}
.atelier-cta::after{content:"";position:absolute;left:-.6rem;top:2rem;width:1.1rem;height:1.1rem;background:var(--crimson);transform:rotate(45deg)}
.atelier-cta-kicker{grid-column:1 / -1;display:flex;align-items:center;gap:.5rem;margin:0!important;font:500 .72rem/1.4 var(--font-mono)!important;text-transform:uppercase;color:var(--petrol)!important}
.atelier-cta-kicker img{width:.85rem;height:1.2rem;object-fit:contain}
.atelier-cta h2{grid-column:1;margin:0!important;max-width:14ch!important;font:400 clamp(2.3rem,4.6vw,4.5rem)/1.02 var(--serif)!important;text-align:left!important}
.atelier-cta h2 em{color:inherit}
.atelier-cta>p:not(.atelier-cta-kicker){grid-column:1;margin:0!important;max-width:38rem!important;font-size:1rem!important;color:var(--ink)!important;text-align:left}
.atelier-cta .cta-actions{grid-column:2;grid-row:2 / 4;display:grid!important;justify-items:stretch!important;align-content:center;min-width:13rem}
.atelier-cta .btn{border-radius:0;box-shadow:none;clip-path:polygon(0 0,94% 0,100% 18%,100% 100%,6% 100%,0 82%)}
.atelier-cta .btn--gradient{background:var(--crimson);color:#fffdf8}
.atelier-cta .btn--secondary{background:transparent;color:var(--petrol);border-color:rgba(18,82,91,.42)}
footer{display:flex;gap:1.3rem;align-items:center;justify-content:center;padding:1.5rem;color:#fffdf8;background:#142b2f;font-size:.85rem}
footer span,footer a{color:#fffdf8}
footer a{opacity:.82}
footer a:hover{opacity:1}

@media (max-width:780px){
  .site-header{top:.7rem;width:calc(100% - 1.4rem)}
  /* clip-path zou het absolute dropdown-menu afknippen; op mobiel dus uit. */
  .nav-paper{grid-template-columns:1fr auto;min-height:3.75rem;padding:.5rem .7rem .62rem .9rem;overflow:visible;clip-path:none}
  /* Zonder JS is er geen werkende menuknop: de navigatie staat dan als vaste,
     zichtbare lijst onder de merkregel en de knop verdwijnt. Met JS
     (html.js-ready, gezet door js/origami.js en js/district.js) wordt het de
     papieren dropdown; visibility houdt dichtgeklapte links uit de tabvolgorde. */
  .nav-paper nav{display:grid;gap:0;grid-column:1 / -1;margin-top:.3rem;border-top:1px solid rgba(28,43,46,.14)}
  .nav-paper nav a{padding:.9rem .5rem;border-bottom:1px solid rgba(28,43,46,.12)}
  .nav-paper nav a:last-child{border-bottom:0}
  .paper-menu{display:none}
  html.js-ready .nav-paper nav{position:absolute;top:calc(100% - .05rem);left:0;right:0;grid-column:auto;margin-top:0;padding:0 .75rem;overflow:hidden;max-height:0;opacity:0;visibility:hidden;transform:perspective(500px) rotateX(-12deg);transform-origin:top;background:var(--paper-surface);border:1px solid rgba(28,43,46,.18);border-top:0;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);transition:max-height .45s var(--ease),opacity .25s,transform .45s var(--ease),visibility .45s}
  .nav-link--contact{display:block}
  html.js-ready .site-header.is-open nav{max-height:32rem;opacity:1;visibility:visible;transform:perspective(500px) rotateX(0)}
  html.js-ready .paper-menu{display:grid;place-items:center;width:2.45rem;height:2.35rem;border:0;background:rgba(18,82,91,.09);color:var(--ink);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 80%,82% 100%,0 100%)}
  .paper-menu-icon{width:1.22rem;height:1.22rem;background:currentColor;-webkit-mask:url('../assets/icons/phosphor/list.svg') center/contain no-repeat;mask:url('../assets/icons/phosphor/list.svg') center/contain no-repeat;transition:transform .25s var(--ease)}
  .site-header.is-open .paper-menu-icon{-webkit-mask-image:url('../assets/icons/phosphor/x.svg');mask-image:url('../assets/icons/phosphor/x.svg');transform:rotate(90deg)}
  .nav-cta{display:none}
  .nav-route{display:none}
  .site-header.is-compact{top:.45rem;width:calc(100% - 1.4rem)}
  .site-header.is-compact .nav-paper{min-height:3.55rem}
  .nav-paper .brand{font-size:.98rem}

  .atelier-intro-grid{grid-template-columns:1fr}
  .atelier-intro-grid .photocard{max-width:22rem}
  .atelier-cta{grid-template-columns:1fr;gap:1.2rem;padding:2rem 1.4rem}
  .atelier-cta h2,.atelier-cta>p:not(.atelier-cta-kicker){text-align:left}
  .atelier-cta .cta-actions{grid-column:1;grid-row:auto;width:100%;min-width:0}
  .atelier-cta .btn{width:100%}
  footer{flex-wrap:wrap}
}

/* Skip-link (kopie uit origami.css basis) */
.skip-link{position:fixed;left:12px;top:-80px;background:var(--ink);color:var(--cream);padding:.7rem 1rem;z-index:100;transition:top .2s}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}