/* Layout: one white page, a vertical section rail on the left edge, each series a horizontal strip
   of uncropped drawings, series stacked and divided by black lines.
   Type: JetBrains Mono for labels and navigation, IM Fell English for running text.
   Interaction colours: green (hover), violet (current / focus), lilac (selection). */

@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-700.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-weight:400;font-display:swap;src:url(../fonts/im-fell-english-400.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/im-fell-english-400-italic.woff2) format("woff2")}

:root{
  --paper:#ffffff; --ink:#111111; --muted:#6f6f6f; --rule:#e4e4e4;
  --green:#00FF00; --violet:#6E2FFF; --lilac:#C2BBFE;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --serif:"IM Fell English",Georgia,serif;
  --rail:64px; --gut:clamp(20px,4vw,56px);
  --strip:clamp(300px,62vh,680px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 13px/1.55 var(--mono);-webkit-font-smoothing:antialiased}
img{display:block}
::selection{background:var(--lilac);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:hover,button:hover{background:var(--green)}
a:focus-visible,button:focus-visible,.strip:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);padding:6px 10px;z-index:50}
.skip:focus{left:calc(var(--rail) + 8px)}

/* ---------- vertical rail ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 0;z-index:20;background:var(--paper)}
.rail a{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.14em;font-size:12px;padding:6px 3px;white-space:nowrap}
.rail-name{font-weight:700}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:22px}
.rail a[aria-current="true"]{color:var(--violet)}
.rail a[aria-current="true"]::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-top:8px}

/* ---------- page ---------- */
main{margin-left:var(--rail);padding:0 var(--gut) 64px}
.intro{padding:32px 0 clamp(56px,10vw,140px);display:flex;justify-content:flex-end}
.intro h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* same weight and spacing as the name on the rail */
.intro p{margin:0;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
section{padding-bottom:clamp(80px,12vw,160px)}
.label{margin:0 0 28px;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

/* ---------- works: one horizontal strip per series ---------- */
.row{border-top:1px solid var(--ink);padding:16px 0 clamp(40px,6vw,72px)}
.row:last-child{border-bottom:1px solid var(--ink)}
.row-head{display:grid;grid-template-columns:2.6em 1fr auto;align-items:baseline;gap:4px 16px;margin-bottom:clamp(20px,3vw,32px)}
.row-head .n{color:var(--muted)}
.row-head h3{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.row-head .m{color:var(--muted)}
.row-head h3 .m{font-weight:400;text-transform:none;letter-spacing:.02em}
.row-head .nav{display:flex;gap:4px}
.row-head .nav button{font:inherit;font-size:15px;line-height:1;width:34px;height:30px;border:1px solid var(--ink);background:none;color:inherit;cursor:pointer}
.strip{display:flex;gap:clamp(24px,4vw,56px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.strip img,.strip video{height:var(--strip);width:auto;max-width:none;flex:0 0 auto;scroll-snap-align:start;background:#f6f6f6}
.strip::-webkit-scrollbar{height:3px}
.strip::-webkit-scrollbar-thumb{background:var(--ink)}

.strip [data-s]{cursor:zoom-in}

/* ---------- large view ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink)}
.lb::backdrop{background:var(--paper)}
.lb[open]{display:grid;grid-template-rows:auto 1fr}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px}
.lb-info{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-close{font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.12em;background:none;border:1px solid var(--ink);padding:.5em 1em;cursor:pointer;color:inherit}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 8px 12px;touch-action:pan-y}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font:inherit;font-size:18px;width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);color:inherit;cursor:pointer}
.lb-prev{left:16px}.lb-next{right:16px}

/* ---------- running text ---------- */
.prose{max-width:34em;font:400 clamp(18px,1.6vw,22px)/1.5 var(--serif)}
.prose p{margin:0 0 1em}
.shown{max-width:52em;margin:clamp(32px,5vw,56px) 0 0;line-height:1.9}
.shown .k{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:12px;margin-bottom:6px}
.shown a{border-bottom:1px solid currentColor}
/* exhibitions: show title in the serif italic, so they mix with the collaborations yet stand out */
.shown i{font:italic 400 1.2em/1 var(--serif)}
.shown .sep{color:var(--muted)}

/* ---------- contact ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;border:1px solid var(--ink);padding:.7em 1.3em;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
footer{color:var(--muted);font-size:12px;padding-top:24px;border-top:1px solid var(--rule)}
footer{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.impbtn{font:inherit;color:inherit;background:none;border:0;padding:0;border-bottom:1px solid currentColor;cursor:pointer}
.imprint{flex-basis:100%;padding-top:12px}
.imprint address{font-style:normal;line-height:1.7;color:var(--ink)}

/* ---------- small screens ---------- */
@media (max-width:720px){
  :root{--rail:44px;--strip:clamp(240px,52vh,440px)}
  .rail{padding:18px 0}
  .rail a{font-size:11px;letter-spacing:.12em}
  .rail ul{gap:16px}
  .row-head{grid-template-columns:2.2em 1fr}
  .row-head .nav{display:none}
  .lb-nav{display:none}
  .lb-stage{padding:0 0 12px}
}