/* Shared visual foundations for the portfolio and the reading edition. */
:root{--paper:#fff;--ink:#232829;--muted:#586164;--line:#d9dfdf;--accent:#185c63;--brand-tint:#edf3f3;--font-body:17px;--font-h1:clamp(44px,7vw,96px);--font-h2:clamp(32px,3.5vw,48px);--font-h3:22px;--font-meta:12px;--font-small:14px}
body{font-family:Manrope,"Helvetica Neue",Helvetica,sans-serif;font-size:var(--font-body);font-weight:400;line-height:1.7;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,.cover h1{font-size:var(--font-h1);font-weight:400;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
h2,.chapter h2,.research-layout h2{font-size:var(--font-h2);font-weight:400;letter-spacing:-.025em;line-height:1.2;color:var(--accent)}
h3,.chapter h3,.competency-list h3{font-size:var(--font-h3);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.lead,.cover .subtitle{font-size:clamp(20px,1.7vw,25.6px);font-weight:400;line-height:1.5;letter-spacing:-.015em}
.eyebrow,.chapter-label,.cover .meta{font-size:var(--font-meta);font-weight:500;letter-spacing:.11em;color:var(--accent)}
.header nav a,.toc,.bar{font-size:var(--font-small)}
.toc a,a.text-link,.contact-links a{color:var(--accent)}
.cover,.book-preview,.prototype{background:var(--brand-tint)}
.book-preview-meta,.book-preview-caption,figcaption,.footer,body.brand-book footer{color:var(--muted)}
.hand-mark{color:var(--accent);font-weight:700;padding-bottom:calc(.22em + 3px)}
.hand-mark svg{stroke-width:5}
/* Long-form reading retains a more generous rhythm than portfolio summaries. */
body.brand-book .chapter p{line-height:1.85}
body.brand-book footer{font-size:var(--font-small);background:var(--brand-tint)}
@media(max-width:600px){:root{--font-h1:clamp(36px,9vw,54px);--font-h2:clamp(24px,6.4vw,30px);--font-h3:20px}}
@media print{body{font-size:11pt}}

/* Mobile typography: stronger headings and introductory copy. */
@media screen and (max-width:600px){
  body h2,body .chapter h2,body .research-layout h2{font-weight:700}
  body h3,body .chapter h3,body .competency-list h3{font-weight:600}
  body .lead,body .cover .subtitle{font-weight:600}
}

/* Shared smartphone spacing and proportional keyvisual logos. */
@media screen and (max-width:600px){
  body .project-copy,body .split,
  body .pfotenpass-opening,body .veloris-opening,body .research-opening,
  body .film-opening,body .research-sample-intro,body .case-row{row-gap:1.25rem}
  body .project-copy > h2,body .split > h2,
  body .pfotenpass-opening > h1,body .veloris-opening > h1,
  body .research-opening > h1,body .film-opening > h1,
  body .veloris-opening > h2,body .film-opening > h2,
  body .research-sample-intro > h2{margin-bottom:0}
  body .case-hero h1{font-weight:700}
  body .pfotenpass-keyvisual .pfotenpass-keyvisual-frame > img.pfotenpass-keyvisual-logo,
  #pfotenpass .pfotenpass-keyvisual-frame > img.pfotenpass-keyvisual-logo,
  body .veloris-keyvisual .veloris-keyvisual-frame > img.veloris-keyvisual-logo{
    width:25.2%;min-width:0;max-width:none;height:auto;right:4%;bottom:7%;
  }
}

/* Continuous transition from site header to opening section. */
body .header,body.brand-book .header{border-top:0;border-bottom:0}

/* Blend on the animated group itself: opacity/transform isolate child blending. */
.hero-portrait,.about-portrait,.book-cover-portrait,
.film-drawing,.veloris-role-drawing,.pfotenpass-focus-drawing,.case-process-illustration{
  mix-blend-mode:multiply;
}
.hero-portrait img,.about-portrait img,.book-cover-portrait img,
.film-drawing img,.veloris-role-drawing img,.pfotenpass-focus-drawing img,.case-process-illustration img{
  mix-blend-mode:normal;
}