/* ═══════════════════════════════════════════════════════════════════
   De bouwplaats: "Even geduld. Hier bouwt SketchLeb."

   Eén scherm dat op elk domein kan staan waarvan SketchLeb de site nog
   bouwt. Het papier, het glas, het logo en de constructielijnen komen van
   sketchleb.nl (../Website/css/style.css); de letter is alleen Cormorant
   Garamond, van deze eigen schijf, want deze pagina komt ook op domeinen van
   klanten en Essonnes (Adobe Fonts) is alleen voor onze eigen sites.

   Wat beweegt, beweegt alleen met transform en opacity, één keer bij het
   openen: de lijnen tekenen zich in rond het logo, daarna komt de tekst.

    0. De letter
    1. Kleuren en maten
    2. Het papier
    3. Glas (zoals op sketchleb.nl)
    4. Het logo, uitgemeten
    5. De tekst
    6. Het colofon
    7. Privacy
    8. Het openen · minder beweging
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · De letter ──────────────────────────────────────────── */
/* Cormorant Garamond, de latijnse subset, variabel van 300 tot 700: één
   bestand dekt elk gewicht. Dezelfde bestanden als op sketchleb.nl. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/fonts/cormorant-garamond-latin-var.woff2?v=5d618c46") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("/fonts/cormorant-garamond-latin-italic-var.woff2?v=e6d6d1d7") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── 1 · Kleuren en maten ───────────────────────────────────── */
:root{
  --oxblood:#451918;
  --oxblood-rgb:69,25,24;
  --wine-rgb:42,14,14;
  --night-rgb:20,6,6;
  --glow-rgb:126,46,42;
  --shade-rgb:16,4,4;
  --shade-text-rgb:22,8,8;
  --gold:#CCC09D;
  --gold-rgb:204,192,157;
  --gold-soft:rgba(204,192,157,.78);
  --gold-faint:rgba(204,192,157,.74);   /* 4,9 : 1 op het papier */
  --cream:#F1E9D6;
  --cream-rgb:241,233,214;
  --light-rgb:255,243,222;

  --face:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:.2em;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-liquid:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --pad-x:clamp(16px,4vw,56px);
  /* het logo: zo breed als past, en laag genoeg dat alles op één scherm staat */
  --logo-w:min(560px,80vw,max(240px,(100svh - 400px) * 3.2));
  /* hoe ver de lijnen dwars voorbij het logo lopen */
  --reach:clamp(24px,17vw,300px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--oxblood);color:var(--gold);font-family:var(--face);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100svh;background:var(--oxblood)}
/* met een muis is de aanwijzer het potlood van de site; links houden de hand */
@media (hover:hover) and (pointer:fine){
  html{cursor:url(/img/pencil.png?v=e0525c19) 2 29,auto;
    cursor:-webkit-image-set(url(/img/pencil.png?v=e0525c19) 1x,url(/img/pencil@2x.png?v=1c3792bf) 2x) 2 29,auto;
    cursor:image-set(url(/img/pencil.png?v=e0525c19) 1x,url(/img/pencil@2x.png?v=1c3792bf) 2x) 2 29,auto}
}
img,picture,svg{display:block;max-width:100%}
a{color:inherit}
p{text-wrap:pretty}
::selection{background:rgba(var(--gold-rgb),.35);color:var(--cream)}

/* ── 2 · Het papier ─────────────────────────────────────────── */
/* Het naadloze vlak van de site met de korrel erover, even groot als op
   sketchleb.nl (TILE: 1918 van 2880 breed), en het licht van het scherm. */
body{--tile-w:calc(max(100vw,100vh * 16 / 9) * 1918 / 2880);
  --tile-h:calc(max(100vw,100vh * 16 / 9) * 402 / 2880)}
.canvas{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--oxblood);
  background-image:url("/img/grain.png?v=7833e76a"),url("/img/paper.jpg?v=16a45d32");
  background-image:url("/img/grain.png?v=7833e76a"),image-set(url("/img/paper.avif?v=79151a15") type("image/avif"),url("/img/paper.jpg?v=16a45d32") type("image/jpeg"));
  background-size:128px 128px,var(--tile-w) var(--tile-h)}
