@charset "UTF-8";
/* --- The client's own faces, from the InDesign package.
       bill corp mx eight is an extreme hairline (stem/cap 0.009); thin is 0.028.
       Each family ships a single cut, so synthesis is disabled everywhere. --- */
@font-face{
  font-family:"Bill Corp Mx Thin";
  src:url("fonts/billcorpmx-thin.woff2") format("woff2");
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Le Film Letters";
  src:url("fonts/lefilmletters.woff2") format("woff2");
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ============================================================
   Charly van Rest — Two Masters
   Palette, gradients and letter positions are taken directly
   from charley_HOME_def_2.pdf (shadings 142 / 161 / 7).
   ============================================================ */

:root{
  /* --- the two-stop gradient that fills the display type (PDF shading 142) --- */
  --ink:        #000000;      /* CMYK 0 0 0 100          */
  --crimson:    #961a1f;      /* CMYK .2556 1 .9845 .2548 */

  /* --- (THE REST IS NOISE): two spot colours (PDF shading 161) --- */
  --pink:       #ff3ea5;      /* PANTONE 812 C */
  --taupe:      #a2988f;      /* PANTONE 407 U */

  /* --- the byline ramp (PDF shading 7) --- */
  --red:        #cb1517;
  --yellow:     #ffdd00;
  --ramp-flat:  #da5211;   /* the ramp's midpoint, for the no-background-clip fallback */

  /* --- the one interactive signal, exact from the hover comp --- */
  --signal:     #e6007d;
  /* the same signal darkened to carry small text on paper: #e6007d measures
     3.58:1 there, below AA; this measures 4.67:1 and keeps the hue. */
  --signal-ink: #c4006a;

  /* --- warm paper for the work pages, sampled from the bloom --- */
  --paper:      #f4e4bc;
  --paper-deep: #e7d3a4;
  --paper-edge: #b6ad8d;
  --body:       #3a2d1e;
  --body-soft:  #5e5140;
  --rule:       rgba(67,55,42,.22);
  --rule-soft:  rgba(67,55,42,.11);

  --f-display:  "Bill Corp Mx Thin", ui-sans-serif, system-ui, sans-serif;
  --f-text:     "Le Film Letters", "Bill Corp Mx Thin", ui-sans-serif, system-ui, sans-serif;

  /* the caption line that carries the year, and one step of the type scale */
  --t-meta:     clamp(11.5px, 1.05vw, 13px);
  --step:       1.25;

  /* the work title sits exactly one step above the year line */
  --t-work:     calc(var(--t-meta) * var(--step));

  --page-x:     clamp(20px, 5.5vw, 96px);
  --stack:      clamp(56px, 9vh, 118px);
  --work-gap:   clamp(180px, 32vh, 420px);   /* the pause between one work and the next */

  /* the display gradient, reused everywhere */
  --sweep: linear-gradient(90deg,
            var(--ink) 0%, var(--ink) 1.2%,
            var(--crimson) 67%, var(--crimson) 100%);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-text);
  font-weight:normal;
  font-synthesis:none;
  color:var(--body);
  background:#0b1c33;
}

::selection{ background:var(--signal); color:#fff; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:4px;
  border-radius:1px;
}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* text filled with the shared sweep */
.sweep{
  background-image:var(--sweep);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sweep{ color:var(--crimson); background-image:none; }
}


/* ============================================================
   1. THE LANDING  —  the client's production page, placed whole

   Earlier builds tried to recompose this page from live type and from a
   two-layer photograph/lettering composite. Neither matched the client's
   own comp closely enough. This ships their production render directly:
   one image, contained so it is never cropped and never stretched.
   ============================================================ */

