/* ═══════════════════════════════════════════════════════════════════
   SketchLeb — sketchleb.nl · an ArtLeb Collective brand.

   One sketchpad with six sheets on it. Moving between them never feels like
   loading a new page: the old sheet slides off one side, the new one comes in
   from the other, drawn first in construction lines and graphite, and then
   inked, out of the logo. The house style is artleb.nl's: liquid glass,
   Essonnes, the pointer as a light. SketchLeb's own room is oxblood and gold.

   Everything that moves, moves by transform or opacity only, so the browser
   can hand it to the graphics card. That is what keeps it smooth.

    0. The face underneath
    1. Tokens
    2. The paper: background, grain, the pencil
    3. Liquid glass (as on artleb.nl)
    4. Sheets and their construction lines
    5. The logo, the title block, the way on
    6. Ink
    7. The dock
    8. Type
    9. Home · 10. Work · 11. Services · 12. Process · 13. About · 14. Contact
   15. Without JavaScript · phones · preferences
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · The face underneath ────────────────────────────────── */
/* Essonnes comes from Adobe Fonts (the <link> in index.html). Cormorant
   Garamond stands under it, for as long as Essonnes is on its way or out of
   reach, and it is hosted here rather than at Google: that way no visitor's
   address leaves this site to fetch a letter.
   Two files, both the latin subset, both variable from 300 to 700, so one
   covers every weight the sheets ask for (made from the woff2 that Google
   itself serves: fonts/, 37 and 39 KB). swap, so text is never invisible
   while they load; js/main.js lays the sheets out again if a late letter
   moved anything. */
@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;
}

/* the radius of the ink, as a real length, so it can grow smoothly */
@property --ink { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ── 1 · Tokens ─────────────────────────────────────────────── */
:root{
  --oxblood:#451918;            /* average of the background artwork */
  --oxblood-deep:#2A0E0E;
  --gold:#CCC09D;               /* crème from the brand book; the logo measures #C8C09C */
  --gold-rgb:204,192,157;
  --gold-soft:rgba(204,192,157,.78);
  --gold-faint:rgba(204,192,157,.5);
  --cream:#F1E9D6;
  --cream-rgb:241,233,214;
  --light-rgb:255,243,222;      /* the pointer light: a warm white, as on artleb.nl */

  /* Essonnes, by the names the Adobe kit gives it (index.html): display for
     everything set large or in capitals, text for reading. The kit also
     holds essonnes-headline, for sizes in between; nothing uses it yet.
     After it come the same letters as installed from Creative Cloud, then
     Cormorant Garamond from fonts/, then whatever the machine has. The kit
     has 400 and 700 only, so a weight of 500 below is set in its regular
     and 600 in its bold; Cormorant, being variable, takes them as written. */
  --display:"essonnes-display","Essonnes Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"essonnes-text","Essonnes Text","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);

  --dock-h:68px;
  --pad-x:clamp(16px,4vw,56px);
  --top:clamp(112px,16vh,150px);          /* room for the logo above every sheet */
  --measure:min(1120px,100%);
  --hero-w:min(64vw,calc((100svh - 240px) * 3.2),900px);
  --sat:env(safe-area-inset-top,0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--oxblood);color:var(--gold);font-family:var(--text);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)}
img,picture,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* past the controls to the sheets: it shows only while it has the keyboard's focus */
.skip{position:fixed;z-index:70;left:16px;top:calc(12px + var(--sat));padding:10px 18px;border-radius:999px;
  background:rgba(36,12,12,.94);color:var(--cream);font-family:var(--display);font-size:15px;letter-spacing:.05em;text-decoration:none;
  translate:0 calc(-100% - 40px)}
.skip:focus{translate:none;outline:2px solid var(--gold);outline-offset:3px}
::selection{background:rgba(var(--gold-rgb),.35);color:var(--cream)}

/* ── 2 · The paper ──────────────────────────────────────────── */
/* One large canvas under every sheet: a seamless tile of the artwork (two
   words across, one row down; tools/sketch.swift paper) with its grain on
   top. js/main.js sizes it to the whole pad and moves it with the camera,
   so the paper and everything on it travel as one. */
.canvas{position:fixed;left:0;top:0;z-index:0;pointer-events:none;width:300vw;height:200vh;
  background-color:var(--oxblood);
  background-image:url("../img/web/grain.png?v=7833e76a"),url("../img/web/paper.jpg?v=16a45d32");
  background-image:url("../img/web/grain.png?v=7833e76a"),image-set(url("../img/web/paper.avif?v=79151a15") type("image/avif"),url("../img/web/paper.jpg?v=16a45d32") type("image/jpeg"));
  background-size:128px 128px,var(--tile-w,1066px) var(--tile-h,224px);
  will-change:transform}
@media (min-resolution:2dppx){ .canvas{background-size:64px 64px,var(--tile-w,1066px) var(--tile-h,224px)} }
/* the light stays with the screen: a little brighter in the middle, darker
   towards the edges, as in the artwork */
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 62% at 50% 46%,rgba(126,46,42,.16),rgba(126,46,42,0) 72%),
    radial-gradient(120% 90% at 50% 45%,rgba(20,6,6,0) 40%,rgba(20,6,6,.45) 100%)}
.pencil{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}

/* ═══ 3 · LIQUID GLASS — as on artleb.nl ═══════════════════════ */
.glass{
  --radius:999px;
  --frost:1.6px;
  --tint:rgba(69,25,24,.10);
  --spot:150px;
  --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;cursor:pointer;
  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:var(--lens,) 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(16,4,4,.3),
    0 24px 48px -20px rgba(16,4,4,.8);
  text-shadow:0 1px 2px rgba(22,8,8,.55),0 0 18px rgba(22,8,8,.55);
  -webkit-tap-highlight-color:transparent;
  transition:scale .6s var(--ease-liquid);
}
/* the rim: drawn once, with the glass */
.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}
/* The light of the pointer, on a layer of its own (js/main.js puts one in
   every glass that catches it): as the light moves only this layer is drawn
   again, never the glass, its shadows or what lies on it. It falls on the
   rim, and faintly inside; the far side of the rim catches a little too. */