@media (min-resolution:2dppx){ .canvas{background-size:64px 64px,var(--tile-w) var(--tile-h)} }
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 62% at 50% 46%,rgba(var(--glow-rgb),.16),rgba(var(--glow-rgb),0) 72%),
    radial-gradient(120% 90% at 50% 45%,rgba(var(--night-rgb),0) 40%,rgba(var(--night-rgb),.45) 100%)}

/* ═══ 3 · Glas — zoals op sketchleb.nl ═════════════════════════ */
.glass{
  --radius:999px;
  --frost:1.6px;
  --tint:rgba(var(--oxblood-rgb),.10);
  --spot:110px;
  --rim:1.5px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border-radius:var(--radius);
  color:var(--gold);text-decoration:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 48%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05)),
    var(--tint);
  -webkit-backdrop-filter:blur(var(--frost)) saturate(1.6) brightness(1.2);
  backdrop-filter:blur(var(--frost)) saturate(1.6) brightness(1.2);
  box-shadow:
    inset 1.5px 1.5px 1px -1px rgba(255,255,255,.45),
    inset -1.5px -1.5px 1px -1px rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.10),
    inset 0 10px 18px -12px rgba(255,255,255,.18),
    inset 0 -14px 22px -14px rgba(255,255,255,.14),
    0 1px 2px rgba(var(--shade-rgb),.3),
    0 24px 48px -20px rgba(var(--shade-rgb),.8);
  text-shadow:0 1px 2px rgba(var(--shade-text-rgb),.55),0 0 18px rgba(var(--shade-text-rgb),.55);
  -webkit-tap-highlight-color:transparent;
  transition:scale .6s var(--ease-liquid);
}
/* de rand: één keer getekend, met het glas */
.glass::before,.shine::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  padding:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.glass::before{
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.10) 28%,rgba(255,255,255,.04) 58%,rgba(255,255,255,.30))}
.glass > *{position:relative;z-index:1}
/* Het licht van de muis, op een eigen laag (js/bouwplaats.js zet --lx, --ly
   en --li): het valt op de rand en zwak binnenin, zoals op de site. */
.glass > .shine{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  --lx:-9999px;--ly:-9999px;--li:0}
.shine::before{
  background:
    radial-gradient(circle var(--spot) at var(--lx) var(--ly),rgba(var(--light-rgb),var(--li)),rgba(var(--light-rgb),0) 72%),
    radial-gradient(circle calc(var(--spot) * .9) at calc(100% - var(--lx)) calc(100% - var(--ly)),
                    rgba(var(--light-rgb),calc(var(--li) * .55)),rgba(var(--light-rgb),0) 72%)}
.shine::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle calc(var(--spot) * .7) at var(--lx) var(--ly),rgba(var(--light-rgb),calc(var(--li) * .17)),rgba(var(--light-rgb),0) 65%)}

.glass:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media (hover:hover) and (pointer:fine){ a.glass:hover{scale:1.04} }
a.glass:active{scale:.965;transition-duration:.16s}
.glass--small{min-height:44px;padding:0 22px;font-size:17px;letter-spacing:.04em}
.glass--card{--radius:26px;--frost:12px;--tint:rgba(var(--wine-rgb),.44);
  display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:left}

/* ── 4 · Het logo, uitgemeten ───────────────────────────────── */
/* Het logo met zijn constructielijnen, zoals op Home van sketchleb.nl. De
   maten komen uit LOGO in ../Website/js/main.js, in een vlak van 1600 × 499:
   bovenkant 52, x-hoogte 165, basislijn 341; de buitenkanten 73 en 1525; de
   letters k e t c h L e b beginnen op 262 … 1384. Alles in procenten van
   het logo, dus het klopt op elke breedte. */
