/* Projects form one continuous column of full-width editorial cards. */
.site-header { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:64px; margin-inline:calc(-1 * var(--page-margin)); padding:16px var(--page-margin); background:var(--color-paper); }
.site-brand { font-size: 23px; font-weight: 700; white-space: nowrap; }
.site-navigation { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.hero { margin-top: 64px; }
.hero__title { height: 80px; position: relative; overflow: visible; }
.title-track { position: relative; height: 100%; font-size: clamp(22px, 5.333vw, 64px); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.title-unit { position: absolute; transform-origin: left center; }
.title-text { display: block; white-space: nowrap; transform-origin: left center; line-height: 1; }
.hero__role { margin: 4px 0 0; color: var(--color-muted); font-size: 30px; line-height: 1; font-weight: 400; }
.hero__divider { height: 1px; background: var(--color-line); border: 0; margin: 32px 0; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--section-gap); }
.project-card--designarchiv { grid-column: 1 / -1; }
.project-card--3d { grid-column: 1; }
.about { --profile-column:34%; --profile-gap:80px; padding: 0 56px; margin-top: 180px; }
.about__intro { display: grid; grid-template-columns: var(--profile-column) minmax(0,1fr); gap: var(--profile-gap); align-items: center; }
.about__portrait { display: block; width:66.6667%; height:313.333px; object-fit:contain; object-position:left center; }
.about h2 { font-size: 32px; margin: 0 0 28px; }
.about__copy p { font-size: 18px; line-height: 1.5; margin: 0 0 24px; }
.about__copy p:last-child { margin-bottom: 0; }
.career { display: grid; grid-template-columns: var(--profile-column) minmax(0,1fr); gap: var(--profile-gap); margin-top: 100px; align-items: start; }
.career h2 { font-size: 28px; }
.career h3 { font-size: 19px; font-weight: 400; margin: 0 0 12px; }
.career article + article { margin-top: 60px; }
.career article p { margin: 0 0 18px; line-height: 1.5; }
.career ul { padding-left: 20px; margin: 0; font-size: 16px; line-height: 1.55; }
/* Centered contact statement with a quiet three-column information row. */
.contact { position:relative; margin-top:100px; padding:100px 0 56px; }
.contact__intro, .contact__columns { width:100%; max-width:760px; margin-inline:auto; }
.contact__intro { text-align:center; }
.contact__eyebrow { display:block; font-size:12px; color:var(--color-muted); margin-bottom:24px; }
.contact h2 { font-family:var(--font-body); font-size:clamp(28px,3.8vw,48px); font-weight:700; line-height:1.08; letter-spacing:-.035em; margin:0; }
.contact__summary { padding:0; margin:8px 0 0; font-size:clamp(22px,2.6vw,32px); font-weight:700; line-height:1.15; letter-spacing:-.03em; color:var(--color-muted); text-wrap:balance; }
.contact__columns { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:28px; margin-top:52px; }
.contact__column { border-top:1px solid var(--color-line); padding-top:14px; min-width:0; font-size:14px; line-height:1.6; }
.contact__label { display:block; font-size:11px; color:var(--color-muted); margin-bottom:10px; }
.contact__column p { margin:0; }
.contact__column a { overflow-wrap:anywhere; }
.contact__meta { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin-top:120px; font-size:12px; color:var(--color-muted); }
.contact__meta p { margin:0; }
@media(max-width:700px) { .contact { padding:64px 0 40px; }  .contact h2 { margin-bottom:0; } .contact__columns { grid-template-columns:1fr; gap:24px; margin-top:36px; } .contact__meta { margin-top:80px; } }
@media (max-width: 900px) {
  .site-brand { font-size: 19px; }
  .site-navigation { gap: 18px; }
  .about { --profile-gap:40px; padding: 0 24px; }
  .about__intro { gap: 40px; }
}
@media (max-width: 700px) {
  .site-header { align-items:center; flex-wrap:wrap; gap:12px; padding-block:14px; }
  .site-navigation { width: 100%; flex-wrap: wrap; gap: 22px; min-height: 30px; font-size: 13px; }
  .hero { margin-top: 42px; }
  .hero__title { height: 55px; }
  .hero__role { font-size: 22px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card--designarchiv, .project-card--3d { grid-column: 1; }
  .about { padding: 0; margin-top: 100px; }
  .about__intro { grid-template-columns: 1fr; gap: 36px; }
  .about__portrait { width:46.6667%; max-width:213.333px; height:auto; margin-inline:auto; object-position:center; }
  .about h2 { font-size: 28px; }
  .about__copy p { font-size: 16px; }
  .career { grid-template-columns: 1fr; gap: 24px; margin-top: 64px; }
  .career h2 { margin: 0; }
}

/* Shared 1px rules sit within existing gaps without moving content. */
.project-card { position:relative; }
.about { --about-inset:56px; --about-gap:180px; position:relative; }
.about::before { content:''; position:absolute; left:0; right:0; top:calc(var(--about-gap) / -2); height:1px; background:var(--color-line); pointer-events:none; }
.career { position:relative; --career-gap:100px; }
.career::before { content:''; position:absolute; left:calc(-1 * var(--about-inset)); right:calc(-1 * var(--about-inset)); top:calc(var(--career-gap) / -2); height:1px; background:var(--color-line); pointer-events:none; }
.contact::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--color-line); pointer-events:none; }
@media(max-width:900px) { .about { --about-inset:24px; } }
@media(max-width:700px) { .about { --about-inset:0px; --about-gap:100px; } .career { --career-gap:64px; } }

