:root{
    --wall:#eeece3;
    --wall-2:#e3e0d2;
    --ink:#18181a;
    --ink-soft:#55564c;
    --line:#cfccba;
    --rust:#a5391f;
    --ochre:#8f6d28;
    --teal:#2c454c;
    --wall-rgb:238,236,227;
    --nav-h:66px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --wall:#141412;
      --wall-2:#1d1c18;
      --ink:#ece8dc;
      --ink-soft:#a8a496;
      --line:#39372e;
      --rust:#d15b3a;
      --ochre:#c9a24e;
      --teal:#6f9aa3;
      --wall-rgb:20,20,18;
    }
  }
  :root[data-theme="dark"]{
    --wall:#141412;
    --wall-2:#1d1c18;
    --ink:#ece8dc;
    --ink-soft:#a8a496;
    --line:#39372e;
    --rust:#d15b3a;
    --ochre:#c9a24e;
    --teal:#6f9aa3;
    --wall-rgb:20,20,18;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

  body{
    margin:0;
    background:var(--wall);
    color:var(--ink);
    font-family:"Newsreader", ui-serif, Georgia, serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}
  h1,h2,h3{text-wrap:balance; margin:0;}
  a{color:inherit;}

  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding-inline: clamp(20px, 5vw, 64px);
  }

  .mono{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .label{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:0.72rem;
    color:var(--ink-soft);
  }
  .display{
    font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:0.88;
  }

  /* ---------- nav ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(var(--wall-rgb),0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    min-height:var(--nav-h);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    min-height:var(--nav-h);
    padding-block:14px;
    gap:16px;
  }
  .nav-logo{
    font-family:"IBM Plex Mono", monospace;
    font-weight:600;
    letter-spacing:0.1em;
    font-size:0.85rem;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
  }
  .nav-links{
    display:flex; gap:clamp(14px,3vw,32px);
    list-style:none; margin:0; padding:0;
    flex-wrap:wrap;
  }
  .nav-links a{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    text-decoration:none;
    color:var(--ink-soft);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{
    color:var(--rust);
    border-color:var(--rust);
  }
  .nav-links a[aria-current="page"]{
    color:var(--ink);
    border-color:var(--ink);
  }
  .nav-right{display:flex; align-items:center; justify-content:flex-end; gap:clamp(16px,2.6vw,30px); flex-wrap:wrap;}
  .lang-links{
    display:flex; gap:12px;
    list-style:none; margin:0; padding:0 0 0 clamp(16px,2.6vw,30px);
    border-left:1px solid var(--line);
  }
  .lang-links a{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem; letter-spacing:0.1em;
    text-decoration:none;
    color:var(--ink-soft);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .lang-links a:hover, .lang-links a:focus-visible{color:var(--rust); border-color:var(--rust);}
  .lang-links a[aria-current="true"]{color:var(--ink); border-color:var(--ink);}
  h1,h2,h3{overflow-wrap:break-word;}
  .page-note{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.74rem; letter-spacing:0.04em;
    color:var(--ink-soft);
    margin:12px 0 0; max-width:60ch;
  }
  a:focus-visible, button:focus-visible{outline:2px solid var(--rust); outline-offset:3px;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:calc(100svh - var(--nav-h));
    display:flex;
    align-items:flex-end;
  }
  .hero-media{
    position:absolute; inset:0; z-index:0;
  }
  .hero-media img{
    width:100%; height:100%;
    object-fit:cover; object-position:50% 22%;
    filter:grayscale(1) contrast(1.1) brightness(0.94);
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(12,10,8,0.08) 0%, rgba(12,10,8,0.18) 42%, rgba(12,10,8,0.9) 100%);
  }
  .hero-wash{
    position:absolute; inset:0; z-index:1;
    background:var(--rust); mix-blend-mode:multiply; opacity:0.16;
  }
  .hero-grain{
    position:absolute; inset:0; z-index:1;
    opacity:0.05; mix-blend-mode:overlay; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-overlay{
    position:relative; z-index:2;
    width:100%;
    padding-block: 32px clamp(44px,7vw,84px);
    display:flex; flex-direction:column; gap:20px;
    color:#f7f4ea;
  }
  .hero-overlay .label{color:rgba(247,244,234,0.75);}
  .hero-name{
    font-size:clamp(3.6rem, 11vw, 8rem);
    margin:0;
    color:#faf7ee;
  }

  .scroll-cue{
    position:absolute; left:50%; bottom:22px; z-index:2;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:rgba(247,244,234,0.7);
    text-decoration:none;
    font-size:1.1rem;
    animation:cue-bob 2.2s ease-in-out infinite;
  }
  @keyframes cue-bob{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,6px);}
  }
  @media (prefers-reduced-motion: reduce){ .scroll-cue{animation:none;} }

  /* ---------- section shell ---------- */
  section{padding-block:clamp(48px,7vw,88px);}
  .section-head{
    display:flex; align-items:baseline; gap:18px;
    margin-bottom:clamp(28px,4vw,44px);
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
  }
  .section-head h2{
    font-size:clamp(2.2rem,5vw,3.4rem);
  }
  .section-head .label{white-space:nowrap;}
  .section-intro{
    max-width:62ch;
    color:var(--ink-soft);
    margin:0 0 32px;
  }
  hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

  /* ---------- about ---------- */
  #about{border-top:1px solid var(--line);}
  .about-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr;
    gap:clamp(32px,5vw,72px);
    align-items:start;
  }
  .bio p{margin:0 0 1.1em;}
  .bio p:first-child{font-size:1.32rem; line-height:1.45;}
  .quote cite{
    display:block; margin-top:10px;
    font-style:normal;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .quote cite a{color:var(--rust);}
  .quote{
    font-style:italic;
    font-size:1.25rem;
    color:var(--ink);
    border-left:2px solid var(--rust);
    padding-left:18px;
    margin:1.6em 0;
  }

  .credentials{display:flex; flex-direction:column; gap:32px;}
  .cred-block h3{
    font-family:"IBM Plex Mono", monospace;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.78rem;
    color:var(--ink-soft);
    margin-bottom:12px;
  }
  .cred-list{list-style:none; margin:0; padding:0;}
  .cred-list li{
    display:flex; gap:14px;
    padding:9px 0;
    border-top:1px solid var(--line);
    font-size:0.92rem;
  }
  .cred-list li:last-child{border-bottom:1px solid var(--line);}
  .cred-list .yr{
    font-family:"IBM Plex Mono", monospace;
    font-variant-numeric:tabular-nums;
    color:var(--rust);
    flex:0 0 auto;
    font-size:0.82rem;
    padding-top:2px;
  }
  .member-line{
    display:flex; gap:10px; flex-wrap:wrap;
    padding-top:4px;
  }
  .badge{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    border:1px solid var(--line);
    padding:5px 10px;
    color:var(--ink-soft);
  }

  /* ---------- galleries ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(380px,100%),1fr));
    gap:clamp(20px,3vw,44px);
  }
  /* Each work sits centred in its cell at its own proportions, matted by a thin white border. Nothing is cropped. */
  .frame{
    margin:0;
    aspect-ratio:4/5;
    display:flex; align-items:center; justify-content:center;
    cursor:zoom-in;
    transition:opacity .5s ease, transform .5s ease;
  }
  .reveal-ready .frame:not(.in-view){opacity:0; transform:translateY(14px);}
  .frame img{
    display:block;
    width:auto; height:auto;
    max-width:100%; max-height:100%;
    border:6px solid #fff;
    box-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 26px -10px rgba(0,0,0,.4);
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .frame:hover img{
    transform:scale(1.02);
    box-shadow:0 2px 4px rgba(0,0,0,.3), 0 18px 34px -12px rgba(0,0,0,.5);
  }

  .series{
    margin-top:clamp(40px,6vw,64px);
    padding-top:clamp(32px,5vw,48px);
    border-top:1px solid var(--line);
  }
  .series-head{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
    margin-bottom:22px;
  }
  .series-head h3{
    font-family:"Big Shoulders Display", sans-serif;
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(1.5rem,3vw,2.1rem);
  }
  .series-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(260px,100%),1fr));
    gap:clamp(20px,3vw,40px);
  }
  .series-item figure{margin:0;}
  .series-item figcaption{
    padding-top:12px;
    font-size:0.72rem;
    color:var(--ink-soft);
    text-align:center;
  }
  .series-item figcaption .t{color:var(--ink); font-style:italic;}

  /* ---------- catalogue pages ---------- */
  .gallery.archive{
    grid-template-columns:repeat(auto-fill, minmax(min(250px,100%),1fr));
    gap:clamp(18px,2.6vw,36px) clamp(16px,2.2vw,30px);
    margin-bottom:clamp(48px,7vw,88px);
  }
  .work{margin:0;}
  .work figcaption{
    padding-top:10px;
    font-size:0.7rem; line-height:1.5;
    color:var(--ink-soft);
    text-align:center;
  }
  .work figcaption .t{color:var(--ink); font-style:italic;}
  .more{margin:clamp(24px,3vw,36px) 0 0;}
  .more a{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-bottom:3px;
  }
  .more a:hover, .more a:focus-visible{color:var(--rust); border-color:var(--rust);}
  #catalogue{border-top:1px solid var(--line);}
  .catalogue-tiles{margin-top:0;}
  .deeper-img{
    display:block; width:100%; height:auto;
    aspect-ratio:4/3; object-fit:cover;
    filter:saturate(0.92);
    transition:filter .25s ease;
  }
  .deeper-item:hover .deeper-img{filter:none;}

  /* ---------- lightbox ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:100;
    background:rgba(10,9,7,0.92);
    display:none; align-items:center; justify-content:center;
    padding:5vh 5vw;
  }
  .lightbox.open{display:flex;}
  .lightbox-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%;}
  .lightbox img{max-width:100%; max-height:84vh; width:auto; margin:0 auto; border:6px solid #fff; box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .lightbox-fig figcaption{color:#d9d4c6; font-size:0.74rem; text-align:center; max-width:60ch;}
  .lightbox-fig figcaption:empty{display:none;}
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    font-family:"IBM Plex Mono", monospace; font-size:1.3rem; line-height:1;
    color:#f2efe6; background:rgba(10,9,7,0.55); border:1px solid rgba(242,239,230,.4);
    width:48px; height:48px; cursor:pointer;
  }
  .lightbox-nav:hover{border-color:#f2efe6;}
  .lightbox-nav.prev{left:14px;}
  .lightbox-nav.next{right:14px;}
  .lightbox-nav[hidden]{display:none;}
  .lightbox-close{
    position:absolute; top:20px; right:24px;
    font-family:"IBM Plex Mono", monospace;
    color:#f2efe6; background:none; border:1px solid rgba(242,239,230,.4);
    padding:8px 14px; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
    cursor:pointer;
  }
  .lightbox-close:hover{border-color:#f2efe6;}

  /* ---------- contact ---------- */
  #contact{border-top:1px solid var(--line);}
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:clamp(32px,5vw,72px);
    align-items:center;
  }
  .contact-cta{
    font-size:clamp(1.8rem,4vw,2.6rem);
    max-width:16ch;
    text-wrap:balance;
  }
  .contact-info{display:flex; flex-direction:column; gap:16px;}
  .contact-info a{
    font-family:"IBM Plex Mono", monospace;
    font-size:1.05rem;
    text-decoration:none;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
    width:fit-content;
  }
  .contact-info a:hover{border-color:var(--rust); color:var(--rust);}
  .contact-note{color:var(--ink-soft); font-size:0.88rem; max-width:42ch;}

  footer{
    border-top:1px solid var(--line);
    padding-block:22px;
  }
  .foot-row{
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:0.72rem; color:var(--ink-soft);
  }

  /* ---------- further reading (home, under About) ---------- */
  .deeper{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(250px,100%),1fr));
    gap:clamp(20px,3vw,40px);
    margin-top:clamp(48px,7vw,88px);
  }
  .deeper-item{
    display:flex; flex-direction:column; gap:14px;
    padding-top:16px;
    border-top:2px solid var(--ink);
    text-decoration:none;
    transition:border-color .2s ease;
  }
  .deeper-title{font-size:clamp(2rem,4vw,2.7rem);}
  .deeper-note{color:var(--ink-soft); font-size:0.95rem; max-width:32ch;}
  .deeper-go{
    margin-top:auto; padding-top:6px;
    font-family:"IBM Plex Mono", monospace; font-size:1.1rem;
    color:var(--rust);
    transition:transform .2s ease;
  }
  .deeper-item:hover, .deeper-item:focus-visible{border-color:var(--rust);}
  .deeper-item:hover .deeper-go{transform:translateX(6px);}

  /* ---------- inner pages: exhibitions + critiques ---------- */
  [id]{scroll-margin-top:calc(var(--nav-h) + 16px);}
  .page-head{padding-block:clamp(40px,7vw,88px) clamp(28px,4vw,48px);}
  .page-title{font-size:clamp(3rem,9vw,6.4rem); margin-top:14px;}
  .page-intro{color:var(--ink-soft); max-width:56ch; margin:18px 0 0;}
  .switch{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
  .switch a{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    text-decoration:none;
    border:1px solid var(--line);
    padding:9px 16px;
    color:var(--ink-soft);
    transition:color .15s ease, border-color .15s ease;
  }
  .switch a:hover{border-color:var(--rust); color:var(--rust);}
  .switch a[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--wall);}

  .year-list{border-bottom:1px solid var(--line); margin-bottom:clamp(48px,7vw,88px);}
  .year-row{
    display:grid;
    grid-template-columns:minmax(84px,150px) 1fr;
    gap:clamp(16px,4vw,56px);
    padding-block:20px;
    border-top:1px solid var(--line);
  }
  .yr{
    font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
    font-weight:800;
    font-size:clamp(1.9rem,3.4vw,2.6rem);
    line-height:1;
    font-variant-numeric:tabular-nums;
    color:var(--rust);
    align-self:start;
    position:sticky; top:calc(var(--nav-h) + 20px);
  }
  .entries{list-style:none; margin:0; padding:0;}
  .entries li{
    display:grid;
    grid-template-columns:minmax(150px,250px) 1fr;
    gap:2px 24px;
    padding-block:9px;
  }
  .entries li + li{border-top:1px solid var(--line);}
  .place{font-weight:500;}
  .cc{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    margin-left:6px;
  }
  .venue{color:var(--ink-soft);}
  .entries.stacked li{display:flex; flex-direction:column; gap:1px;}
  .entries.stacked .place{font-weight:500; color:var(--ink);}

  .jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(32px,5vw,52px); padding:0; list-style:none;}
  .jump a{
    display:block;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
    text-decoration:none;
    border:1px solid var(--line);
    padding:6px 10px;
    color:var(--ink-soft);
    transition:color .15s ease, border-color .15s ease;
  }
  .jump a:hover{border-color:var(--rust); color:var(--rust);}

  .critique{
    display:grid;
    grid-template-columns:minmax(160px,250px) 1fr;
    gap:clamp(20px,4vw,64px);
    padding-block:clamp(28px,4vw,44px);
    border-top:1px solid var(--line);
  }
  .critique:last-child{border-bottom:1px solid var(--line);}
  .c-side{
    align-self:start;
    position:sticky; top:calc(var(--nav-h) + 20px);
    display:flex; flex-direction:column; gap:8px;
  }
  .c-year{
    font-family:"Big Shoulders Display", "Arial Narrow", sans-serif;
    font-weight:800;
    font-size:clamp(1.9rem,3.4vw,2.6rem);
    line-height:1;
    color:var(--rust);
  }
  .c-name{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
  }
  .c-city{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .c-body p{margin:0 0 1.05em; max-width:66ch; font-size:1.06rem; line-height:1.7;}
  .c-body p:last-child{margin-bottom:0;}

  @media (max-width:820px){
    .hero{min-height:auto; aspect-ratio:3/4; align-items:flex-end;}
    .hero-media img{object-position:50% 12%;}
    .about-grid, .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:700px){
    .year-row, .critique{grid-template-columns:1fr; gap:10px;}
    .yr, .c-side{position:static;}
    .c-side{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px;}
    .entries li{grid-template-columns:1fr;}
  }
  @media (max-width:1040px){
    /* Six links plus the language switch can wrap to two rows here (German is the longest), so let the header scroll away rather than pin it. */
    header.site-nav{position:static;}
    .nav-row{flex-wrap:wrap; row-gap:8px; min-height:0;}
    .nav-right{width:100%; justify-content:space-between;}
    .nav-links{gap:6px 16px;}
    .lang-links{border-left:0; padding-left:0;}
    [id]{scroll-margin-top:16px;}
  }
  @media (max-width:480px){
    .hero{aspect-ratio:3/4.4;}
  }