.page{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + clamp(40px,8vh,96px)) var(--pad-x) calc(env(safe-area-inset-bottom,0px) + clamp(20px,3.5vh,36px));
  overflow:clip}       /* de lijnen lopen door tot de rand, nooit erover */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.lockup{position:relative;width:var(--logo-w);aspect-ratio:1600 / 499;margin-top:28px}
.lockup img{width:100%;height:auto}
.draw{position:absolute;inset:0;pointer-events:none}
.ln{position:absolute;display:block;background:var(--c,rgba(var(--cream-rgb),.2))}
.ln.key{--c:rgba(var(--cream-rgb),.36)}
.ln.plumb{--c:rgba(var(--cream-rgb),.16)}
.ln-h{height:1px;left:calc(-1 * var(--reach));right:calc(-1 * var(--reach));
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.ln-v{width:1px;top:calc(52 / 499 * 100% - 28px);height:calc(289 / 499 * 100% + 56px)}
.ln-v.edge{top:calc(52 / 499 * 100% - 40px);height:calc(437 / 499 * 100% + 64px);
  -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
@media (min-resolution:2dppx){ .ln-h{height:.5px} .ln-v{width:.5px} }
.at-top{top:calc(52 / 499 * 100%)}
.at-xh{top:calc(165 / 499 * 100%)}
.at-base{top:calc(341 / 499 * 100%)}
/* de namen van de lijnen, aan het begin van elke lijn; alleen waar ruimte is */
.lbl{position:absolute;display:block;font-family:var(--face);font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(var(--cream-rgb),.5);white-space:nowrap;
  left:calc(-1 * var(--reach) + 6px);transform:translateY(calc(-100% - 5px))}
/* de maat: de breedte van de naam, boven het logo (js/bouwplaats.js meet hem) */
.dim{position:absolute;left:calc(73 / 1600 * 100%);right:calc(75 / 1600 * 100%);top:calc(52 / 499 * 100% - 16px);
  height:1px;background:rgba(var(--gold-rgb),.66)}
@media (min-resolution:2dppx){ .dim{height:.5px} }
.dim::before,.dim::after{content:"";position:absolute;top:0;left:-4.5px;width:9px;height:1px;
  background:rgba(var(--gold-rgb),.8);rotate:-45deg}
.dim::after{left:auto;right:-4.5px}
.num{position:absolute;left:50%;bottom:7px;translate:-50% 0;font-size:12px;font-weight:600;line-height:1;letter-spacing:.14em;
  color:rgba(var(--gold-rgb),.92);font-variant-numeric:lining-nums tabular-nums}
html:not(.js) .dim{display:none}       /* zonder script geen maat: er is niemand die meet */
@media (max-width:899px){ .lbl{display:none} }

/* ── 5 · De tekst ───────────────────────────────────────────── */
.title{font-weight:500;color:var(--cream);font-size:clamp(46px,3.4vw + 30px,82px);line-height:1;letter-spacing:-.005em;
  margin-top:clamp(26px,5vh,52px);text-shadow:0 2px 14px rgba(var(--shade-text-rgb),.5)}
.lede{max-width:44ch;margin-top:clamp(12px,2vh,18px);font-size:clamp(21px,.8vw + 17px,27px);line-height:1.4;color:rgba(var(--cream-rgb),.88)}
.lede strong{font-weight:600;color:var(--cream);overflow-wrap:anywhere}
.lede a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:.5px;text-decoration-color:rgba(var(--cream-rgb),.45)}
.en{margin-top:8px;font-style:italic;font-size:17px;letter-spacing:.01em;color:var(--gold-soft)}
.ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:clamp(22px,4vh,40px);
  font-size:18px;color:var(--gold-soft)}
.mail{color:var(--cream);font-weight:500}

/* ── 6 · Het colofon ────────────────────────────────────────── */
.colophon{max-width:40em;margin:clamp(28px,5vh,48px) auto 0;font-size:14px;line-height:1.7;color:var(--gold-faint);
  text-align:center;text-wrap:balance}
