@font-face{font-family:Narrow;src:url(../fonts/narrow-regular.woff)format("woff"),url(../fonts/NimbusSansNarrow-Regular.otf)format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Narrow;src:url(../fonts/narrow-bold.woff)format("woff"),url(../fonts/NimbusSansNarrow-Bold.otf)format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url(../fonts/mono-regular.woff)format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Mono;src:url(../fonts/mono-bold.woff)format("woff");font-weight:700;font-display:swap}

:root{
  --ink:#16161a; --mid:#55555c; --light:#8a8a91; --faint:#a6a6ae;
  --rule:#d6d6dc; --hair:#e8e8ec; --paper:#fff;
  --gut:clamp(20px,4vw,52px);
  --maxw:1500px;
  /* overridden per page and per card — each work carries the colour of its
     own photographs. vivid = surfaces, ink = type on white, deep = white on colour */
  --accent:#166FF3; --accent-ink:#1456B8; --accent-deep:#114188; --accent-on:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Mono,ui-monospace,monospace; font-weight:400;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── label: the only decorative device, as in the PDF ── */
.label{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--mid)}
.rule{border:0;border-top:1px solid var(--rule);margin:10px 0 0}
.hair{border:0;border-top:1px solid var(--hair);margin:0}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:62px}
.nav a{text-decoration:none}
.brand{font-weight:800;letter-spacing:-.02em;font-size:17px;white-space:nowrap;flex:0 0 auto}
.nav ul{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none;margin:0;padding:0;
  flex:0 0 auto;flex-wrap:nowrap}
.nav ul a{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);padding-bottom:2px;border-bottom:1px solid transparent;white-space:nowrap}
.nav ul a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav ul a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}

/* ── home hero ── */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(84vh,780px)}
.hero-type{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(36px,6vw,80px) var(--gut)}
.hero-type h1{font-size:clamp(44px,7.2vw,86px);font-weight:800;letter-spacing:-.035em;
  line-height:.94;margin:0 0 26px}
.hero-sub{font-family:Narrow,sans-serif;font-size:clamp(15px,1.5vw,19px);
  color:var(--ink);margin:0;padding-top:22px;border-top:1px solid var(--rule)}
.hero-meta{margin-top:auto;padding-top:34px;font-size:13px;color:var(--mid);line-height:1.9}
.hero-meta a{text-decoration:none;border-bottom:1px solid var(--rule)}
.hero-img{background:#0d0d10;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ── generic section ── */
.section{padding:clamp(48px,7vw,96px) 0}
.section.tight{padding:clamp(34px,4.5vw,60px) 0}
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,5vw,84px);align-items:start}
.statement{font-family:Narrow,sans-serif;font-size:clamp(17px,1.75vw,21px);
  line-height:1.62;margin:26px 0 0;max-width:46ch}

/* ── home: lead, next date, pull quote, featured works ── */
.statement.lead{font-size:clamp(19px,2.1vw,26px);line-height:1.5;margin:0;max-width:52ch}
.next{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  margin:44px 0 0;padding-top:20px;border-top:1px solid var(--rule);font-size:15px;color:var(--mid)}
.next .label{flex:0 0 auto}
.next b{font-weight:600;color:var(--ink)}
.next a{margin-left:auto;font-size:12px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.next a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.pull{margin:0;padding:clamp(46px,7vw,96px) var(--gut);background:#111114;color:#fff}
.pull p{font-family:Narrow,sans-serif;font-style:normal;
  font-size:clamp(22px,3.4vw,44px);line-height:1.28;letter-spacing:-.01em;
  margin:0 auto;max-width:20ch;text-align:center}
.pull cite{display:block;margin:22px auto 0;text-align:center;font-style:normal;
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pull cite a{color:rgba(255,255,255,.82);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32)}
.pull cite a:hover{color:#fff}

.feats .feat{display:block;text-decoration:none;margin:0 0 clamp(30px,4.5vw,64px)}
.feat .ph{aspect-ratio:2/1;overflow:hidden;background:#0d0d10}
.feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feat:hover .ph img{transform:scale(1.02)}
.feat .cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:14px}
.feat h2{font-size:clamp(20px,2.3vw,30px);font-weight:800;letter-spacing:-.03em;margin:0}
.feat p{margin:0;font-size:13px;color:var(--light)}
.more{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid var(--ink);
  padding-bottom:3px}

/* ── about: statement then condensed background ── */
.biowrap{margin:30px 0 0;max-width:62ch}
.biglead{font-family:Narrow,sans-serif;font-size:clamp(18px,2vw,24px);line-height:1.55;
  margin:0 0 26px;color:var(--ink)}
.biosmall{font-size:14.5px;line-height:1.7;color:var(--mid);margin:0;
  padding-top:22px;border-top:1px solid var(--hair)}
.biglead a,.biosmall a,.prose a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule)}
.biglead a:hover,.biosmall a:hover,.prose a:hover{border-bottom-color:var(--ink)}
.cvcols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);margin-top:clamp(34px,5vw,64px)}
.venues{list-style:none;margin:22px 0 0;padding:0;
  columns:2;column-gap:26px;font-size:13.5px;color:var(--mid)}
