/* Ellen D'Haese — monochrome interface, colour photographs
   The only colour on this site comes from the photographs. Keep it that way. */

:root{
  --bone:#F2F0EC;
  --ink:#0A0A0A;
  --grey:#4A4640;
  --mid:#6E6A63;
  --faint:#9C978E;
  --rule:#D8D4CC;
  --placeholder:#E4E1DA;
  --pad:clamp(18px,4vw,52px);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bone);
  color:var(--ink);
  /* Quattrocento ships only 400 and 700 — never ask for another weight or the browser
     will synthesise a fake bold that looks smeared next to the real one. */
  font-family:Quattrocento,Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--mid)}
::selection{background:var(--ink);color:var(--bone)}
img{display:block}

/* ---------- custom cursor ---------- */
@media (pointer:fine){
  body,a,button{cursor:none}
  #cursor{
    position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
    background:var(--ink);color:var(--bone);pointer-events:none;z-index:200;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
    transform:translate(-50%,-50%);opacity:0;
    transition:width .35s var(--ease),height .35s var(--ease),opacity .3s ease;
  }
  #cursor.big{width:64px;height:64px}
  #cursor-label{opacity:0;transition:opacity .25s ease}
  #cursor.big #cursor-label{opacity:1}
}
@media (pointer:coarse){#cursor{display:none}}

/* ---------- chrome ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:rgba(242,240,236,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad)}
.wordmark{font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
header nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
header nav a{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
header nav a.on{color:var(--mid)}

footer{
  border-top:1px solid var(--rule);padding:22px var(--pad);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
}

/* ---------- shared type ---------- */
.label{font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
/* Quattrocento is a serif with real descenders — the tight tracking and .88 leading
   that suited the old sans would collide here. */
.display{font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0}
.rule{height:1px;background:var(--ink)}
.hair{height:1px;background:var(--rule)}
.prose{max-width:540px;font-size:14px;line-height:1.8;color:var(--grey);text-wrap:pretty}

/* ---------- figures ---------- */
figure.frame{margin:0}
figure.frame .plate{position:relative;background:var(--placeholder);aspect-ratio:2/3;overflow:hidden}
/* every photograph in the series is vertical 2:3; only the About portrait is landscape */
figure.frame.wide .plate{aspect-ratio:3/2}
figure.frame img{width:100%;height:100%;object-fit:cover}
figure.frame:focus-visible{outline:1px solid var(--ink);outline-offset:8px}
figure.frame:focus{outline:none}

/* Fade in only. No blur: this is a photography site, and blurring the real photograph
   as it arrives means every frame is briefly out of focus, which is the one impression
   the work shouldn't give. A short fade covers the load without softening anything. */
figure.frame img.loading{opacity:0}
figure.frame img{transition:opacity .4s ease}

/* group dimming on hover */
.group figure.frame{transition:opacity .6s ease,transform .7s var(--ease)}
.group.hovering figure.frame{opacity:.42}
.group.hovering figure.frame.active{opacity:1;transform:translateY(-8px)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- pairs: the layout for both the front page and every series ---------- */
.paced{
  padding:clamp(74px,10vh,110px) var(--pad) 0;
  display:flex;flex-direction:column;gap:clamp(48px,8vh,110px);
}

/* Two photographs side by side, each as tall as the screen allows. The height cap is
   what does the work: a 2:3 frame sized by width alone runs far taller than the
   viewport, so the width is derived from the height instead. */
.duo{
  --duo-gap:clamp(16px,2.4vw,44px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:var(--duo-gap);
}
/* Half the row, unless that would make a 2:3 frame taller than the screen — then the
   height is what limits it. Sizing off the row rather than the viewport is what keeps
   the two from wrapping at in-between widths. */
.duo figure.frame{
  width:min(calc((100% - var(--duo-gap)) / 2), calc(84svh * 2 / 3));
}

@media (max-width:760px){
  .duo{--duo-gap:clamp(48px,8vh,80px)}
  .duo figure.frame{width:min(100%, calc(74svh * 2 / 3))}
}

.strip{padding:clamp(80px,15vh,190px) 0 clamp(50px,8vh,90px)}
.strip .head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:0 var(--pad) 16px}
.strip h2{font-size:clamp(24px,4.2vw,54px);letter-spacing:-.01em;line-height:1.15}
.strip .rule{margin:0 var(--pad) 30px}
.track{display:flex;gap:clamp(20px,4vw,64px);overflow-x:auto;scrollbar-width:none;padding:0 var(--pad) 4px}
.track::-webkit-scrollbar{display:none}
.track figure.frame{flex:0 0 auto;width:min(62vw,258px)}
.track img{-webkit-user-drag:none;user-select:none}
.progress{margin:34px var(--pad) 0;height:1px;background:var(--rule);position:relative}
.progress span{position:absolute;top:0;left:0;height:1px;background:var(--ink)}

.index{padding:clamp(70px,12vh,140px) var(--pad)}
.index .hair{margin-bottom:26px}
.index a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.index a span:first-child{font-size:clamp(26px,5.2vw,68px);font-weight:700;letter-spacing:-.01em;line-height:1.16}

/* ---------- series ---------- */
.series{padding:clamp(96px,13vh,150px) var(--pad) 0}
.series .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.series h1{font-size:clamp(40px,8.6vw,132px);line-height:1.02}
.series .rule{margin:clamp(20px,4vh,38px) 0 24px}
/* a series opening can run to more than one paragraph; keep them close together and
   put the breathing room after the block, not between the lines */
.lead-block{margin:0 0 clamp(50px,8vh,100px);display:flex;flex-direction:column;gap:13px}
.lead-block .prose{margin:0}
/* the opening text carries the series, so give it more presence than body copy */
.prose.lead{max-width:620px;font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:var(--ink)}
.plates{display:flex;flex-direction:column;gap:clamp(48px,8vh,110px);padding-bottom:clamp(60px,10vh,130px)}
.next{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:26px 0 clamp(70px,12vh,140px);
}
.next span:first-child{font-size:clamp(26px,5.2vw,68px);font-weight:700;letter-spacing:-.01em;line-height:1.16}

/* ---------- about ---------- */
.about{padding:clamp(96px,13vh,150px) var(--pad) clamp(80px,14vh,170px)}
.about h1{max-width:20ch;font-size:clamp(30px,5.4vw,80px);line-height:1.08}
.about .rule{margin:clamp(26px,5vh,50px) 0 34px}
.about .cols{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,90px);align-items:flex-start}
/* The flex gap and the browser's default paragraph margin were stacking, which is what
   made this read as separate blocks rather than one piece of writing. */
.about .cols .prose{flex:1 1 340px;display:flex;flex-direction:column;gap:11px;line-height:1.62}
.about .cols .prose p{margin:0}
.about .hair{margin:clamp(56px,10vh,110px) 0 0}

.closing{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(26px,5vw,70px);padding-top:30px;
}
.closing .prose{flex:1 1 320px;margin:0;color:var(--ink)}
.closing .actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px)}
.closing .socials{display:flex;flex-wrap:wrap;gap:18px}

