/* Built from the v4 prototype. Markup is rendered at build time by
   src/render.js; app.js only layers interaction on top. */
:root{
  --ink:#08090f;--raise:#12131d;--fg:#f6f6fa;--muted:#8f92a8;--line:#212437;--who:#5f6379;
  --grain:.30;--shade:22%;
  --grad:linear-gradient(90deg,#ff0972,#f27321,#5d51a1,#0096ff);
  --display:"Bebas Neue","Arial Narrow",sans-serif;
  --sub:"Poppins",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --ink:#f6f6fa;--raise:#ffffff;--fg:#0e0f18;--muted:#5c5f74;--line:#e0e1eb;--who:#8a8da2;
  --grain:.09;--shade:14%;}}
:root[data-theme="light"]{
  --ink:#f6f6fa;--raise:#ffffff;--fg:#0e0f18;--muted:#5c5f74;--line:#e0e1eb;--who:#8a8da2;
  --grain:.09;--shade:14%;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--sub);font-weight:500;line-height:1.6;overflow-x:hidden;}
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4.5rem);}
@media (min-width:1180px){.wrap{padding-right:13rem;}}

/* ---------- right-hand index rail (uit v2) ---------- */
.rail{position:fixed;right:clamp(.75rem,2vw,1.75rem);top:50%;transform:translateY(-50%);z-index:85;}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;align-items:flex-end;}
.rail a{
  display:flex;align-items:center;gap:.6rem;justify-content:flex-end;
  text-decoration:none;color:var(--muted);padding:.3rem 0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  opacity:.55;transition:opacity .2s ease,color .2s ease;
}
.rail a span.n{white-space:nowrap;}
.rail a i{display:block;width:22px;height:2px;background:currentColor;flex:none;transition:width .25s ease;}
.rail a:hover{opacity:1;color:var(--fg);}
.rail a[aria-current="true"]{opacity:1;color:var(--fg);}
.rail a[aria-current="true"] i{width:44px;background:var(--grad);}
@media (max-width:1179px){.rail{display:none;}}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;}
.progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;}

/* Folio: where you are in the document, magazine-style */
.folio{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:1.5rem;z-index:80;
  display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.folio b{font-family:var(--display);font-size:1.6rem;letter-spacing:.04em;color:var(--fg);font-weight:400;line-height:1;}
.folio span{color:var(--fg);}
.theme{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:1.5rem;z-index:80;display:flex;align-items:center;gap:.5rem;
  cursor:pointer;background:var(--raise);color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:.5rem .9rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.theme:hover{color:var(--fg);}
.theme i{width:8px;height:8px;border-radius:50%;background:var(--grad);}

/* ---------- opening ---------- */
.hero{position:relative;padding:clamp(4.5rem,13vw,9rem) 0 clamp(3rem,7vw,5rem);}
.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 2rem;display:flex;align-items:center;gap:1rem;}
.kicker::after{content:"";height:1px;flex:1;background:var(--line);}
h1{font-family:var(--display);font-weight:400;margin:0;font-size:clamp(3.2rem,13vw,11rem);line-height:.8;letter-spacing:.01em;}
h1 span{display:block;}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:250% 100%;}
.hero p{max-width:30em;color:var(--muted);margin:2rem 0 0;font-size:clamp(1rem,1.5vw,1.15rem);}
.hero p b{color:var(--fg);font-weight:600;}
.counts{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,6vw,5rem);margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line);}
.counts dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 .35rem;}
.counts dd{margin:0;font-family:var(--display);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums;}

/* ---------- one spread per client ---------- */
.spread{position:relative;padding:clamp(3.5rem,9vw,7rem) 0;isolation:isolate;}
/* Each client tints the page; scrolling walks the brand gradient end to end. */
.spread::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at var(--x,25%) 0%, color-mix(in srgb, var(--tint) var(--shade), transparent), transparent 70%);
}
.spread + .spread{border-top:1px solid var(--line);}
.s-index{
  position:absolute;top:clamp(3.5rem,9vw,7rem);left:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--who);
  writing-mode:vertical-rl;
}
@media (max-width:900px){.s-index{display:none;}}
.s-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"media" "name" "facts" "lead" "svcs" "collage";
}
.s-media{grid-area:media;position:relative;width:100%;}
.s-facts{grid-area:facts;}.s-name{grid-area:name;}.s-lead{grid-area:lead;}.svcs{grid-area:svcs;}
.s-collage{grid-area:collage;}
.s-media img,.s-media .fallback{width:100%;aspect-ratio:20/9;object-fit:cover;border-radius:2px;}
@media (min-width:900px){
  /* The image column is sized to the image itself, not to the free space, so
     the facts sit right beside it. A third, empty track swallows the slack —
     the full-width rows span all three, so name and services still run edge
     to edge. The image is capped here rather than on .s-media: it is a plate
     on the page, not a banner, and the display name stays the largest thing. */
  .s-grid{
    grid-template-columns:clamp(380px,48vw,620px) clamp(170px,16%,232px) minmax(0,1fr);
    column-gap:clamp(1.25rem,2vw,2rem);
    grid-template-areas:"media facts gap" "name name name" "lead lead lead" "svcs svcs svcs" "collage collage collage";
  }
  .spread:nth-of-type(even) .s-grid{
    grid-template-columns:minmax(0,1fr) clamp(170px,16%,232px) clamp(380px,48vw,620px);
    grid-template-areas:"gap facts media" "name name name" "lead lead lead" "svcs svcs svcs" "collage collage collage";
  }
}
.fallback{
  display:grid;place-items:center;background:var(--grad);
  font-family:var(--display);font-size:clamp(3rem,9vw,7rem);color:rgba(255,255,255,.92);letter-spacing:.06em;
}
/* The name rides across the bottom edge of the image */
.s-name{
  position:relative;z-index:2;margin:-.34em 0 0;
  font-family:var(--display);font-weight:400;line-height:.82;letter-spacing:.01em;
  font-size:clamp(2.6rem,11vw,9rem);overflow-wrap:break-word;
  text-shadow:0 2px 30px rgba(0,0,0,.28);
}
.spread:nth-of-type(even) .s-name{text-align:right;}
.s-facts{margin:1.5rem 0 0;display:flex;gap:1.75rem 2.25rem;flex-wrap:wrap;}
.s-facts>div{min-width:0;}
.s-facts dt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--who);margin:0 0 .3rem;
}
.s-facts dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.35;overflow-wrap:break-word;}
.s-site{
  color:var(--fg);text-decoration:none;border-bottom:1px solid var(--tint);padding-bottom:.1rem;
  /* Domain and arrow are one unit — the arrow must never wrap onto its own line. */
  white-space:nowrap;font-size:.86rem;
}
.s-site span{color:var(--tint);}
.s-soon{color:var(--muted);font-weight:500;}
.s-site:hover{color:var(--tint);}
@media (min-width:900px){
  /* De feitenkolom spant precies de hoogte van het beeld: de regels verdelen
     zich over die hoogte, dus beide blijven uitgelijnd als het beeld anders
     wordt bijgesneden. */
  .s-facts{flex-direction:column;gap:.75rem;margin:0;height:100%;justify-content:space-between;}
  .s-facts::before{content:"";height:2px;background:var(--tint);width:2.25rem;flex:none;}
}
.s-lead{max-width:33em;color:var(--muted);margin:1.5rem 0 0;}
.spread:nth-of-type(even) .s-lead{margin-left:auto;text-align:right;}