.venues li{margin:0 0 5px;break-inside:avoid}

.quotes{margin:26px 0 0;padding:0;list-style:none}
.quotes cite a{color:var(--mid);text-decoration:none;border-bottom:1px solid var(--rule)}
.quotes cite a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.quotes li{margin:0 0 20px}
.quotes q{font-family:Narrow,sans-serif;font-style:normal;font-size:16px;
  line-height:1.5;quotes:"\201C" "\201D"}
.quotes cite{display:block;margin-top:5px;font-size:10.5px;font-style:normal;
  letter-spacing:.15em;text-transform:uppercase;color:var(--light)}

.taglist{margin:22px 0 0;font-size:13px;color:var(--mid);line-height:1.85}

/* ── works index ── */
.works{list-style:none;margin:22px 0 0;padding:0}
.works li{border-bottom:1px solid var(--hair)}
.works a{display:grid;grid-template-columns:34px 1fr auto;gap:14px;
  align-items:baseline;padding:15px 0;text-decoration:none}
.works a:hover .wt{text-decoration:underline;text-underline-offset:3px}
.wn{font-size:11px;font-weight:500;color:var(--faint)}
.wt{font-size:clamp(16px,1.7vw,19px);font-weight:600;letter-spacing:-.01em}
.wsub{grid-column:2;font-size:12.5px;color:var(--light);margin-top:2px}
.wy{font-size:13px;color:var(--mid)}

