:root{
  --bg:#0D0F0E;
  --panel:#151817;
  --line:#242927;
  --ink:#E8E4DC;
  --muted:#8A908C;
  --accent:#58C5B4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  padding-left:72px;
}
/* "Archivo Expanded" laeuft ueber die wdth-Achse der Variable Font */
.expanded,h1,h2,.rail span,.work h3,.contact-big{
  font-family:'Archivo',system-ui,sans-serif;font-stretch:125%;
}
/* Vertikale Namensleiste, wie im CV */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:72px;
  border-right:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:center;
  padding:24px 0;z-index:10;background:var(--bg);
}
.rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:700;
  letter-spacing:.42em;text-transform:lowercase;
  font-size:15px;color:var(--ink);white-space:nowrap;
}
main{max-width:960px;margin:0 auto;padding:0 32px}
section{padding:88px 0;border-bottom:1px solid var(--line)}
section.last{border-bottom:0}
.tc{
  font-family:'Archivo',monospace,sans-serif;font-size:12px;
  letter-spacing:.22em;color:var(--accent);text-transform:uppercase;
  display:block;margin-bottom:20px;
}
.tc::before{content:"TC ";color:var(--muted)}
h1{
  font-weight:700;
  font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.01em;
}
h1 .thin{color:var(--accent)}
.tagline{
  font-family:'Fraunces',serif;font-style:italic;font-size:clamp(18px,2.4vw,24px);
  color:var(--muted);margin-top:18px;
}
.hero-meta{margin-top:34px;font-size:14px;color:var(--muted);letter-spacing:.04em}
.hero-meta a{color:var(--ink)}
h2{
  font-weight:600;font-size:clamp(22px,3vw,30px);
  margin-bottom:28px;letter-spacing:.01em;
}
p.lede{max-width:640px;font-size:18px;color:var(--ink);margin-top:30px}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Showreel */
.reel{
  position:relative;aspect-ratio:16/9;background:var(--panel);
  border:1px solid var(--line);
}
.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-note{margin-top:14px;font-size:14px;color:var(--muted)}
/* Arbeiten */
.work{
  display:grid;grid-template-columns:110px 1fr;gap:8px 28px;
  padding:30px 0;border-top:1px solid var(--line);
}
.work:first-of-type{border-top:0}
.work .year{
  font-size:13px;color:var(--muted);
  letter-spacing:.18em;padding-top:6px;
}
.work h3{font-size:20px;font-weight:600}
.work .role{color:var(--accent);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 10px}
.work p{color:var(--muted);max-width:560px;font-size:15px}
.links{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px}
.list-head{
  font-size:13px;color:var(--muted);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;margin:52px 0 6px;
}
.worklist{list-style:none}
.worklist li{
  display:grid;grid-template-columns:110px 1fr;gap:8px 28px;
  padding:12px 0;border-top:1px solid var(--line);font-size:15px;
}
.worklist li:first-child{border-top:0}
.worklist .y{font-size:13px;color:var(--muted);letter-spacing:.18em;padding-top:2px;white-space:nowrap}
.worklist .t{color:var(--ink);font-weight:500}
.worklist .r{color:var(--muted)}
.worklist .r::before{content:"— ";color:var(--line)}
.sources{margin-top:28px;font-size:14px;color:var(--muted)}
/* Profil */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.fact{font-size:15px;color:var(--muted)}
.fact strong{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.fact + .fact{margin-top:22px}
/* Kontakt */
.contact-big{
  font-weight:700;
  font-size:clamp(22px,4vw,40px);word-break:break-all;
}
.contact-meta{margin-top:16px;color:var(--muted)}
.contact-meta a{color:var(--muted)}
footer{padding:36px 0;font-size:13px;color:var(--muted)}
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade{opacity:1!important;transform:none!important;transition:none!important}
}
@media (max-width:720px){
  body{padding-left:0}
  .rail{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start;padding:18px 24px}
  .rail span{writing-mode:horizontal-tb;transform:none;font-size:13px}
  .grid2{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}
  .worklist li{grid-template-columns:1fr;gap:2px}
  section{padding:56px 0}
}