/* A quiet, content-first portfolio. No JavaScript; only small hover transitions. */
: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:'Helvetica Neue',Helvetica,Arial,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 auto;
  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:clamp(38px,11.4vw,62px);
  letter-spacing:-.045em;
  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 auto;
  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
}
.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; } }


/* Refinements (portfolio.2) */
html { scroll-behavior: smooth; }
::selection { background: var(--accent); color: var(--paper); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 em { letter-spacing: -.04em; }
.brand-dot { margin-left: -9px; }
.masthead nav a, .footer nav a { padding-block: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s ease, color .2s ease; }
.masthead nav a:hover, .footer nav a:hover { background-size: 100% 1px; }
.text-link, .contact-email { transition: color .2s ease, border-color .2s ease; }
.text-link:hover, .contact-email:hover { border-color: var(--accent); }
.text-link span, .contact-email span, .row-arrow { display: inline-block; transition: transform .25s ease; }
.text-link[href^="#"]:hover span { transform: translateY(3px); }
.text-link[href^="http"]:hover span, .contact-email:hover span, .project-row:hover .row-arrow { transform: translate(3px, -3px); }
.project-number { font-variant-numeric: tabular-nums; }
.project-row { transition: color .2s ease; }
.project-row:last-child { border-bottom: 0; }
.projects { padding-bottom: 38px; }
.row-meta { display: flex; align-items: center; gap: 22px; align-self: center; }
.row-domain { font-size: 12px; color: var(--muted); letter-spacing: .2px; opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; }
.project-row:hover .row-domain, .project-row:focus-visible .row-domain { opacity: 1; transform: none; }
.project-row h3 { text-decoration: underline transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.project-row:hover h3 { text-decoration-color: currentColor; }
.portrait img { box-shadow: 0 1px 2px rgba(37,45,41,.06), 0 18px 40px -22px rgba(37,45,41,.35); }
@media (max-width: 800px) { .row-domain { display: none; } }
@media (max-width: 600px) { .projects { padding-bottom: 20px; } }
@media (max-width: 360px) { .brand-dot { margin-left: -5px; } }
@media (hover: none) { .row-domain { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media (min-width: 801px) { .intro { grid-template-columns: 1.3fr 1fr; gap: 64px; } h1 { font-size: clamp(50px, 5vw, 70px); letter-spacing: -.045em; } }