/* arndtvoges.com, design D ("About"). Ported from the owner's design export (Claude Code Design, 2026-11-04):
   the values below are the export's inline styles, moved into classes. Tokens are shared with the decks
   and coaching.arndtvoges.com. Grain textures and the skyline are small SVGs in assets/. */
/* Bricolage Grotesque, self-hosted (SIL Open Font License, see fonts/OFL.txt). One variable file, latin subset,
   with the weight, width and optical-size axes; the pages preload it. Source: Google Fonts, v9. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2')}

:root{
  color-scheme:light;
  --paper:#FBFBF8; --stone:#EDECE6; --ink:#1B1D23; --ink2:#50535D; --hair:rgba(27,29,35,.14); --line:#DCDBD5;
  --lemon:#FFE88A; --sky:#CFE2FF; --mint:#BFEFD4;
  --sans:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --big:clamp(28px,2.4vw + 10px,46px);
  --sec:clamp(88px,9vw,144px);
  --dots:radial-gradient(rgba(27,29,35,.12) 1px,transparent 1.6px);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(19px,.4vw + 16px,22px)/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,h1,h2,ol{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--lemon);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:12px}
.skip:focus{left:16px;z-index:10;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px}
.wrap{max-width:1344px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}

/* Color swatches. Every pastel surface carries the same grain. */
.chip{background-image:url(grain.svg);background-size:200px 200px;background-blend-mode:overlay}
.c-lemon{background-color:var(--lemon)}
.c-sky{background-color:var(--sky)}
.c-mint{background-color:var(--mint)}
.sw{display:block;flex:0 0 auto;width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(27,29,35,.25)}

/* Buttons */
.ctas{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:clamp(20px,2.4vw,32px)}
.cta{display:inline-block;font-size:14px;font-weight:800;line-height:1;padding:13px 18px 14px;border-radius:999px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transition:background-color .2s,color .2s}
.cta.p{background-color:var(--ink);color:var(--paper)}
.cta:hover{background-color:var(--lemon);color:var(--ink)}
.cta:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* The name. The text sets the size and holds the space; hero.js lays the dot canvas over it and hides the text,
   so nothing below moves when the dots appear. Sizes match the canvas drawing exactly: the name fills the column
   minus 16px, capped at 224px; one line from a 700px column, two lines below that, and at 88% of the width below
   520px so the hero still fits a phone's first screen. 4.2256 and 2.1186 are the widths of "Arndt Voges" and
   "Voges" per 1px of font size at this weight, width and spacing (re-measure if the font changes). */
.name{position:relative;container-type:inline-size;margin:clamp(24px,3vw,44px) 0 0;width:100%}
.name-fb{display:block;margin:0 0 -.03em -.04em;font-weight:800;font-stretch:87.5%;letter-spacing:-.045em;line-height:.98;white-space:nowrap;
  font-size:min(224px,(100cqw - 16px) / 4.2256)}
@container (max-width:699.98px){
  .name-fb{font-size:min(224px,(100cqw - 16px) / 2.1186)}
  .name-fb .w{display:block}
}
@container (max-width:519.98px){ .name-fb{font-size:calc((100cqw - 16px) * .88 / 2.1186)} }
.name-net{display:none;position:absolute;left:0;pointer-events:none}

