/* ==========================================================================
   Carsten Bokemeyer — personal site
   Tokens → shared shell → per-page blocks → preferences → print
   Fonts are self-hosted; nothing is loaded from third parties.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */

@font-face{font-family:'Gabarito';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/gabarito-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/manrope-var.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Caveat Brush';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/caveat-brush-400.woff2') format('woff2')}

/* --- tokens --------------------------------------------------------------- */

:root{
  --paper:#fbfcfe;
  --sky:#e9f1fb;
  --sky-2:#dce9f8;
  --ink:#131b26;
  --ink-2:#4b5766;
  --ink-3:#5a6675;
  --rule:#d8e4f2;
  --rule-2:#bdcee3;
  --accent:#427ed6;
  --accent-deep:#2a5aa3;
  --signal:#ecec52;
  --display:'Gabarito',system-ui,sans-serif;
  --sans:'Manrope',system-ui,'Helvetica Neue',sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --script:'Caveat Brush',cursive;
}

/* --- base ----------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}

/* Visible focus everywhere. Never remove without replacement. */
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:2px}

.wrap{max-width:860px;margin:0 auto;padding:0 32px}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* Skip link — first focusable element, visible on focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0;color:#fff}
#main-content:focus{outline:none}

/* --- nav (never sticky: keeps the keyboard focus from being obscured) ------ */

.nav{position:relative;background:transparent;border-bottom:0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:0;flex-wrap:wrap}
/* Padding grows the hit area to the 24×24 minimum; the gap is reduced by the
   same amount so the visible distance between the labels stays the designed
   26px. Short labels like "CV" would otherwise be a 17px-wide target. */
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{display:inline-block;padding:6px 4px;font-size:13px;color:var(--ink-2)}
.nav a:hover{color:var(--accent-deep)}

/* --- logo lockup ---------------------------------------------------------- */

.mk{display:flex;align-items:center;gap:11px}
.mk img{height:36px;width:auto;display:block}
.mk .nm{font-family:var(--display);font-size:18px;letter-spacing:-.018em;color:var(--ink);line-height:1.1}
.mk .nm i{display:block;font-style:normal;font-family:var(--mono);font-size:7.4px;letter-spacing:.105em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* --- buttons -------------------------------------------------------------- */

.btn{display:inline-block;font-size:14px;font-weight:500;padding:11px 20px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--sky);color:var(--accent-deep);border-color:var(--accent)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.pri:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* --- footer --------------------------------------------------------------- */

.foot{background:var(--sky);border-top:0}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:32px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
/* Padding gives the link a 24px-tall hit area; the matching negative margin
   cancels its effect on layout, so the footer keeps its designed height. */
.foot a{display:inline-block;padding:6px 0;margin:-6px 0;color:var(--ink-3)}
.foot a:hover{color:var(--accent-deep)}

/* --- shared headline treatment -------------------------------------------- */

h1,h2{font-family:var(--display);font-weight:400;margin:0}
h1 em,h2 em{font-style:normal;font-family:var(--script);color:var(--accent);font-size:1.1em;padding:0 .03em}

/* ==========================================================================
   Start page
   ========================================================================== */

.page-start h1{font-size:clamp(38px,5.6vw,62px);line-height:1.06;letter-spacing:-.024em;max-width:24ch;text-wrap:pretty}
.page-start h2{font-size:clamp(28px,3.8vw,42px);line-height:1.1;letter-spacing:-.021em;max-width:24ch}
.page-start .hero{padding:78px 0 0}
.page-start .hero .lead{margin:30px 0 0;font-size:18px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.page-start .hero .lead b{color:var(--ink);font-weight:600}
.page-start .hero .lead+.lead{margin-top:18px}
.page-start .hero .lead:first-child{margin-top:0}
.page-start .hero .actions{margin-top:38px}
.page-start .hero .below{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:44px;align-items:start;margin-top:30px}

/* The portrait comes first in the markup so it can float below 520px. Here it
   belongs in the right-hand column, so order puts it back. This is visual
   only: reading and tab order still follow the markup. */
.portrait-band{position:relative;width:210px;height:210px;order:2}
.portrait-band img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--sky);display:block}

/* logo strip */
.logos{margin:64px 0 0;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:22px 26px;display:grid;gap:16px;align-items:start}
.logos .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.logos .top a{display:inline-block;padding:6px 0;margin:-6px 0;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-deep)}
.logos .set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;align-items:center;justify-items:center}
/* The cell is the hover target, so the whole grid column reacts, not just the
   optically shrunk logo inside it. */
