/* Tim Herrmann — a single visual system. */
:root {
  --paper:#f4f4ef; --white:#fff; --ink:#171815; --muted:#5e6158;
  --line:#d6d6cc; --yellow:#f5ce21; --yellow-light:#f2e7c9; --radius:8px;
  --gutter:clamp(22px,3.3vw,64px); --content-width:min(85vw,1800px); --header-height:84px;
  --font:'itc-avant-garde-gothic-pro','Avenir Next',Arial,sans-serif;
  --font-display:'afronaut','itc-avant-garde-gothic-pro',sans-serif;
  --ease:cubic-bezier(.22,.7,.24,1);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --section-space:clamp(48px,5.5vw,80px);
  --title-size:clamp(34px,4.6vw,66px);
  --subtitle-size:clamp(24px,2.5vw,34px);
  --body-size:16px; --meta-size:12px; --control-size:44px;
  --motion-fast:180ms; --motion-base:320ms; --motion-reveal:600ms; --motion-data:1000ms;
}
*,*::before,*::after {box-sizing:border-box}
* {margin:0}
html {overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px)}
body {overflow-x:clip;cursor:default;background:var(--paper);color:var(--ink);font:300 16px/1.65 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased}
body.has-overlay {overflow:hidden}
.site-shell {width:100%;background:var(--paper);isolation:isolate}
button,a {-webkit-tap-highlight-color:transparent}
button {color:inherit;font:inherit;cursor:pointer;border:0;background:none}
a {color:inherit;text-decoration:none;cursor:pointer}
img,video {display:block;max-width:100%;height:auto}
h1,h2 {font-family:var(--font-display);font-weight:400;line-height:1.16}
h3,h4 {font-weight:300;line-height:1.2}
strong {font-weight:300}
::selection {background:var(--yellow);color:var(--ink);text-shadow:none}
:focus-visible {outline:3px solid var(--ink);outline-offset:5px;border-radius:3px}
[hidden] {display:none!important}
.container {width:var(--content-width);margin-inline:auto}
.section {padding-block:clamp(80px,9vw,136px)}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link {position:fixed;z-index:50;left:20px;top:-90px;padding:14px 20px;border-radius:var(--radius);background:var(--yellow)}
.skip-link:focus {top:12px}
.eyebrow {display:inline-flex;align-items:center;gap:10px;font-size:11px;line-height:1.3;font-weight:300;text-transform:uppercase;letter-spacing:.12em}
.section-heading {margin-bottom:clamp(40px,5vw,72px)}
.section-title {font-size:clamp(38px,5.7vw,82px);letter-spacing:-.035em;text-transform:uppercase;line-height:1.16;max-width:23ch;text-wrap:balance}
.section-lead {margin-top:22px;color:var(--muted);max-width:43ch;font-size:17px}
.marker {font-weight:300;color:var(--ink);padding:.03em .06em;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-size .5s var(--ease)}
.marker.will-mark {background-size:0 100%}
.marker.is-marked {background-size:100% 100%}
.marker::selection {background:var(--yellow);color:var(--ink)}

/* Text links share the same yellow marker as the navigation, sweeping in from left to right. */
.link-label {
  padding:.03em .06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0 100%;
  transition:background-size .35s var(--ease), color .2s var(--ease);
}
.project-card.is-highlighted .project-name .link-label,
a:hover .link-label,
a:focus-visible .link-label,
button:hover .link-label,
button:focus-visible .link-label {
  background-size:100% 100%;
  color:var(--ink);
}