/* ── work cards grid (works.html) ── */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);margin-top:34px}
.card{text-decoration:none;display:block}
.card .ph{aspect-ratio:3/2;overflow:hidden;background:#0d0d10}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.03)}
.card.book .ph{background:#fff;border:1px solid var(--hair)}
.card.book .ph img{object-fit:contain;padding:10px}
.card.book:hover .ph img{transform:none}
.card h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:14px 0 3px}
.card p{margin:0;font-size:12.5px;color:var(--light)}

/* ── work page ── */
.workhero{width:100%;aspect-ratio:16/7;overflow:hidden;background:#0d0d10}
.workhero img{width:100%;height:100%;object-fit:cover}
.workhead{padding:clamp(30px,4.5vw,58px) 0 clamp(24px,3.5vw,44px)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--light);margin:0 0 14px}
.eyebrow b{color:var(--ink);font-weight:600;margin-right:14px}
.workhead h1{font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;margin:0;overflow-wrap:anywhere}
.venue{margin:16px 0 0;font-size:14px;color:var(--mid);max-width:52ch}

.meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,54px);padding-bottom:clamp(34px,5vw,64px)}
.meta h2{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mid);margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
.credit{margin:0 0 13px}
.credit dt{font-size:11.5px;font-weight:500;color:var(--light);letter-spacing:.02em}
.credit dd{margin:1px 0 0;font-size:14.5px}
.credit.photo dt{font-size:10.5px}
.credit.photo dd{font-size:12.5px;color:var(--mid)}
.prose{font-size:13px;color:var(--mid);line-height:1.55;margin:0 0 12px}
.prose.fund{font-size:12px;color:var(--light)}
.prose.note{font-family:Narrow,sans-serif;font-style:normal}
.artists{font-size:11.5px;color:var(--light);line-height:1.5;margin:12px 0 0}
.linkbtn{display:inline-block;margin:4px 12px 0 0;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.linkbtn:hover{color:var(--mid);border-bottom-color:var(--mid)}

/* ── teaser: poster + play button, iframe injected only on click ── */
.video{position:relative;overflow:hidden;background:#0d0d10;margin-top:24px}
.video::before{content:"";display:block;padding-top:56.25%}
.video img,.video iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}
.video img{object-fit:cover;opacity:.62}
.video.on{background:#000}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--ink);border:0;
  font:600 13px/1 Mono,monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;border-radius:999px;transition:background .2s}
.video .play:hover{background:#fff}
.video .tri{width:0;height:0;border-left:11px solid var(--ink);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.video .vnote{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;
  font-size:11px;color:rgba(255,255,255,.8);background:linear-gradient(transparent,rgba(0,0,0,.55))}
.video.on .vnote,.video.on .play{display:none}

/* ── impressum ── */
.imh{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mid);margin:30px 0 8px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.imp{font-size:14.5px;line-height:1.65;color:var(--mid);margin:0 0 10px;max-width:66ch}
.imp a{color:var(--ink)}

.gallery figure{margin:0 0 clamp(14px,2vw,26px)}
.gallery img{width:100%}
.gallery.book{background:#fff;padding:clamp(20px,4vw,60px) 0}
.gallery.book img{max-width:1100px;margin:0 auto}

.pager{display:flex;justify-content:space-between;gap:20px;
  padding:clamp(34px,5vw,64px) 0;border-top:1px solid var(--hair);font-size:13px}
.pager a{text-decoration:none;color:var(--mid)}
.pager a:hover{color:var(--ink)}
.pager span{color:var(--faint)}

/* ── cv ── */
.cv{columns:2;column-gap:clamp(30px,5vw,80px);margin-top:30px}
.cvsec{break-inside:avoid;margin:0 0 30px}
.cvsec h2{font-size:11px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--mid);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.cvsec dl{margin:0;display:grid;grid-template-columns:88px 1fr;gap:3px 14px}
.cvsec dt{font-size:12.5px;font-weight:500}
.cvsec dd{margin:0;font-size:13.5px;color:var(--mid)}
.cvsec ul.plain{list-style:none;margin:0;padding:0}
.cvsec ul.plain li{font-size:13.5px;color:var(--mid);margin:0 0 4px}

/* ── contact ── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.contact-type{padding:clamp(40px,6vw,90px) var(--gut)}
.contact-type h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;margin:26px 0 24px}
.contact dl{display:grid;grid-template-columns:82px 1fr;gap:9px 16px;margin:0 0 30px;font-size:14.5px}
.contact dt{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--light);padding-top:4px}
.contact dd{margin:0;color:var(--mid)}
.contact dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.contact-img{background:#0d0d10;min-height:340px}
.contact-img img{width:100%;height:100%;object-fit:cover}
.upcoming{margin:0 0 34px}
.upcoming div{margin:0 0 15px}
.upcoming b{font-size:15px;font-weight:600}
.upcoming span{display:block;font-size:12.5px;color:var(--light)}

/* ── footer ── */
.foot{border-top:1px solid var(--hair);padding:30px 0 40px;font-size:12px;color:var(--light)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}
.foot a{text-decoration:none;color:var(--mid)}

@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
  .cvcols{grid-template-columns:1fr}
  .venues{columns:1}
  .feat .ph{aspect-ratio:3/2}
  .next a{margin-left:0}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-img{aspect-ratio:4/5;order:-1}
  .cols{grid-template-columns:1fr}
  .cv{columns:1}
  .contact{grid-template-columns:1fr}
  .contact-img{order:-1;aspect-ratio:4/5;min-height:0}
  .workhero{aspect-ratio:4/3}
  .nav ul{gap:14px}
  .nav ul a{font-size:11px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ════════════════════════════════════════════════════════════════════
   NEON
   The page ground is fluorescent, one colour per work, type is black.
   Greys are replaced by black at reduced opacity — real grey goes muddy
   on neon. Bars invert: black surface, neon type. The photographs are
   the only quiet thing on the page, which is what makes them land.
   ════════════════════════════════════════════════════════════════════ */

body{background:var(--bg);color:#0A0A0C}
::selection{background:#0A0A0C;color:var(--bg)}

/* greys → black alphas so nothing looks dirty on fluorescent ground */
.label,.next,.wsub,.card p,.feat p,.venues,.biosmall,.prose,.artists,
.quotes cite,.taglist,.credit dt,.hero-meta,.contact dt,.contact dd,
.imp,.upcoming span,.foot,.pager,.wn,.wy,.imh,.meta h2,.bio h2,.cvsec h2{
  color:rgba(10,10,12,.72)}
.prose.fund,.artists,.credit.photo dd,.wn{color:rgba(10,10,12,.6)}
.rule{border-top:2px solid #0A0A0C}
.hair,.biosmall,.hero-sub,.next,.pager,.cvsec h2,.imh,.meta h2{
  border-color:rgba(10,10,12,.25)}
.statement,.biglead,.quotes q,.credit dd,.wt,.card h2,.feat h2,.upcoming b,
.next b,.contact dd a{color:#0A0A0C}

/* nav and footer invert */
.nav{background:#0A0A0C;border-bottom:0;backdrop-filter:none}
.nav .brand{color:var(--bg)}
.nav ul a{color:rgba(255,255,255,.72);border-bottom-color:transparent}
.nav ul a:hover,.nav ul a[aria-current=page]{color:var(--bg);border-bottom-color:var(--bg)}
.foot{background:#0A0A0C;border-top:0;color:rgba(255,255,255,.6);margin-top:0}
.foot a{color:var(--bg);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* links: black rule under, invert to a neon-on-black chip on hover */
a.linkbtn,.more,.next a,.hero-meta a,.quotes cite a,.biglead a,.biosmall a,
.prose a,.imp a,.contact dd a{
  color:#0A0A0C;border-bottom:2px solid #0A0A0C;text-decoration:none;
  transition:background .15s,color .15s}
a.linkbtn:hover,.more:hover,.next a:hover,.hero-meta a:hover,.quotes cite a:hover,
.biglead a:hover,.biosmall a:hover,.prose a:hover,.imp a:hover,.contact dd a:hover{
  background:#0A0A0C;color:var(--bg);border-bottom-color:#0A0A0C}

/* pull quote inverts: black block, neon type */
.pull{background:#0A0A0C;color:var(--bg)}
.pull cite{color:var(--bg);opacity:.7}
.pull cite a{color:var(--bg);border-bottom-color:currentColor}
.pull cite a:hover{background:var(--bg);color:#0A0A0C}

/* photographs sit straight on the neon, with a hard black edge */
.hero-img,.card .ph,.feat .ph,.workhero,.video{border:0;background:#0A0A0C}
.workhero{border-bottom:8px solid #0A0A0C}
.feat .cap{border-top:4px solid #0A0A0C;padding-top:12px}
.card .ph{border-bottom:5px solid #0A0A0C}
.card.book .ph,.gallery.book{background:#fff;border-color:#0A0A0C}
.gallery img{border-bottom:0}

/* buttons */
.play{background:#0A0A0C!important;color:var(--bg)!important}
.play:hover{background:var(--bg)!important;color:#0A0A0C!important}
.tri{border-left-color:currentColor!important}
.vnote{color:rgba(255,255,255,.8)}

.venues li::before{content:"";display:inline-block;width:7px;height:7px;
  margin-right:9px;vertical-align:1px;background:#0A0A0C}

/* each card is a tile in its own work's neon — the grid becomes a poster wall */
.card{background:var(--bg);border:3px solid #0A0A0C}
.card .ph{border-bottom:3px solid #0A0A0C}
.card h2{padding:12px 14px 0;margin:0 0 3px}
.card p{padding:0 14px 14px}
.card:hover{background:#0A0A0C}
.card:hover h2{color:var(--bg)}
.card:hover p{color:rgba(255,255,255,.7)}

/* featured captions on the home page take their work's neon */
.feat .cap{background:var(--bg);border-top:4px solid #0A0A0C;
  padding:12px 16px 14px;margin-top:0}
.feat:hover .cap{background:#0A0A0C}
.feat:hover h2{color:var(--bg)}
.feat:hover p{color:rgba(255,255,255,.7)}

/* ════════════════════════════════════════════════════════════════════
   EDGE
   Condensed grotesque for titles, monospace for everything else, no
   serif anywhere. All running text lowercase; only the work titles and
   the name keep their own casing. One neon per page, no second colour.
   ════════════════════════════════════════════════════════════════════ */

body{text-transform:lowercase;letter-spacing:0}
h1,.workhead h1,.feat h2,.card h2,.hero-type h1{text-transform:none}

/* titles: condensed, heavy, tight */
.hero-type h1,.workhead h1,.feat h2,.card h2,.wt,.pull p,.biglead,
.statement,.quotes q,.upcoming b,.contact-type h1,.brand{
  font-family:Narrow,"Arial Narrow",sans-serif}
.hero-type h1,.workhead h1{font-weight:700;letter-spacing:-.02em;line-height:.9}
.hero-type h1{font-size:clamp(56px,10vw,132px)}
.workhead h1{font-size:clamp(38px,6.4vw,86px)}
.feat h2{font-weight:700;letter-spacing:-.015em;font-size:clamp(24px,3vw,42px)}
.card h2{font-weight:700;letter-spacing:-.01em;font-size:clamp(19px,2vw,24px)}
.pull p{font-weight:700;letter-spacing:-.015em;font-size:clamp(30px,5.2vw,72px);
  line-height:1.02;max-width:16ch}
.statement.lead{font-weight:700;font-size:clamp(24px,3.2vw,42px);line-height:1.06;
  letter-spacing:-.015em;max-width:24ch}
.biglead{font-weight:700;font-size:clamp(22px,2.8vw,36px);line-height:1.08;
  letter-spacing:-.015em;max-width:26ch}
.quotes q{font-weight:700;font-size:clamp(17px,1.7vw,22px);line-height:1.12;
  letter-spacing:-.01em}
.hero-sub{font-family:Mono,monospace;font-size:13px;letter-spacing:.02em}

/* everything small is mono, lowercase, no more tracked-out caps */
.label,.nav ul a,.more,.linkbtn,.eyebrow,.meta h2,.imh,.quotes cite,
.caption,.next a,.next .label,.wn,.foot,.vnote,.play{
  text-transform:lowercase;letter-spacing:.02em;font-family:Mono,monospace}
.label,.meta h2,.imh{font-size:12px;font-weight:700}
.nav ul a{font-size:13px;letter-spacing:.02em}
.brand{font-weight:700;font-size:22px;letter-spacing:-.01em}
.eyebrow{font-size:12px}
.quotes cite{font-size:12px;letter-spacing:.02em}
.credit dt{font-size:12px}
.credit dd{font-size:14px;font-weight:700}

/* hard edges: no soft corners, no shadows, thick black rules */
*{border-radius:0!important;box-shadow:none!important}
.rule{border-top-width:3px}
.play{border-radius:0!important;font-weight:700;padding:14px 22px}

/* one neon per page — tiles share the page ground, separated by black */
.card{background:transparent;border:3px solid #000}
.card .ph{border-bottom:3px solid #000}
.feat .cap{background:transparent;border-top:4px solid #000}
.feat:hover .cap,.card:hover{background:#000}
.feat:hover h2,.card:hover h2{color:var(--bg)}
.feat:hover p,.card:hover p{color:var(--bg);opacity:.75}

/* push the display harder: Nimbus Narrow is only semi-condensed, so it needs
   size and negative tracking to read as a poster rather than a headline */
.hero-type h1{font-size:clamp(64px,12.5vw,180px);letter-spacing:-.035em;line-height:.82}
.workhead h1{font-size:clamp(42px,8vw,116px);letter-spacing:-.03em;line-height:.86}
.pull p{font-size:clamp(34px,6.4vw,96px);letter-spacing:-.03em;line-height:.94;max-width:14ch}
.statement.lead{font-size:clamp(26px,4vw,58px);letter-spacing:-.025em;line-height:.98;max-width:20ch}
.biglead{font-size:clamp(24px,3.4vw,48px);letter-spacing:-.025em;line-height:1;max-width:22ch}
.feat h2{font-size:clamp(26px,3.6vw,56px);letter-spacing:-.025em}
.quotes q{font-size:clamp(18px,2vw,26px);letter-spacing:-.015em;line-height:1.08}

/* black keyline round the whole page and hard black separators */
body{border:6px solid #000}
.nav{border-bottom:6px solid #000}
.foot{border-top:6px solid #000}
.pull{border-top:6px solid #000;border-bottom:6px solid #000}
.workhero{border-bottom:6px solid #000}

/* the display had outgrown its column — size it to the grid, not to the page */
.hero-type h1{font-size:clamp(46px,6.4vw,104px);line-height:.9;
  margin:0 0 24px;overflow-wrap:anywhere}
.hero-type{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(30px,4vw,56px)}
.workhead h1{font-size:clamp(36px,6vw,88px);line-height:.92}
.pull p{font-size:clamp(30px,5vw,76px);line-height:1}
.statement.lead{font-size:clamp(24px,3.4vw,46px);line-height:1.02;max-width:22ch}
.biglead{font-size:clamp(22px,3vw,40px);line-height:1.05}
.feat h2{font-size:clamp(24px,3.2vw,46px)}

/* the next date had shrunk into a caption — give it its own band */
.nextbar{border-top:6px solid #000;border-bottom:6px solid #000;
  padding:clamp(26px,3.6vw,52px) 0;margin-top:clamp(30px,4vw,56px)}
.nextbar .label{margin:0 0 10px}
.nextbar h2{font-family:Narrow,"Arial Narrow",sans-serif;font-weight:700;
  text-transform:none;letter-spacing:-.025em;line-height:.94;
  font-size:clamp(30px,5vw,72px);margin:0 0 8px}
.nextbar .nextmeta{font-family:Mono,monospace;font-size:clamp(13px,1.3vw,17px);
  margin:0 0 18px;color:#000}
.nextbar .more{font-size:13px}

/* phones: the nav ran off the right edge below ~420px */
@media (max-width:520px){
  .nav .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:8px}
  .brand{font-size:19px}
  .nav ul{gap:12px;flex-wrap:wrap;width:100%}
  .nav ul a{font-size:12px}
}

/* nav wraps by construction rather than at a breakpoint: on wide screens there
   is room and it stays on one line, on a phone it drops to a second row */
.nav .wrap{flex-wrap:wrap;height:auto;min-height:62px;
  padding-top:10px;padding-bottom:10px;row-gap:6px}
.nav ul{flex-wrap:wrap;row-gap:4px}

/* the home hero had five stacked elements before any content — two now */
.hero-sub{font-family:Mono,monospace;font-size:13px;letter-spacing:.02em;
  border-top:3px solid #000;padding-top:16px;margin-top:4px}
/* on a phone the portrait crop cut his head off */
.hero-img img{object-position:50% 14%}

/* contact dates: were caption-sized, now a band like the home page */
.upcoming{margin:26px 0 0}
.upcoming .up{border-top:3px solid #000;padding:16px 0 18px}
.upcoming .up h2{font-family:Narrow,"Arial Narrow",sans-serif;font-weight:700;
  text-transform:none;letter-spacing:-.02em;line-height:.96;
  font-size:clamp(26px,3.6vw,46px);margin:0 0 6px}
.upcoming .up .nextmeta{margin:0;font-family:Mono,monospace;
  font-size:clamp(12px,1.2vw,15px);color:#000}

/* the hero column was near-empty: the label pushed the name to the bottom and
   the text sat in a separate block below. Name and text now share the column. */
.hero{min-height:min(88vh,860px)}
.hero-type{justify-content:center;gap:0}
.hero-type .label{margin:0 0 18px}
.hero-type h1{margin:0 0 28px;font-size:clamp(46px,5.6vw,96px);line-height:.9}
.hero-type .statement.lead{font-size:clamp(19px,1.9vw,30px);line-height:1.14;
  letter-spacing:-.015em;max-width:26ch;margin:0 0 30px}
.hero-sub{margin:0;padding-top:16px;border-top:3px solid #000}
@media (max-width:860px){
  .hero{min-height:0}
  .hero-type{padding-top:34px;padding-bottom:38px}
}

/* fill it: the name carries the page, the sentence sits under it at reading size */
.hero{min-height:min(82vh,820px)}
.hero-type{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(30px,4vw,56px)}
.hero-type h1{font-size:clamp(54px,8.4vw,124px);letter-spacing:-.045em;margin:0 0 32px}
.hero-type .statement.lead{font-size:clamp(20px,2.35vw,34px);line-height:1.12;
  max-width:24ch;margin:0 0 34px}
.hero-type .label{font-size:12px;margin:0 0 22px}
@media (max-width:860px){
  .hero-type h1{font-size:clamp(46px,13vw,80px)}
  .hero-type .statement.lead{font-size:clamp(19px,5.2vw,26px);max-width:none}
}

/* the location line is gone: the sentence now closes the column */
.hero-type .statement.lead:last-child{margin-bottom:0}

/* the stairwell photo has him standing small in a wide frame: crop in on him,
   the same move the portfolio's last page makes */
.contact-img{overflow:hidden}
.contact-img img{transform:scale(1.42);transform-origin:50% 34%}

/* language switch: sits at the end of the bar, reads as a control rather than
   as a fifth navigation item, and stays legible on every neon ground */
.nav .wrap{gap:14px}
.lang{flex:0 0 auto;margin-left:auto;text-decoration:none;
  font-family:Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#000;background:var(--bg,#FF00A0);
  border:2px solid #000;padding:5px 10px;line-height:1;white-space:nowrap}
.lang:hover{background:#000;color:var(--bg,#FF00A0)}
@media (max-width:860px){
  .nav .wrap{flex-wrap:wrap}
  .lang{margin-left:0;order:2}
}

/* German compounds are longer than the 14ch measure the English quote was cut
   to, so a word like „dauerdurchgeknallte" overflowed the centred box to the
   right and threw the line off centre. min-content wins over max-width, so the
   box now grows to fit its longest word and stays centred. */
.pull p,.statement.lead,.biglead,.hero-type h1,.workhead h1{min-width:min-content}

/* The quote is centred, but a word wider than the measure overflows to the
   right and drags the line off centre. „dauerdurchgeknallte" is 368 pt wide
   where the English measure allows 14ch. German gets its own, wider measure;
   min-content is the guard for any future word that outgrows even that. */
.pull p{min-width:min-content}
html[lang="de"] .pull p{max-width:20ch}

/* With the sentence gone the name has to carry the column on its own, so it
   grows to fill it. Emptiness then reads as composition rather than a gap. */
.hero-type h1{font-size:clamp(64px,10.5vw,170px);line-height:.84;margin:0}
.hero-type .label{margin:0 0 26px}

/* ══ review pass ══════════════════════════════════════════════════════════
   Everything below was added after reading the built pages back. */

/* Skip link: with the language switch there are seven stops before the content,
   on every page. Keyboard users get one jump instead. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#000;color:#fff;
  font-family:Mono,monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:12px 18px;text-decoration:none}
.skip:focus{left:0}

/* Keyboard focus was left to the browser default, which on a saturated ground
   is barely readable. Black on the neon, offset so it never touches the glyphs. */
a:focus-visible,button:focus-visible{outline:3px solid #000;outline-offset:3px}
.pull a:focus-visible,.foot a:focus-visible,.nextbar a:focus-visible{
  outline-color:var(--bg,#FF00A0)}

/* The works and about pages had no h1 at all — only a small label. Screen
   readers and search results had nothing to name the page with. */
.pagehead{font-family:Narrow,sans-serif;font-weight:700;text-transform:none;
  font-size:clamp(34px,5vw,64px);line-height:.92;letter-spacing:-.03em;
  margin:20px 0 0}

/* Images now carry width and height attributes. Without this the intrinsic
   ratio would fight the layout, so the ones that fill a box are told to ignore
   their own dimensions. */
.hero-img img,.contact-img img,.workhero img,.feat .ph img,.card .ph img,
.video img{width:100%;height:100%}

/* The mobile heading sizes sat in a media query that a later rule of mine
   overrode. Re-asserted here, after everything else. */
@media (max-width:860px){
  .hero-type h1{font-size:clamp(46px,13vw,80px);line-height:.88}
  .pagehead{font-size:clamp(30px,8vw,44px)}
}

/* Someone will print the about page. Drop the neon, keep the text readable. */
@media print{
  body{background:#fff!important;color:#000!important}
  .nav,.foot,.skip,.lang,.pager,.video,.gallery,.hero-img{display:none!important}
  .pull{background:#fff!important;color:#000!important;border:0!important}
  .pull p,.pull cite{color:#000!important}
  a{text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
}

/* The card and feature thumbs relied on aspect-ratio alone, which left the rows
   ragged wherever a book cover has a different shape than a photograph. The
   padding technique holds the box open in every renderer, so the captions line
   up across a row. */
.card .ph,.feat .ph{position:relative;height:0;overflow:hidden;aspect-ratio:auto}
.card .ph{padding-top:66.67%}
.feat .ph{padding-top:50%}
.card .ph img,.feat .ph img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){.feat .ph{padding-top:66.67%}}

/* On a work page the cast list runs 678 pt while the production note runs 62 —
   side by side that left half the right column empty. Credits now take two
   thirds of the width in two columns, which halves their height, and the note
   sits in the remaining third instead of opposite a wall of names. */
.meta{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.credit-list{columns:2;column-gap:clamp(20px,3vw,44px)}
.credit{break-inside:avoid}
@media (max-width:1100px){.credit-list{columns:1}}
@media (max-width:860px){.meta{grid-template-columns:1fr}}

/* The featured captions put the title and the meta line on one row, so a long
   title wrapped around the meta text. Title first, meta under it. */
.feat .cap{display:block}
.feat .cap p{margin-top:7px}

/* With one date left the contact column ended 118 pt above the photo. Centring
   it turns the remaining colour into a margin rather than a gap. */
.contact-type{display:flex;flex-direction:column;justify-content:center}

/* The nav was allowed to wrap at every width — a stopgap from the mobile
   overflow fix that was never scoped. On a wide screen the four items belong
   on one line beside the name; only narrow screens need the second row. */
.nav .wrap{flex-wrap:nowrap}
.nav ul{flex-wrap:nowrap}
@media (max-width:700px){
  .nav .wrap{flex-wrap:wrap;row-gap:8px}
  .nav ul{flex-wrap:wrap;row-gap:4px;order:3;width:100%}
  .lang{order:2;margin-left:auto}
}

/* Book covers sat almost edge to edge in their frames while the photographs are
   cropped, so the two books read as louder than the eight works. More air. */
.card.book .ph img{padding:26px}
.gallery.book figure img,.gallery.book>.wrap>img{padding:clamp(30px,5vw,90px)}



/* A work that has its own site says so, right under the venue. */
.worksite{margin:6px 0 0;font-family:Mono,monospace;font-size:12px;letter-spacing:.02em}
.worksite a{color:#0A0A0C;text-decoration:none;border-bottom:2px solid #0A0A0C}
.worksite a:hover{background:#0A0A0C;color:var(--bg)}

/* The rule above a featured caption floated 14 px below the photograph. It
   belongs against the image, like a caption bar. */
.feat .cap{margin-top:0}

/* The hero photo stopped 52 px short of the black bar, leaving a strip of the
   frame's own dark ground. A percentage height needs a definite parent height;
   the grid row alone was not enough. Fixed height at wide widths, released
   again on narrow ones where the hero stacks. */
.hero{height:min(82vh,820px)}
@media (max-width:860px){.hero{height:auto;min-height:0}}

/* On a phone the switch dropped onto a second row under the tabs. Short code
   instead, so the bar stays one line. */
.lg-short{display:none}
@media (max-width:700px){
  .lg-long{display:none}
  .lg-short{display:inline}
  .nav .wrap{flex-wrap:nowrap;row-gap:0}
  .nav ul{flex-wrap:nowrap;order:0;width:auto;gap:clamp(10px,3vw,16px)}
  .nav ul a{font-size:10.5px;letter-spacing:.06em}
  .brand{font-size:15px}
  .lang{order:0;margin-left:auto;padding:5px 7px;letter-spacing:.08em}
}

/* The production note was set in the condensed face while everything around it
   is mono — it read as a different voice for no reason. Same face now. */
.prose.note{font-family:inherit;font-style:normal}

/* Book covers run the full width of the page: they are the work, not an
   illustration of it. */
.gallery.book{padding:0}
.gallery.book img{max-width:none;margin:0}
.gallery.book figure img,.gallery.book>.wrap>img{padding:0}
.gallery.book>.wrap{padding:0;max-width:none}

/* With no production block the credits should not sit in a two-thirds column
   with nothing beside them. */
.meta:has(.m-credits:only-child){grid-template-columns:1fr}

/* On a phone the portrait frame got its height from aspect-ratio, which left
   the percentage height of the image unresolved — so it sat small in a dark
   box instead of filling the frame. A real length fixes it. The extra zoom is
   also eased off: a narrow upright crop of a wide photograph already cuts a
   lot away. */
@media (max-width:860px){
  .contact-img{height:min(120vw,620px);min-height:0;aspect-ratio:auto}
  .contact-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.16)}
}

/* German funder names are long enough to shoot past the edge of a phone
   screen — „Oberfrankenstiftung" did. Break only where a word genuinely does
   not fit; normal text is unaffected. */
.prose,.credit dd,.credit dt,.artists,.venues,.biosmall,.quotes q,.imp,
.worksite,.nextmeta,.wsub,.card p,.feat p{overflow-wrap:break-word}