/* danielvangriensven.com, next (2026-10-01). The Future Proof basis language (website/next/v5, system/fp-design-language.md)
   in a personal register: the same living ground, type and glass; Daniel's own photographs carry the story, and each page
   has its own living moment that explains something. */
:root{--ground:#07090d;--ink:#f1efe9;--ink2:rgba(241,239,233,.72);--ink3:rgba(241,239,233,.48);--ink4:rgba(241,239,233,.30);
 --line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--iris:#8fd0f2;--copper:#e2b28a;--warm:#f3c99a;
 --sans:'Inter',system-ui,-apple-system,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{background:var(--ground);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;
 background:radial-gradient(1400px 900px at 85% -10%,rgba(46,78,122,.22),transparent 60%),radial-gradient(1100px 800px at -10% 105%,rgba(128,86,52,.15),transparent 60%),
 linear-gradient(180deg,#07090d 0%,#090c11 50%,#07090d 100%);background-attachment:fixed}
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}img{max-width:100%;display:block}
p{text-wrap:pretty}

/* type: Inter at display size, semibold, tight; the second clause upright in quiet grey */
h1,h2,h3,.big{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;font-optical-sizing:auto;text-wrap:balance;margin:0}
h1{font-size:clamp(46px,6.4vw,100px);line-height:1.0}
h2{font-size:clamp(34px,4.3vw,66px);line-height:1.04;letter-spacing:-.032em}
h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.big{font-size:clamp(42px,6.2vw,98px);line-height:1.0}
h1 em,h2 em,h3 em,.big em{font-style:normal;color:rgba(241,239,233,.46)}
.k{font:500 14px var(--sans);color:var(--ink3);margin:0}
.k+h1,.k+h2{margin-top:16px}
.lead{font-size:19px;color:var(--ink2);max-width:33em;margin:22px 0 0}
.fine{font-size:13.5px;color:var(--ink3)}
@media (max-width:700px){ h1{font-size:clamp(40px,11.4vw,52px)} h2{font-size:clamp(30px,8.6vw,40px)} .big{font-size:clamp(38px,10.6vw,50px)} .lead{font-size:17.5px} body{font-size:16.5px} }

/* the bar: page links left, the name in the centre, writing to Daniel right; on phones the links live in a glass sheet */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
 padding:calc(env(safe-area-inset-top) + 14px) 4vw 12px;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.bar.solid{background:rgba(5,6,8,.6);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.b-l{display:flex;align-items:center;gap:26px;justify-self:start}.b-r{display:flex;align-items:center;gap:18px;justify-self:end}
.b-name{justify-self:center;text-decoration:none;font:600 16px var(--sans);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:10px}
.b-name i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff,var(--warm) 45%,rgba(226,178,138,0) 75%);box-shadow:0 0 14px rgba(243,201,154,.7);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.72);opacity:.7}}
.bar a.lk{text-decoration:none;font:500 14px var(--sans);color:var(--ink2);transition:color .2s;position:relative}
.bar a.lk:hover,.bar a.lk.on{color:var(--ink)}
.bar a.lk.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,var(--copper),var(--iris))}
.b-write{font:600 13.5px var(--sans);color:#0b0d10;background:var(--ink);border-radius:999px;padding:9px 16px;text-decoration:none;white-space:nowrap;transition:transform .3s var(--ease)}
.b-write:hover{transform:translateY(-1px)}
.b-menu{display:none;width:40px;height:40px;margin-left:-8px;border:0;background:none;cursor:pointer;position:relative}
.b-menu i{position:absolute;left:10px;right:10px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.b-menu i:nth-child(1){top:15px}.b-menu i:nth-child(2){top:23px;right:16px}
.bar.open .b-menu i:nth-child(1){top:19px;transform:rotate(45deg)}.bar.open .b-menu i:nth-child(2){top:19px;right:10px;transform:rotate(-45deg)}
.b-sheet{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;justify-content:center;padding:90px 8vw 60px;gap:6px;
 background:rgba(7,9,13,.74);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.b-sheet a{font:600 clamp(34px,9vw,52px)/1.15 var(--sans);letter-spacing:-.035em;color:var(--ink);text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.b-sheet a.sm{font:500 17px var(--sans);letter-spacing:0;color:var(--ink2);margin-top:22px}
.b-sheet a.on{color:var(--ink3)}
.b-sheet.open{opacity:1;pointer-events:auto}.b-sheet.open a{opacity:1;transform:none}
.b-sheet.open a:nth-child(2){transition-delay:.05s}.b-sheet.open a:nth-child(3){transition-delay:.1s}.b-sheet.open a:nth-child(4){transition-delay:.15s}.b-sheet.open a:nth-child(5){transition-delay:.2s}
@media (max-width:900px){ .b-l a.lk{display:none}.b-menu{display:block}.b-name{font-size:15px}.b-write{padding:8px 13px} }
@media (max-width:420px){ .b-name span.sur{display:none} }
@media (min-width:901px){ .b-sheet{display:none} }

/* buttons and glass: glass only where you touch */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--sans);text-decoration:none;border-radius:999px;padding:13px 21px;cursor:pointer;border:0;transition:transform .5s var(--ease)}
.btn.pri{background:var(--ink);color:#0b0d10}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lpill{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--ink);padding:13px 21px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
 background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .5s var(--ease),transform .5s var(--ease)}
.lpill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:conic-gradient(from var(--ang,0deg),rgba(255,255,255,.08),rgba(143,208,242,.55),rgba(255,255,255,.08) 30%,rgba(226,178,138,.45) 60%,rgba(255,255,255,.08) 75%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lring 9s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lring{to{--ang:360deg}}
.lpill:hover{background:rgba(255,255,255,.09)}
.lens{position:relative;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
 -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);isolation:isolate;overflow:hidden}
.lens::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:radial-gradient(420px 260px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.55),rgba(255,255,255,.08) 55%,rgba(255,255,255,.03));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lens::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(520px 320px at var(--lx,30%) var(--ly,0%),rgba(143,208,242,.10),transparent 60%),radial-gradient(400px 300px at calc(100% - var(--lx,30%)) 110%,rgba(226,178,138,.08),transparent 60%)}