.glass > .shine{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;will-change:transform;
  --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%)}
/* while the canvas moves, the light on the glass on it fades out; it comes
   back once the canvas stands still (js/main.js) */
.js .sheet .shine{transition:opacity .5s var(--ease-soft)}
/* On a card the light falls inside only, not on its rim: a card is large,
   and a rim cut out of it (a mask, or any clip) costs the graphics card
   more on every frame than it can give at 60 fps (Work: 14 ms a frame,
   measured). Its rim stays lit from above (.glass::before), drawn once. */
.js .sheet .glass--card > .shine::before{display:none}
.js.is-moving .sheet .shine{opacity:0;transition-duration:.15s}
.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 + .13 * var(--up,0)))),rgba(var(--light-rgb),0) 65%),
    radial-gradient(circle calc(var(--spot) * .55) at calc(100% - var(--lx)) calc(100% - var(--ly)),rgba(var(--light-rgb),calc(var(--li) * (.07 + .05 * var(--up,0)))),rgba(var(--light-rgb),0) 60%)}
/* (--up: a card the pointer lifts catches a little more light inside, js/main.js) */

.glass:focus-visible,.dock-item:focus-visible,.mark:focus-visible,.next:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media (hover:hover) and (pointer:fine){
  a.glass:not(.glass--card):hover,button.glass:hover{scale:1.04}
}
a.glass:not(.glass--card):active,button.glass:active{scale:.965;transition-duration:.16s}
/* headings take the focus after a turn, for screen readers; they are not controls */
[tabindex="-1"]:focus{outline:none}

.glass--small{--spot:110px;min-height:44px;padding:0 20px;font-size:15px;letter-spacing:.06em}
.glass--round{--radius:50%;--spot:70px;width:44px;height:44px;padding:0}
.glass--gold{--tint:rgba(200,192,156,.15)}
/* a surface to read on: more frost, a deeper tint, no lens (big lenses cost
   the most to draw, and on a card the bending is barely seen) */
.glass--card{--radius:26px;--frost:12px;--tint:rgba(42,14,14,.44);--spot:340px;transition:none;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;cursor:auto;text-align:left}
/* On the canvas a card lies still on the paper and moves with it, so what
   shows through its frost never changes: the paper, blurred and lit once
   (img/web/frost, made by tools/sketch.swift frost), lined up with the
   paper under it (js/main.js sets --fx and --fy). Nothing has to be blurred
   while the canvas moves. The glass on a card shows the card through it. */
.js .sheet .glass{-webkit-backdrop-filter:none;backdrop-filter:none}
.js .sheet .glass--card{
  background-image:
    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)),
    linear-gradient(var(--tint),var(--tint)),url("../img/web/frost.jpg?v=df5cf242");
  background-image:
    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)),
    linear-gradient(var(--tint),var(--tint)),
    image-set(url("../img/web/frost.avif?v=e2d26d46") type("image/avif"),url("../img/web/frost.jpg?v=df5cf242") type("image/jpeg"));
  background-position:0 0,0 0,var(--fx,0px) var(--fy,0px);
  background-size:auto,auto,var(--tile-w,1066px) var(--tile-h,224px);
  background-color:#5a2422}
.js .sheet .glass--card{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)}   /* its shadow lies on the paper (.lift) */
/* a button on a sheet leans towards the pointer (js/main.js): on a layer of
   its own, so that moves it without drawing the card it lies on again */
.js .sheet .glass:is(a,button):not(.glass--card){will-change:transform}
/* a card under the pointer tilts a little (js/main.js): what holds the cards
   gives them their depth */
.js .sheet :is(.grid,.about,.values,.contact,.contact-side),.js #about .wrap{perspective:1800px}
.js .sheet .glass:not(.glass--card){
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 60%,rgba(255,255,255,.06)),
    rgba(255,238,222,.05)}
.js .sheet .glass--gold:not(.glass--card){
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 60%,rgba(255,255,255,.06)),
    rgba(214,200,160,.17)}

.button{min-height:52px;padding:0 26px;font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.01em}
.glass svg.arrow{flex:none;width:18px;height:18px}
.glass svg.arrow *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── 4 · Sheets and their construction lines ────────────────── */
.sheet{position:relative;min-height:100svh}
.sheet-inner{position:relative;min-height:100svh;padding:var(--top) var(--pad-x) calc(var(--dock-h) + 104px)}
.wrap{position:relative;z-index:1;width:var(--measure);margin:0 auto}

/* The page itself scrolls, as any page does; that scroll moves the camera
   over the canvas (js/main.js). Sideways, nothing scrolls and nothing swipes
   back. Where the sketchpad runs the scrollbar is not shown, because the
   canvas is the scrollbar; where it does not — the pages off the canvas, and
   the plain document left if the script never arrives — the scrollbar is
   there, as on any page that is read down. */
html{overscroll-behavior-x:none;scroll-behavior:auto}
html.js{scrollbar-width:none}
html.js::-webkit-scrollbar{display:none}
.track{display:none}
.js .track{display:block;width:1px;pointer-events:none}
/* the pad: every sheet at its place on the canvas (js/main.js places them
   along the camera's path, and moves the pad and the paper together) */
.js .pad{position:fixed;left:0;top:0;z-index:1;will-change:transform}
.js:not(.ready) .pad{visibility:hidden}
.js .sheet{position:absolute;left:0;top:0;z-index:1;width:var(--W,100vw);min-height:var(--H,100vh)}
.js .sheet-inner{min-height:var(--H,100vh)}

/* The drawing: one layer under all the sheets, in canvas coordinates. Each
   sheet's lines and sizes lie in windows that the scroll slides open as the
   camera comes to the sheet (js/main.js). The lines lie on whole pixels, so
   they stay sharp. */
