/* A quiet, content-first portfolio. No motion or JavaScript dependencies. */
:root {
  --paper:#f6f5f1;
  --ink:#252d29;
  --muted:#626961;
  --accent:#53634e;
  --line:#d6d9d0
}

* {
  box-sizing:border-box
}
html {
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--accent)
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
.wrap {
  width:min(1080px,calc(100% - 96px));
  margin-inline:auto
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:32px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.6px
}
.brand-dot {
  color:var(--accent)
}
nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px
}
.language-form {
  display:flex
}
.language-form button {
  border:0;
  border-left:1px solid var(--line);
  padding:3px 0 3px 22px;
  background:none;
  font-size:12px
}
.intro {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:76px;
  align-items:center;
  padding:76px 0 88px
}
.eyebrow {
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin:0 0 25px
}
h1 {
  font-size:clamp(52px,5.7vw,78px);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-3.5px;
  margin:0 0 30px
}
h1 em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--accent);
  letter-spacing:-3px
}
.role {
  font-size:18px;
  line-height:1.55;
  margin:0 0 14px
}
.intro-note {
  max-width:370px;
  color:var(--muted);
  font-size:15px;
  margin:0 0 25px
}
.text-link {
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--ink);
  padding:5px 0
}
.portrait {
  margin:0;
  align-self:center
}
.portrait img {
  display:block;
  width:100%;
  height:480px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:2px
}
.portrait figcaption {
  text-align:right;
  color:var(--muted);
  font-size:10px;
  margin-top:8px
}
.section-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px;
  padding:65px 0;
  border-top:1px solid var(--line)
}
h2 {
  font-size:36px;
  line-height:1.18;
  font-weight:400;
  letter-spacing:-1.3px;
  margin:0 0 25px
}
.section-copy {
  max-width:610px;
  color:var(--muted);
  font-size:16px;
  margin:0 0 20px
}
.institution .eyebrow {
  padding-top:8px
}
.projects {
  padding:52px 0 65px;
  border-top:1px solid var(--line)
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.section-heading h2 {
  margin:0
}
.section-heading p {
  font-size:13px;
  color:var(--muted)
}
.project-row {
  display:grid;
  grid-template-columns:48px 1fr 30px;
  gap:24px;
  padding:27px 0;
  border-bottom:1px solid var(--line)
}
.project-number {
  font-size:12px;
  color:var(--muted);
  padding-top:3px
}
.project-row .eyebrow {
  font-size:10px;
  letter-spacing:1px;
  display:block;
  margin-bottom:5px
}
h3 {
  font-weight:400;
  font-size:23px;
  letter-spacing:-.5px;
  line-height:1.3;
  margin:0 0 9px
}
.project-row p {
  font-size:14px;
  max-width:660px;
  color:var(--muted);
  margin:0
}
.row-arrow {
  font-size:24px;
  align-self:center
}
.project-row:hover h3 {
  text-decoration:underline;
  text-underline-offset:5px
}
.contact {
  padding:60px 0 75px
}
.contact h2 {
  margin-bottom:14px
}
.contact p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  max-width:420px;
  margin:0 0 22px
}
.contact-email {
  font-size:clamp(18px,2.5vw,29px);
  letter-spacing:-.7px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px
}
.contact-email span {
  margin-left:15px
}
.footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 0 35px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px
}
.footer nav {
  font-size:11px;
  gap:22px
}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:10px 20px
}
.skip-link:focus {
  top:10px;
  z-index:10
}

@media(max-width:800px) {
  .wrap {
  width:calc(100% - 48px)
}
.intro {
  gap:32px;
  padding:55px 0 60px
}
.portrait img {
  height:410px
}
h1 {
  font-size:58px
}
.desktop-break {
  display:none
}
.section-grid {
  gap:30px;
  grid-template-columns:1fr 2fr
}
.role {
  font-size:16px
}

}

@media(max-width:600px) {
  .masthead {
  padding-block:22px
}
.wordmark {
  font-size:15px
}
nav {
  gap:16px;
  font-size:12px
}
.language-form button {
  padding-left:12px
}
.intro {
  grid-template-columns:1fr;
  padding:42px 0 45px;
  gap:30px
}
h1 {
  font-size:62px;
  letter-spacing:-3px;
  margin-bottom:25px
}
.intro .eyebrow {
  margin-bottom:22px
}
.intro-note {
  max-width:100%
}
.portrait img {
  height:360px;
  object-position:center 32%
}
.section-grid {
  grid-template-columns:1fr;
  gap:10px;
  padding:40px 0
}
.section-grid .eyebrow {
  margin-bottom:12px
}
h2 {
  font-size:31px
}
.section-copy {
  font-size:15px
}
.projects {
  padding:40px 0
}
.section-heading {
  display:block;
  margin-bottom:5px
}
.project-row {
  grid-template-columns:23px 1fr 20px;
  gap:13px;
  padding:24px 0
}
h3 {
  font-size:21px
}
.project-row p {
  font-size:14px
}
.contact-email {
  font-size:21px
}
.footer {
  align-items:flex-start;
  gap:18px;
  flex-direction:column
}
.footer nav {
  gap:24px
}

}

@media(max-width:360px) {
  .wrap {
  width:calc(100% - 32px)
}
.masthead nav {
  gap:10px
}
.wordmark {
  font-size:14px
}
h1 {
  font-size:55px
}
.contact-email {
  font-size:19px
}

}


.legal {
  max-width:800px;
  padding-block:55px
}
.legal h1 {
  font-size:48px;
  margin-bottom:45px
}
.impressum-section {
  margin-bottom:36px
}
.legal h2 {
  font-size:25px;
  margin-bottom:18px
}
.legal h3 {
  font-size:16px;
  line-height:1.6;
  letter-spacing:0
}
.impressum-info-list {
  list-style:none;
  padding:0
}
.legal p,.legal li {
  color:var(--muted);
  font-size:15px
}
.legal a {
  text-decoration:underline;
  text-underline-offset:4px
}


.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.wordmark img { display: block; }
@media (max-width: 360px) { .wordmark { gap: 5px; font-size: 13px; } .wordmark img { width: 20px; height: 20px; } }