/* each part stays whole; a line breaks between them, after the dot */
.colophon .c{white-space:nowrap}
@media (max-width:340px){ .colophon .c{white-space:normal} }
.colophon a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:.5px;text-decoration-color:rgba(var(--gold-rgb),.4);transition:color .3s var(--ease-soft)}
@media (hover:hover){ .colophon a:hover{color:var(--cream);text-decoration-color:rgba(var(--cream-rgb),.6)} }
.colophon a:focus-visible,.lede a:focus-visible,.back-mark:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.colophon a[aria-current="page"]{color:var(--cream);text-decoration:none}

/* ── 7 · Privacy ────────────────────────────────────────────── */
/* zoals privacy.html van de site: het papier, de naam bovenaan en de tekst
   op één stuk glas, gewoon naar beneden te lezen */
.page--leaf{padding-top:calc(env(safe-area-inset-top,0px) + 26px)}
.back-mark{display:block;width:118px;margin:0 auto}
.back-mark img{width:100%;height:auto;filter:drop-shadow(0 1px 2px rgba(var(--shade-text-rgb),.55)) drop-shadow(0 0 18px rgba(var(--shade-text-rgb),.55))}
.leaf{width:min(760px,100%);margin:clamp(48px,9vh,96px) auto 0}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:var(--caps);text-transform:uppercase;color:var(--gold-soft)}
.leaf .title{margin-top:10px;font-size:clamp(46px,3vw + 26px,68px);text-align:left}
.leaf-when{margin-top:12px;font-size:16px;color:var(--gold-soft)}
.leaf-card{margin-top:clamp(28px,4vh,44px);padding:clamp(24px,4vw,44px)}
.leaf-card section + section{margin-top:clamp(24px,3.4vh,36px);padding-top:clamp(22px,3.2vh,32px);
  border-top:1px solid rgba(var(--gold-rgb),.18)}
.leaf-card h2{font-weight:600;font-size:clamp(22px,.7vw + 18px,26px);line-height:1.2;color:var(--cream)}
.leaf-card p{margin-top:8px;max-width:62ch;font-size:19px;line-height:1.55;color:rgba(var(--cream-rgb),.86)}
.leaf-card a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:.5px;text-decoration-color:rgba(var(--cream-rgb),.45)}
.leaf-foot{margin-top:clamp(28px,4vh,40px)}
.leaf-foot .arrow{width:18px;height:18px;rotate:180deg;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.page--leaf .colophon{margin-top:clamp(40px,7vh,72px)}

/* ── 8 · Het openen · minder beweging ───────────────────────── */
/* Eén keer, licht en snel (ruim een seconde): de lijnen dwars groeien vanuit
   het midden, de lijnen omlaag vallen van boven, het logo komt op, dan de
   maat, de namen en de tekst. Alleen transform en opacity. */
@keyframes across{from{transform:scaleX(0)}to{transform:none}}
@keyframes down{from{transform:scaleY(0)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes show{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .ln-h{animation:across .62s var(--ease-out) both}
  .ln-h.at-xh{animation-delay:.06s}
  .ln-h.at-base{animation-delay:.12s}
  .ln-v{transform-origin:50% 0;animation:down .5s var(--ease-out) both;animation-delay:calc(.12s + var(--i,0) * .03s)}
  .lockup picture{animation:rise .6s var(--ease-out) .14s both}
  .dim,.lbl{animation:show .4s var(--ease-soft) .5s both}
  .stage > :not(.lockup){animation:rise .6s var(--ease-out) both}
  .title{animation-delay:.34s!important}
  .lede{animation-delay:.42s!important}
  .en{animation-delay:.5s!important}
  .ask{animation-delay:.58s!important}
  .page > .colophon{animation:show .6s var(--ease-soft) .66s both}
}
@media (prefers-reduced-motion:reduce){ .glass{transition:none} a.glass:hover,a.glass:active{scale:none} }
@media (prefers-reduced-transparency:reduce){ .glass{--tint:rgba(var(--wine-rgb),.9)} .glass--card{--tint:rgba(var(--wine-rgb),.96)} }