.drawing{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
.dw{position:absolute;overflow:hidden}
.dp{position:absolute;inset:0}
.ln{position:absolute;display:block;background:var(--c,rgba(var(--cream-rgb),.13))}
.ln-h{height:1px}
.ln-v{width:1px}
@media (min-resolution:2dppx){ .ln-h{height:.5px} .ln-v{width:.5px} }
.ln.key{--c:rgba(var(--cream-rgb),.3)}
.ln.plumb{--c:rgba(var(--cream-rgb),.11)}
.ln.dim{--c:rgba(var(--gold-rgb),.58)}
.dg--home .ln{--c:rgba(var(--cream-rgb),.2)}
.dg--home .ln.key{--c:rgba(var(--cream-rgb),.36)}
.dg--home .ln.plumb{--c:rgba(var(--cream-rgb),.16)}
.dg--home .ln.dim{--c:rgba(var(--gold-rgb),.66)}
/* The shadow of a card, on the paper (js/main.js lays it where the card
   lies). The light comes from above, as for every shadow on the site (the
   glass, the logo), so it falls straight down; under a mouse the pointer is
   the light and it falls away from it (js/main.js, SHADE). It is a
   solid block somewhat smaller than the card with a soft edge: a box well
   inside the card, filled, with a shadow spread out from it in the same
   colour, so that wherever a floating card uncovers it, it is whole. A
   rounded shadow is the quickest blur there is to draw. */
/* the shadows of one sheet's cards, together: they go with the sheet from sheet to sheet */
.lifts{position:absolute;left:0;top:0}
.lift{--in:40px;position:absolute;display:block;pointer-events:none;border-radius:16px;
  width:max(0px,calc(var(--w) - 2 * var(--in)));height:max(0px,calc(var(--h) - 2 * var(--in)));
  margin:var(--in) 0 0 var(--in);translate:0 40px;     /* straight down; under a mouse, away from the light (js/main.js) */
  /* a dark core close under the card and a wide soft fall-off; the box is
     as dark as the two together, so no edge shows where a card uncovers it */
  background:rgba(12,2,2,.95);
  box-shadow:0 0 30px calc(var(--in) - 20px) rgba(12,2,2,.88),0 0 80px calc(var(--in) - 4px) rgba(12,2,2,.55)}
/* the axis, dash-dot as on a technical drawing; the route of the camera is drawn the same way */
.ln.axis,.ln.route.ln-v{background:repeating-linear-gradient(to bottom,rgba(var(--cream-rgb),.24) 0 14px,transparent 14px 18px,
  rgba(var(--cream-rgb),.24) 18px 20px,transparent 20px 24px)}
.ln.route.ln-h{background:repeating-linear-gradient(to right,rgba(var(--cream-rgb),.24) 0 14px,transparent 14px 18px,
  rgba(var(--cream-rgb),.24) 18px 20px,transparent 20px 24px)}
/* where the camera bends, the route bends with it, in a window set askew along the bend (js/main.js) */
.askew{position:absolute;width:0;height:0;transform-origin:0 0}
.turn{position:absolute;left:0;top:0;overflow:visible}
.turn path{fill:none;stroke:rgba(var(--cream-rgb),.24);stroke-width:1px;stroke-dasharray:14 4 2 4}
@media (min-resolution:2dppx){ .turn path{stroke-width:.5px} }
.tick{position:absolute;display:block;width:9px;height:1px;margin:-.5px 0 0 -4.5px;background:rgba(var(--gold-rgb),.75);rotate:-45deg}
.lbl{position:absolute;display:block;font-family:var(--display);font-size:11px;font-weight:500;line-height:1;letter-spacing:.14em;
  color:rgba(var(--gold-rgb),.88);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.lbl.above{transform:translate(-50%,calc(-100% - 6px))}
.lbl.below{transform:translate(-50%,7px)}
.lbl.left{transform:translate(calc(-50% - 10px),-50%) rotate(-90deg)}
.lbl.right{transform:translate(calc(-50% + 11px),-50%) rotate(-90deg)}
.lbl.name{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--cream-rgb),.46);transform:translate(0,calc(-100% - 5px))}

/* ── 5 · The logo, the title block, the way on ──────────────── */

/* The large logo belongs to the first sheet and travels with it. On every
   other sheet the small one stands at the top: it waits above the screen
   and comes down once the large one has gone (js/main.js). The small one is
   the name alone, out of the logo's shadow (img/web/mark, tools/sketch.swift
   letters), as large as in the logo; it has the shadow of the type on the
   other glass instead. Its letters stand level with the middle of the
   language and the button across from it (js/main.js sets its top). */
.mark{position:fixed;z-index:12;left:50%;top:calc(23px + var(--sat));width:128px;translate:-50% 0;display:block;
  -webkit-tap-highlight-color:transparent}
.mark img{width:100%;height:auto;filter:drop-shadow(0 1px 2px rgba(22,8,8,.55)) drop-shadow(0 0 18px rgba(22,8,8,.55))}
/* Behind it, a piece of glass that hangs from the top edge: it leaves the
   edge on either side in an S and runs on under the logo. js/main.js gives
   it its shape and size (clip-path), from where the logo stands, and the
   line of its edge (--edge): the rim and the light lie along that line
   only. What slides under the logo slides under glass. Frosted like the
   dock, but without its lens: the lens is the dearest thing to draw, on
   every frame the canvas moves. It comes and goes with the logo, its
   shadow (.mark-shade) with it. */
.mark-glass{--frost:10px;--tint:rgba(42,14,14,.34);--spot:150px;
  position:absolute;z-index:-1;left:50%;translate:-50% 0;display:none;
  border-radius:0;box-shadow:none;pointer-events:none;cursor:auto}