.landing{ background:#2f558c; }

.enter{
  display:block;
  position:fixed; inset:0;
  text-decoration:none;
  cursor:pointer;
}
.enter picture{ display:contents; }
/* without the Enter label, keyboard users still see where focus is */
.enter:focus-visible{ outline:1px solid #fff; outline-offset:-8px; }

/* width:auto + height:auto with only a max-* pair is what makes warping
   impossible: the browser derives one dimension from the other. */
.plate{
  position:absolute; inset:0;
  margin:auto;
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:100%;
}

/* ============================================================
   2. THE MENU  —  the bloom, six lines, one signal
   ============================================================ */

.menupage{ background:#e8d5a4; color:var(--body); }

.bloom{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-1;
}

.menu{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(40px,8svh,90px) var(--page-x);
  text-align:center;
}

/* The nav block is the exact band the PDF gradient spans (617.95pt of 907),
   so each line samples the sweep by its own width, just as in the comp. */
.menu__list{
  list-style:none;
  margin:0; padding:0;
  width:min(68.13vw, 1060px);
  min-width:min(100%, 320px);
  background-image:var(--sweep);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .menu__list{ background-image:none; }
  .menu__list a{ color:var(--crimson); }
}

.menu__list li + li{ margin-top:.30em; }

.menu__list a{
  display:inline-block;
  font-family:var(--f-text);
  font-size:clamp(19px, 3.31vw, 46px);
  font-weight:normal;
  line-height:1.16;
  letter-spacing:.085em;
  text-indent:.085em;
  text-transform:uppercase;
  text-decoration:none;
  color:transparent;
  transition:color .18s ease, opacity .18s ease;
}
.menu__list a .cont{
  display:block;
  font-size:.84em;
  letter-spacing:.10em;
  text-indent:.10em;
}

/* the hover comp: the attended line leaves the sweep and turns magenta */
.menu__list a:hover,
.menu__list a:focus-visible{
  -webkit-text-fill-color:var(--signal);
  color:var(--signal);
}

.menu__by{
  margin:clamp(26px,4.4svh,52px) 0 0;
  width:min(68.13vw, 1060px);
  text-align:center;
}
.menu__by a{
  display:inline-block;
  font-size:clamp(11px, 1.62vw, 17px);
  font-weight:normal;
  letter-spacing:.30em;
  text-indent:.30em;
  text-transform:uppercase;
  text-decoration:none;
  /* the byline carries its own ramp: red into yellow */
  background-image:linear-gradient(90deg, var(--red) 12%, #e8890c 55%, var(--yellow) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:opacity .18s ease;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .menu__by a{ color:var(--ramp-flat); background-image:none; }
}
.menu__by a:hover,
.menu__by a:focus-visible{
  -webkit-text-fill-color:var(--signal);
  color:var(--signal);
}

@media (max-width: 640px){
  .menu__list{ width:100%; }
  .menu__list a{ font-size:clamp(17px, 5.6vw, 30px); letter-spacing:.06em; text-indent:.06em; }
  .menu__by{ width:100%; }
}


/* ============================================================
   3. THE WORK PAGES  —  warm paper, the work leading
   ============================================================ */

.workpage{
  background:var(--paper);
  color:var(--body);
}
.workpage::before{
  content:"";
  position:fixed; inset:0;
  background:url("img/paper-1800.jpg") center / cover no-repeat;
  opacity:.75;
  z-index:-2;
  will-change:transform;      /* paint once, then composite */
  transform:translateZ(0);
}
.workpage::after{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.30), rgba(0,0,0,0) 55%),
             radial-gradient(140% 100% at 50% 100%, rgba(92,84,48,.26), rgba(0,0,0,0) 60%);
  z-index:-1;
  pointer-events:none;
  will-change:transform;      /* two full-viewport gradients: never repaint them */
  transform:translateZ(0);
}

.back{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:baseline; gap:1.4em;
  padding:clamp(14px,2.4vh,24px) var(--page-x);
  background:linear-gradient(180deg, rgba(244,228,188,.94), rgba(244,228,188,0));
  font-size:clamp(11px,1.05vw,12.5px);
  font-weight:normal;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.back a{ display:inline-flex; align-items:center; gap:.62em; text-decoration:none; color:var(--body-soft); transition:color .18s ease; }
.ico{ width:.92em; height:.66em; flex:0 0 auto; }
.back a:hover, .back a:focus-visible{ color:var(--signal-ink); }
.back .here{ color:var(--body); }

.sheet{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(18px,4vh,44px) var(--page-x) clamp(70px,12vh,130px);
}

.title{
  margin:0 0 .34em;
  font-family:var(--f-display);
  font-size:clamp(17px, 2vw, 26px);   /* about half the former 1.125rem / 4.05vw / 3.04rem */
  font-weight:normal;
  /* the pink highlight instead of the black-to-crimson sweep */
  color:var(--signal);
  -webkit-text-fill-color:var(--signal);
  background-image:none;
  line-height:1.04;
  letter-spacing:.1em;
  text-indent:.1em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* with the intro line gone, the title itself holds the pause before the first work */
/* "e.g." after a page title: lower case, same size as the title */
.title .eg,
.back .here .eg{ text-transform:none; }
/* Le Film Letters is caps-only (its a-z are drawn as capitals), so the
   nav's lower-case e.g. borrows the display face, which has a real lower case */
.back .here .eg{ font-family:var(--f-display); letter-spacing:.12em; }

.title + .work,
.title + .sub{ margin-top:var(--stack); }

.lede{
  max-width:62ch;
  margin:0 0 var(--stack);
  font-size:clamp(15px,1.22vw,18px);
  font-weight:normal;
  line-height:1.68;
  color:var(--body-soft);
}
.lede a{ color:var(--body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:var(--rule); transition:color .18s, text-decoration-color .18s; }
.lede a:hover, .lede a:focus-visible{ color:var(--signal-ink); text-decoration-color:var(--signal-ink); }

/* --- one work ---
   Picture with its title and text beneath, bottom left. Every second work
   sits on the right of the sheet so the page swings as it goes down. --- */
.work{
  margin:0 0 var(--work-gap);
  content-visibility:auto;
  contain-intrinsic-size:auto 780px;   /* holds the scroll height before first paint */
}
.work > figure{ margin:0; }

/* The width is always a definite length, so the width/height attributes can
   derive the height and reserve the block before the file arrives. The second
   term is the height budget expressed as a width: at most 80svh of picture,
   so a tall work can always be seen whole. */
.work img,
.work video{
  display:block;
  background:var(--paper-deep);
  width:min(100%, calc(80svh * var(--ar, 0.75)));
  height:auto;
}
.work figcaption{
  margin-top:1.05em;
  max-width:46ch;
}

@media (max-width: 899px){
  :root{ --work-gap:clamp(120px, 18vh, 190px); }
}

@media (min-width: 900px){
  .work{
    /* the widest a picture may run beside its caption: ~58% of the sheet */
    --img-max:min(594px, calc((100vw - 2 * var(--page-x)) * .58));
  }
  /* one column as wide as the picture; the caption sits beneath it, flush
     with the picture's left edge. width:0 + min-width:100% keeps a long
     caption from widening the column past the picture. */
  .work > figure{
    display:grid;
    grid-template-columns:auto;
    justify-content:start;
  }
  .work img,
  .work video{ width:min(var(--img-max), calc(80svh * var(--ar, 0.75))); }
  .work figcaption{
    margin-top:1.05em;
    width:0; min-width:100%;
    max-width:none;
  }

  /* every second work moves to the right of the sheet, caption still beneath
     and still reading from the picture's left edge */
  .work.flip > figure{ justify-content:end; }

  /* a polyptych or long strip keeps the full sheet */
  .work.panorama > figure{ display:block; }
  .work.panorama img,
  .work.panorama video{ width:100%; }
  .work.panorama figcaption{ width:auto; margin-top:1.05em; }
}

/* the recording stands alone */
.work.solo > div{ max-width:840px; }

.work h2,
.work h3{
  /* the sweep is painted through the letters (background-clip:text) and the
     background stops at the box edge, so an accent on a capital (the É of
     Één Steen) rose above it and was cut off. Room above, taken back by the
     margin, so the title does not move. */
  padding-top:.3em;
  margin:-.3em 0 .28em;
  font-family:var(--f-display);
  font-size:var(--t-work);
  font-weight:normal;
  line-height:1.14;
  letter-spacing:.055em;
  text-indent:.055em;
  text-transform:uppercase;
}
/* a letter the artist writes in lower case inside a title (God A,a) */
.work h2 .lc{ text-transform:none; }

.meta{
  margin:0 0 .95em;
  /* optical: the title's first capital starts ~1px in (its tracking indent
     plus the glyph's own side bearing) while a year's "1" sits almost on the
     edge, so the date line is nudged in to sit under the title */
  padding-left:.1em;
  font-size:var(--t-meta);
  font-weight:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--body-soft);
}
/* the spaces are deliberate: without them the separator is read out as one
   token with its neighbours ("2019Photograph") */
.meta span + span::before{ content:" · "; margin:0 .5em; color:var(--rule); }
.note{
  max-width:46ch;
  margin:0;
  font-size:clamp(14.5px,1.12vw,16.5px);
  line-height:1.66;
  color:var(--body-soft);
}

/* --- a work whose media is not yet online.
   It must not outrank a work you can actually see, so it drops a register
   and keeps a single column of its own. --- */
.pending{
  border-top:1px solid var(--rule);
  padding-top:1.5em;
}
.pending > div{ max-width:46ch; }
.pending h3{
  font-size:var(--t-meta);       /* a step below a work you can actually see */
  letter-spacing:.08em;
  text-indent:.08em;
}

/* --- the empty category, stated plainly --- */
.empty{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(34px,6vh,64px) 0;
  margin-bottom:var(--stack);
  max-width:56ch;
}
.empty p{ margin:0 0 1em; font-size:clamp(15px,1.22vw,17.5px); line-height:1.68; color:var(--body-soft); }
.empty p:last-child{ margin-bottom:0; }

/* --- the sound player ---
   Without script the browser's own controls carry the recording; with script
   they step aside for the drawn transport. The audio is never unreachable. --- */
.js .player audio{ display:none; }
html:not(.js) .player .play,
html:not(.js) .player .wave,
html:not(.js) .player .clock{ display:none; }
.player audio{ width:100%; }

.player{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(18px,3vh,30px) 0;
  margin-bottom:1.2em;
}
.play{
  flex:0 0 auto;
  width:58px; height:58px;
  display:grid; place-items:center;
  border:1px solid var(--crimson);
  border-radius:50%;
  background:transparent;
  color:var(--crimson);
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.play svg{ width:19px; height:19px; display:block; }
.play:hover{ background:rgba(230,0,125,.10); border-color:var(--signal); color:var(--signal); }
.play:active{ transform:scale(.95); }
.wave{ flex:1 1 auto; min-width:0; height:58px; display:block; }
.clock{
  flex:0 0 auto;
  font-size:12px; font-weight:normal; letter-spacing:.18em;
  color:var(--body-soft);
  font-variant-numeric:tabular-nums;
}

@media (max-width: 620px){
  .player{ flex-wrap:wrap; row-gap:14px; }
  .wave{ order:3; flex:1 0 100%; height:46px; }
  .clock{ margin-left:auto; }
}


/* --- the time axis ---
   A real axis, not a list: each year sits at its true position between the
   page's first and last, so the gaps carry the meaning. It holds still while
   the works scroll past and marks the year currently in view. Only pages
   spanning three or more years get one, and only where there is room for it
   outside the sheet. --- */
.timeline{
  position:fixed;
  right:clamp(14px, 2vw, 36px);
  top:50%;
  transform:translateY(-50%);
  height:min(58vh, 520px);
  z-index:4;
  display:none;
}
@media (min-width:1280px){ .timeline{ display:block; } }

.timeline ol{
  position:relative;
  height:100%;
  margin:0; padding:0;
  list-style:none;
  border-right:1px solid var(--rule-soft);
}
.timeline li{
  position:absolute;
  right:0;
  top:calc(var(--t) * 100%);
  transform:translateY(-50%);
}
.timeline a{
  display:flex;
  align-items:center;
  gap:.85em;
  padding:.42em 0;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.2em;
  text-indent:.2em;
  text-transform:uppercase;
  color:var(--body-soft);
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
/* the tick that meets the axis */
.timeline a::after{
  content:"";
  width:9px; height:1px;
  background:var(--rule);
  transition:width .2s ease, background-color .2s ease;
}
.timeline a:hover,
.timeline a:focus-visible{ color:var(--signal-ink); }
.timeline a:hover::after,
.timeline a:focus-visible::after{ width:17px; background:var(--signal); }

/* the year currently in view */
.timeline .is-current a{ color:var(--signal-ink); }
.timeline .is-current a::after{ width:21px; background:var(--signal); }

@media (prefers-reduced-motion: reduce){
  .timeline a, .timeline a::after{ transition:none; }
}

/* --- the record: awards & exhibitions --- */
.record{ list-style:none; margin:0 0 var(--stack); padding:0; max-width:900px; }
.record li{
  display:grid;
  grid-template-columns:4.6em 1fr;
  gap:1.4em;
  padding:.95em 0;
  border-top:1px solid var(--rule-soft);
  align-items:baseline;
}
.record li:last-child{ border-bottom:1px solid var(--rule-soft); }
.record .yr{
  font-size:clamp(12px,1.1vw,13.5px);
  font-weight:normal; letter-spacing:.16em;
  color:var(--crimson);
  font-variant-numeric:tabular-nums;
}
.record .what{ font-size:clamp(15px,1.22vw,17.5px); line-height:1.5; }
.record .where{ display:block; margin-top:.28em; font-size:clamp(13px,1.05vw,14.5px); color:var(--body-soft); }

h2.sub, h3.sub{
  margin:0 0 1.1em;
  font-size:clamp(13px,1.15vw,15px);
  font-weight:normal;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--body-soft);
}

.outlink{
  display:inline-flex; align-items:baseline; gap:.5em;
  text-decoration:none;
  font-size:clamp(14px,1.15vw,16px);
  border-bottom:1px solid var(--rule);
  padding-bottom:.15em;
  transition:color .18s, border-color .18s;
}
.outlink:hover, .outlink:focus-visible{ color:var(--signal-ink); border-color:var(--signal-ink); }
.outlink svg{ width:.72em; height:.72em; flex:0 0 auto; }

/* --- foot --- */
.foot{
  border-top:1px solid var(--rule);
  padding-top:clamp(22px,3.4vh,34px);
  /* two links, each centred in its own half of the page */
  display:grid; grid-template-columns:1fr 1fr; gap:1.6em 1em;
  justify-items:center; align-items:baseline; text-align:center;
  white-space:nowrap;
  font-size:clamp(11px,1.05vw,12.5px);
  font-weight:normal;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--body-soft);
}
/* the smallest phones: a little less spacing, so both links fit their half */
@media (max-width: 380px){ .foot{ letter-spacing:.14em; } }
.foot a{ display:inline-flex; align-items:center; gap:.62em; text-decoration:none; transition:color .18s; }
.foot a:hover, .foot a:focus-visible{ color:var(--signal-ink); }

/* --- page entrance: one authored moment, nothing scattered --- */
@media (prefers-reduced-motion: no-preference){
  /* Content is visible by default. Only a script that is running and has
     armed an element may hide it, and only until it scrolls into view. */
  .rise[data-armed=""]{ opacity:0; transform:translateY(14px); }
  .rise[data-armed="in"]{ animation:rise .9s cubic-bezier(.16,.84,.28,1) forwards; }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  .fade-out{ animation:fadeout .42s ease forwards; }
  @keyframes fadeout{ to{ opacity:0 } }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1 !important; transform:none !important; }
}

/* a work that stands alone in its measure (the recording) */
@media (min-width: 900px){
  .work.solo{ grid-template-columns:minmax(0,1fr); }
  .work.solo > div{ max-width:840px; }
}


/* Zwaar Water: the white mount between the three panels is cut away, so the
   page shows through; no placeholder tint behind it either. */
#s-dust-zwaar-water-1993 img,
#s-bleach-dead-sunflower-1995 img{ background:none; }

/* ============================================================
   SITE MENU  —  top right on every page but the landing
   A native <details>: opens and closes with no script, by mouse,
   touch or keyboard. Script only closes it on Escape or an outside click.
   ============================================================ */
.sitemenu{
  position:fixed;
  top:clamp(14px, 2.4vh, 24px);
  right:var(--page-x);
  z-index:20;
  font-size:clamp(11px, 1.05vw, 12.5px);
  font-weight:normal;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--body);
}
.sitemenu summary{
  display:flex; align-items:center; gap:.9em;
  list-style:none;
  cursor:pointer;
  padding:.5em 0 .5em .8em;
  margin:-.5em 0 0;
  user-select:none;
  transition:color .18s ease;
}
.sitemenu summary::-webkit-details-marker{ display:none; }
.sitemenu summary:hover,
.sitemenu[open] summary{ color:var(--signal-ink); }

/* two hairlines that turn into a cross when open */
.sitemenu__icon{
  position:relative;
  width:1.6em; height:.62em;
  flex:0 0 auto;
}
.sitemenu__icon::before,
.sitemenu__icon::after{
  content:"";
  position:absolute; left:0; right:0;
  height:1px;
  background:currentColor;
  transition:transform .22s ease, top .22s ease;
}
.sitemenu__icon::before{ top:0; }
.sitemenu__icon::after{ top:100%; }
.sitemenu[open] .sitemenu__icon::before{ top:50%; transform:rotate(22deg); }
.sitemenu[open] .sitemenu__icon::after{ top:50%; transform:rotate(-22deg); }

/* no panel: just the two words, right-aligned under the button */
.sitemenu ul{
  position:absolute;
  right:0; top:calc(100% + .5em);
  margin:0; padding:0;
  list-style:none;
  text-align:right;
  white-space:nowrap;
}
.sitemenu a{
  display:block;
  padding:.55em 0 .55em 1em;
  text-decoration:none;
  color:var(--body);
  transition:color .18s ease;
}
.sitemenu a:hover,
.sitemenu a:focus-visible{ color:var(--signal-ink); }
.sitemenu a[aria-current="page"]{ color:var(--signal-ink); }

@media (prefers-reduced-motion: no-preference){
  .sitemenu[open] ul{ animation:menu-in .2s ease-out; }
  @keyframes menu-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
}

/* the fixed button sits over the sticky bar: keep that bar's text clear of it */
.back{ padding-right:calc(var(--page-x) + 10em); }
.back .here{ min-width:0; }
/* on a phone there is no room for the page name beside the button; the big
   title just below already says where you are */
@media (max-width: 599px){ .back .here{ display:none; } }

/* CV: several exhibitions in one year show the year once, as in the artist's CV;
   the repeated year stays in the text for screen readers and copy-paste */
.record li.same-year{ border-top-color:transparent; padding-top:.2em; }
.record li.same-year .yr{ color:transparent; }

/* ============================================================
   CONTACT  —  a small framed print beside a nameplate
   (after the artist's earlier holding page)
   ============================================================ */
.contact{
  min-height:calc(100svh - 260px);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px, 5vw, 64px);
  padding:clamp(24px, 5vh, 60px) 0 var(--stack);
}
.contact__frame{
  margin:0;
  flex:0 0 auto;
  width:clamp(140px, 20vw, 220px);
}
.contact__frame img{
  display:block;
  width:100%; height:auto;
  background:var(--paper-deep);
  box-shadow:0 1px 2px rgba(58,45,30,.35), 0 24px 46px -22px rgba(58,45,30,.55);
}
.contact__note{ text-align:left; }
.contact .contact__name{
  margin:0;
  text-indent:0;
  /* a step above the city line below it, not a page title */
  font-size:clamp(15.5px, 1.45vw, 18.5px);
  letter-spacing:.14em;
}
.contact__place{
  margin:.7em 0 0;
  font-size:clamp(12px, 1.1vw, 14px);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--body-soft);
}
.contact__rule{
  width:44px; height:1px;
  margin:clamp(20px, 2.8vh, 28px) 0;
  background:linear-gradient(90deg, var(--signal) 0%, rgba(230,0,125,0) 100%);
}
.contact__label{
  margin:0 0 .7em;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--body-soft);
}
/* the text face is caps-only; the address keeps its letters as written,
   so it is set in the display face, which has a lower case */
