:root {
  color-scheme: light;
  --paper:#f1eee7; --ink:#191b19; --muted:#5a5c53; --line:#b9b8ad;
  --accent:#9c3727; --bright:#f3957a; --dark:#20231f; --white:#f8f5ed;
  --max:1440px; --pad:clamp(20px,5.25vw,84px);
  font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper);
  font-synthesis:none;
}
*,*::before,*::after {box-sizing:border-box}
body,h1,h2,h3,p,figure {margin:0}
img {display:block;width:100%;height:100%;object-fit:cover}
a {color:inherit;text-decoration:none}
button,select,textarea,input {font:inherit;color:inherit}
button {cursor:pointer}
button:disabled {cursor:default}
[hidden] {display:none!important}
:focus-visible {outline:2px solid var(--accent);outline-offset:5px}
.dark :focus-visible {outline-color:var(--bright)}
.skip {position:fixed;z-index:20;left:1rem;top:1rem;padding:1rem;background:var(--white);transform:translateY(-160%)}
.skip:focus {transform:none}
.wrap {max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.shell {border-bottom:1px solid var(--line)}
.mast {display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.brand {display:inline-flex;align-items:center;gap:11px;flex:none}
.mark {width:27px;height:27px;color:var(--accent);flex:none}
.brand-name {font-size:1.33rem;font-weight:800;letter-spacing:-.075em;line-height:.95}
.brand-name small {display:block;font-family:Arial,Helvetica,sans-serif;font-size:.59rem;letter-spacing:.16em;font-weight:600;margin-top:5px;text-transform:uppercase}
.mast nav {display:flex;align-items:center;gap:clamp(12px,3vw,42px)}
.mast nav a {display:inline-flex;align-items:center;min-height:44px;font-size:.82rem}
.mast nav a:hover,.text-link:hover,.footer a:hover {text-decoration:underline;text-underline-offset:.28em}
.mast .contact-link {gap:.48rem;padding-inline:.9rem;border:1px solid var(--ink);min-height:40px}
.mast .contact-link:hover {background:var(--ink);color:var(--paper);text-decoration:none}
.kicker,.folio,.micro,.fig-note,.chapter-no {font:600 .68rem/1.5 "SFMono-Regular",Consolas,monospace;letter-spacing:.105em;text-transform:uppercase}
.kicker {display:flex;align-items:center;gap:.55rem;color:var(--accent)}
.kicker::before {content:"";width:.45rem;height:.45rem;background:currentColor;display:inline-block;flex:none}
.hero {padding-top:clamp(42px,6.2vw,95px)}
.hero-head {display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,26%);align-items:end;column-gap:4%;margin-bottom:clamp(26px,4vw,58px)}
.hero-head .kicker {grid-column:1/-1;margin-bottom:clamp(20px,2.2vw,34px)}
.hero h1,.section-title,.case h1,.contact h2,.concept h1 {font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:400;letter-spacing:-.065em}
.hero h1 {font-size:clamp(4.2rem,9.4vw,9.1rem);line-height:.86}
.hero h1 em,.contact h2 em {font-weight:400;color:var(--accent)}
.hero-side {padding-bottom:.28rem}
.hero-side p {font-size:clamp(.93rem,1.35vw,1.13rem);line-height:1.48;max-width:24ch}
.text-link {display:inline-flex;min-height:44px;align-items:center;gap:.65rem;font-size:.84rem;font-weight:700}
.text-link span {color:var(--accent)}
.hero-side .text-link {margin-top:.6rem}
.hero-frame,.work-media,.case-media {position:relative;isolation:isolate;overflow:hidden;background:#333a32}
.hero-frame {aspect-ratio:2.3;max-height:650px}
.hero-frame img {position:absolute;inset:0;object-position:50% 54%;filter:saturate(.79) brightness(.87)}
.hero-frame::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#10130d86,transparent 35%)}
.hero-frame .folio {position:absolute;z-index:1;bottom:1.15rem;left:1.3rem;color:white}
.hero-frame .frame-glyph {position:absolute;z-index:1;top:1.3rem;right:1.3rem;width:24px;height:24px;border-top:1px solid white;border-right:1px solid white}
.hero-bar {display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);min-height:56px;color:var(--muted)}
.folio-links {display:flex;align-items:center;gap:clamp(.75rem,3vw,2.1rem)}
.folio-links a {display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-size:.76rem;color:var(--ink)}
.folio-links a:hover {text-decoration:underline;text-underline-offset:.25em}
.folio-links span {color:var(--accent);font-size:.62rem}
.section {padding-block:clamp(76px,10vw,155px)}
.section-header {display:grid;grid-template-columns:minmax(0,1fr) minmax(215px,28%);gap:2rem;align-items:end;margin-bottom:clamp(30px,5vw,74px)}
.section-header .kicker {margin-bottom:1rem}
.section-title {font-size:clamp(3.35rem,7.2vw,7.35rem);line-height:.9}
.section-intro {color:var(--muted);font-size:.9rem;line-height:1.6;max-width:35ch}
.work-row {border-top:1px solid var(--line);padding-block:clamp(22px,3.25vw,50px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(11px,2vw,30px);align-items:center;scroll-margin-top:1rem}
.work-row:last-child {border-bottom:1px solid var(--line)}
.work-media {grid-column:1/9;aspect-ratio:1.77;display:block}
.work-copy {grid-column:9/13;padding-left:clamp(0px,2vw,32px)}
.work-row:nth-of-type(2) .work-media {grid-column:5/13;grid-row:1}
.work-row:nth-of-type(2) .work-copy {grid-column:1/5;grid-row:1;padding-left:0;padding-right:clamp(0px,2vw,32px)}
.work-media img {transition:transform .45s ease;filter:saturate(.76)}
.work-media:hover img {transform:scale(1.035)}
.work-media .arrow-box {position:absolute;bottom:0;right:0;display:grid;place-items:center;width:clamp(42px,5.6vw,77px);aspect-ratio:1;background:var(--paper);color:var(--ink);font-size:1.35rem}
.work-media:hover .arrow-box {background:var(--accent);color:var(--white)}
.work-copy .micro {color:var(--accent);margin-bottom:.8rem}
.work-copy h3 {font:400 clamp(2.2rem,4.2vw,4.6rem)/.94 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.055em}
.work-copy p:not(.micro) {margin-top:.9rem;color:var(--muted);font-size:.93rem;line-height:1.55;max-width:30ch}
.work-copy .text-link {margin-top:.55rem}
.studio {background:var(--dark);color:var(--white)}
.studio .kicker,.studio .micro,.dark .text-link span {color:var(--bright)}
.studio-layout {display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,8vw,125px)}
.studio .section-title {margin-top:1rem}
.studio-summary {margin-top:1.35rem;max-width:32ch;color:#d2d4c9;line-height:1.6}
.steps {margin:0;padding:0;list-style:none;border-top:1px solid #62665b}
.steps li {display:grid;grid-template-columns:2.1rem 1fr;gap:.65rem;border-bottom:1px solid #62665b;padding:1.05rem 0}
.steps h3 {font-size:1.1rem;line-height:1.35;margin-bottom:.38rem}
.steps p {font-size:.87rem;line-height:1.55;color:#d2d4c9;max-width:53ch}
.contact-grid {display:grid;grid-template-columns:7fr 4fr;gap:clamp(25px,6vw,96px);align-items:end}
.contact h2 {font-size:clamp(3.4rem,7.8vw,8rem);line-height:.89;margin-top:1rem}
.contact-copy {line-height:1.57;font-size:.93rem;max-width:34ch}
.solid {display:inline-flex;align-items:center;justify-content:center;gap:.7rem;background:var(--accent);border:1px solid var(--accent);color:var(--white);padding:.7rem 1rem;min-height:46px;font-size:.86rem;font-weight:700}
.solid:hover {background:var(--ink);border-color:var(--ink)}
.contact .solid {margin-top:1rem}
.preview-note {font-size:.75rem;line-height:1.45;color:var(--muted);margin-top:.65rem}
.footer {border-top:1px solid var(--line);padding-block:24px}
.footer .wrap {display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer .brand-name {font-size:1.15rem}
.footer-links {display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-size:.77rem}
.preview-bar {border-top:1px solid var(--line);padding:10px 0;color:var(--muted);background:#e7e3d9}
.preview-bar .wrap {display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.preview-bar p {font-size:.73rem}
.preview-bar a {font-size:.78rem;text-decoration:underline;text-underline-offset:.2em;padding:.4rem 0}
.case {padding-top:clamp(32px,5vw,76px)}
.case .back {margin-bottom:clamp(24px,4vw,60px)}
.case-head {display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,28%);gap:1.25rem;align-items:end;margin:1rem 0 clamp(26px,4vw,55px)}
.case h1 {font-size:clamp(3.8rem,9vw,9rem);line-height:.89;max-width:12ch}
.case-head p {line-height:1.5;color:var(--muted);max-width:28ch}
.case-media {aspect-ratio:2.25}
.case-media img {filter:saturate(.79)}
.case-media figcaption {position:absolute;bottom:.8rem;left:.8rem;padding:.32rem .45rem;background:var(--paper)}
.case-sections {padding-block:clamp(44px,7.5vw,112px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3.8vw,56px)}
.case-sections section {border-top:1px solid var(--line);padding-top:1rem}
.case-sections h2 {font-size:1.15rem;margin:.5rem 0 .65rem}
.case-sections p:not(.micro) {font-size:.93rem;line-height:1.58;color:var(--muted)}
.case .credit {text-decoration:underline;text-underline-offset:.2em;font-size:.78rem;color:var(--muted)}
.case-end {display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin:clamp(25px,5vw,75px) 0;border-top:1px solid var(--line);padding-top:1rem}
.concept {max-width:1070px;margin-inline:auto;padding:clamp(30px,5vw,80px) var(--pad) clamp(56px,9vw,130px)}
.concept header {border-bottom:1px solid var(--line);padding:1.5rem 0 2.1rem}
.concept h1 {font-size:clamp(3.2rem,8vw,7.35rem);line-height:.93;margin:.8rem 0}
.concept .lead {font-size:1.08rem;line-height:1.6;max-width:65ch}
.concept nav {display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem 1.1rem;border-bottom:1px solid var(--line);padding:1rem 0}
.concept nav a {font-size:.83rem;line-height:1.5;padding:.45rem 0}
.concept nav a:hover {text-decoration:underline}
.chapter {display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:1rem;padding:2rem 0;border-bottom:1px solid var(--line);scroll-margin-top:1rem}
.chapter-no {color:var(--accent);padding-top:.45rem}
.chapter h2 {font:400 clamp(1.8rem,4vw,2.75rem)/1.03 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:-.045em;margin-bottom:.8rem}
.chapter h3 {font-size:1rem;margin:1rem 0 .35rem}
.chapter p,.chapter li,.chapter dd {font-size:.93rem;line-height:1.61;max-width:77ch}
.chapter p+p {margin-top:.6rem}
.chapter ul,.chapter ol {padding-left:1.2rem}
.chapter li+li {margin-top:.32rem}
.chapter dt {font-weight:700;margin-top:.8rem}
.chapter dd {margin:.22rem 0 .6rem}
.chapter .swatches {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.swatch {display:grid;gap:.3rem;font-size:.69rem}
.swatch i {height:32px;width:80px;border:1px solid var(--line)}
dialog {padding:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:min(520px,calc(100% - 2rem));max-height:calc(100% - 2rem)}
dialog::backdrop {background:#161914b9}
.dialog-inner {padding:clamp(20px,5vw,38px)}
.dialog-top {display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.dialog-top h2 {font:400 2.1rem/1.1 Georgia,serif;letter-spacing:-.045em}
.dialog-close {background:none;border:1px solid var(--line);width:44px;height:44px;flex:none;font-size:1.4rem}
.dialog-inner p {font-size:.84rem;line-height:1.5;margin:.7rem 0;color:var(--muted)}
.dialog-inner form {display:grid;gap:.65rem;margin-top:1rem}
.dialog-inner label {display:grid;gap:.25rem;font-size:.8rem;font-weight:700}
.dialog-inner input,.dialog-inner select,.dialog-inner textarea {padding:.65rem;background:var(--white);border:1px solid #9c9d92;width:100%;font-size:1rem}
.dialog-inner textarea {resize:vertical}
.dialog-inner .solid {justify-self:start}
#brief-result {margin-top:.7rem}
@media(max-width:780px) {
  .hero-head,.section-header,.case-head,.contact-grid,.studio-layout {grid-template-columns:1fr}
  .hero-head {row-gap:.85rem}
  .hero-head .kicker {margin-bottom:.55rem}
  .hero-side p {max-width:34ch}
  .hero-frame {aspect-ratio:1.6}
  .section-header {gap:.9rem}
  .work-row,.work-row:nth-of-type(2) {grid-template-columns:1fr;gap:1.05rem}
  .work-row .work-media,.work-row:nth-of-type(2) .work-media,.work-row .work-copy,.work-row:nth-of-type(2) .work-copy {grid-column:1;grid-row:auto;padding-inline:0}
  .work-copy p:not(.micro) {max-width:50ch}
  .case-sections {grid-template-columns:1fr}
}
@media(max-width:490px) {
  .mast {min-height:66px;gap:.5rem}
  .mast nav {gap:.65rem}
  .mast nav .optional {display:none}
  .mast .contact-link {padding-inline:.48rem}
  .brand {gap:7px}
  .brand-name {font-size:1.17rem}
  .brand-name small {font-size:.52rem}
  .mark {width:21px;height:21px}
  .hero h1 {font-size:clamp(3.1rem,12vw,4.2rem)}
  .hero-frame,.case-media {aspect-ratio:1.35}
  .hero-frame .folio {bottom:.6rem;left:.7rem}
  .hero-frame .frame-glyph {top:.7rem;right:.7rem;width:17px;height:17px}
  .hero-bar {display:block}
  .hero-bar .fig-note {display:none}
  .folio-links {justify-content:space-between;gap:.35rem}
  .folio-links a {font-size:.73rem}
  .concept nav {grid-template-columns:1fr}
  .chapter {grid-template-columns:1.5rem minmax(0,1fr);gap:.55rem}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important;scroll-behavior:auto!important}}
@media print {
  :root {background:white}
  .shell,.footer,.preview-bar,.skip,.concept .back,.concept nav {display:none!important}
  .concept {padding:0;max-width:none}
  .chapter {break-inside:avoid}
  .concept h1 {font-size:3rem}
}

:root {
  color-scheme:dark;
  --paper:#111211; --ink:#ece8e5; --muted:#b6b0ac; --line:#43413f;
  --accent:#dcd2ca; --bright:#efe9e2; --dark:#171817; --white:#171716;
  --max:1280px; --pad:clamp(20px,3.75vw,52px);
  font-family:Arial,Helvetica,sans-serif;
}
body {background:var(--paper)}
.wrap {width:min(calc(100% - var(--pad) * 2),var(--max));padding-inline:0}
.shell {position:absolute;top:0;left:0;width:100%;border:0;z-index:3;background:linear-gradient(180deg,#11161678,transparent)}
body:not([data-view="home"]) .shell {position:relative;background:#151615;border-bottom:1px solid var(--line)}
.mast {min-height:68px;padding-inline:10px}
.brand-name {font-weight:400;letter-spacing:.195em;line-height:1.02;font-size:1.25rem;text-transform:uppercase}
.brand-name small {margin-top:4px;letter-spacing:.31em;font-size:.61rem;font-weight:400;color:var(--muted)}
.mast nav {gap:clamp(19px,2.85vw,44px)}
.mast nav a {position:relative;min-height:38px;color:#f1eeeb}
.mast nav a[aria-current="page"]::after {content:"";position:absolute;left:-4px;right:-4px;bottom:0;border-bottom:1px solid #e8e1da}
.mast .contact-link {border-color:#e8e1dac4;border-radius:2px;min-width:95px;justify-content:center}
.mast .contact-link:hover {background:#e5ddd6;color:#141515}
.kicker,.folio,.micro,.fig-note,.chapter-no {font-family:Arial,Helvetica,sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.2em;color:var(--muted)}
.kicker::before {display:none}
.hero {position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(430px,29.65vw,640px);padding:85px 0 45px;background:#2a2925;overflow:hidden}
.hero-image,.reel-picture,.about-image {background-image:var(--hero-image);background-size:cover;background-position:center var(--hero-position,54%);background-color:#36322e}
.hero-image {position:absolute;z-index:-2;inset:0}
.hero::after {content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0c1112dc 0%,#1115169c 27%,#10141417 58%,transparent 77%),linear-gradient(0deg,#12131355,transparent 47%)}
.hero-content {padding-inline:10px;padding-top:.4rem}
.hero .kicker {color:#d6d0cb;margin-bottom:.75rem}
.hero h1,.section-title,.case h1,.contact h2,.concept h1 {font-family:Arial,Helvetica,sans-serif;font-weight:650;letter-spacing:-.039em}
.hero h1 {font-size:clamp(3rem,4.03vw,5.3rem);line-height:.94;color:#ebe5e1;max-width:12ch}
.hero-intro {color:#e0d9d2;font-size:clamp(.96rem,1.13vw,1.2rem);line-height:1.32;margin-top:1.27rem;letter-spacing:.005em}
.hero-actions {display:flex;gap:clamp(12px,1.85vw,28px);align-items:center;flex-wrap:wrap;margin-top:1.9rem}
.solid {color:#191918;background:#ddd7d3;border:1px solid #ddd7d3;border-radius:2px;min-height:41px;padding:.55rem 1.35rem;font-weight:500}
.solid:hover {color:#161615;background:#fff8ef;border-color:#fff8ef}
.hero-reel,.outline {display:inline-flex;align-items:center;gap:.65rem;min-height:42px;font-size:.85rem}
.hero-reel:hover,.outline:hover,.text-link:hover {color:white}
.play {border:1px solid #f6eee7;border-radius:50%;width:34px;aspect-ratio:1;display:grid;place-items:center;line-height:1;font-size:.8rem;padding-left:2px;color:#f6eee7;flex:none}
.hero-reel:hover .play,.tile:hover .play {background:#eee7e1;color:#161615}
.down {position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:38px}
.portfolio {padding:27px 0 46px}
.portfolio-head {display:flex;justify-content:space-between;align-items:end;gap:1.35rem;padding:0 12px;margin-bottom:20px}
.portfolio-head h2,.about h2 {font-size:clamp(2rem,2.65vw,3.6rem);font-weight:650;line-height:1;letter-spacing:-.035em;margin-top:.45rem}
.portfolio-head .text-link {font-size:.78rem;font-weight:500}
.text-link span,.work-copy .micro {color:var(--ink)}
.portfolio-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.tile {position:relative;display:block;width:100%;min-width:0;aspect-ratio:2.35;min-height:118px;background:#252421;isolation:isolate;overflow:hidden;border-radius:2px}
.tile img {position:absolute;inset:0;z-index:-2;object-position:center 48%;filter:saturate(.66) brightness(.82);transition:transform .4s ease}
.tile::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0b0d0ddd 0%,#0d0d0e14 61%,transparent 80%)}
.tile:hover img {transform:scale(1.045)}
.tile-bottom {position:absolute;inset:auto 13px 14px 22px;display:flex;align-items:end;justify-content:space-between;gap:.5rem}
.tile-title,.tile-category {display:block}
.tile-title {font-size:.95rem;line-height:1.2;color:#fff9f4}
.tile-category {font-size:.73rem;margin-top:.22rem;color:#dbd3cd}
.tile .play {width:32px;height:30px;font-size:.73rem}
.about {display:grid;grid-template-columns:35.55% minmax(0,1fr) 27.5%;align-items:stretch;min-height:clamp(255px,19vw,340px);background:#131413}
.about-image {min-height:100%}
.about-left {position:relative;background-size:cover;background-position:56% center;filter:grayscale(1) brightness(.83)}
.about-right {background-image:linear-gradient(0deg,#11121164,transparent),var(--about-image,var(--hero-image));background-position:62% 50%;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);filter:brightness(.65) saturate(.65)}
.about-copy {padding:22px clamp(20px,4.5vw,72px) 25px}
.about h2 {font-size:clamp(1.9rem,2.1vw,2.8rem);margin-bottom:.72rem}
.about-copy p:not(.kicker) {color:var(--muted);font-size:clamp(.84rem,1.01vw,1rem);line-height:1.35;max-width:44ch}
.outline {border:1px solid #a9a19b;border-radius:2px;padding:0 1.1rem;min-height:34px;margin-top:.95rem;font-size:.78rem}
.outline:hover {background:#2d2c2a}
.section {padding-block:clamp(60px,7vw,110px)}
.references .portfolio-head {padding-inline:0}
.reference-list {border-top:1px solid var(--line)}
.reference-list a {display:grid;grid-template-columns:11rem 1fr auto;gap:1rem;padding:1rem 0;align-items:center;border-bottom:1px solid var(--line)}
.reference-list a:hover {background:#1c1d1c}
.reference-list strong {font-weight:500;font-size:1.08rem}
.studio .section-title,.contact h2 {font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:.98}
.studio .kicker,.studio .micro,.dark .text-link span {color:var(--muted)}
.footer .brand-name {font-size:.88rem}
.footer .wrap {width:min(calc(100% - var(--pad) * 2),var(--max))}
.preview-bar {background:#181918}
.case h1 {font-size:clamp(3rem,7vw,7.8rem);max-width:14ch}
.case-media figcaption {background:#111211e8}
.case .credit,.contact-copy {color:var(--muted)}
.case .reel-picture {aspect-ratio:2.4}
.dialog-inner input,.dialog-inner select,.dialog-inner textarea {background:#242523;color:var(--ink)}
.concept h1 {font-size:clamp(2.9rem,6.7vw,6rem)}
.concept {padding-inline:var(--pad)}
.chapter h2 {font-family:Arial,Helvetica,sans-serif;letter-spacing:-.04em;font-weight:600}
.skip {background:#ede6e0;color:#171716}
@media(max-width:840px) {
  .mast {padding-inline:0}
  .mast nav {gap:1rem}
  .about {grid-template-columns:1fr 1.2fr}
  .about-right {display:none}
  .about-copy {padding-inline:clamp(20px,4vw,45px)}
  .tile-bottom {inset:auto 10px 10px 12px}
}
@media(max-width:650px) {
  .hero {min-height:480px}
  .hero-image {background-position:58% center}
  .hero::after {background:linear-gradient(90deg,#0b0e11dc,#11151a24),linear-gradient(0deg,#10111269,transparent 70%)}
  .hero-content {padding-inline:0}
  .mast nav .optional {display:none}
  .mast .contact-link {min-width:0}
  .portfolio-head {padding-inline:0}
  .portfolio-grid {grid-template-columns:1fr;gap:12px}
  .tile {aspect-ratio:2}
  .tile-bottom {inset:auto 13px 14px 18px}
  .about {grid-template-columns:1fr}
  .about-left {min-height:210px;background-position:55% 52%}
  .about-copy {padding:26px var(--pad) 36px}
  .reference-list a {grid-template-columns:1fr auto;gap:.32rem .8rem}
  .reference-list strong {grid-column:1;grid-row:2}
  .reference-list .list-arrow {grid-column:2;grid-row:1/3}
}
@media(max-width:390px) {
  .mast nav {gap:.7rem}
  .mast nav a {font-size:.77rem}
  .brand-name {font-size:1rem}
  .hero h1 {font-size:2.8rem}
  .hero-intro {font-size:.91rem}
  .portfolio-head .text-link {font-size:.72rem}
}
@media print {
  :root {color-scheme:light;--ink:#151515;--muted:#363636;--line:#aaa}
  body {background:white;color:#151515}
}

.about-image .image-note {position:absolute;bottom:.65rem;left:.75rem;padding:.25rem .38rem;color:#eee9e3;background:#171716a6;font-size:.64rem;letter-spacing:.07em}


:root {--hero-image:url("assets/titelbild.jpg"); --hero-position:40%}
.hero {min-height:clamp(430px,29.65vw,640px)}
.hero-image {background-position:center var(--hero-position)}
.about {grid-template-columns:35.55% minmax(0,1fr); min-height:0}
.about-left {position:relative; min-height:clamp(240px,29vw,435px); overflow:hidden}
.about-left img {position:absolute;inset:0;object-fit:cover;object-position:center 42%}
.about-copy {align-self:center}
.contact {border-top:1px solid var(--line)}
.contact h2 {font-size:clamp(2.2rem,4vw,4rem)}
.contact address {font-style:normal;line-height:1.8}
.contact address a {text-decoration:underline;text-underline-offset:.23em;overflow-wrap:anywhere}
.contact address a:hover {color:white}
.portfolio-head {padding-inline:10px}
.tile {border:0;padding:0;color:inherit;text-align:left}
.tile:hover .play,.tile:focus-visible .play {background:#eee7e1;color:#161615}
.film-dialog {width:min(1050px,calc(100vw - 2rem));max-height:calc(100% - 2rem)}
.film-dialog .dialog-inner {padding:clamp(12px,2.5vw,30px)}
.film-dialog h2 {font:600 clamp(1.15rem,3vw,2rem)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.03em}
.film-dialog video {display:block;width:100%;max-height:72vh;margin-top:1rem;background:#090909}
@media(max-width:650px) {
  .about {grid-template-columns:1fr}
  .about-left {min-height:0;aspect-ratio:5/4}
  .hero-image {background-position:58% 50%}
  .mast nav .about-link {display:none}
}
@media(max-width:410px) {
  .mast nav .home-link {display:none}
}