/* Original work, presented as a quiet editorial portfolio. */
/* One reading rhythm across long-form project pages. */
.reference-brief p,.reference-contributions p,.reference-cta p { text-wrap:pretty; }
.reference-showcase { overflow:hidden; }
.references-page :is(h1,h2,h3) { overflow-wrap:normal; }
.reference-breadcrumb { flex-wrap:wrap; line-height:1.6; }
.references-page{--ref-wash:#f3f3ef;background:var(--paper);color:var(--ink)}
.references-page main,.reference-header,.reference-footer{width:min(1320px,calc(100% - 2*var(--page-edge)));margin-inline:auto}
.reference-header{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.reference-brand{display:flex;align-items:center;gap:1.1rem;text-decoration:none}.reference-brand img{width:160px;height:auto}.reference-brand span{font-size:.67rem;line-height:1.5;max-width:11ch;color:var(--muted)}
.reference-header nav{display:flex;align-items:center;gap:1.6rem}.reference-header nav a{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;font-size:.8rem}.reference-header nav a:last-child{border:1px solid var(--line);border-radius:100px;padding:.4rem 1rem}
.references-page svg{width:20px;height:20px;flex:none}.reference-breadcrumb{display:flex;gap:.8rem;padding-top:2rem;font-size:.73rem;color:var(--muted)}
.reference-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:3rem 0 4rem}
.reference-kicker{display:flex;align-items:center;gap:.7rem;font-size:.72rem;line-height:1.6;letter-spacing:.03em;font-weight:550;margin:0 0 1.5rem}
.reference-mark{width:11px;height:11px;flex:none;border:1.5px solid currentColor;border-radius:3px;transform:rotate(-12deg)}
.reference-hero h1,.reference-index-intro h1{font-size:clamp(2.8rem,5.3vw,5.5rem);font-weight:550;letter-spacing:-.06em;line-height:1.055;text-wrap:balance;max-width:12ch;margin:0 0 1.6rem}
.reference-lead{font-size:clamp(1.06rem,1.6vw,1.3rem);line-height:1.6;letter-spacing:-.015em;color:var(--muted);max-width:44ch}
.reference-text-link{display:inline-flex;align-items:center;gap:1rem;text-underline-offset:5px;font-size:.86rem;min-height:44px}.reference-hero .reference-text-link{margin-top:1.1rem}
.reference-stage{position:relative;isolation:isolate;aspect-ratio:1.05;overflow:hidden;border-radius:18px;background:#efeee9;color:#222;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem 3rem}
.reference-stage__name{position:absolute;top:1.7rem;left:1.7rem;font-size:1.05rem;font-weight:650;letter-spacing:-.035em}.reference-stage__caption{position:absolute;bottom:1.4rem;left:1.7rem;font-size:.65rem;letter-spacing:.03em}
.reference-stage__primary{width:88%;height:90%;object-fit:contain;z-index:2;filter:drop-shadow(0 18px 17px #00000018)}
.reference-stage__secondary{position:absolute;width:51%;height:48%;object-fit:contain;right:-5%;bottom:8%;z-index:1;opacity:.98;transform:rotate(6deg);filter:drop-shadow(0 12px 13px #00000018)}
.reference-stage--ciaomiau .reference-stage__primary{width:68%;transform:translateX(-15%) rotate(-7deg)}.reference-stage--ciaomiau .reference-stage__secondary{height:69%;bottom:11%;right:-2%;width:62%}
.reference-stage--nitsche{background:#dfe9f0}.reference-stage--nitsche .reference-stage__primary{width:94%;height:auto;transform:translate(-3%,-18%) rotate(-3deg);border:5px solid #fff;border-radius:5px}.reference-stage--nitsche .reference-stage__secondary{width:74%;height:auto;right:-1%;bottom:15%;border:5px solid #fff;border-radius:5px;z-index:3}
.reference-stage--cs{background:#eaf0d8}.reference-stage--cs .reference-stage__primary{width:61%;height:95%;transform:translateX(-16%) rotate(-4deg)}.reference-stage--cs .reference-stage__secondary{width:56%;height:auto;right:0;bottom:18%;background:#fff;transform:rotate(5deg);z-index:3}
.reference-stage--swisseye{background:#ebe8e2}.reference-stage--swisseye .reference-stage__primary{width:94%;height:75%;transform:translateY(-8%);filter:drop-shadow(0 18px 20px #00000012)}.reference-stage--swisseye .reference-stage__secondary{display:none}
.reference-stage--clever{background:#e6e7e8}.reference-stage--clever .reference-stage__primary{width:64%;height:100%;transform:translateX(-13%) rotate(-4deg)}.reference-stage--clever .reference-stage__secondary{width:61%;height:auto;bottom:19%;z-index:3;border:6px solid #fff;right:-2%}
.reference-facts{display:grid;grid-template-columns:.7fr .8fr 1.6fr;gap:2rem;border-block:1px solid var(--line);padding:1.5rem 0}.reference-facts span{display:block;font-size:.67rem;color:var(--muted);margin-bottom:.55rem}.reference-facts strong{font-size:.88rem;line-height:1.6;font-weight:550;display:block;max-width:55ch}
.reference-section{margin-top:clamp(3rem,6vw,6rem)}.reference-brief{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem)}
.references-page h2{font-size:clamp(1.8rem,3.2vw,3.2rem);line-height:1.15;font-weight:550;letter-spacing:-.045em;margin:.6rem 0 1.5rem}.reference-brief h2{max-width:15ch}.reference-brief p{font-size:1rem;line-height:1.8;color:var(--muted);margin:0 0 1.2rem}.reference-brief .reference-kicker{font-size:.72rem;color:var(--ink)}
.reference-tags{display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:1.8rem 0 0;list-style:none}.reference-tags li{font-size:.69rem;border:1px solid var(--line);border-radius:100px;padding:.55rem .85rem}
.reference-contributions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:3.5rem}.reference-contributions article{border-top:1px solid var(--line);padding-top:1.4rem}.reference-contributions h2{font-size:1.22rem;line-height:1.35;letter-spacing:-.025em;max-width:21ch;margin:1.2rem 0 .8rem}.reference-contributions p{font-size:.88rem;line-height:1.8;color:var(--muted);margin:0}.reference-contribution-icon{display:inline-flex;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;align-items:center;justify-content:center}
.reference-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.reference-gallery figure{min-width:0;margin:0}.reference-gallery figure>a{display:flex;align-items:center;justify-content:center;min-height:300px;aspect-ratio:1.12;background:var(--ref-wash);border-radius:14px;overflow:hidden;padding:1.8rem}.reference-gallery img{display:block;max-width:100%;max-height:480px;object-fit:contain;height:auto;width:auto;box-shadow:0 9px 30px #00000010}.reference-gallery__item--product img{box-shadow:none;max-height:440px}.reference-gallery figcaption{font-size:.72rem;line-height:1.7;color:var(--muted);margin:.8rem .3rem}.reference-gallery figcaption a{white-space:nowrap;text-underline-offset:3px;margin-left:.3rem}
.reference-archive-note{font-size:.76rem!important;border-top:1px solid var(--line);padding-top:1.2rem}
.reference-cta{display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;background:var(--ref-wash);padding:clamp(2rem,4vw,4rem);border-radius:18px;margin:5rem 0}.reference-cta h2{max-width:19ch}.reference-cta p{font-size:.92rem;line-height:1.8;color:var(--muted);max-width:58ch}.reference-cta>div:last-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.reference-cta>div:last-child p{font-size:.76rem}.reference-cta>div:last-child>a:last-child{font-size:.79rem;text-underline-offset:4px}
.reference-button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.05rem 1.25rem;border-radius:100px;background:var(--ink);color:var(--paper);font-size:.85rem;font-weight:550;text-decoration:none;line-height:1.5}.reference-button:hover{opacity:.82}
.reference-related{margin-bottom:4rem}.reference-related h2{font-size:1.7rem}.reference-related>div{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.reference-related a{display:grid;grid-template-columns:1fr auto;gap:.75rem;text-decoration:none;border-top:1px solid var(--line);padding:1.4rem 0}.reference-related a span{grid-column:1/-1;color:var(--muted);font-size:.7rem}.reference-related strong{font-size:1.2rem;font-weight:550}
.reference-footer{display:flex;justify-content:space-between;gap:2rem;padding:2rem 0;border-top:1px solid var(--line);font-size:.72rem;line-height:1.7}.reference-footer span{color:var(--muted)}.reference-footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem}.reference-footer button{border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.reference-index-intro{padding:clamp(3rem,6vw,6rem) 0 3.5rem}.reference-index-intro h1{max-width:18ch}.reference-index-intro h1 span{color:var(--muted);font-weight:400}.reference-index-intro>div{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:2rem;max-width:1080px}.reference-index-intro>div>p{margin:0;line-height:1.8}.reference-index-intro>div>p:last-child{font-size:.94rem;color:var(--muted)}
.reference-feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:2rem 2.5rem;background:var(--ref-wash);border-radius:18px;text-decoration:none;margin-bottom:4rem}.reference-feature h2{font-size:2rem}.reference-feature p{font-size:.95rem;line-height:1.7;color:var(--muted)}.reference-feature span{display:inline-flex;align-items:center;gap:1rem;font-size:.82rem;margin-top:.8rem}.reference-feature img{width:100%;height:auto;border-radius:8px}
.reference-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem 2rem}.reference-card a{text-decoration:none;display:block}.reference-card__heading{display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem}.reference-card h2{font-size:1.8rem;margin:0}.reference-card__category{font-size:.72rem;color:var(--muted);margin:.6rem 0}.reference-card p:not(.reference-card__category){font-size:.9rem;line-height:1.7;max-width:52ch;color:var(--muted)}.reference-card__link{font-size:.76rem;text-decoration:underline;text-underline-offset:5px;display:inline-block;margin-top:.35rem}
.reference-preview{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.3;overflow:hidden;background:#efeee9;border-radius:14px;padding:3.3rem 1.7rem;color:#171816}.reference-preview img{width:86%;height:88%;object-fit:contain;filter:drop-shadow(0 10px 12px #00000015);transition:transform .5s ease}.reference-preview__label{position:absolute;top:1.2rem;left:1.4rem;font-size:.95rem;font-weight:650;letter-spacing:-.025em;z-index:2}.reference-preview__type{position:absolute;bottom:1rem;left:1.4rem;font-size:.62rem;letter-spacing:.03em}.reference-preview--nitsche{background:#dfe9f0}.reference-preview--nitsche img{width:100%;height:auto;border:4px solid #fff;border-radius:4px;transform:rotate(-3deg)}.reference-preview--cs{background:#eaf0d8}.reference-preview--cs img{width:70%;height:96%;transform:rotate(-4deg)}.reference-preview--swisseye{background:#ebe8e2}.reference-preview--swisseye img{width:98%;height:100%}.reference-preview--clever{background:#e6e7e8}.reference-preview--clever img{height:98%;transform:rotate(-4deg)}.reference-preview--ciaomiau img{height:112%;width:94%;transform:rotate(-7deg)}
.project__picture.reference-preview{display:flex;aspect-ratio:var(--card-ratio,3/4);border-radius:14px;padding:2.8rem 1rem 2.5rem}.project__picture.reference-preview img{object-fit:contain;max-height:94%;height:auto;max-width:100%;width:auto}.project__picture.reference-preview .reference-preview__label{font-size:.93rem;left:1rem;top:1rem}.project__picture.reference-preview .reference-preview__type{font-size:.58rem;bottom:1rem;left:1rem}.project__picture.reference-preview--ciaomiau img{width:105%;max-width:105%;max-height:112%}.project__picture.reference-preview--nitsche img{width:100%;max-height:none}.project__picture.reference-preview--cs img{height:90%;width:auto}.project__picture.reference-preview--swisseye img{width:100%;height:auto}.project__picture.reference-preview--clever img{height:90%;width:auto}
.reference-selection-note{display:grid;grid-template-columns:1fr 1fr;gap:1rem 4rem;margin-top:5rem;border-top:1px solid var(--line);padding-top:2rem}.reference-selection-note h2{font-size:2rem}.reference-selection-note p{font-size:.9rem;line-height:1.8;color:var(--muted)}.reference-selection-note a{grid-column:2}
.reference-home-link{display:inline-flex;gap:.7rem;align-items:center;font-size:.8rem;text-underline-offset:5px}.reference-service-callout{padding:1.7rem 0;border-block:1px solid var(--line);margin:3rem 0}.reference-service-callout h2{font-size:1.5rem!important;margin:.5rem 0!important}.reference-service-callout p{max-width:65ch;font-size:.95rem;line-height:1.7}
html[data-theme="dark"] .references-page{--ref-wash:#1c1f1b}html[data-theme="dark"] .reference-brand img{filter:invert(1)}
@media(hover:hover){.reference-card a:hover .reference-preview img{transform:translateY(-6px) rotate(-2deg)}.reference-text-link:hover,.reference-header nav a:hover{opacity:.7}}
@media(max-width:800px){.reference-header{align-items:flex-start;gap:.6rem;flex-wrap:wrap}.reference-brand img{width:130px}.reference-header nav{width:100%;gap:1rem;justify-content:space-between}.reference-header nav a{font-size:.72rem}.reference-header nav a:last-child{padding:.25rem .7rem}.reference-header nav svg{display:none}.reference-hero{grid-template-columns:minmax(0,1fr);gap:2rem;padding:2rem 0 2.5rem}.reference-hero h1{font-size:clamp(2.7rem,10vw,4.5rem);max-width:16ch}.reference-stage{aspect-ratio:1.1}.reference-facts{grid-template-columns:1fr 1fr;gap:1.2rem}.reference-facts>div:last-child{grid-column:1/-1}.reference-brief,.reference-cta{grid-template-columns:1fr;gap:1.5rem}.reference-contributions{grid-template-columns:1fr;gap:1.5rem}.reference-contributions article{display:grid;grid-template-columns:34px 1fr;gap:0 1rem}.reference-contributions h2{max-width:none;margin:.2rem 0 .75rem}.reference-contributions p{grid-column:2}.reference-gallery{grid-template-columns:1fr;gap:2rem}.reference-gallery figure>a{min-height:0;aspect-ratio:1.15;padding:1.2rem}.reference-gallery img{max-height:350px}.reference-cta{margin:3rem 0;padding:1.7rem}.reference-button{font-size:.8rem;gap:1rem;max-width:100%}.reference-related>div{gap:1rem}.reference-related strong{font-size:1rem}.reference-footer{flex-direction:column;gap:.6rem}.reference-footer nav{gap:.8rem 1.1rem}.reference-index-intro>div{grid-template-columns:1fr;gap:1.2rem}.reference-index-intro h1{font-size:clamp(2.8rem,10vw,4.5rem)}.reference-feature{grid-template-columns:1fr;padding:1.5rem;gap:1.3rem;margin-bottom:2.5rem}.reference-feature h2{font-size:1.65rem}.reference-index-grid{grid-template-columns:1fr;gap:2.8rem}.reference-selection-note{grid-template-columns:1fr;gap:0;margin-top:3rem}.reference-selection-note a{grid-column:auto}.reference-kicker{font-size:.65rem}.reference-breadcrumb{padding-top:1.4rem}}
@media(prefers-reduced-motion:reduce){.reference-preview img{transition:none!important}.reference-card a:hover .reference-preview img{transform:none}}

.reference-film { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,5vw,5rem); align-items:start; scroll-margin-top:7rem; }
.reference-film h2 { margin:.7rem 0 1rem; }
.reference-film>div>p:not(.reference-kicker) { color:var(--muted); font-size:.95rem; line-height:1.8; }
.reference-film__media { min-width:0; }
.reference-video { position:relative; width:100%; aspect-ratio:16/9; background:#10151d; overflow:hidden; border-radius:var(--art-radius-large,14px); }
.reference-video__launch { display:block; width:100%; height:100%; padding:0; border:0; color:#fff; background:transparent; cursor:pointer; }
.reference-video__launch>img { width:100%; height:100%; object-fit:cover; opacity:.58; }
.reference-video__action { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; font:600 .85rem/1.4 var(--sans); text-shadow:0 1px 8px #000; }
.reference-video__action svg { width:58px; height:58px; padding:16px; border:1px solid #ffffff85; border-radius:50%; background:#ffffff18; backdrop-filter:blur(10px); }
.reference-video iframe { display:block; width:100%; height:100%; border:0; }
.reference-video__launch:focus-visible { outline:3px solid var(--ink); outline-offset:-5px; }
.reference-video__consent,.reference-video__credit { font-size:.72rem; line-height:1.7; color:var(--muted); }
.reference-video__links { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:.78rem; }
.reference-video__links a { display:inline-flex; align-items:center; gap:.4rem; text-underline-offset:4px; }
.reference-video__links svg { width:16px; height:16px; }
.reference-video__links button { padding:.45rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; }
@media(max-width:800px) { .reference-film { grid-template-columns:minmax(0,1fr); gap:1.5rem; } }

/* Full-bleed portfolio covers. Original work remains in the gallery. */
.reference-cover{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--art-radius-small,8px);background:#e7e3de;padding:0}
.reference-cover img,.project__picture.reference-cover img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 50%;border:0;border-radius:0;filter:none;transform:none}
.project__picture.reference-cover{padding:0;aspect-ratio:3/4;border-radius:var(--art-radius-small,8px)}
[data-project-slug="ciao-miau"]{--card-ratio:3/4}
.reference-index-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 1.7rem}
.reference-showcase{margin:0;min-width:0;width:100%;max-width:520px;justify-self:end}
.reference-showcase>img{width:100%;height:auto;display:block;border-radius:var(--art-radius-large,14px)}
.reference-showcase figcaption{font-size:.65rem;line-height:1.6;color:var(--muted);margin:.65rem .15rem 0}
.reference-mockup-note{display:block;font-size:.75rem;line-height:1.7;color:var(--muted);margin-top:1rem}
@media(min-width:801px) and (max-width:1100px){.reference-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.reference-index-grid{grid-template-columns:1fr}.reference-showcase{max-width:none}.reference-hero{gap:1.5rem}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.reference-card a:hover .reference-cover img,.project__trigger:hover .reference-cover img{transform:scale(1.025);transition:transform .6s cubic-bezier(.2,.7,.2,1)}}

/* C&S: cohesive full-frame editorial mockups, with original work linked in captions. */
.reference-gallery--scenes figure:first-child{grid-column:1/-1}
.reference-gallery--scenes figure>a{aspect-ratio:4/3;padding:0;min-height:0}
.reference-gallery--scenes img{width:100%;height:100%;max-height:none;object-fit:contain;box-shadow:none}
.reference-gallery--scenes figcaption{max-width:72ch}
.reference-gallery__item--wide{grid-column:1/-1}
.reference-gallery--scenes .reference-gallery__item--wide>a{aspect-ratio:var(--reference-image-ratio);background:transparent}
.reference-gallery [data-kind="ciaomiau"] img{box-shadow:none;max-height:440px}
.reference-download{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.8rem 2rem;border-radius:16px;background:var(--ref-wash);margin:0 0 3rem}
.reference-download h2{font-size:1.4rem;margin:0 0 .55rem;letter-spacing:-.035em}
.reference-download p{max-width:55ch;color:var(--muted);font-size:.9rem;line-height:1.65;margin:0}
.reference-download .reference-button{flex:none}
.reference-questions{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,5rem)}
.reference-questions h2{max-width:16ch;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.15;letter-spacing:-.045em;margin:.8rem 0}
.reference-questions article+article{margin-top:1.7rem}
.reference-questions h3{font-size:1rem;font-weight:600;line-height:1.5;margin:0 0 .55rem}
.reference-questions p{font-size:.94rem;line-height:1.75;color:var(--muted);margin:0}
@media(max-width:800px){.reference-download{display:grid;gap:1.25rem;padding:1.4rem}.reference-download .reference-button{justify-self:start}.reference-questions{grid-template-columns:1fr;gap:1.5rem}}

/* Keep long German service names inside their column, including narrow phones. */
.reference-hero>div,.reference-index-intro>div>p { min-width:0; }
.reference-hero h1 { max-width:min(100%,17ch); }
.reference-hero h1,.reference-index-intro h1 { overflow-wrap:break-word; hyphens:auto; }
@media(max-width:480px) {
 .reference-hero h1,.reference-index-intro h1 { max-width:100%; font-size:clamp(2rem,8.6vw,2.6rem); line-height:1.1; letter-spacing:-.045em; }
}