/* Legal pages share the portfolio's type and content alignment. */
.legal-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
.legal-links a:hover, .legal-links a:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.detail-legal { margin:80px 0 64px; font-size:12px; color:var(--color-muted); }
.legal-page { max-width:780px; margin:100px 0 120px; }
.legal-page h1 { font-size:clamp(32px,4vw,48px); margin:0 0 56px; }
.legal-page h2 { font-size:clamp(20px,2vw,24px); margin:40px 0 16px; }
.legal-page p { font-size:clamp(16px,1.4vw,18px); line-height:1.65; margin:0 0 20px; }
.legal-page p a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal-notice { padding:20px; border:1px solid var(--color-line); }
.legal-date { color:var(--color-muted); }
.legal-footer { border-top:1px solid var(--color-line); padding:32px 0 56px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-size:12px; color:var(--color-muted); }
.legal-footer p { margin:0; }
@media(max-width:700px) { .legal-page { margin:64px 0 80px; } .contact__meta { align-items:flex-start; } }


/* Clip the pinned footer layer so the preceding page uncovers it on scroll. */
.contact { --color-muted:#b8b9bf; --color-line:#505156; background:#000000; color:#f5f5f7; margin-inline:calc(-1 * var(--page-margin)); padding:0; overflow:clip; clip-path:inset(0); }
.contact::before { display:none; }
.contact__content { padding:100px var(--page-margin) 56px; transform:translateY(var(--footer-offset,0px)); }
@media(max-width:700px) { .contact { padding:0; } .contact__content { padding:64px var(--page-margin) 40px; } }
@media(prefers-reduced-motion:reduce) { .contact__content { transform:none; } }
@media print { .contact { background:white; color:black; } .contact__content { transform:none; } }

/* The headline is revealed by a line mask, directly linked to footer scrolling. */
.contact h2.contact__headline { font-size:clamp(36px,5.6vw,72px); overflow:hidden; padding-bottom:.08em; }
.contact__headline > span { display:block; transform:translateY(var(--footer-title-offset,0%)); }
@media(prefers-reduced-motion:reduce) { .contact__headline > span { transform:none; } }
@media print { .contact__headline > span { transform:none; } }


/* Compact screens replace the desktop links with a full-screen navigation dialog. */
.mobile-menu-toggle { display:none; }
.mobile-menu-toggle, .mobile-navigation__close { width:48px; height:48px; flex:none; border:0; border-radius:50%; background:var(--color-blue); color:white; }
.mobile-menu-toggle { background:transparent; color:var(--color-ink); border-radius:0; width:44px; height:44px; }
.mobile-menu-toggle span { width:24px; height:2px; background:currentColor; }
.mobile-navigation { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border:0; padding:108px clamp(28px,7vw,72px) 40px; background:var(--color-paper); color:var(--color-ink); overflow-y:auto; }
.mobile-navigation::backdrop { background:white; }
.mobile-navigation__close { position:absolute; top:18px; right:clamp(28px,7vw,72px); font-size:32px; }
.mobile-navigation nav { display:grid; margin-top:28px; border-top:1px solid var(--color-line); }
.mobile-navigation nav a { display:block; padding:18px 0; border-bottom:1px solid var(--color-line); font-family:var(--font-body); font-size:28px; line-height:1.2; font-weight:400; letter-spacing:-.02em; }
.mobile-navigation nav a:hover { color:var(--color-blue); }
body:has(.mobile-navigation[open]) { overflow:hidden; }
@media(max-width:1024px) {
  .site-navigation { display:none; }
  .site-header { flex-wrap:nowrap; align-items:center; gap:16px; min-height:60px; padding-block:8px; }
  .mobile-menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
}
@media(max-width:360px) { .site-brand { font-size:17px; } }
@media print { .mobile-menu-toggle, .mobile-navigation { display:none; } }

@media(max-width:700px) {
  .site-header { min-height:56px; padding-block:6px; }
  html { scroll-padding-top:72px; }
}

/* Shared page padding owns compact horizontal alignment. */
@media(max-width:1024px) { .about { padding-inline:0; --about-inset:0px; } }

@media(min-width:701px) and (max-width:1024px) { .title-track { font-size:clamp(42px,5.5vw,56px); } }
@media(max-width:700px) {
  .title-track { font-size:clamp(30px,8.2vw,36px); }
  .hero__title { height:64px; }
}

/* Narrow the reading column for the mobile biography and career sections. */
@media(max-width:700px) {
  .about { padding-inline:16px; --about-inset:16px; }
}


/* Translucent navigation keeps scrolling artwork softly visible beneath the bar. */
.site-header { background:rgb(255 255 255 / .76); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid rgb(220 220 225 / .4); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .site-header { background:rgb(255 255 255 / .96); } }
@media(prefers-reduced-transparency:reduce) { .site-header { background:#ffffff; -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media print { .site-header { background:white; -webkit-backdrop-filter:none; backdrop-filter:none; } }

.skills-list { display:grid; gap:12px; min-width:0; margin:0; font-size:16px; line-height:1.6; }
.skills-list p { margin:0; }