/* the only button on the site — an outline, because a filled colour would break the
   rule that nothing but the photographs carries colour */
.btn{
  display:inline-block;border:1px solid var(--ink);padding:14px 28px;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--bone)}
.ig:hover{color:var(--ink)}

/* the email, set larger than body copy so it reads as the way to reach you */
.closing .email{
  display:inline-block;font-size:clamp(17px,2.1vw,26px);line-height:1.3;
  word-break:break-word;border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.closing .email:hover{border-bottom-color:var(--ink);color:var(--ink)}

/* ---------- lightbox ---------- */
#lightbox[hidden]{display:none}
#lightbox{
  position:fixed;inset:0;z-index:180;background:var(--bone);
  display:flex;flex-direction:column;
  animation:rise .4s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
#lightbox .lb-top{
  display:flex;align-items:center;gap:20px;padding:14px var(--pad);
  border-bottom:1px solid var(--rule);
}
#lightbox .ticks{flex:1;display:flex;gap:6px;max-width:420px}
#lightbox .ticks i{flex:1;height:1px;background:var(--rule)}
#lightbox .ticks i.on{background:var(--ink)}
#lightbox .lb-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,60px);padding:clamp(20px,4vh,46px) var(--pad);min-height:0;
}
#lightbox .lb-body img{max-height:100%;max-width:min(100%,540px);object-fit:contain}
#lightbox .lb-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:14px var(--pad);border-top:1px solid var(--rule);
}
#lightbox button{
  background:none;border:0;padding:10px;font-family:inherit;
  font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
}
#lightbox button:hover{color:var(--ink)}
#lightbox .close{color:var(--ink);font-size:10px}

@media (max-width:640px){
  #lightbox .lb-body{gap:8px;padding:16px 10px}
}

/* The nav doesn't fit beside the wordmark on a phone. Wrap the header onto two lines
   rather than dropping the wordmark — it's the only link back to the index. */
@media (max-width:620px){
  .bar{flex-wrap:wrap;gap:9px;padding:12px var(--pad)}
  .wordmark{flex:0 0 100%;font-size:11px}
  header nav{width:100%;justify-content:space-between;gap:0}
  header nav a{font-size:10px;letter-spacing:.1em}
}
@media (max-width:380px){
  header nav a{font-size:9px;letter-spacing:.06em}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- share / enquire in the viewer ---------- */
#lightbox .lb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,26px)}
#lightbox .linkbtn{
  background:none;border:0;padding:0;font-family:inherit;
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
#lightbox .linkbtn:hover{border-bottom-color:var(--ink)}
#lightbox .linkbtn.done{color:var(--mid);border-bottom-color:transparent}

@media (max-width:640px){
  /* on a phone the reference and counter matter less than the two actions */
  #lightbox .lb-foot{gap:10px 16px}
  #lightbox .lb-actions{order:-1;width:100%}
}

/* feedback after copying: has to be legible, since nothing else visibly happens */
#lightbox .lb-note{
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);
}
#lightbox .lb-url{
  font-family:inherit;font-size:11px;letter-spacing:.02em;text-transform:none;
  color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);
  padding:2px 0;width:min(62vw,340px);
}
#lightbox .lb-url:focus{outline:none}