.logos .cell{width:100%;height:44px;display:flex;align-items:center;justify-content:center}
.logos .cell img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) opacity(.62);transition:filter .25s}
.logos .cell:hover img{filter:grayscale(0) opacity(1)}
/* Per-logo optical size correction — the source files carry very different padding. */
#logo-cint{transform:scale(.62)}
#logo-smartrecruiters{transform:scale(.95)}
#logo-greator{transform:translateY(-4px) scale(.9)}
#logo-chefkoch{transform:scale(.95)}
#logo-studitemps{transform:scale(.95)}

.page-start section{padding:78px 0}
.page-start .eyebrow{margin-bottom:26px}
.page-start #work h2{max-width:none;font-size:clamp(24px,3.5vw,40px)}
@media(min-width:900px){.page-start #work h2{white-space:nowrap}}

.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 48px;margin-top:42px}
.topic .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:14px}
.topic h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:-.016em;margin:0 0 12px}
.topic p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.topic p b{color:var(--ink);font-weight:600}

.aside{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;margin-top:36px}
.aside h3{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-.014em;margin:0 0 10px}
.aside p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.aside p+p{margin-top:12px}
.aside p b{color:var(--ink);font-weight:600}
.aside .small h3{font-size:20px}
.aside .small p{font-size:16px}
.tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
.page-start .intro{margin:22px 0 0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.page-start #open .intro,.page-start #side .intro{max-width:none}
.ghline{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.ghline a{display:inline-flex;align-items:center;gap:7px;margin-left:6px;white-space:nowrap}
.ghline svg{flex:none}

/* open to */
.forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px;margin-top:38px}
.forms.later{margin-top:34px;padding-top:6px}
.form{padding-top:16px;border-top:1px solid var(--rule)}
.form h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.3;letter-spacing:-.014em;margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.form p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.status{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.status.now{background:var(--accent-deep);color:#fff}
.status.someday{border:1px solid var(--rule-2);color:var(--ink-3)}
.form.muted h3{color:var(--ink-2)}
.form.muted p{font-size:15.5px}

/* contact */
.contact{background:linear-gradient(180deg,var(--paper) 0%,var(--sky) 100%);padding-bottom:88px}
.page-start .contact h2{font-size:clamp(34px,5.6vw,58px);max-width:16ch}
.contact p{margin:26px 0 0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.contact .actions{margin-top:36px}

/* The contact gradient ends in --sky, so the footer continues it seamlessly. */
.page-start .foot .wrap,.page-cv .foot .wrap{padding-top:0;padding-bottom:40px}

@media(max-width:1020px){
  .page-start .hero .below{grid-template-columns:minmax(0,1fr) 170px;gap:34px}
  .portrait-band{width:170px;height:170px}
}
@media(max-width:900px){
  .topics,.aside,.forms{grid-template-columns:1fr!important}
  .aside{gap:34px}
}
@media(max-width:820px){
  .page-start .hero{padding:44px 0 0}
  .page-start section{padding:56px 0}
  .topics{gap:34px}
  /* Still two columns here. At 560px this leaves the copy ~348px, about 42
     characters a line, so there is no reason to stack this early. */
  .page-start .hero .below{grid-template-columns:minmax(0,1fr) 140px;gap:28px}
  .portrait-band{width:140px;height:140px}
  .logos{margin-top:40px;padding:18px}
  .logos .set{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .logos .cell{height:38px}
  .ghline a{margin-left:0;display:flex;margin-top:8px}
}
/* Below 520px a fixed second column would squeeze the copy to roughly 23
   characters a line. Instead the portrait floats and the text wraps around it,
   narrow for about four lines and then full width again. shape-outside makes
   the wrap follow the circle rather than its bounding box. */
@media(max-width:520px){
  .page-start .hero .below{display:block;margin-top:26px}
  .page-start .hero .below::after{content:"";display:block;clear:both}
  .portrait-band{float:right;width:120px;height:120px;margin:4px 0 12px 18px;shape-outside:circle(50%)}
  .page-start h1{font-size:31px}
  .page-start .hero .lead{font-size:16.5px}
  .logos .set{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forms .form h3,.topic h3,.aside h3{font-size:20px}
  .actions{gap:10px}
  .btn{padding:10px 16px;font-size:13.5px}
  .status{font-size:9.5px}
}

/* On the narrowest phones 120px leaves too little beside it. */
@media(max-width:400px){
  .portrait-band{width:92px;height:92px;margin-left:14px}
}

/* ==========================================================================
   CV
   ========================================================================== */

.page-cv h1{font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-.024em;max-width:22ch}
.page-cv h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1;letter-spacing:-.021em}
.page-cv .top{padding:78px 0 0}
.page-cv section{padding:70px 0}
.page-cv .eyebrow{margin-bottom:24px}
.summary{margin:28px 0 0;font-size:17.5px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.summary b{color:var(--ink);font-weight:600}
.summary+.summary{margin-top:16px}
.facts{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 34px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.facts a{display:inline-block;padding:4px 0;margin:-4px 0;border-bottom:1px solid var(--rule-2)}

.roles{margin-top:36px;display:grid;gap:38px}
.role{display:grid;grid-template-columns:132px minmax(0,1fr);gap:34px}
.role .when{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:6px}
.role .when b{display:block;color:var(--accent-deep);font-weight:400}
.role h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.016em;margin:0}
.role .org{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.role .org a{color:var(--ink-2);border-bottom:1px solid var(--rule-2)}
.role .org a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.role .prior{margin:10px 0 0;font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--ink-3)}
.role ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.role li{position:relative;padding-left:17px;font-size:15.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.role li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--accent)}
.role li b{color:var(--ink);font-weight:600}

.rows{margin-top:32px;display:grid}
.row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:34px;padding:18px 0;border-top:1px solid var(--rule)}
.row:first-child{border-top:0;padding-top:0}
.row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.row p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.row p+p{margin-top:8px}
.row b{color:var(--ink);font-weight:600}
.row .sub{color:var(--ink-3);font-size:14.5px}

.tail{background:linear-gradient(180deg,var(--paper) 0%,var(--sky) 100%);padding-bottom:96px}
.page-cv .tail h2{max-width:none}
@media(min-width:820px){.page-cv .tail h2{white-space:nowrap}}
.tail p{margin:24px 0 0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.tail .actions{margin-top:32px}

@media(max-width:900px){.role,.row{grid-template-columns:104px minmax(0,1fr);gap:24px}}
@media(max-width:760px){
  .page-cv .top{padding:44px 0 0}
  .page-cv section{padding:52px 0}
  .role,.row{grid-template-columns:1fr;gap:10px}
  .role .when,.row .k{padding-top:0}
  .roles{gap:34px}
  .facts{gap:8px 22px;font-size:11px}
}
@media(max-width:520px){
  .page-cv h1{font-size:29px}
  .summary{font-size:16px}
  .role h3{font-size:21px}
  .role li,.row p{font-size:15px}
}

/* ==========================================================================
   Imprint
   ========================================================================== */

.page-imprint .wrap{max-width:720px}
.page-imprint main{padding:64px 0 96px}
.page-imprint h1{font-size:clamp(32px,5vw,48px);line-height:1.06;letter-spacing:-.022em}
.page-imprint h2{font-size:23px;line-height:1.2;letter-spacing:-.014em;margin:56px 0 14px}
.page-imprint p{margin:0 0 14px;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.page-imprint p b{color:var(--ink);font-weight:600}
.page-imprint .intro{margin-top:26px;font-size:17px}
@media(max-width:820px){.page-imprint main{padding:44px 0 64px}}

/* ==========================================================================
   404
   ========================================================================== */

.page-404{min-height:100vh;display:flex;flex-direction:column}
.page-404 main{flex:1;display:flex;align-items:center;padding:70px 0 90px}
.page-404 h1{font-size:clamp(34px,5.4vw,58px);line-height:1.06;letter-spacing:-.024em;margin:22px 0 0;max-width:20ch;text-wrap:pretty}
.page-404 .code{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:10px}
.page-404 .code i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block;flex:none}
.page-404 .lead{margin:26px 0 0;font-size:17.5px;line-height:1.7;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.page-404 .actions{margin-top:34px}
@media(max-width:820px){.page-404 main{padding:40px 0 60px}}

/* ==========================================================================
   Shared responsive
   ========================================================================== */

@media(max-width:820px){.wrap{padding:0 22px}}

/* ==========================================================================
   User preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* In forced-colors mode the greyscale filter would fight the user's palette. */
@media (forced-colors: active){
  .logos .cell img{filter:none}
  .btn{border:1px solid currentColor}
  :focus-visible{outline:2px solid CanvasText}
}

/* ==========================================================================
   Print — mainly for the CV
   ========================================================================== */

@media print{
  .nav,.skip,.tail,.contact,.foot{display:none}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .page-cv .top,.page-cv section{padding:0 0 18pt}
  /* Keep a single role and its bullets together. Not .roles — that wraps the
     whole employment history, which is several pages long. */
  .role,.row{break-inside:avoid}
  .role .org a::after,.facts a::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .role .org a[href^="mailto:"]::after,.facts a[href^="mailto:"]::after{content:""}
  a{color:#000}
}