/* Navigation */
.header {position:sticky;top:0;z-index:30;height:var(--header-height);background:var(--paper)}
.header-inner {display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.brand {display:flex;gap:12px;align-items:center;flex-shrink:0}
.brand img {width:44px;height:44px}
.brand-name {display:block;font-size:17px;font-weight:300;letter-spacing:-.035em;line-height:1.2}
.nav {display:flex;align-items:center;gap:14px}
.nav-link {display:inline-flex;align-items:center;min-height:44px;font-size:13px;padding:8px 3px;white-space:nowrap;letter-spacing:-.02em}
.nav-label {
  padding:.05em .18em;
  line-height:1.3;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0 100%;
  transition:background-size .35s var(--ease), color .2s var(--ease);
}
.nav-link:hover .nav-label,
.nav-link:focus-visible .nav-label,
.nav-link[aria-current] .nav-label {
  background-size:100% 100%;
  color:var(--ink);
}
.nav-contact {gap:10px;margin-left:16px;padding-right:0}
.menu-button {display:none;align-items:center;gap:12px;min-height:44px;padding:0;font-size:13px}
.menu-lines {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:38px;height:38px;border-radius:50%;background:var(--yellow)}
.menu-lines i {display:block;width:16px;background:var(--ink);height:1.5px;transition:transform .2s ease}
.menu-button[aria-expanded='true'] .menu-lines i:first-child {transform:translateY(3.25px) rotate(45deg)}
.menu-button[aria-expanded='true'] .menu-lines i:last-child {transform:translateY(-3.25px) rotate(-45deg)}
.menu-backdrop {display:none}

.button {display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:14px 18px;min-height:48px;border:1px solid var(--line);border-radius:var(--radius);font-size:13px;font-weight:300;transition:background .2s,color .2s,border-color .2s}
.button-primary {background:var(--yellow);border-color:var(--yellow)}
.button-primary:hover {background:var(--ink);color:var(--white);border-color:var(--ink)}
.project-more:not([hidden]) {display:flex;margin:32px auto 0}
.text-link {display:inline-flex;gap:12px;align-items:center;min-height:44px;font-size:13px}
/* Oversized type and small image insets, following the supplied hero reference. */
.hero {min-height:calc(100svh - var(--header-height) - 40px);display:flex;align-items:flex-end;padding:clamp(100px,18svh,200px) 0 22px}
.hero-container {width:calc(100% - clamp(28px,3vw,48px));margin-inline:auto}
.hero-layout {--hero-size:clamp(64px,9.6vw,160px);position:relative;isolation:isolate}
.hero-title {font-family:var(--font-display);font-size:var(--hero-size);font-weight:400;line-height:.91;letter-spacing:-.04em;text-transform:uppercase}
.hero-marker {font-weight:inherit}
@media (min-width:651px) and (max-width:1000px) {
  .hero {min-height:calc(85svh - var(--header-height) - 40px)}
}
@media (max-width:650px) {
  .hero {min-height:calc(88svh - var(--header-height) - 20px);padding:130px 0 12px}
  .hero-container {width:calc(100% - 28px)}
  .hero-layout {--hero-size:13vw}
}

/* Six overlapping paper notes. Native details also work without JavaScript. */
.focus-section {padding-block:64px;background:var(--paper)}
.notes-title {font-family:var(--font);font-weight:300;font-size:clamp(28px,3.1vw,44px);line-height:1.2;letter-spacing:-.035em}
.note-stack {--note-overlap:clamp(28px,3.4vw,52px);display:flex;align-items:start;isolation:isolate;padding-block:48px 30px}
.circle-note {--note-tilt:-3deg;--note-y:6px;position:relative;flex:0 0 calc((100% + 5 * var(--note-overlap)) / 6);aspect-ratio:1;min-width:0;border:1px solid #c7c7ba;border-radius:50%;background:#e7e6dd;transform:translateY(var(--note-y)) rotate(var(--note-tilt));transition:transform .38s var(--ease),background-color .25s,box-shadow .38s var(--ease);color:var(--ink)}
.circle-note+.circle-note {margin-left:calc(-1 * var(--note-overlap))}
.circle-note:nth-child(2) {--note-tilt:4deg;--note-y:19px;background:#efeee7}
.circle-note:nth-child(3) {--note-tilt:-2deg;--note-y:-3px}
.circle-note:nth-child(4) {--note-tilt:3deg;--note-y:15px;background:#efeee7}
.circle-note:nth-child(5) {--note-tilt:-4deg;--note-y:2px}
.circle-note:nth-child(6) {--note-tilt:2deg;--note-y:17px;background:#efeee7}
.circle-note summary {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;list-style:none;border-radius:50%;cursor:pointer;text-align:center;font-size:clamp(17px,1.5vw,24px);line-height:1.2;letter-spacing:-.035em}
.circle-note summary::-webkit-details-marker {display:none}
.circle-note summary span {max-width:74%}
.circle-note summary:focus-visible {outline:3px solid var(--ink);outline-offset:5px}
.circle-note p {position:absolute;top:44%;left:14%;width:72%;text-align:center;font-size:clamp(12px,1vw,15px);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty;pointer-events:none}
.circle-note[open] {z-index:10;background:var(--yellow);border-color:var(--yellow);transform:translateY(-14px) rotate(0deg) scale(1.04);box-shadow:0 12px 18px #17181512}
.circle-note[open] summary {align-items:flex-start}
.circle-note[open] summary span {position:absolute;bottom:60%;max-width:76%}
.circle-note[open] p {animation:note-copy-in .28s var(--ease)}
@keyframes note-copy-in {from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:none}}

/* Selected work */
.work {padding-top:64px;padding-bottom:120px}
.work .section-heading {display:block;margin-bottom:36px;padding-top:20px;border-top:1px solid var(--ink)}
.work .section-lead {margin:16px 0 0;font-size:clamp(17px,1.45vw,21px);max-width:none;color:var(--ink)}
.work .section-title {font-size:clamp(70px,8.2vw,120px);line-height:.9;max-width:none;letter-spacing:-.04em}

.project-toolbar {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 12px;margin-bottom:0;border-bottom:1px solid var(--ink)}
.project-filters {display:flex;flex-wrap:wrap;gap:12px 28px}
.filter-button {position:relative;min-height:44px;padding:9px 0;font-size:13px;color:var(--muted);transition:color .2s}
.filter-button::after {content:"";position:absolute;left:0;right:0;bottom:-13px;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.filter-button:hover {color:var(--ink)}
.filter-button[aria-pressed='true'] {color:var(--ink)}
.filter-button[aria-pressed='true']::after {transform:scaleX(1)}
.filter-button sup {margin-left:5px;font-size:9px;color:var(--muted)}
.project-view {display:flex;align-items:center;gap:2px;border-left:1px solid var(--ink);padding-left:20px}
.project-view button {min-height:38px;padding:8px 13px;font-size:13px;color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s}
.project-view button:hover {color:var(--ink)}
.project-view button[aria-pressed="true"] {background:var(--yellow);color:var(--ink)}
.project-view button::before {content:none}
.project-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch}
.project-card {display:grid;grid-template-columns:minmax(128px,.72fr) minmax(0,1.65fr);gap:24px;min-width:0;padding:30px 30px 30px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.project-card:nth-child(even) {padding-inline:30px 0;border-left:1px solid var(--line)}
.project-card:nth-child(n),.project-grid.is-filtered .project-card {grid-column:auto;padding-top:30px}
.project-media {grid-column:2;display:flex;align-self:start;align-items:flex-start;justify-content:center;position:relative;width:100%;min-width:0;min-height:0;overflow:hidden;background:transparent}
.project-media img,.project-card:nth-child(7n + 1) .project-media img,.project-media.photo-media img {display:block;width:68%;height:auto;max-width:68%;max-height:none;aspect-ratio:auto;object-fit:contain;padding:0;background:#e9e9e2;border-radius:0}
.project-caption {grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;max-width:none;padding:0}
.project-caption-top {display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.project-name {font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(25px,2.2vw,36px);letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.project-index {order:-1;display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.project-index::after {content:"";width:28px;height:1px;background:var(--ink)}
.project-desc {max-width:92%;margin-top:14px;color:var(--ink);font-size:13px;line-height:1.5}
.project-bottom {display:flex;flex-direction:column;margin-top:auto;padding-top:22px;border-top:0}
.project-type {font-size:10px;color:var(--muted)}
.project-links {display:flex;align-items:center;justify-content:flex-start;gap:4px 14px;flex-wrap:wrap;margin-top:12px}
.project-story-link {display:inline-flex;align-items:center;font-size:12px;min-height:38px}
.project-story-link span[aria-hidden="true"] {transition:transform .25s var(--ease)}
.project-story-link:hover span[aria-hidden="true"] {transform:translate(3px,-3px)}

/* Personal story */
.about {background:var(--paper)}
.about-grid {display:grid;grid-template-columns:1fr 1.5fr;align-items:start;gap:clamp(45px,8vw,100px)}
.about-text {display:grid;gap:24px;font-size:clamp(20px,2.2vw,30px);line-height:1.45;letter-spacing:-.025em}
.strengths {margin-top:80px}

/* Capabilities and process */
.skills {background:var(--white);padding-block:clamp(30px,5svh,54px);overflow:clip}
.skills-heading {display:flex;justify-content:space-between;align-items:baseline;gap:28px;margin-bottom:24px}
.skills-heading .section-title {font-size:clamp(38px,4.6vw,66px);max-width:none;line-height:1}
.workflow-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:36px 0 0}
@media (min-width:651px) {
  .workflow-steps {grid-template-columns:repeat(6,minmax(0,1fr))}
  .workflow-step {grid-column:span 2}
  .workflow-step:nth-child(odd) {grid-row:1}
  .workflow-step:nth-child(even) {grid-row:2}
  .workflow-step:nth-child(2) {grid-column:2 / span 2}
  .workflow-step:nth-child(4) {grid-column:4 / span 2}
  .workflow-step:nth-child(n+2):nth-child(-n+4) {text-align:center}
  .workflow-step:nth-child(n+2):nth-child(-n+4) p {margin-inline:auto}
  .process .workflow-step:nth-child(n+2):nth-child(-n+4) .step-number {left:50%;transform:translateX(-50%)}
  .workflow-step:last-child {text-align:right}
  .workflow-step:last-child p {margin-left:auto}
  .process .workflow-step:last-child .step-number {left:auto;right:0}
}
.workflow-step {position:relative}
.step-number {display:grid;place-items:center;width:62px;height:62px;border:1px solid var(--ink);border-radius:50%;font-size:16px;background:transparent;transition:background-color .2s ease,border-color .2s ease}
.workflow-step:hover .step-number {background:var(--yellow);border-color:var(--yellow)}
.workflow-step p {font-size:14px;color:var(--muted);max-width:19ch;margin-top:8px}

/* Education */
.profile {background:var(--paper)}
.timeline {list-style:none;padding:0}
.timeline-entry {display:grid;grid-template-columns:130px 12px minmax(0,1fr);gap:28px;padding:28px 0;border-top:0}
.timeline-entry:first-child {border-top:0;padding-top:0}
.timeline-date {color:var(--muted);font-size:11px;padding-top:3px}
.timeline-entry h3 {font-size:21px;letter-spacing:-.03em}
.timeline-body {display:grid;grid-template-columns:1fr 1fr;gap:6px 48px;align-items:start}
.entry-text {grid-column:2;grid-row:1/3;margin-top:0;font-size:14px;color:var(--muted);max-width:40ch}

/* Application dossier */
.documents {background:var(--white)}
.documents .section-title {max-width:12ch}
.document-list {display:grid;border-top:0}
.document-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:30px 0;border-bottom:0}
.document-icon {width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:10px;font-weight:300;transition:background-color .25s,border-color .25s}
.document-row:hover .document-icon,.document-row:focus-within .document-icon {background:var(--yellow);border-color:var(--yellow)}
.document-row h3 {font-size:23px;letter-spacing:-.035em}
.document-row p {color:var(--muted);font-size:12px;margin-top:7px}
.document-actions {display:flex;gap:15px;align-items:center}
.download-link {display:grid;place-items:center;width:auto;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:12px;transition:background .2s}
.download-link:hover {background:var(--yellow);border-color:var(--yellow)}

/* Invitation */
.contact {background:var(--paper);color:var(--ink)}
.contact-top {display:flex;align-items:center;justify-content:space-between;gap:40px}
.contact-title {text-transform:uppercase;font-size:clamp(60px,10vw,144px);line-height:1.1;letter-spacing:-.02em;max-width:12ch}


.contact-lead {margin-top:28px;max-width:41ch;font-size:16px;color:var(--muted)}
.contact-grid {margin-top:62px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.contact-item {padding-top:20px;border-top:0;min-width:0}
.contact-label {display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:13px}
.contact-hint {opacity:.65;font-weight:300;text-transform:none;letter-spacing:0}
.contact-value {font-size:clamp(15px,1.6vw,22px);letter-spacing:-.025em;overflow-wrap:anywhere}
a.contact-value, button.contact-value {
  display:inline-block;
  width:fit-content;
  text-decoration:none;
  text-align:justify;
  text-align-last:justify;
  text-justify:inter-character;
  padding:.03em .06em;
  margin:-.03em -.06em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0 100%;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  transition:background-size .35s var(--ease);
}
a.contact-value:hover,
a.contact-value:focus-visible,
button.contact-value:hover,
button.contact-value:focus-visible,
button.contact-value.is-copied {
  text-decoration:none;
  background-size:100% 100%;
}
.footer {background:var(--paper);color:var(--muted);font-size:11px}
.footer-inner {display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:0;padding-block:25px}
.footer-links {display:flex;flex-wrap:wrap;gap:12px 26px}

/* A compact index of the same projects, with the same accessible links. */
.project-grid.is-index {display:block}
.project-grid.is-index .project-card:nth-child(n) {display:grid;grid-template-columns:72px minmax(200px,1fr) minmax(240px,2.05fr);gap:24px;align-items:center;padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
.project-grid.is-index .project-media {grid-column:1;width:72px;min-height:64px;background:#e9e9e2}
.project-grid.is-index .project-media img,.project-grid.is-index .project-card:nth-child(7n + 1) .project-media img {width:auto;height:auto;max-width:72px;max-height:64px;aspect-ratio:auto;object-fit:contain;padding:0}
.project-grid.is-index .project-caption {display:contents}
.project-grid.is-index .project-caption-top {grid-column:2;display:flex;flex-direction:row;align-items:center;gap:16px}
.project-grid.is-index .project-index {display:block;order:-1;font-size:10px}
.project-grid.is-index .project-index::after {content:none}
.project-grid.is-index .project-name {font-size:24px}
.project-grid.is-index .project-desc {grid-column:3;margin:0;font-size:13px}
.project-grid.is-index .project-bottom {grid-column:4;border:0;padding:0;margin:0}
.project-grid.is-index .project-type {display:none}
.project-grid.is-index .project-links {margin:0;justify-content:flex-end;gap:6px 18px}

/* Project pages: finished work and the decisions behind it. */
.case-nav {display:flex;align-items:center;gap:24px}
.case-nav .nav-link:not(.nav-contact) {gap:6px}
.case-heading {padding-block:62px 48px}
.case-number {font-family:var(--font-display);font-size:clamp(76px,9vw,140px);line-height:1;letter-spacing:-.06em;color:#e2e2d8}
.case-title {font-size:clamp(54px,8.1vw,120px);text-transform:uppercase;letter-spacing:-.025em;line-height:1.1;max-width:20ch;overflow-wrap:anywhere;text-wrap:balance}
.case-summary {margin:26px 0 0 34%;font-size:22px;max-width:44ch;color:var(--muted)}
.case-overview {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(42px,7vw,105px);align-items:center}
.case-cover {min-width:0;width:90%;margin:0 auto}
.case-cover a {display:flex;position:relative;justify-content:center;align-items:center;padding:36px;background:#eeeee7;border-radius:var(--radius)}
.case-cover img {width:auto;max-height:648px;max-width:100%;border-radius:3px}
.case-cover video {width:100%;height:auto;background:var(--ink);border-radius:var(--radius)}
.case-cover figcaption,.case-page-figure figcaption {font-size:12px;color:var(--muted);margin-top:14px}
.case-information {padding-top:6px}
.case-goal {font-size:clamp(21px,2vw,28px);line-height:1.4;letter-spacing:-.02em;margin-top:24px}
.case-facts {display:grid;gap:22px;margin-block:32px}
.case-facts>div {border-top:0;padding-top:18px}
.case-facts dt {font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-facts dd {font-size:16px;margin-top:8px}
.case-story {width:fit-content;max-width:var(--content-width);display:grid;grid-template-columns:minmax(0,52ch) minmax(0,max-content);gap:clamp(64px,8vw,144px);align-items:start;padding-block:100px}
.case-story>.eyebrow {padding-top:13px}
.case-story h2 {text-transform:uppercase;font-size:clamp(34px,4vw,56px);letter-spacing:-.02em}
.case-decisions {list-style:none;padding:0;margin-top:34px;max-width:60ch}
.case-decisions li {position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(90px,9vw,140px);padding-block:24px}
.case-decisions li>span {position:absolute;z-index:-1;left:0;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:clamp(90px,9vw,140px);line-height:1;letter-spacing:-.06em;color:#e2e2d8;pointer-events:none}
.case-decisions p {font-size:19px;line-height:1.5}
.case-gallery {padding-block:64px;background:#eeeee7}
.case-gallery-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:40px}
.case-pages {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px;align-items:start}
.case-page-figure img {width:100%;height:auto;border-radius:var(--radius);background:var(--white)}
.case-back {display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:44px}
.case-next {padding-block:72px;background:var(--paper);color:var(--ink)}
.case-next-link {display:flex;justify-content:space-between;gap:45px;align-items:center;padding-block:40px}
.case-next-link>div {min-width:0}
.case-next-link>div>span {font-size:12px;color:var(--muted)}
.case-next-link h2 {text-transform:uppercase;font-size:clamp(36px,5.3vw,78px);letter-spacing:-.025em;overflow-wrap:anywhere;margin-top:16px;max-width:20ch}
.case-next-link p {font-size:14px;color:var(--muted);margin-top:16px}
.case-previous {display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--muted)}

/* Only selected text blocks enter. Project images are always visible. */
.will-reveal {opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.will-reveal.is-visible {opacity:1;transform:none}
@media (hover:hover) {
}
@media (max-width:650px) {
  .work .section-lead {margin:20px 0 0 20%;font-size:15px;max-width:28ch}
}

@media (max-width:1100px) {
  .nav {gap:8px}.nav-link {font-size:12px}.nav-contact {margin-left:8px}
  .brand img {width:38px;height:38px}.brand-name {font-size:15px}

  .project-grid {gap:60px 28px}.project-media img {max-height:340px}
  .project-card:nth-child(7n + 1) .project-media img {max-height:400px}
  .project-media.photo-media img {max-height:390px}
  .note-stack {--note-overlap:40px;flex-wrap:wrap;row-gap:36px}
  .circle-note {flex-basis:calc((100% + 2 * var(--note-overlap)) / 3)}
  .circle-note:nth-child(3n + 1) {margin-left:0}
  .circle-note summary {font-size:24px}.circle-note p {font-size:15px}
  .project-view {padding-left:10px}.project-view button {font-size:12px;padding-inline:6px}
  .filter-button {font-size:12px;padding-inline:10px}
}
@media (max-width:900px) {
  :root {--header-height:76px}
  .menu-button {display:flex;position:relative;z-index:32}
  .nav {display:none;position:absolute;top:100%;right:0;width:min(100%,420px);max-height:calc(100dvh - var(--header-height) - 20px);background:var(--paper);padding:24px var(--gutter) 36px;flex-direction:column;align-items:stretch;gap:6px;overflow-y:auto}
  .nav.is-open {display:flex}
  .nav .nav-link {min-height:52px;font-size:24px;letter-spacing:-.04em;padding:8px 0}
  .nav .nav-contact {justify-content:space-between;margin:16px 0 0;gap:18px}
  .menu-backdrop.is-open {display:block;position:fixed;z-index:29;inset:0;background:rgba(23,25,20,.3)}




  .project-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 28px}
  .project-card:nth-child(n) {grid-column:auto;padding-top:0}
  .project-card:nth-child(even) {padding-top:60px}
  .project-grid.is-filtered .project-card {grid-column:auto;padding-top:0}
  .about-grid {gap:44px;grid-template-columns:1fr 1.4fr}
  .project-toolbar {flex-wrap:wrap;gap:8px}.project-view {margin-left:auto}
  .project-grid.is-index .project-card:nth-child(n) {grid-template-columns:60px minmax(0,1fr) minmax(0,1fr);gap:20px}
  .project-grid.is-index .project-media {width:60px;grid-row:1/3}
  .project-grid.is-index .project-media img {max-width:60px}
  .project-grid.is-index .project-caption-top {grid-column:2}
  .project-grid.is-index .project-desc {grid-column:3;grid-row:1/3}
  .project-grid.is-index .project-bottom {grid-column:2}
  .project-grid.is-index .project-name {font-size:21px}
  .workflow-steps {gap:18px}
  .timeline-entry {grid-template-columns:78px 9px minmax(0,1fr);gap:14px}
  .document-actions {gap:8px}
  .contact-grid {grid-template-columns:1.3fr 1fr}
  .case-overview {gap:36px}.case-information {position:static}.case-cover a {padding:24px}
  .case-goal {font-size:23px}.case-summary {margin-left:28%;font-size:20px}.case-story {gap:clamp(40px,6vw,64px)}
}
@media (max-width:650px) {
  :root {--gutter:22px}.section {padding-block:74px}










  .focus-section {padding-block:42px}
  .section-heading {margin-bottom:42px}
  .section-title {font-size:clamp(34px,9.4vw,50px);max-width:23ch}.section-lead {margin-top:18px;font-size:15px}
  .work {padding-block:48px 70px}.work .section-title {font-size:clamp(44px,11.6vw,76px)}
  .work .section-heading {margin-bottom:24px}
  .note-stack {--note-overlap:28px;row-gap:26px}
  .circle-note:nth-child(n) {flex-basis:calc((100% + var(--note-overlap)) / 2);margin-left:calc(-1 * var(--note-overlap))}
  .circle-note:nth-child(2n + 1) {margin-left:0}
  .circle-note summary {font-size:22px}.circle-note p {font-size:14px}
  .project-toolbar {align-items:start;flex-direction:column;gap:4px;margin-bottom:32px;padding:10px 0}
  .project-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .filter-button {font-size:12px;text-align:left}
  .project-view {border:0;padding:0;margin-left:0;gap:10px}.project-view button {font-size:12px}
  .project-grid {grid-template-columns:minmax(0,1fr);gap:54px}
  .project-card:nth-child(n),.project-grid.is-filtered .project-card {grid-column:auto;padding-top:0}
  .project-media {min-height:100px;max-width:90%}
  .project-media img,.project-card:nth-child(7n + 1) .project-media img {max-height:350px}
  .project-media.photo-media img {max-height:400px}
  .project-card:nth-child(even) .project-media {margin-left:auto}
  .project-caption {max-width:90%}.project-card:nth-child(even) .project-caption {margin-left:auto}
  .project-name {font-size:25px}.project-index {font-size:16px}.project-desc {font-size:15px}
  .project-bottom {margin-top:15px}.project-type {font-size:12px}
  .project-links {gap:6px 12px}.project-story-link {font-size:14px}
  .project-grid.is-index .project-card:nth-child(n) {grid-template-columns:58px minmax(0,1fr);gap:8px 18px;padding:24px 0}
  .project-grid.is-index .project-media {grid-column:1;grid-row:1/4;margin:0;width:58px;max-width:58px}
  .project-grid.is-index .project-media img {max-width:58px;max-height:90px}
  .project-grid.is-index .project-caption-top,.project-grid.is-index .project-desc,.project-grid.is-index .project-bottom {grid-column:2;grid-row:auto}
  .project-grid.is-index .project-name {font-size:21px}.project-grid.is-index .project-desc {font-size:14px}
  .about-grid {grid-template-columns:minmax(0,1fr);gap:38px}.about-text {font-size:22px}
  .strengths {margin-top:58px}
  .skills {padding-block:24px}
  .skills-heading {display:block;margin-bottom:18px}
  .skills-heading .section-title {font-size:clamp(30px,9vw,42px)}
  .workflow-steps {grid-template-columns:minmax(0,1fr);gap:20px;padding-top:28px}
  .workflow-step {display:grid;grid-template-columns:50px 1fr;column-gap:18px;align-items:center}
  .workflow-step p {grid-column:2;max-width:28ch;margin-top:4px;font-size:14px}
  .step-number {width:46px;height:46px;font-size:13px;grid-row:1/3}
  .timeline-entry {grid-template-columns:9px minmax(0,1fr);gap:7px 16px;padding-block:22px}
  .timeline-date {grid-column:2;padding:0}.timeline-body {grid-column:2}.timeline-entry h3 {font-size:21px}
  .timeline-body {display:block}.entry-text {margin-top:9px;font-size:13px}
  .document-row {grid-template-columns:minmax(0,1fr);gap:16px;padding:25px 0}
  .document-icon {width:40px;height:40px;font-size:9px}.document-row h3 {font-size:21px}
  .document-actions {grid-column:1;justify-content:space-between}.document-actions .button {padding:11px 14px;font-size:12px}.document-row p {font-size:12px}
  .contact-top {gap:15px;align-items:end}.contact-title {font-size:clamp(38px,9vw,60px)}
  .contact-lead {font-size:15px}.contact-grid {grid-template-columns:minmax(0,1fr);gap:23px;margin-top:38px}.contact-value {font-size:23px}
  .footer-inner {font-size:11px;gap:14px}.footer-links {gap:18px}
  .case-nav {gap:18px}.case-nav a:last-child {display:none}
  .case-heading {padding-block:34px 32px}
  .case-title {font-size:clamp(38px,10.5vw,64px);line-height:1.12}.case-summary {font-size:18px;margin:20px 0 0}
  .case-overview {grid-template-columns:minmax(0,1fr);gap:32px}.case-cover a {padding:22px}.case-cover img {max-height:59svh}
  .case-cover figcaption,.case-page-figure figcaption {font-size:11px}.case-goal {font-size:23px}.case-facts {gap:20px;margin-block:26px}.case-facts dd {font-size:15px}
  .case-story {display:block;padding-block:64px}.case-story>.eyebrow {padding:0;margin-bottom:26px}.case-story h2 {text-transform:uppercase;font-size:36px}.case-decisions {margin-top:28px}.case-decisions p {font-size:17px}
  .case-gallery {padding-block:40px}.case-gallery-heading {align-items:start;flex-direction:column;gap:10px;margin-bottom:28px}.case-pages {grid-template-columns:minmax(0,1fr);gap:36px}
  .case-back {padding-block:28px;gap:4px}.case-next {padding-block:46px}.case-next-link {gap:18px;padding-block:30px}
  .case-next-link h2 {text-transform:uppercase;font-size:36px}.case-next-link p {font-size:13px}
}
@media (max-width:650px) and (max-height:740px) {
  .skills {padding-block:16px}
  .skills-heading {margin-bottom:12px}
  .skills-heading .section-title {font-size:30px}
}
@media (max-width:650px) and (max-height:620px) {
  .skills {padding-block:12px}
  .skills-heading {margin-bottom:10px}
  .skills-heading .section-title {font-size:28px}
}
@media (max-width:540px) {
  .note-stack {flex-direction:column;flex-wrap:nowrap;row-gap:0;padding-block:36px 24px}
  .circle-note:nth-child(n) {flex:none;width:min(calc(100% - 28px),280px);margin-left:0;align-self:flex-start}
  .circle-note:nth-child(even) {align-self:flex-end}
  .circle-note+.circle-note {margin-top:-44px}
  .circle-note summary {font-size:21px}
}
@media (max-width:370px) {
  :root {--gutter:19px}.header-inner {gap:12px}.brand {gap:10px}.brand img {width:32px;height:32px}.brand-name {font-size:14px}
  .button {gap:15px;padding:12px 14px;font-size:12px}.text-link {font-size:12px}
  .project-media img,.project-card:nth-child(7n + 1) .project-media img {max-height:310px}.project-media.photo-media img {max-height:350px}
  .project-name {font-size:23px}.project-desc {font-size:14px}.project-story-link {font-size:13px}
  .case-nav {font-size:11px}.case-body .brand-name {font-size:14px}
}
@media (max-width:1100px) {
  .project-grid:not(.is-index) {grid-template-columns:minmax(0,1fr);gap:0}
  .project-grid:not(.is-index) .project-card:nth-child(n) {display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.6fr);gap:30px;padding:30px 0;border-left:0}
  .project-grid:not(.is-index) .project-media {grid-column:2;width:100%;max-width:none;min-height:300px;margin:0}
  .project-grid:not(.is-index) .project-caption {grid-column:1;grid-row:1;width:auto;max-width:none;margin:0}
  .project-grid.is-index .project-card:nth-child(n) {grid-template-columns:64px minmax(180px,.8fr) minmax(220px,1.2fr);gap:20px}
  .project-grid.is-index .project-media {width:64px}
  .project-grid.is-index .project-media img,.project-grid.is-index .project-card:nth-child(7n + 1) .project-media img {width:64px}
  .project-grid.is-index .project-caption-top {grid-column:2}
  .project-grid.is-index .project-desc {grid-column:3;grid-row:1/3}
  .project-grid.is-index .project-bottom {grid-column:2;grid-row:2}
  .project-grid.is-index .project-links {justify-content:flex-start}
}
@media (max-width:650px) {
  .work {padding-block:58px 84px;overflow:clip}
  .work .section-heading {margin-bottom:30px;padding-top:16px}
  .work .section-title {font-size:clamp(58px,17vw,82px)}
  .work .section-lead {margin:16px 0 0;font-size:16px;max-width:30ch}
  .project-toolbar {align-items:stretch;gap:10px;padding-bottom:10px;overflow:hidden}
  .project-filters {display:flex;flex-wrap:nowrap;gap:20px;width:100%;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .project-filters::-webkit-scrollbar {display:none}
  .filter-button {flex:0 0 auto;padding-inline:0;white-space:nowrap}
  .filter-button::after {bottom:-11px}
  .project-view {align-self:flex-start;margin:0;padding:0;border-left:0}
  .project-view button {font-size:12px}
  .project-grid:not(.is-index) .project-card:nth-child(n) {display:flex;flex-direction:column;gap:20px;padding:28px 0;border-left:0}
  .project-grid:not(.is-index) .project-media {order:0;width:100%;max-width:none;min-height:0;margin:0}
  .project-grid:not(.is-index) .project-media img,.project-grid:not(.is-index) .project-card:nth-child(7n + 1) .project-media img,.project-grid:not(.is-index) .project-media.photo-media img {width:68%;height:auto;max-width:68%;max-height:none;aspect-ratio:auto}
  .project-grid:not(.is-index) .project-caption {order:1;width:100%;max-width:none;margin:0}
  .project-caption-top {gap:8px}
  .project-name {font-size:30px}
  .project-desc {margin-top:10px;font-size:14px}
  .project-bottom {margin-top:18px;padding-top:0}
  .project-links {margin-top:8px}
  .project-grid.is-index .project-card:nth-child(n) {grid-template-columns:54px minmax(0,1fr);gap:8px 16px;padding:18px 0}
  .project-grid.is-index .project-media {grid-column:1;grid-row:1/4;width:54px;min-height:62px;margin:0}
  .project-grid.is-index .project-media img,.project-grid.is-index .project-card:nth-child(7n + 1) .project-media img {width:auto;height:auto;max-width:54px;max-height:62px}
  .project-grid.is-index .project-caption-top,.project-grid.is-index .project-desc,.project-grid.is-index .project-bottom {grid-column:2;grid-row:auto}
  .project-grid.is-index .project-caption-top {gap:10px}
  .project-grid.is-index .project-name {font-size:21px}
  .project-grid.is-index .project-desc {font-size:13px}
}
/* Shared visual rules for the overview, project pages and dialogs.
   Compact data views retain their density; heading levels and surfaces do not vary by chapter. */
body {line-height:1.55}
.hero-layout {--hero-size:clamp(64px,8.5vw,144px)}
.hero {overflow:clip}
.hero-container {width:var(--content-width)}
.section,.focus-section {
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  padding-block:calc(var(--header-height) + 24px) 48px;
}
.section>.container,.focus-section>.container {
  margin-block:auto;
}
.case-story,.case-gallery,.case-next {padding-block:var(--section-space)}
.work,.about,.focus-section,.skills,.profile,.documents,.contact,.strengths,.case-gallery,.case-next {background:var(--paper)}
.section-title,.work .section-title,.skills-heading .section-title,.contact-title {font-size:var(--title-size);line-height:1.1;letter-spacing:-.035em;text-transform:uppercase}
.section-heading,.work .section-heading,.skills-heading {margin-bottom:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--ink)}
.about-grid,.contact-top {padding-top:var(--space-3);border-top:1px solid var(--ink)}
.section-lead,.work .section-lead,.skills-heading .section-lead,.contact-lead {font-size:var(--body-size);line-height:1.55;color:var(--muted);margin:var(--space-2) 0 0;max-width:44ch}
.skills-heading .section-lead {margin:0}
.notes-title,.case-story h2 {font-family:var(--font);font-size:var(--subtitle-size);line-height:1.2;font-weight:300;letter-spacing:-.035em;text-transform:none}
.about-text {font-size:clamp(20px,2vw,28px);line-height:1.5;gap:var(--space-3)}
.strengths {margin-top:0}
.note-stack {padding-block:var(--space-4)}
.circle-note:nth-child(n) {--note-tilt:0deg;--note-y:0px;background:var(--white);border-color:var(--line);box-shadow:none;transition:transform var(--motion-base) var(--ease),background-color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.circle-note[open] {background:var(--yellow);border-color:var(--yellow);transform:translateY(-6px) scale(1.02);box-shadow:none}
.circle-note summary {font-size:clamp(18px,1.5vw,24px)}
.circle-note p {font-size:clamp(12px,1vw,15px);line-height:1.45}
.menu-lines,.step-number,.document-icon {width:var(--control-size);height:var(--control-size);min-width:var(--control-size);border-radius:50%;border:1px solid var(--ink);background:transparent;transition:background-color var(--motion-fast) var(--ease),transform var(--motion-base) var(--ease)}
.menu-button[aria-expanded='true'] .menu-lines,.menu-button:hover .menu-lines,.document-row:hover .document-icon,.document-row:focus-within .document-icon,.workflow-step:hover .step-number {background:var(--yellow);border-color:var(--ink)}
.document-row h3,.timeline-entry h3 {font-size:clamp(20px,1.8vw,26px);letter-spacing:-.035em}
.project-desc,.entry-text,.document-row p,.case-cover figcaption,.case-page-figure figcaption {font-size:14px;line-height:1.55}
.project-grid:not(.is-index) .project-card:nth-child(n) {grid-template-columns:minmax(180px,1fr) minmax(0,1.3fr)}
.project-name {font-size:clamp(22px,1.9vw,30px);overflow-wrap:normal;hyphens:none}
.project-type,.project-index,.timeline-date,.contact-label,.case-facts dt {font-size:var(--meta-size);line-height:1.5}
.project-story-link,.footer-inner,.download-link,.button,.text-link {font-size:13px}
.button,.download-link {min-height:var(--control-size);border-radius:var(--radius);border-color:var(--line);padding:12px 16px}
.button:hover,.download-link:hover {background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.document-row,.timeline-entry {padding-block:var(--space-3);border-bottom:1px solid var(--line)}
.document-row:first-child {border-top:1px solid var(--line)}
.skills {padding-block:var(--space-3)}
.skills-heading {margin-bottom:var(--space-2)}
.case-heading {padding-block:var(--section-space) var(--space-4)}
.case-title {font-size:clamp(44px,6.5vw,96px);line-height:1.1;letter-spacing:-.035em}
.case-summary {font-size:clamp(18px,1.7vw,24px);line-height:1.5;margin-top:var(--space-3)}
.case-cover a,.case-page-figure img {background:var(--white)}
.case-goal,.case-facts dd,.case-decisions p {font-size:clamp(17px,1.5vw,22px);line-height:1.55}
.case-next-link h2 {font-size:var(--title-size);line-height:1.1}
.case-gallery-heading {margin-bottom:var(--space-4)}
.will-reveal {transition:opacity var(--motion-reveal) var(--ease),transform var(--motion-reveal) var(--ease)}
.link-label,.nav-label {transition:background-size .35s var(--ease),color var(--motion-fast) var(--ease)}
.marker {transition:background-size var(--motion-reveal) var(--ease)}
@media (min-width:651px) and (max-width:1000px) {
  .hero-layout {--hero-size:8.8vw}
}
@media (max-width:650px) {
  :root {--section-space:48px;--title-size:clamp(30px,9vw,42px);--subtitle-size:26px}
  .section-heading,.work .section-heading,.skills-heading {padding-top:var(--space-2);margin-bottom:var(--space-3)}
  .about-grid,.contact-top {padding-top:var(--space-2)}
  .section-lead,.work .section-lead,.contact-lead {font-size:15px;margin-top:12px}
  .note-stack {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-block:var(--space-3)}
  .circle-note:nth-child(n) {width:100%;margin:0;transform:none;align-self:auto}
  .circle-note summary {font-size:18px}.circle-note p {font-size:12px;line-height:1.35;left:12%;width:76%;top:42%}
  .circle-note[open] summary span {bottom:64%}
  .skills {padding-block:16px}
  .skills-heading {margin-bottom:12px}
  .project-type,.project-index {font-size:12px}
  .hero-layout {--hero-size:13vw}
  .project-name {font-size:28px;overflow-wrap:anywhere}
  .case-summary {margin-left:0}
}
@media (max-width:370px) {
  .circle-note summary {font-size:16px}.circle-note p {font-size:11px}
}
@media (max-width:650px) and (max-height:620px) {
  .skills {padding-block:8px}.skills-heading {padding-top:8px;margin-bottom:8px}
  .skills-heading .section-title {font-size:28px}
}
.about-portrait img {width:100%;height:auto}
/* One continuous text flow: equal type size, natural wrapping, name-only marker. */
.hero {padding:clamp(32px,5svh,64px) 0 24px;min-height:calc(100svh - var(--header-height) - 40px)}
.hero-layout {display:block;min-height:0}
.hero-title {display:block;position:relative;font-family:var(--font-display);font-size:clamp(28px,7vw,120px);line-height:1.16;letter-spacing:-.04em;word-spacing:.12em;text-transform:uppercase;text-align:justify;text-justify:inter-word;white-space:normal;text-wrap:wrap}
.hero-title>a,.hero-title>.hero-marker {display:inline;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:normal}
.hero-title a {text-decoration:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0 100%;transition:background-size .35s var(--ease),color var(--motion-fast) var(--ease)}
.hero-title a:is(:hover,:focus-visible,.is-highlighted) {text-decoration:none;background-size:100% 100%;color:var(--ink)}
.hero-title>.hero-marker {background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:650px) {
  .hero {min-height:calc(100svh - var(--header-height) - 20px);padding:40px 0 16px}
  .hero-title {font-size:clamp(28px,7.8vw,50px);line-height:1.25}
}
/* Sections and projects are separated by whitespace, without divider rules. */
.project-card {position:relative;isolation:isolate}
.project-name a::after {content:"";position:absolute;inset:0;z-index:1}
.project-card .project-index {position:absolute;z-index:-1;left:0;bottom:12px;display:block;font-family:var(--font-display);font-size:clamp(120px,14vw,220px);font-weight:400;line-height:1;letter-spacing:-.06em;color:#e2e2d8;pointer-events:none;user-select:none}
.project-grid.is-index .project-index {font-size:clamp(64px,7vw,100px);left:80px;bottom:0}
@media (max-width:650px) {
  .project-card .project-index {font-size:clamp(140px,42vw,230px);bottom:20px}
  .project-grid.is-index .project-index {font-size:72px;bottom:0}
}
.section-heading,.work .section-heading,.skills-heading,.about-grid,.contact-top,
.project-toolbar,.project-view,.project-card:nth-child(n),.document-row:nth-child(n),
.timeline-entry {border:0}
.project-index::after,.filter-button::after {content:none}
.filter-button sup {display:none}
.filter-button[aria-pressed='true'] {background:var(--yellow)}
.profile .timeline-entry {display:block;padding-block:16px}
.profile .timeline-body {display:block}
.profile .timeline-date {margin-top:6px;padding:0}

/* The opening stays free of site chrome until the hero has left the viewport. */
.about-grid {grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:20px 48px}
.about-grid>.section-title {grid-column:1;grid-row:1}
.about-grid>.about-text {grid-column:1;grid-row:2}
.about-portrait {grid-column:2;grid-row:1/3;width:100%;max-width:320px;justify-self:end}
.profile .timeline-entry {position:relative;padding:0 0 32px 34px}
.profile .timeline-entry::before {content:'';position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;background:var(--yellow)}
.profile .timeline-date {font-size:clamp(15px,1.4vw,20px);font-style:italic;color:var(--ink);line-height:1.4}
@media(max-width:650px) {
  .about-grid {grid-template-columns:1fr;gap:24px}
  .about-grid>.section-title {grid-row:1}
  .about-grid>.about-text {grid-column:1;grid-row:2}
  .about-portrait {grid-column:1;grid-row:3;justify-self:center;width:75%}
}

/* The opening stays free of site chrome until the hero has left the viewport. */
/* Repeat the opening's typography through a scaled heading hierarchy. */
.section-title,.work .section-title,.skills-heading .section-title,.contact-title {
  font-family:var(--font-display);font-size:clamp(36px,6.5vw,96px);
  font-weight:400;line-height:1.12;letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance;
}
.notes-title,.case-story h2 {
  font-family:var(--font-display);font-size:clamp(24px,3vw,42px);
  font-weight:400;line-height:1.2;letter-spacing:-.035em;text-transform:uppercase;
}
@media(max-width:650px) {
  .section-title,.work .section-title,.skills-heading .section-title,.contact-title {font-size:clamp(30px,9vw,54px)}
}
.intro-screen {background:var(--paper)}
.intro-screen .header {position:fixed;top:0;left:20px;right:20px;transition:opacity var(--motion-base) var(--ease),transform var(--motion-base) var(--ease),visibility var(--motion-base)}
.intro-screen:not(.has-scrolled) .header {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px)}
.intro-screen .hero {
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:clamp(32px,5vw,80px) 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--paper);
  box-sizing:border-box;
}
.intro-screen .hero-container {
  width:var(--content-width);
  max-width:none;
  margin:auto;
  padding-block:0;
}
.intro-screen .hero-layout {
  width:100%;
  display:block;
  place-items:normal;
}
.intro-screen .hero-title {
  width:100%;
  margin:0;
  line-height:1.08;
  word-spacing:.08em;
  letter-spacing:-.015em;
  text-transform:uppercase;
  word-break:normal;
  text-align:justify;
  text-align-last:justify;
}
.intro-screen .hero-title .hero-marker {
  padding:.03em .06em;
  background-size:100% 100%;
  white-space:nowrap;
  word-break:normal;
}
.intro-screen .hero-title>.hero-marker:nth-of-type(2) {
  margin-left:0;
}
.intro-screen .hero-title,
.intro-screen .hero-title>a,
.intro-screen .hero-title>.hero-marker {
  overflow-wrap:normal;
  word-break:normal;
}
.intro-screen .hero-title a {white-space:nowrap}
.hero-row {display:flex;justify-content:space-between;align-items:baseline;gap:.22em}
.hero-row > * {flex:none;text-align:left;text-align-last:left;word-spacing:normal}
.hero-row .hero-marker {font-weight:inherit}
@media (max-width:650px) {
  .intro-screen .header {left:10px;right:10px}
  .intro-screen .hero {min-height:100dvh;padding:32px 0}
  .intro-screen .hero-container {padding-block:0}
  .intro-screen .hero-title {line-height:1.2;word-spacing:0}
  .section,.focus-section {
    min-height:100vh;
    min-height:100dvh;
    padding-block:calc(var(--header-height) + 16px) 32px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
  .will-reveal {opacity:1;transform:none}.marker,.marker.will-mark {background-size:100% 100%}
  .circle-note,.circle-note[open] {transform:none}
}

/* Content refresh: focus, skills, process and scroll-drawn profile. */
.focus-section .circle-note {
  flex-basis:calc((100% + 6 * var(--note-overlap)) / 7);
}
.focus-section .circle-note p {
  top:42%;
  left:12%;
  width:76%;
  font-size:clamp(11px,.86vw,14px);
  line-height:1.38;
  pointer-events:auto;
}
.focus-section .circle-note[open] summary span {bottom:66%}
.focus-section .circle-note p a {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.skills {
  min-height:100vh;
  min-height:100dvh;
  padding-block:calc(var(--header-height) + 24px) 48px;
  background:var(--white);
}
.skills>.container {margin-block:auto}
.skills-heading {display:block;margin-bottom:clamp(32px,5vw,64px)}
.skill-explorer {display:block;margin:0}
.skill-copy-column {min-width:0}
.skill-explorer {--skill-size:clamp(12px,3.1vw,48px)}
.skill-choices {display:grid;gap:clamp(10px,1.5vw,22px)}
.skill-row {display:flex;align-items:baseline;justify-content:space-between}
.skill-choice:nth-child(n) {
  cursor:default;
  position:static;
  display:inline-flex;
  width:auto;
  min-height:0;
  margin:0;
  padding:0;
  vertical-align:top;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:var(--skill-size);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.skill-choice>span {
  padding:.03em .07em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0 100%;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  transition:background-size .35s var(--ease);
}
.skill-choice:hover>span,
.skill-choice:focus-visible>span,
.skill-choice[aria-expanded="true"]>span {background-size:100% 100%}
.skill-description {
  min-height:8.5em;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(16px,5vw,72px);
  margin-top:clamp(36px,4.5vw,72px);
  padding-left:18px;
  border-left:3px solid transparent;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--motion-base) var(--ease),transform var(--motion-base) var(--ease),border-color var(--motion-fast) var(--ease);
}
.skill-description.is-visible {
  border-left-color:var(--yellow);
  opacity:1;
  transform:none;
}
#skill-description-copy,.skill-copy-sizer {grid-area:1 / 1}
.skill-copy-sizer {visibility:hidden;pointer-events:none}
.skill-description .skill-bar {grid-area:1 / 2}
.skill-description p {max-width:40ch;font-size:clamp(18px,1.55vw,23px);line-height:1.55;text-align:left}

.process {background:var(--paper)}
.process .section-heading {margin-bottom:clamp(48px,7vw,96px)}
.process .workflow-steps {padding:0}
.process .workflow-step h3 {
  margin-top:18px;
  font-family:var(--font-display);
  font-size:clamp(18px,1.7vw,25px);
  font-weight:400;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.process .workflow-step p {max-width:24ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6}

.profile {min-height:auto}
.profile-stack {display:grid;gap:clamp(128px,16vw,230px)}
.profile-chapter {min-width:0}
@media (min-width:651px) {
  .profile-chapter[aria-labelledby="profile-title"] .timeline-entry {column-gap:clamp(64px,12vw,200px)}
}

.profile-chapter>.section-title {
  margin-bottom:clamp(72px,9vw,132px);
  font-size:clamp(40px,7vw,104px);
}
.profile .timeline {display:grid;gap:clamp(64px,7vw,100px);counter-reset:timeline-item}
.profile .timeline-entry {position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,7vw,100px);align-items:start;padding:0;counter-increment:timeline-item}
.entry-learnings {list-style:none;margin:0;padding:0;font-size:clamp(17px,1.5vw,21px);line-height:1.6}
.entry-learnings > li {width:fit-content;max-width:100%;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left center / 0% 100%;transition:background-size .35s var(--ease)}
.timeline-entry:is(:hover,:focus-within,.is-highlighted) .entry-learnings > .is-key,
.entry-learnings > li:hover {background-size:100% 100%}
.profile .timeline .timeline-entry::after {
  content:counter(timeline-item,decimal-leading-zero);
  position:absolute;
  z-index:0;
  top:-.32em;
  bottom:auto;
  width:auto;
  height:auto;
  background:transparent;
  color:#e2e2d8;
  font-family:var(--font-display);
  font-size:clamp(82px,10vw,150px);
  line-height:1;
  letter-spacing:-.06em;
  pointer-events:none;
  user-select:none;
}
.profile .timeline .timeline-entry::after {left:0;z-index:-1}
.profile .timeline-entry h3 {
  font-family:var(--font-display);
  font-size:clamp(22px,2.45vw,38px);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.profile .entry-text {
  display:block;
  margin-top:16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  max-width:48ch;
}
.profile .timeline-link {display:inline-flex;min-height:40px;align-items:center;margin-top:12px;font-size:13px}

@media (max-width:1100px) and (min-width:651px) {
  .focus-section .note-stack {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .focus-section .circle-note:nth-child(n) {width:100%;margin:0;transform:none}
  .focus-section .circle-note[open] {transform:translateY(-4px) scale(1.015)}
  .focus-section .circle-note p {font-size:13px}
  .skill-explorer {--skill-size:clamp(22px,3.2vw,34px)}
}

@media (max-width:650px) {
  .focus-section .note-stack {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .focus-section .circle-note:nth-child(n) {width:100%;margin:0;transform:none}
  .focus-section .circle-note p {top:42%;font-size:11.5px;line-height:1.32}
  .focus-section .circle-note[open] summary span {bottom:68%}
  .skills {padding-block:calc(var(--header-height) + 16px) 32px}
  .skills>.container {margin-block:0}
  .skills-heading {margin-bottom:28px}
  .skill-explorer {--skill-size:clamp(12px,4.2vw,26px)}
  .skill-description {min-height:9em;padding-left:14px}
  .skill-description p {font-size:17px}
  .process .workflow-steps {gap:28px}
  .process .workflow-step h3 {grid-column:2;margin:0;font-size:20px}
  .process .workflow-step p {max-width:34ch}
  .profile-stack {gap:104px}
  .profile-chapter>.section-title {margin-bottom:56px;font-size:clamp(34px,10vw,42px)}
  .profile .timeline-entry {grid-template-columns:1fr;gap:18px}
  .profile .timeline-body {grid-column:auto}
  .profile .timeline-entry h3 {font-size:clamp(22px,7vw,31px)}
}

/* Rectangular, animated strengths cards. Focus notes keep their circular treatment. */
.strengths .note-stack {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding-block:40px 0;
}
.strengths .circle-note:nth-child(n) {
  position:relative;
  width:100%;
  min-height:220px;
  aspect-ratio:auto;
  margin:0;
  align-self:stretch;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--white);
  box-shadow:none;
  transform:none;
  transition:transform var(--motion-base) var(--ease),background-color var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease);
}
.strengths .circle-note summary {
  position:relative;
  inset:auto;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  min-height:96px;
  padding:24px 58px 24px 24px;
  border-radius:0;
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(24px,2.25vw,36px);
  line-height:1.05;
  letter-spacing:-.035em;
  text-transform:uppercase;
  transition:color var(--motion-base) var(--ease);
}
.strengths .circle-note summary span,
.strengths .circle-note[open] summary span {
  position:static;
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.strengths .circle-note p {
  position:static;
  width:auto;
  margin:0;
  padding:0 24px 24px;
  color:var(--ink);
  text-align:left;
  font-size:15px;
  line-height:1.5;
  pointer-events:auto;
}
.strengths .circle-note[open] {
  border-color:var(--yellow);
  transform:none;
}
.strengths .circle-note[open] summary {
  min-height:96px;
  padding-bottom:24px;
  align-items:flex-end;
}
.strengths .circle-note[open] p {animation:strength-copy-in var(--motion-base) var(--ease) both}
.strengths .circle-note.will-reveal {transform:translateY(26px);opacity:0}
.strengths .circle-note.will-reveal.is-visible {transform:none;opacity:1}
.strengths .circle-note.will-reveal:nth-child(2) {transition-delay:60ms}
.strengths .circle-note.will-reveal:nth-child(3) {transition-delay:120ms}
.strengths .circle-note.will-reveal:nth-child(4) {transition-delay:180ms}
.strengths .circle-note.will-reveal:nth-child(5) {transition-delay:240ms}
.strengths .circle-note.will-reveal:nth-child(6) {transition-delay:300ms}
.strengths .circle-note.will-reveal.is-visible[open] {transform:translateY(-6px)}
@media (hover:hover) {
  .strengths .circle-note:not([open]):hover {border-color:var(--ink)}
}
@keyframes strength-copy-in {
  from {opacity:0;transform:translateY(10px)}
  to {opacity:1;transform:none}
}
@media (max-width:900px) {
  .strengths .note-stack {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px) {
  .strengths .note-stack {grid-template-columns:minmax(0,1fr);gap:12px;padding-top:28px}
  .strengths .circle-note:nth-child(n) {min-height:160px}
  .strengths .circle-note summary {min-height:84px;padding:20px 54px 20px 20px;font-size:clamp(24px,8vw,34px)}
  .strengths .circle-note[open] summary {min-height:84px;padding-bottom:20px}
  .strengths .circle-note p {padding:0 20px 20px;font-size:14px}
}

@media (prefers-reduced-motion:reduce) {
  .profile .timeline-entry::before {background:var(--yellow)}
  .skill-description {transform:none}
}

/* Stable cards shared by strengths and hobbies. */
.about-grid > .about-text {font-size:clamp(17px,1.4vw,21px);line-height:1.65}
.strengths .circle-note:nth-child(n) {
  height:auto;
  min-height:270px;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left top / 0% 100% var(--white);
  transition:background-size .35s var(--ease),border-color .35s var(--ease);
}
.strengths .circle-note[open] {background-size:100% 100%}
.strengths .circle-note p {max-height:none;overflow:visible;font-size:17px;line-height:1.5}
.strengths .circle-note[open] p {animation:card-copy-in .25s ease both}
.focus-section.strengths .circle-note p {font-size:17px;line-height:1.5}
.skill-description,.skill-description.is-visible {border:0;padding-left:0;transform:none}
.profile .entry-text {font-size:clamp(17px,1.5vw,21px);line-height:1.65}
@keyframes card-copy-in {from {opacity:0} to {opacity:1}}

/* Large background numbers, matching the project and timeline treatment. */
.process .workflow-step {display:block;isolation:isolate;padding-top:42px;min-height:190px}
.process .step-number,.process .workflow-step:hover .step-number {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  display:block;
  width:auto;
  height:auto;
  min-width:0;
  border:0;
  border-radius:0;
  font-family:var(--font-display);
  font-size:clamp(90px,9vw,140px);
  line-height:1;
  letter-spacing:-.06em;
  pointer-events:none;
}
.case-next-number,
.project-card .project-index,
.case-decisions li > span,
.profile .timeline .timeline-entry::after,
.process .step-number,
.process .workflow-step:hover .step-number {
  color:transparent;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat left center / 0% 100%,linear-gradient(#e2e2d8,#e2e2d8) no-repeat left center / 100% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  transition:background-size .35s var(--ease);
}
.project-card:is(:hover,:focus-within,.is-highlighted) .project-index,
.case-decisions li:hover > span,
.profile .timeline .timeline-entry:is(:hover,:focus-within,.is-highlighted)::after,
.process .workflow-step:is(:hover,.is-highlighted) .step-number {background-size:100% 100%,100% 100%}
@media (min-width:651px) {
  .profile .timeline-body {position:static}
  .profile .timeline-body > h3,.profile .timeline-body > .entry-text,.profile .timeline-link {position:relative;z-index:1}
  .profile .timeline-date {position:absolute;top:0;white-space:nowrap;margin:0}
  .profile .timeline-entry:nth-child(odd) .timeline-date {left:calc(100% + clamp(52px,7vw,104px))}
  .profile .timeline-entry:nth-child(even) .timeline-date {right:calc(100% + clamp(52px,7vw,104px))}
}
@media (max-width:650px) {
  .focus-section.strengths .note-stack {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px) {
  .focus-section.strengths .note-stack {grid-template-columns:1fr}
  .strengths .circle-note:nth-child(n) {height:240px;min-height:240px}
}

:root {--portfolio-heading-size:clamp(32px,4.9vw,104px)}
@media (max-width:650px) {
  :root {--portfolio-heading-size:min(9vw,5.4dvh)}
}
.intro-screen .hero-title, main :is(.section-title,.notes-title,.contact-title):is(h2,h3,.section-title) {
  font-size:var(--portfolio-heading-size);
}

.profile .timeline-entry::before {content:none}
.menu-lines,.document-icon {border:0;border-radius:0}

@media (min-width:768px) {
  .case-intro {
    --intro-heading-height:clamp(76px,14svh,140px);
    --cover-padding:clamp(12px,2svh,24px);
  }
  .case-intro .case-heading {
    display:flex;
    align-items:center;
    gap:clamp(16px,2vw,40px);
    min-height:var(--intro-heading-height);
    padding-block:0;
  }
  .case-intro .case-number {font-size:clamp(64px,12svh,130px)}
  .case-intro .case-title {font-size:clamp(40px,min(6vw,9svh),96px)}
  .case-intro .case-cover a {padding:var(--cover-padding)}
  .case-intro .case-cover :is(img,video) {
    max-height:min(648px,calc(100svh - var(--header-height) - var(--intro-heading-height) - 2 * var(--cover-padding) - 24px));
  }
  .case-intro .case-facts {gap:clamp(22px,3.5svh,36px);margin-block:clamp(24px,4svh,40px)}
  .case-intro .case-facts>div {padding-top:0}
  .case-intro .case-goal {margin-top:14px}
}

.case-information > .eyebrow,
.case-facts dt {
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px,1.8vw,28px);
  line-height:1.15;
  letter-spacing:0;
  color:var(--ink);
}

@media (min-width:768px) and (max-height:640px) {
  .case-intro {--intro-heading-height:68px}
  .case-intro .case-facts {gap:16px;margin-block:16px}
}

.case-story-nav {display:flex;flex-direction:column;align-items:flex-start;gap:clamp(40px,5vw,72px);min-width:0}
.case-next-name {position:relative;isolation:isolate;padding-top:20px;width:min(100%,440px);font:400 var(--title-size)/1.1 var(--font-display);letter-spacing:-.035em;text-transform:uppercase;overflow-wrap:anywhere;max-width:100%}
@media (max-width:767px) {.case-story-nav {margin-top:32px}}

.case-next-number {position:absolute;z-index:-1;top:-.2em;left:0;font:400 clamp(90px,9vw,140px)/1 var(--font-display);letter-spacing:-.06em;pointer-events:none}
.case-next-goal {display:block;margin-top:14px;font:300 16px/1.55 var(--font);letter-spacing:normal;text-transform:none}

.skill-bar {display:block;height:1.18em;font-size:var(--skill-size);background:var(--line)}
.skill-bar::before {content:"";display:block;height:100%;background:var(--yellow);transform:scaleX(var(--skill-level,0));transform-origin:left;transition:transform .35s var(--ease)}

/* Fliesstext auf der Startseite und den Projektseiten. */
main p:not(.case-number,.sr-only), .case-information .case-facts dd, .case-story-nav .case-next-goal {
  text-align:justify;
  text-align-last:start;
  -webkit-hyphens:auto;
  hyphens:auto;
}
.process .workflow-step:nth-child(n) p, .skill-description p {text-align:justify}

.document-row {position:relative;isolation:isolate}
.document-actions a[target="_blank"]::after {content:"";position:absolute;inset:0;z-index:1}
.document-actions a[download] {position:relative;z-index:2}
.document-row:is(:hover,:focus-within) h3 .link-label {background-size:100% 100%}

@media (max-width:650px) {
  .project-filters {flex-wrap:wrap;gap:2px 18px;overflow:visible}
  .filter-button,.project-view button,.skill-choice:nth-child(n) {min-height:44px}
  .skill-description {grid-template-columns:minmax(0,1fr);gap:12px}
  .skill-description .skill-bar {grid-area:2 / 1;width:100%}
  .strengths .circle-note:nth-child(n) {height:auto;min-height:0}
  .strengths .circle-note p {max-height:none;overflow:visible}
  .case-cover {width:100%}
  .case-next-name {overflow-wrap:anywhere}
}

@media (max-width:650px) {
  .intro-screen .hero {--hero-inset:clamp(18px,4svh,36px);padding-block:var(--hero-inset)}
  .intro-screen .hero-title {
    min-height:calc(100dvh - 2 * var(--hero-inset));
    display:flex;
    flex-wrap:wrap;
    align-content:space-between;
    justify-content:space-between;
    align-items:baseline;
    gap:0 .18em;
    font-size:var(--portfolio-heading-size);
    line-height:1.1;
  }
  .hero-row {display:contents}
}

.hero-row .tim-mobile {display:none}
@media (max-width:650px) {
  .hero-row .tim-mobile {display:inline}
  .hero-row .tim-desktop {display:none}
}

@media (min-width:651px) {
  .strengths .circle-note::details-content {content-visibility:visible}
  .strengths .circle-note:not([open])::details-content {visibility:hidden}
}

.strengths .circle-note summary {cursor:default}

@media (max-width:650px) {
  main {text-align:center}
  .intro-screen .hero-title,.hero-row > *,a.contact-value,button.contact-value {
    text-align:center;
    text-align-last:auto;
  }
  .hero-row {justify-content:center}
  .section-title,.contact-title,.case-title,.case-summary,.section-lead,
  .work .section-lead,.skills-heading .section-lead,.contact-lead,
  .project-card:nth-child(n) .project-caption {margin-inline:auto}
  .intro-screen .hero-title,.project-filters {justify-content:center}
  .project-view {align-self:center}
  .case-story-nav {align-items:center}
  .profile .entry-text,.entry-learnings > li,.process .workflow-step p,.skill-description p {margin-inline:auto}
  .strengths .circle-note summary {
    justify-content:center;
    padding-inline:36px;
    text-align:center;
  }
}

@media (max-width:650px) {
  .strengths .note-stack,.focus-section.strengths .note-stack {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .strengths .circle-note summary,.strengths .circle-note[open] summary {
    min-height:64px;
    padding:14px 16px;
    align-items:center;
    cursor:pointer;
    font-size:clamp(20px,5.6vw,26px);
  }
  .strengths .circle-note p {padding:0 16px 18px}
  .strengths .circle-note.will-reveal.is-visible[open] {transform:none}
}

@media (max-width:650px) {
  .profile .entry-text,.profile .entry-learnings {
    width:100%;
    max-width:48ch;
    margin-inline:auto;
    font-size:17px;
  }
  .profile .entry-learnings {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    column-gap:.45em;
  }
  .profile .entry-learnings > li {margin:0;background:none}
  .profile .entry-learnings > li:not(:last-child)::after {content:","}
  .profile .entry-learnings a {display:inline-block;max-width:100%}
  .profile .entry-learnings a:is(:hover,:focus-visible,:active) {background:var(--yellow)}
}

.menu-close {display:none}
@media (max-width:900px) {
  .nav.is-open {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    max-height:none;
    padding:max(68px,env(safe-area-inset-top),env(safe-area-inset-bottom)) 0;
    align-items:center;
    gap:4px;
    overscroll-behavior:contain;
    z-index:31;
  }
  .nav.is-open .nav-link {
    flex:none;
    width:min(var(--content-width),32rem);
    margin:0;
    padding:4px 0;
    font-size:clamp(30px,min(9vw,6dvh),54px);
  }
  .nav.is-open .nav-link:first-child {margin-top:auto}
  .nav.is-open .nav-link:last-child {margin-bottom:auto}
  .nav.is-open .nav-label {
    width:100%;
    padding:0;
    white-space:normal;
    text-align:justify;
    text-align-last:justify;
    text-justify:inter-character;
  }
  .menu-button[aria-expanded="true"] {
    position:fixed;
    top:max(12px,env(safe-area-inset-top));
    right:max(16px,env(safe-area-inset-right));
    min-width:44px;
    justify-content:center;
  }
  .menu-button[aria-expanded="true"] .menu-label {display:none}
  .menu-button[aria-expanded="true"] .menu-close {display:block}
  .nav.is-open .nav-link:focus-visible {outline:none}
}

@media (max-width:650px) {
  .documents .section-heading .section-lead {display:none}
  .contact-grid .contact-item {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
  }
  .contact-grid .contact-item .contact-label {flex:none;margin-bottom:0}
  .contact-grid .contact-value {
    min-width:0;
    margin-inline:0;
    padding-inline:0;
    font-size:clamp(15px,4.1vw,23px);
    text-align:right;
    text-align-last:auto;
  }
}

/* ─── Preloader ───────────────────────────────────────────────────────────── */
.preloader {
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
}
.preloader.is-done {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  animation:preloader-pulse 1.1s var(--ease) infinite alternate;
}
.preloader-logo svg {
  width:clamp(120px, 20vw, 180px);
  height:clamp(120px, 20vw, 180px);
  animation:preloader-draw .9s var(--ease) both;
}
.preloader-dark { fill:#141314; }
.preloader-yellow { fill:#f5c600; }

@keyframes preloader-pulse {
  from { transform:scale(1);   opacity:.7; }
  to   { transform:scale(1.08); opacity:1; }
}
@keyframes preloader-draw {
  from { opacity:0; transform:scale(.85) translateY(8px); }
  to   { opacity:1; transform:none; }
}



@media (prefers-reduced-motion:reduce) {
  .preloader-logo { animation:none; }
  .preloader-logo svg { animation:none; }
}