.js .mark-glass{display:block}
.mark-glass::before,.mark-glass > .shine::before{padding:0;
  -webkit-mask:var(--edge) 0 0/100% 100% no-repeat;-webkit-mask-composite:source-over;
  mask:var(--edge) 0 0/100% 100% no-repeat;mask-composite:add}
.mark-shade{position:absolute;z-index:-2;left:50%;translate:-50% 0;overflow:visible;pointer-events:none}
.mark.bare .mark-glass,.mark.bare .mark-shade{display:none}
/* it rises away quickly; it comes down and settles, just past its place and
   back. Turned round halfway, a transition goes back from where it is. */
.js .mark{transform:translateY(calc(-100% - 80px));transition:transform .38s cubic-bezier(.5,0,.75,0)}
.js .mark.is-down{transform:none;transition:transform .72s cubic-bezier(.22,1.2,.36,1)}

.cta-top{position:fixed;z-index:12;top:calc(14px + var(--sat));right:var(--pad-x);
  transition:opacity .45s var(--ease-soft),scale .6s var(--ease-liquid),visibility 0s}
/* on Contact it makes way, for the keyboard too (hidden once it has faded) */
[data-sheet="contact"] .cta-top{opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .45s var(--ease-soft),scale .6s var(--ease-liquid),visibility 0s .45s}

/* The language, top left, across from the button: English or Dutch
   (js/main.js, section 12). The drop under the one chosen slides across,
   as in the dock; both are as wide, so only its place changes. */
.lang{--w:56px;position:fixed;z-index:12;top:calc(14px + var(--sat));left:var(--pad-x);padding:4px;gap:0;cursor:auto;
  transition:opacity .45s var(--ease-soft)}
.lang-item{display:grid;place-items:center;width:var(--w);height:36px;border-radius:999px;padding-left:.22em;
  font-family:var(--display);font-size:11px;font-weight:600;line-height:1;letter-spacing:.22em;
  color:var(--gold-soft);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:scale .5s var(--ease-liquid)}         /* its colour changes at once, as in the dock */
@media (hover:hover) and (pointer:fine){ .lang-item:hover{color:var(--cream);scale:1.06} }
.lang-item:active{scale:.92;transition-duration:.15s}
/* a finger needs more than the letters: the item takes a little around it */
.lang-item{position:relative}
.lang-item::after{content:"";position:absolute;inset:-6px -2px}
.lang-item[aria-current="true"]{color:var(--cream)}
.lang-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-drop{position:absolute;z-index:0;top:4px;left:4px;width:var(--w);height:36px;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--cream-rgb),.20),rgba(var(--cream-rgb),.07));
  box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.55),inset -1px -1px 1px -.5px rgba(255,255,255,.2),
             inset 0 0 0 .5px rgba(255,255,255,.12),0 6px 16px -8px rgba(16,4,4,.7);
  transition:translate .55s var(--ease-liquid)}
html[lang="nl"] .lang-drop{translate:var(--w) 0}

/* the title block, as in the corner of a technical drawing: upright along
   the left edge, so it never lies over the work */
.titleblock{position:fixed;z-index:12;left:14px;bottom:22px;display:flex;pointer-events:none;
  writing-mode:vertical-rl;rotate:180deg;background:rgba(36,12,12,.78);
  font-family:var(--display);font-size:10px;font-weight:600;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--gold-rgb),.6)}
.titleblock span{padding:11px 7px;border:1px solid rgba(var(--gold-rgb),.2);border-inline-end:0}
.titleblock span:last-child{border-inline-end:1px solid rgba(var(--gold-rgb),.2)}
.titleblock b{font-weight:600;color:var(--cream)}
.titleblock i{font-style:normal}

/* the way on: a reference to the next sheet, on the edge where it lies,
   written along that edge so it stays clear of the work */
.next{position:fixed;z-index:12;display:flex;align-items:center;gap:10px;padding:10px 12px;
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--gold-rgb),.78);text-decoration:none;transition:opacity .5s var(--ease-soft)}
.next-num{color:rgba(var(--cream-rgb),.5)}
/* the rule lengthens on hover by scale, which the graphics card does; a
   colour or a width would be worked out on the page itself every frame */
.next .rule{flex:none;width:34px;height:1px;background:currentColor;opacity:.6;transition:scale .55s var(--ease-out)}
.next svg{width:14px;height:14px;flex:none}
.next svg *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .next:hover{color:var(--cream)} .next:hover .rule{scale:1.53 1} }
.next:is([data-dir="right"],[data-dir="left"],[data-dir="down"],[data-dir="up"]){flex-direction:column}
.next:is([data-dir="right"],[data-dir="left"],[data-dir="down"],[data-dir="up"]) :is(.next-num,.next-name){writing-mode:vertical-rl}
.next:is([data-dir="right"],[data-dir="left"],[data-dir="down"],[data-dir="up"]) .rule{width:1px;height:30px}
@media (hover:hover){ .next:is([data-dir="right"],[data-dir="left"],[data-dir="down"],[data-dir="up"]):hover .rule{scale:1 1.53} }
.next[data-dir="right"]{right:6px;top:50%;translate:0 -50%}
.next:is([data-dir="left"],[data-dir="up"]){left:6px;top:50%;translate:0 -50%}
.next[data-dir="left"] svg{rotate:180deg}
/* on the left edge the way on would run into the title block: there it
   stands above it (and on a low screen the title block makes way) */
@media (min-width:1101px) and (min-height:681px){ .next:is([data-dir="left"],[data-dir="up"]){top:auto;bottom:372px;translate:none} }
@media (max-height:680px){ .titleblock{display:none} }
.next[data-dir="down"]{right:6px;bottom:18px}
.next[data-dir="down"] svg{rotate:90deg}
/* back to the start, from the last sheet: on the left edge too, where nothing lies (above it would cover the form) */
.next[data-dir="up"] svg{rotate:-90deg}
.next.is-hidden{opacity:0;pointer-events:none;transition-duration:.2s}