/* layout */
main{display:block}
.sec{position:relative;z-index:2;padding:130px 5vw;max-width:1280px;margin:0 auto}
.head{max-width:820px;margin-bottom:48px}
.center{text-align:center;margin-left:auto;margin-right:auto}.center .lead{margin-left:auto;margin-right:auto}
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding:120px 5vw 70px;overflow:hidden}
.hero .copy{position:relative;z-index:2;max-width:760px}
.hero canvas,.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;mix-blend-mode:screen}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.95}
@media (max-width:700px){ .sec{padding:90px 22px} .hero{padding:110px 22px 56px;align-items:flex-end} }

/* big editorial imagery that grows out of the dark (an iris opening, set from scroll by site.js as --r) */
.plate{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
 -webkit-mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%));
 mask-image:radial-gradient(circle at 50% 56%,#000 calc(var(--r,0) * 118% - 14%),transparent calc(var(--r,0) * 118%));
 transform:scale(calc(1.16 - var(--r,0) * .16));filter:saturate(calc(.55 + var(--r,0) * .45)) brightness(calc(.7 + var(--r,0) * .3));will-change:transform,mask-image}
.plate::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,9,13,.85) 0%,rgba(7,9,13,0) 22%,rgba(7,9,13,0) 42%,rgba(7,9,13,.86) 100%)}
.plate .in-copy{padding:0 5vw 10vh;max-width:1280px;margin:0 auto;width:100%;opacity:calc(var(--r,0) * 1.6 - .5);transform:translateY(calc((1 - var(--r,0)) * 20px))}
.plate .in-copy h2{max-width:13em}.plate .in-copy p{max-width:32em;color:var(--ink2);font-size:18.5px;margin:18px 0 0}
.plate .in-copy>*{text-shadow:0 2px 24px rgba(0,0,0,.55)}.plate .in-copy .k{color:rgba(241,239,233,.8)}
.plate.left::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,9,13,.7) 0%,rgba(7,9,13,.2) 50%,rgba(7,9,13,0) 70%)}
@media (max-width:700px){ .plate{min-height:86vh} .plate .in-copy{padding:0 22px 8vh} .plate .in-copy p{font-size:16.5px} }

/* reveals: the heading arrives, then what follows it */
.js .tf{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.js .tf.in{opacity:1;transform:none;filter:none}
.js .tf-after{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease) .6s,transform .9s var(--ease) .6s}
.js .tf-after.in{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* the footer: Future Proof underneath */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:56px 5vw 64px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;color:var(--ink3);font-size:14.5px}
footer a{text-decoration:none;color:var(--ink2);transition:color .2s}footer a:hover{color:var(--ink)}
footer nav{display:flex;flex-direction:column;gap:9px}
footer .fpw{display:inline-block;margin-bottom:14px}footer .fpw img{height:22px;width:auto;opacity:.92}
footer .who{color:var(--ink);font-weight:600;letter-spacing:-.01em}
@media (max-width:800px){ footer{grid-template-columns:1fr;gap:30px;padding:48px 22px 56px} }

/* craft */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--ink);color:#0b0d10;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:14px}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}
canvas{outline:none}
@media (prefers-reduced-motion:reduce){
 .js .tf,.js .tf-after,.js .rv{opacity:1;transform:none;filter:none;transition:none} html{scroll-behavior:auto}
 .plate>img{-webkit-mask-image:none;mask-image:none;transform:none;filter:none}.plate .in-copy{opacity:1;transform:none}
 .lpill::before,.b-name i{animation:none} }
.plate .in-copy h1 em,.plate .in-copy h2 em{color:rgba(241,239,233,.64)}   /* on a photograph the quiet clause needs a little more light */