/* ---------- services below each client ---------- */
.svcs{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line);}
.svc{padding:1.35rem 0;border-bottom:1px solid var(--line);position:relative;}
.svc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--sc);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1);}
.svc:hover::after{transform:scaleX(1);}
.svc h3{
  font-family:var(--display);font-weight:400;margin:0 0 .7rem;line-height:1;
  font-size:clamp(1.6rem,3vw,2.3rem);display:flex;align-items:center;gap:.7rem;
}
.svc h3 i{width:.4em;height:.4em;border-radius:2px;background:var(--sc);flex:none;}
/* Names above, projects beneath at full width — two short columns keep the
   block from growing tall now that it no longer sits beside the heading. */
.svc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:3rem;}
@media (max-width:720px){.svc ul{columns:1;}}
.svc li{color:var(--muted);font-size:.97rem;transition:color .2s ease;break-inside:avoid;margin-bottom:.45rem;}
.svc:hover li{color:var(--fg);}

.site-footer{padding:clamp(3.5rem,8vw,6rem) 0 5rem;border-top:1px solid var(--line);margin-top:2rem;}
.foot-rule{height:3px;background:var(--grad);margin-bottom:2.75rem;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem;}
.site-footer h3{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem;}
.site-footer p{margin:0;font-size:.92rem;line-height:1.8;}
.site-footer a{color:var(--fg);text-decoration:none;border-bottom:1px solid #f27321;}
.sign{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--muted);}
a:focus-visible,button:focus-visible{outline:2px solid #0096ff;outline-offset:4px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition-duration:.01ms!important;}}

/* ---------- synced Drive documents ---------- */
.doc-page{position:relative;z-index:2;padding:clamp(2.5rem,6vw,4rem) 0;}
.doc-page h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem);line-height:.98;
  color:var(--fg);margin:0 0 .6rem;text-wrap:balance;
}
.doc-body{max-width:38em;}
.doc-body h2{font-family:var(--sub);font-weight:600;font-size:1.3rem;color:var(--fg);margin:2.25rem 0 .6rem;}
.doc-body h3{font-family:var(--sub);font-weight:600;font-size:1.05rem;color:var(--fg);margin:1.75rem 0 .5rem;}
.doc-body img{max-width:100%;height:auto;}
.doc-body a{color:var(--fg);}
.doc-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;}
.doc-body td,.doc-body th{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;}
.doc-body pre{overflow-x:auto;background:var(--band);padding:1rem;border-radius:6px;}
.doc-list{list-style:none;margin:0;padding:0;}
.doc-list li{padding:.9rem 0;border-top:1px solid var(--line);}
.doc-list a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);}
.doc-list a:hover{border-bottom-color:var(--fg);}
.doc-list .meta-item{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-left:.75rem;
}
.back{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;margin-bottom:1.5rem;
}
.back:hover{color:var(--fg);}
.empty{color:var(--muted);}
.doc-page{color:var(--fg);}
.doc-meta{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:.75rem 0 2rem;}
.docs-link{padding:0 0 4rem;}

/* ---------- collage of finished work, under the services ----------
   Masonry, not a row: every frame keeps its own proportions — a poster stays
   upright, a screenshot stays wide — so the block reads as a pinboard. The
   ragged bottom edge is the point, not a flaw. */
.s-collage{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  columns:4;column-gap:.55rem;
}
.s-collage img{
  width:100%;height:auto;display:block;margin:0 0 .55rem;border-radius:2px;
  break-inside:avoid;
  filter:saturate(.92);transition:filter .3s ease,transform .3s ease;
}
.s-collage img:hover{filter:saturate(1.05);transform:translateY(-3px);}
@media (max-width:1100px){.s-collage{columns:3;}}
@media (max-width:700px){.s-collage{columns:2;}}