.contact__mail{
  display:inline-block;
  font-family:var(--f-display);
  font-size:clamp(16px, 1.6vw, 19px);
  letter-spacing:.04em;
  color:var(--body);
  text-decoration:none;
  padding-bottom:3px;
  background-image:linear-gradient(var(--signal-ink), var(--signal-ink));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .42s cubic-bezier(.22,.8,.3,1), color .25s ease;
}
.contact__mail:hover,
.contact__mail:focus-visible{ color:var(--signal-ink); background-size:100% 1px; }

@media (max-width:560px){
  .contact{ flex-direction:column; align-items:flex-start; min-height:0; }
  .contact__frame{ width:clamp(150px, 48vw, 200px); align-self:center; }
  .contact__note{ align-self:stretch; }
}

/* phone above the address, each on its own line */
.contact__tel{ display:table; margin-bottom:.35em; }

/* what the studio does and works with: the CV's list type, kept to a
   comfortable measure beside the portrait */
.contact__note{ max-width:34em; }
.contact__label--more{
  margin-top:clamp(26px, 3.6vh, 38px);
  font-weight:normal;
}
.contact__text{
  margin:0;
  font-size:clamp(12.5px, 1vw, 14px);
  line-height:1.55;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--body);
  text-wrap:pretty;
}