/* before the arrival, the things around the paper wait for their turn.
   Should the script never get that far, the page itself lets them appear
   (index.html). That is not done with a CSS animation here: a waiting
   animation on these would keep their arrival off the graphics card. */
.js:not(.arrived) :is(.lockup-box img,.dock,.cta-top,.lang,.titleblock){opacity:0}

/* ── 6 · Ink ────────────────────────────────────────────────── */
/* The veil turns everything under it to graphite. The ink is a hole in it
   that grows out of the logo: a large drop with a few smaller ones beside
   it, so the edge spreads unevenly, the way ink runs into paper */
.veil{
  --ix:50vw;--iy:50vh;--soft:min(90px,9vmin);
  position:fixed;inset:0;z-index:8;pointer-events:none;visibility:hidden;
  -webkit-backdrop-filter:grayscale(1) contrast(1.05);
  backdrop-filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:
    radial-gradient(circle at var(--ix) var(--iy),transparent calc(var(--ink) - var(--soft)),#000 var(--ink)),
    radial-gradient(circle at calc(var(--ix) + 11vmin) calc(var(--iy) - 6vmin),transparent calc(var(--ink) * .78 - var(--soft)),#000 calc(var(--ink) * .78)),
    radial-gradient(circle at calc(var(--ix) - 13vmin) calc(var(--iy) + 7vmin),transparent calc(var(--ink) * .7 - var(--soft)),#000 calc(var(--ink) * .7)),
    radial-gradient(circle at calc(var(--ix) + 4vmin) calc(var(--iy) + 15vmin),transparent calc(var(--ink) * .6 - var(--soft)),#000 calc(var(--ink) * .6)),
    radial-gradient(circle at calc(var(--ix) - 6vmin) calc(var(--iy) - 13vmin),transparent calc(var(--ink) * .52 - var(--soft)),#000 calc(var(--ink) * .52));
  mask-image:
    radial-gradient(circle at var(--ix) var(--iy),transparent calc(var(--ink) - var(--soft)),#000 var(--ink)),
    radial-gradient(circle at calc(var(--ix) + 11vmin) calc(var(--iy) - 6vmin),transparent calc(var(--ink) * .78 - var(--soft)),#000 calc(var(--ink) * .78)),
    radial-gradient(circle at calc(var(--ix) - 13vmin) calc(var(--iy) + 7vmin),transparent calc(var(--ink) * .7 - var(--soft)),#000 calc(var(--ink) * .7)),
    radial-gradient(circle at calc(var(--ix) + 4vmin) calc(var(--iy) + 15vmin),transparent calc(var(--ink) * .6 - var(--soft)),#000 calc(var(--ink) * .6)),
    radial-gradient(circle at calc(var(--ix) - 6vmin) calc(var(--iy) - 13vmin),transparent calc(var(--ink) * .52 - var(--soft)),#000 calc(var(--ink) * .52));
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.veil.is-on{visibility:visible}
.veil.is-intro{z-index:60}                     /* on arrival everything is graphite, even the dock */
.js:not(.arrived) .veil{visibility:visible;z-index:60}

/* ── 7 · The dock ───────────────────────────────────────────── */
.dock{
  --radius:30px;--frost:10px;--tint:rgba(42,14,14,.34);--spot:220px;
  position:fixed;z-index:20;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  translate:-50% 0;
  display:flex;gap:4px;padding:8px;cursor:auto;
}
.dock-item{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:22px;
  color:var(--gold-soft);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:scale .5s var(--ease-liquid)}         /* its colour changes at once: a colour cannot be eased off the page's own thread */
.dock-item svg{width:26px;height:26px;overflow:visible}
.dock-item svg *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .dock-item:hover{color:var(--cream);scale:1.12} }
.dock-item:active{scale:.92;transition-duration:.15s}
.dock-item[aria-current="page"]{color:var(--cream)}
.dock-drop{position:absolute;z-index:0;top:8px;left:0;width:52px;height:52px;border-radius:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--cream-rgb),.20),rgba(var(--cream-rgb),.07));
  box-shadow:inset 1px 1px 1px -.5px rgba(255,255,255,.55),inset -1px -1px 1px -.5px rgba(255,255,255,.2),
             inset 0 0 0 .5px rgba(255,255,255,.12),0 6px 16px -8px rgba(16,4,4,.7);
  transition:translate .65s var(--ease-liquid)}
.dock-sep{width:1px;margin:12px 4px;background:rgba(var(--gold-rgb),.25);position:relative;z-index:1}
.dock-tip{
  --spot:90px;--tint:rgba(42,14,14,.38);--frost:6px;
  position:fixed;z-index:21;left:0;bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--dock-h) + 14px);
  min-height:34px;padding:0 16px;pointer-events:none;cursor:auto;
  font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.08em;color:var(--cream);white-space:nowrap;
  opacity:0;translate:var(--tx,0) 8px;scale:.9;
  transition:opacity .22s var(--ease-soft),translate .45s var(--ease-liquid),scale .45s var(--ease-liquid)}
.dock-tip.is-on{opacity:1;translate:var(--tx,0) 0;scale:1}

/* ── 8 · Type ───────────────────────────────────────────────── */
.head{max-width:760px;margin-bottom:clamp(44px,7vh,76px)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:var(--caps);text-transform:uppercase;color:var(--gold-soft)}
.title{font-family:var(--display);font-weight:500;color:var(--cream);font-size:clamp(42px,4.2vw + 14px,84px);line-height:1.02;
  letter-spacing:-.01em;margin-top:12px;text-wrap:balance}
.title em{font-style:italic;color:var(--gold)}
.lede{max-width:48ch;margin-top:20px;font-size:clamp(19px,.5vw + 16px,22px);line-height:1.55;color:rgba(var(--cream-rgb),.86);text-wrap:pretty}
.h3{font-family:var(--display);font-weight:500;color:var(--cream);font-size:clamp(24px,1vw + 18px,30px);line-height:1.15}
.text{font-size:18px;color:rgba(var(--cream-rgb),.84)}
.small{font-size:15px;color:var(--gold-soft)}
.note{max-width:62ch;margin-top:clamp(28px,4vh,40px);font-size:17px;color:var(--gold-soft)}
.grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:stretch}
.grid--works{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .grid--works{grid-template-columns:1fr} }
.card-icon{width:46px;height:46px;color:var(--gold)}
.card-icon *{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* ── 9 · Home ───────────────────────────────────────────────── */
.sheet--home .sheet-inner{display:grid;place-items:center;padding:0}
.lockup-box{width:var(--hero-w);margin-bottom:3vh;font-size:0;outline:none}
.lockup-box img{width:100%;height:auto;transform-origin:50% 40%}

/* ── 10 · Work ──────────────────────────────────────────────── */
.work{padding:10px}
.work-figure{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#EFE8DA;isolation:isolate}
.work-figure picture,.work-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-body{flex:1;display:flex;flex-direction:column;padding:18px 12px 6px}
.work-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.work-text{margin-top:10px;font-size:17px;color:rgba(var(--cream-rgb),.8)}
/* every action sits in the same place: bottom right */
.work-foot{margin-top:auto;padding-top:18px;display:flex;justify-content:flex-end}
/* A work still on the drawing board: a small first sheet, its paper and
   light as on the screen, with the name measured on it the way the logo is
   on the first sheet (js/main.js draws it). It is all still in pencil, black
   and white, the way the site itself starts before the ink: the colours are
   the same, turned to grey (and the paper painted grey once, never per
   frame). The last tile is the next one. */
.work-figure--wip{background:#222;--cream-rgb:233,233,233;--gold-rgb:192,192,192;--gold:#C0C0C0}
.work-figure--wip::before,.work-figure--wip::after{content:"";position:absolute;inset:0;pointer-events:none}
.work-figure--wip::before{
  background-image:url("../img/web/paper.jpg?v=16a45d32");
  background-image:image-set(url("../img/web/paper.avif?v=79151a15") type("image/avif"),url("../img/web/paper.jpg?v=16a45d32") type("image/jpeg"));
  background-size:66.6% auto;background-position:50% 50%;
  filter:grayscale(1) contrast(1.05)}
.work-figure--wip::after{
  background:
    radial-gradient(70% 62% at 50% 46%,rgba(63,63,63,.16),rgba(63,63,63,0) 72%),
    radial-gradient(120% 90% at 50% 45%,rgba(9,9,9,0) 40%,rgba(9,9,9,.45) 100%)}
.work-figure--wip .measure-win{z-index:1}
.work-figure--wip .wip-type{z-index:2;pointer-events:none}
.work--yours .h3{margin-top:6px}
.work--yours .work-text{margin-top:8px}

/* The way in. At the end of Work the scroll zooms into the board of the
   last tile: a screen of its own, lying over the last view of Work, grows
   out of the tile until it is the screen (js/main.js gives it its place,
   where it grows from, --dw and the paper's offset). It starts as the tile
   is, in pencil, and the ink comes into it as it grows: the name measured
   the way the logo is on Home, on the paper of the canvas, lined up with
   it, so that it leaves with the canvas as one. Then the words of the tile
   come in at the bottom left. */
.zoom{position:absolute;left:0;z-index:3;display:none;pointer-events:none;contain:strict}
.js .zoom{display:block}
.zoom-ink{position:absolute;inset:0;z-index:0;overflow:hidden}
.zoom-ink{background-color:var(--oxblood);
  background-image:url("../img/web/grain.png?v=7833e76a"),url("../img/web/paper.jpg?v=16a45d32");
  background-image:url("../img/web/grain.png?v=7833e76a"),image-set(url("../img/web/paper.avif?v=79151a15") type("image/avif"),url("../img/web/paper.jpg?v=16a45d32") type("image/jpeg"));
  background-size:128px 128px,var(--tile-w,1066px) var(--tile-h,224px);
  background-position:var(--zx,0) var(--zy,0),var(--zx,0) var(--zy,0)}
@media (min-resolution:2dppx){ .zoom-ink{background-size:64px 64px,var(--tile-w,1066px) var(--tile-h,224px)} }
/* the light of the screen (.vignette), under the drawing */
.zoom-ink::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 62% at 50% 46%,rgba(126,46,42,.16),rgba(126,46,42,0) 72%),
    radial-gradient(120% 90% at 50% 45%,rgba(20,6,6,0) 40%,rgba(20,6,6,.45) 100%)}
/* The loupe (js/main.js, section 10), over the canvas and under the controls:
   a flat copy of the view, its paper and its light, and over it the tile's
   board, rounded as it is: in it the ink comes over the copy's pencil, and
   then its paper (.zoom-all) comes up round it to the edges. Everything in it
   lies flat, one picture: nothing in it is a layer of its own. */
.loupe{position:fixed;inset:0;z-index:2;display:none;pointer-events:none;overflow:hidden;contain:strict}
.js .loupe{display:block}
.loupe>*{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform-origin:var(--zo,50% 50%)}
.loupe-paper{background-color:var(--oxblood);
  background-image:url("../img/web/grain.png?v=7833e76a"),url("../img/web/paper.jpg?v=16a45d32");
  background-image:url("../img/web/grain.png?v=7833e76a"),image-set(url("../img/web/paper.avif?v=79151a15") type("image/avif"),url("../img/web/paper.jpg?v=16a45d32") type("image/jpeg"));
  background-size:128px 128px,var(--tile-w,1066px) var(--tile-h,224px);
  background-position:var(--zx,0) var(--zy,0),var(--zx,0) var(--zy,0)}
@media (min-resolution:2dppx){ .loupe-paper{background-size:64px 64px,var(--tile-w,1066px) var(--tile-h,224px)} }
.loupe-light{background:
    radial-gradient(70% 62% at 50% 46%,rgba(126,46,42,.16),rgba(126,46,42,0) 72%),
    radial-gradient(120% 90% at 50% 45%,rgba(20,6,6,0) 40%,rgba(20,6,6,.45) 100%)}
.loupe-view{overflow:hidden}
.loupe-canvas{position:absolute;left:0;top:0}
.loupe-view *,.loupe-view *::before,.loupe-view *::after{will-change:auto!important;transition:none!important}
.loupe-view .shine{display:none}                 /* its light is out, as while the canvas moves, for good: never drawn again */
.loupe-board{opacity:1}
.loupe-board>.zoom-ink,.loupe-board .zoom-frame>*{opacity:0}
/* a moment barely there, out of sight, to be drawn ahead (js/main.js) */
.loupe.is-ahead>:not(.loupe-board),.loupe.is-ahead .loupe-board>.zoom-ink,.loupe.is-ahead .zoom-frame>*{opacity:.001!important}
.zoom-frame{position:absolute;z-index:1;left:var(--dx);top:var(--dy);width:var(--dw);height:var(--dh);
  border-radius:var(--dr);overflow:hidden}
.zoom-frame>.zoom-ink{inset:auto;left:calc(-1 * var(--dx));top:calc(-1 * var(--dy));
  width:calc(var(--dw) + 2 * var(--dx));height:calc(var(--dh) + 2 * var(--dy))}
.zoom-board{position:absolute;inset:0;z-index:1}
.zoom-board .wip-type{z-index:2}
.zoom-text{position:absolute;z-index:2;left:var(--pad-x);bottom:44px;
  width:min(680px,calc(100% - 2 * var(--pad-x)))}
/* where the dock reaches the left, the words stand above it */
@media (max-width:1000px){ .zoom-text{bottom:calc(var(--dock-h) + 40px)} }
.zoom.is-on{pointer-events:auto}                /* while it is up, nothing under it is touched */
:is(.zoom,.loupe) .measure-pane{will-change:auto}   /* its lines lie still: no layers of their own */
.zoom-title{margin-top:10px;font-family:var(--display);font-weight:500;color:var(--cream);
  font-size:clamp(30px,2.2vw + 12px,46px);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.zoom-lede{margin-top:10px;font-size:18px;line-height:1.5;color:rgba(var(--cream-rgb),.8)}
.zoom-text .button{margin-top:22px}

/* A name on the board, measured: construction lines and sizes in a frame of
   1600 × 900, shown about a third of that. The scroll draws them in from
   left to right as the card comes into view, like a pen going over it, and
   they are complete once the card is: a window slides open over lines that
   stay where they are (js/main.js), all of it on the graphics card. */
.measure-win{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.measure-pane{position:absolute;inset:0;will-change:transform}
.measure{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.measure *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.measure.wip :is(.w-line,.w-dim){vector-effect:non-scaling-stroke;stroke-width:.75px}
.measure.wip .w-line{stroke:rgba(var(--cream-rgb),.2)}
.measure.wip .w-key{stroke:rgba(var(--cream-rgb),.36)}
.measure.wip .w-plumb{stroke:rgba(var(--cream-rgb),.16)}
.measure.wip .w-axis{stroke:rgba(var(--cream-rgb),.26);stroke-dasharray:30 8 4 8}
.measure.wip .w-dim{stroke:rgba(var(--gold-rgb),.66)}
.measure.wip text{stroke:none;font-family:var(--display)}
.measure.wip .w-num{fill:rgba(var(--gold-rgb),.9);font-size:26px;font-weight:500;letter-spacing:.14em}
.measure.wip .w-label{fill:rgba(var(--cream-rgb),.5);font-size:20px;font-weight:600;letter-spacing:.24em}
.measure.wip :is(.wip-name,.wip-stage){fill:var(--gold);font-weight:500}
.measure.wip .wip-name{filter:drop-shadow(0 7px 9px rgba(7,7,7,.6))}

/* ── 11 · Services ──────────────────────────────────────────── */
.service{padding:28px 26px 30px}
.service .h3{margin-top:18px}
.service p{margin-top:10px;font-size:17px;color:rgba(var(--cream-rgb),.8)}

/* ── 12 · Process ───────────────────────────────────────────── */
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));list-style:none}
.step{padding:26px 22px 28px}
.step-num{font-family:var(--display);font-style:italic;font-size:42px;line-height:1;color:var(--gold)}
.step .h3{margin-top:14px}
.step p{margin-top:10px;font-size:17px;color:rgba(var(--cream-rgb),.8)}
.step .card-icon{margin-top:auto;padding-top:18px;width:58px;height:auto;color:var(--gold-soft)}

/* ── 13 · About ─────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,2.4vw,32px);align-items:start}
.about-card{padding:clamp(26px,3vw,40px)}
.about-card .text + .text{margin-top:16px}
.quote{font-family:var(--display);font-style:italic;color:var(--cream);font-size:clamp(26px,1.4vw + 18px,38px);line-height:1.2;text-wrap:balance}
.values{display:grid;gap:clamp(12px,1.4vw,18px)}
.value{padding:22px 24px}
.value p{margin-top:6px;font-size:17px;color:rgba(var(--cream-rgb),.8)}
.family{margin-top:clamp(18px,2.4vw,32px);padding:24px 28px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}

/* ── 14 · Contact ───────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);align-items:start}
.contact-side{display:grid;gap:14px}
.form{padding:clamp(24px,3vw,36px);gap:16px}
.field{display:grid;gap:6px}
.field label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:var(--caps);text-transform:uppercase;color:var(--gold-soft)}
.field input,.field textarea,.field select{font:inherit;font-size:18px;color:var(--cream);background:rgba(20,6,6,.32);
  border:1px solid rgba(var(--gold-rgb),.28);border-radius:14px;padding:12px 14px;min-height:48px;outline:none;
  transition:border-color .3s,background-color .3s}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--oxblood-deep);color:var(--cream)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);background-color:rgba(20,6,6,.45)}
.field ::placeholder{color:rgba(var(--cream-rgb),.4)}
.form .button{align-self:flex-end;margin-top:6px}
.form-note{font-size:15px;color:var(--gold-soft);text-align:right}
.channel{padding:20px 24px;flex-direction:row;align-items:center;gap:16px;text-decoration:none}
a.channel{cursor:pointer}
.channel svg{width:28px;height:28px;flex:none;color:var(--gold)}
.channel svg *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.channel strong{display:block;font-family:var(--display);font-weight:500;font-size:21px;color:var(--cream)}
.channel span{font-size:16px;color:var(--gold-soft)}
.faq{margin-top:12px}
.faq details{border-bottom:1px solid rgba(var(--gold-rgb),.18)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;
  font-family:var(--display);font-size:21px;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);transition:rotate .4s var(--ease-liquid)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 2px 18px;max-width:64ch;font-size:17px;color:rgba(var(--cream-rgb),.8)}
/* the colophon: the legal line, which may run over two lines on a phone */
.colophon{margin-top:clamp(36px,6vh,64px);max-width:78ch;margin-inline:auto;font-size:14px;line-height:1.7;
  color:var(--gold-faint);text-align:center;text-wrap:pretty}
.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{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ── 15 · Without JavaScript · phones · preferences ─────────── */
@media (max-width:1100px){ .titleblock{display:none} }
@media (max-width:900px){ .next{display:none} }
@media (max-width:860px){ .about,.contact{grid-template-columns:1fr} }
@media (max-width:700px){
  :root{--hero-w:min(88vw,calc((100svh - 260px) * 3.2));--top:104px}
  .mark{width:99px;top:calc(23px + var(--sat))}
}
@media (max-width:560px){
  :root{--dock-h:60px}
  .dock{gap:0;padding:6px;--radius:26px}
  .dock-item{width:46px;height:48px;border-radius:18px}
  .dock-item svg{width:23px;height:23px}
  .dock-drop{top:6px;width:46px;height:48px;border-radius:18px}
  .dock-sep{margin:10px 2px}
  .cta-top{display:none}
  .lang{--w:38px;padding:3px;min-height:0}       /* clear of the logo, even on the narrowest phone */
  .lang-item{height:32px;font-size:10px}
  .lang-drop{top:3px;left:3px;height:32px}
}
@media (max-width:380px){ .dock-item{width:41px} .dock-drop{width:41px} }

@media (prefers-reduced-motion:reduce){
  .glass,.dock-item,.dock-drop,.dock-tip,.lang-item,.lang-drop,.next,.next .rule,.cta-top,.js .mark,.js .mark.is-down{transition:none}
  a.glass:hover,button.glass:hover,a.glass:active,button.glass:active{scale:none}
  .js:not(.arrived) .veil{visibility:hidden}
}
@media (prefers-reduced-transparency:reduce){
  .glass{--tint:rgba(48,16,16,.9)}
  .glass--card,.dock{--tint:rgba(42,14,14,.96)}
}

/* ── 16 · A page off the canvas: privacy, and what is not there ──
   Two pages have no sheets, no camera and no drawing: the privacy page and
   the one for an address that does not exist. They are the same paper, the
   same glass and the same letters as the site, read the ordinary way, down.
   Nothing here needs the script, so these pages carry no .js on <html> and
   the canvas stays where it is, like a watermark. Its tile is sized the way
   js/main.js sizes it (TILE: 1918 of 2880 across), but in CSS, so the paper
   is at the same scale as on the site. */
body.leaf{--tile-w:calc(max(100vw,100vh * 16 / 9) * 1918 / 2880);
  --tile-h:calc(max(100vw,100vh * 16 / 9) * 402 / 2880)}
body.leaf .canvas{width:100%;height:100%;will-change:auto}   /* no canvas travels: the screen is enough */
/* the logo and the language scroll away with the page instead of standing
   over the text: there is no canvas moving under them here */
body.leaf .mark,body.leaf .lang{position:absolute}
body.leaf .lang{left:var(--pad-x)}

.leaf-inner{position:relative;z-index:1;min-height:100svh;
  padding:calc(var(--top) + 18px) var(--pad-x) clamp(56px,10vh,110px)}
/* an address that does not exist is short enough to stand in the middle */
.leaf-inner--mid{display:grid;align-content:center}
.leaf-inner--mid .lede{margin-top:24px}
.leaf-wrap{width:min(760px,100%);margin:0 auto}
.leaf-head{margin-bottom:clamp(28px,4vh,44px)}
.leaf-head .title{font-size:clamp(40px,3vw + 18px,64px)}
.leaf-when{margin-top:14px}
/* the text on one sheet of glass, the way a card lies on a sheet: each part
   under its own heading, in the display face, with a hairline above it */
.leaf-card{padding:clamp(26px,4vw,44px);gap:0}
.leaf-card section + section{margin-top:clamp(26px,3.4vh,38px);padding-top:clamp(24px,3.2vh,34px);
  border-top:1px solid rgba(var(--gold-rgb),.18)}
.leaf-card h2{font-family:var(--display);font-weight:500;font-size:clamp(21px,.7vw + 17px,25px);
  line-height:1.2;color:var(--cream)}
.leaf-card h2 + p{margin-top:10px}
.leaf-card p{max-width:62ch}
.leaf-card p + p{margin-top:12px}
.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);
  transition:color .3s var(--ease-soft)}
@media (hover:hover){ .leaf-card a:hover{text-decoration-color:rgba(var(--cream-rgb),.9)} }
.leaf-foot .arrow{rotate:180deg}      /* the way back */
.leaf-foot{margin-top:clamp(32px,5vh,52px);display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.leaf-note{font-size:14px;color:var(--gold-faint)}
@media (max-width:560px){
  .leaf-inner{padding-top:calc(var(--top) + 6px)}
}