/* Intro and portrait */
.intro{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:56px 64px;margin-top:clamp(40px,5vw,72px)}
.intro-text{flex:999 1 480px;max-width:21em;font-size:var(--big);line-height:1.18;letter-spacing:-.02em}
.intro-text p{text-wrap:balance}
.squiggle{display:block;margin:clamp(24px,2.4vw,36px) 0}
.aside{margin-left:clamp(0px,3vw,48px);transform:rotate(-1deg);transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.aside:hover{transform:rotate(0deg)}
.under{padding:0 .08em;background-image:url(grain-strip.svg),linear-gradient(var(--lemon),var(--lemon));background-size:200px .34em,100% .34em;background-repeat:repeat-x,no-repeat;background-position:0 90%,0 90%;background-blend-mode:overlay,normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.portrait{position:relative;flex:0 1 380px;max-width:100%}
.portrait picture{display:block}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px;background:var(--stone)}
.skyline{position:absolute;left:0;right:0;bottom:0;padding-top:44px;border-radius:0 0 24px 24px;overflow:hidden;pointer-events:none}
.skyline-in{position:relative;width:100%;aspect-ratio:2513/520}
.sun{position:absolute;left:40.5%;bottom:12%;width:19%;aspect-ratio:1;border-radius:50%}
.skb,.skf{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.skb{background-color:#C9CCD3;-webkit-mask-image:url(skyline-back.svg);mask-image:url(skyline-back.svg)}
.skf{background-color:#656974;-webkit-mask-image:url(skyline-front.svg);mask-image:url(skyline-front.svg)}
.grain{position:absolute;inset:0;background-image:url(grain.svg);background-size:200px 200px;mix-blend-mode:overlay;opacity:.35}

/* Section labels */
.label{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.label .sw{width:10px;height:10px;border-radius:3px}

/* Current work */
.now{margin-top:var(--sec);background-color:var(--stone);background-image:radial-gradient(rgba(27,29,35,.09) 1px,transparent 1.6px);background-size:22px 22px;border-radius:clamp(24px,3vw,40px);box-shadow:inset 0 0 0 1px rgba(27,29,35,.06);padding:clamp(28px,5vw,80px);display:flex;flex-wrap:wrap;gap:56px clamp(40px,6vw,96px);align-items:center}
.now-text{flex:1 1 360px;min-width:0}
.now .label{margin-bottom:24px}
.now-text p{max-width:30em;text-wrap:pretty}
.now-text p + p{margin-top:1em}
.deck{flex:1 1 440px;min-width:0;max-width:600px;display:block;color:inherit;text-decoration:none}
.stack{position:relative;margin:0 30px 28px 0}
.layer,.slide{border-radius:14px;background:var(--paper);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.layer{position:absolute;inset:0;box-shadow:0 0 0 1px var(--line)}
.l1{transform:translate(11px,11px)}
.l2{transform:translate(22px,22px)}
.slide{position:relative;container-type:inline-size;aspect-ratio:16/9;box-shadow:0 0 0 1px var(--line),0 30px 50px -26px rgba(27,29,35,.45)}
.deck:hover .slide{transform:translate(-4px,-4px)}
.deck:hover .l1{transform:translate(17px,13px) rotate(1.6deg)}
.deck:hover .l2{transform:translate(30px,20px) rotate(3.2deg)}
.slide-in{display:flex;flex-direction:column;height:100%;padding:6cqw 7cqw 5.5cqw}
.pill{align-self:flex-start;padding:.3em .6em .35em;border-radius:.4em;background:var(--ink);color:var(--paper);font-weight:800;font-size:3.2cqw;line-height:1}
.ttl{display:flex;flex-direction:column;align-items:flex-start;gap:.07em;margin-top:4.2cqw;font-weight:800;font-variation-settings:"wdth" 92;font-size:9.6cqw;line-height:1;letter-spacing:-.03em}
.tk{padding:.02em .13em .12em;border-radius:.2em;white-space:nowrap}
.tk i{font-style:normal;opacity:.38;margin-right:.04em}
.meta{display:flex;align-items:flex-end;gap:7cqw;margin-top:auto;font-size:2.6cqw;line-height:1.25}
.meta small{display:block;font-size:1em;color:var(--ink2)}
.meta b{font-weight:800}
.bars{margin-left:auto;display:flex;align-items:flex-end;gap:1cqw}
.bars span{display:block;width:1.2cqw;border-radius:.5cqw;background:var(--ink)}
.cap{display:flex;align-items:flex-start;gap:14px;margin-top:20px}
.cap b{font-weight:800}
.go{flex:0 0 auto;margin-top:6px;transition:transform .25s ease}
.deck:hover .go{transform:translateX(5px)}

/* Before */
.side{display:flex;flex-wrap:wrap;gap:24px 64px}
.side > .label{flex:1 1 200px;align-self:flex-start}
.before{margin-top:var(--sec)}
.cvwrap{flex:4 1 560px;min-width:0}
.span-bar{display:flex;gap:4px;height:14px;margin-bottom:32px}
.seg{border-radius:7px;box-shadow:inset 0 0 0 1px rgba(27,29,35,.1);transition:opacity .2s ease}
.cvwrap:has(.r0:hover) .s1,.cvwrap:has(.r0:hover) .s2{opacity:.22}
.cvwrap:has(.r1:hover) .s0,.cvwrap:has(.r1:hover) .s2{opacity:.22}
.cvwrap:has(.r2:hover) .s0,.cvwrap:has(.r2:hover) .s1{opacity:.22}
.cv{padding:0;list-style:none;border-top:1px solid var(--hair)}
.cv li{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 32px;padding:24px 0;border-bottom:1px solid var(--hair)}
.when{flex:0 1 13rem;display:flex;align-items:center;gap:14px;color:var(--ink2);font-variant-numeric:tabular-nums}
.role{flex:1 1 18rem}
.role a{text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(27,29,35,.4);transition:text-decoration-color .2s}
.role a:hover{text-decoration-color:var(--ink);text-decoration-thickness:1.5px}
.dot{transition:transform .2s ease}
.cv li:hover .dot{transform:scale(1.5)}

/* Personal line */
.personal{margin-top:var(--sec);max-width:22em;font-size:var(--big);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.word{padding:.02em .14em .1em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Get in touch */
.contact{margin-top:var(--sec);padding-top:40px;border-top:1px solid var(--hair)}
.contact p{flex:4 1 560px;min-width:0;max-width:24em;font-size:var(--big);line-height:1.18;letter-spacing:-.02em;text-wrap:pretty}
.tl{position:relative;isolation:isolate;display:inline-block;white-space:nowrap;text-decoration:none}
.tl::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.3em;z-index:-1;border-radius:.12em;background-color:var(--lemon);background-image:url(grain.svg);background-size:200px 200px;background-blend-mode:overlay;transition:height .22s ease,bottom .22s ease}
.tl:hover::after,.tl:focus-visible::after{height:100%;bottom:0}

/* No footer: the page ends on Get in touch. */
main{padding-bottom:clamp(64px,8vw,120px)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Phones only: the first hero sentence and the highlighted line have to be visible on load, inside Safari's
   real viewport (about 664px tall on a 390px-wide iPhone). Desktop and tablet keep the design's values. */
@media (max-width:639px){
  .ctas{gap:8px;padding-top:14px}
  .cta{font-size:13px;padding:11px 13px 12px}
  .name{margin-top:10px}
  .intro{margin-top:22px}
  .intro-text{font-size:25px}
  .squiggle{margin:14px 0 16px}
}