/* the CV, one step below the address */
.contact__cv{
  margin:clamp(26px, 3.6vh, 38px) 0 0;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.contact__cv a{
  color:var(--body-soft);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:.2em;
  transition:color .18s ease, border-color .18s ease;
}
.contact__cv a:hover,
.contact__cv a:focus-visible{ color:var(--signal-ink); border-color:var(--signal-ink); }

/* ============================================================
   ONE WORK ON A PAGE  —  it takes the stage: centred and large.
   The page title and the caption stand on the picture's left edge:
   .stage is exactly as wide as the picture, and everything in it
   starts at its left side.
   ============================================================ */
.stage{
  /* as large as the screen allows with the titles above it, so the whole
     picture, and a video's controls along its bottom, stay in view */
  width:min(100%, 1040px, calc(max(100svh - 270px, 56svh) * var(--ar, 1.333)));
  margin-inline:auto;
}
/* the page title and the work's title read as one heading: a small step,
   not the pause that separates works */
.stage .title{ margin-bottom:.15em; }   /* a clearer step than the one between work title and year */
.stage .title + .work{ margin-top:0; }
.work.single{ margin-bottom:var(--stack); }
.work.single > figure{ display:block !important; }
.work.single img,
.work.single video{ width:100% !important; }
/* the caption stands above the picture: page title, work title and date,
   then the work */
.work.single figcaption{
  width:auto !important;
  min-width:0 !important;
  margin:0 0 1.4em;
}
.work.single .meta{ margin-bottom:0; }
.work.single h2{ font-size:calc(var(--t-work) * 1.25); }
/* the letters themselves, not their boxes, stand on the picture's edge:
   each font draws its first stroke a little in from the left (0.1em in
   Bill Corp, 0.047em for the "1" in Le Film Letters), so pull that back */
.stage .title,
.stage .work h2{ text-indent:0; margin-left:-.1em; }
.stage .work h2{ margin-bottom:0; }   /* the year sits a little closer under the title */
.stage .meta{ padding-left:0; margin-left:-.047em; }

/* ============================================================
   CV  —  smaller and denser: a list to scan, not to linger on
   ============================================================ */
/* the name at the size it has on the contact page */
.cv .title{ font-size:clamp(15.5px, 1.45vw, 18.5px); letter-spacing:.14em; }
.cv h2.sub{
  margin:0 0 .7em;
  font-size:11px;
  letter-spacing:.24em;
}
.cv .title + .sub{ margin-top:clamp(28px, 4.5vh, 48px); }
.cv .record{ margin-bottom:clamp(30px, 5vh, 56px); max-width:760px; }
.cv .record li{
  grid-template-columns:3.6em 1fr;
  gap:1em;
  padding:.5em 0;
}
.cv .record li.same-year{ padding-top:0; }
.cv .record .yr{ font-size:11px; letter-spacing:.12em; }
.cv .record .what{ font-size:clamp(12.5px, 1vw, 14px); line-height:1.4; }
.cv .record .where{ margin-top:.12em; font-size:clamp(11px, .9vw, 12.5px); }
.cv .outlink{ font-size:clamp(12px, 1vw, 13.5px); }

/* On the navigation page the bloom is light and busy, and the small brown
   button disappeared into it. Here it is larger, set a little lower, and in
   white; Contact and CV open beneath it at the same size. */
.menupage .sitemenu{
  top:clamp(30px, 6vh, 64px);
  font-size:clamp(12px, 1.6vw, 18px);
  letter-spacing:.3em;
  color:#fff;
  /* the bloom behind it is light (white measures only 2-2.8:1 there), so a
     soft warm shadow keeps the white words readable without a panel */
  text-shadow:0 0 .7em rgba(40,28,14,.45), 0 1px 2px rgba(40,28,14,.35);
}
.menupage .sitemenu__icon{ width:1.8em; height:.7em; }
.menupage .sitemenu__icon::before,
.menupage .sitemenu__icon::after{ height:1.5px; box-shadow:0 1px 2px rgba(40,28,14,.35), 0 0 8px rgba(40,28,14,.3); }
.menupage .sitemenu ul{ font-size:1em; }   /* Contact and CV as large as MENU itself */
.menupage .sitemenu a{ color:#fff; }
/* white at rest; pointing at it turns it pink */
.menupage .sitemenu summary:hover,
.menupage .sitemenu[open] summary,
.menupage .sitemenu a:hover,
.menupage .sitemenu a:focus-visible,
.menupage .sitemenu a[aria-current="page"]{ color:var(--pink); }

/* ============================================================
   SOUNDDESIGN  —  Silent M Studio's clients and collaborators:
   one quiet list in two columns, the named works linked
   ============================================================ */
/* the first names start where the first picture starts on the other pages:
   the stack, less the padding above each name and the space above its capitals */
.title + .clients{ margin-top:calc(var(--stack) - 1.04em); }
.clients{
  list-style:none;
  margin:0 0 var(--stack);
  padding:0;
  font-size:clamp(12.5px, 1vw, 14px);
  letter-spacing:.06em;
  line-height:1.45;
  text-transform:uppercase;
  color:var(--body);
}
.clients li{
  break-inside:avoid;
  padding:.62em 0;
  border-top:1px solid var(--rule-soft);
}
@media (min-width:900px){
  .clients{ columns:2; column-gap:clamp(40px, 6vw, 96px); }
}
.clients__work{
  text-decoration:none;
  color:var(--signal-ink);
  border-bottom:1px solid rgba(196,0,106,.35);
  padding-bottom:.1em;
  transition:color .18s ease, border-color .18s ease;
}
.clients__work:hover,
.clients__work:focus-visible{ color:var(--signal); border-color:var(--signal); }
.clients__work svg{ width:.62em; height:.62em; margin-left:.4em; vertical-align:.05em; }

/* the sound page in the pale blue of the cyanotype on the landing page
   (Nomadisch Werkstuk, deel A), instead of the warm paper */
.soundpage{
  --paper:#c9d5e3;
  /* the small pink text darkened a step, so it still reads on the blue (5.0:1) */
  --signal-ink:#a8005b;
  background:var(--paper);
}
.soundpage::before{ content:none; }
.soundpage::after{
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), rgba(0,0,0,0) 55%);
}
.soundpage .back{ background:linear-gradient(180deg, rgba(201,213,227,.94), rgba(201,213,227,0)); }

/* the perfo-installations page on black, like a darkened screening room,
   with the text turned light so it still reads */
.perfopage{
  --paper:#000000;
  --paper-deep:#161412;
  --body:#ece3cf;
  --body-soft:#b3a994;
  --rule:rgba(236,227,207,.24);
  --rule-soft:rgba(236,227,207,.12);
  --signal-ink:#ff4fae;
  background:var(--paper);
  color:var(--body);
}
/* the work title plain white instead of the sweep: black letters would vanish */
.perfopage .work h2{
  background-image:none;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
.perfopage::before{ content:none; }
.perfopage::after{ content:none; }
.perfopage .back{ background:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,0)); }