/* Direction E: the gallery, as a scanned zine.
   Deliberately the collage look from the references: prints laid down by hand on
   a photocopied ground, taped and stapled, written over in marker, and scanned
   badly. The other directions are the clean house voice; this one is the mess. */

:root{
  --scan-blue:#2b7fae;
  --scan-blue-deep:#1a5c85;
  --paper-print:#efe9dc;      /* the cream border of a print */
  --paper-note:#e7e0cc;       /* a torn notepad fragment */
  --marker:#12222c;
}

html{background:#000}
body{background:#000;color:var(--paper-print);overflow-x:hidden}

/* ---- spreads ------------------------------------------------------------- */
.spread{position:relative;width:100%;overflow:hidden;isolation:isolate}
.spread--blue{background:var(--scan-blue)}
.spread--black{background:#050505}

/* The ground of a photocopy: uneven ink, heavy grain, dark at the edges. */
.spread--blue::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 6%,rgba(255,255,255,.16),transparent 55%),
    radial-gradient(100% 90% at 88% 94%,rgba(4,26,42,.42),transparent 60%),
    linear-gradient(190deg,rgba(255,255,255,.05),rgba(6,32,50,.3))}
.spread::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:.46;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E")}
.spread--black::after{opacity:.3;mix-blend-mode:screen}

.stack{position:absolute;inset:0;z-index:2}
.ink{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.ink{stroke:var(--marker)}
.ink path{fill:none;stroke-linecap:round;stroke-linejoin:round}

.damage{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible;mix-blend-mode:screen}
.damage path{fill:none;stroke:#fff;stroke-linecap:round}

/* ---- prints -------------------------------------------------------------- */
.print{position:absolute;z-index:2;transform-origin:50% 50%;
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.print img{width:100%;height:100%;object-fit:cover;display:block;background:var(--shade,#1a1a1a);
  opacity:0;transition:opacity .8s var(--ease)}
.print img.is-loaded{opacity:1}
/* A cut-out print: no border, just the photograph laid down. */
.print--cut{box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
/* A bordered print: cream paper all round, deeper at the foot. */
.print--bordered{background:var(--paper-print);padding:10px 10px 30px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.72),0 2px 5px rgba(0,0,0,.34)}
.print--bordered.is-square{padding:12px 12px 40px}
.print button{position:absolute;inset:0;width:100%;cursor:pointer;z-index:3}
.print button::after{content:"";position:absolute;inset:-3px;border:1px solid transparent;transition:border-color .25s var(--ease)}
.print:hover{transform:var(--t) scale(1.018)}
.print button:hover::after,.print button:focus-visible::after{border-color:var(--paper-print)}

/* Photographs on this page are scans of prints, not files. */
.print img{filter:contrast(1.09) saturate(.88) brightness(.98)}
.spread--black .print img{filter:contrast(1.14) saturate(.72)}

/* ---- tape ---------------------------------------------------------------- */
.tape{position:absolute;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.26),rgba(255,255,255,.13) 40%,rgba(255,255,255,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.12)}
.spread--black .tape{background:linear-gradient(105deg,rgba(236,230,214,.2),rgba(236,230,214,.09) 40%,rgba(236,230,214,.17))}

/* A torn fragment of notepaper, pasted on. */
.note{position:absolute;z-index:3;background:var(--paper-note);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}

/* ---- set type ------------------------------------------------------------ */
/* Printed marks live alongside the handwriting, the way a zine mixes them. */
.stamp{position:absolute;z-index:4;font-family:var(--display);font-weight:700;
  letter-spacing:-.04em;line-height:.8;color:var(--paper-print);mix-blend-mode:overlay;pointer-events:none}
.spread--black .stamp{mix-blend-mode:normal;opacity:.9}
.label{position:absolute;z-index:4;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--marker);pointer-events:none}
.spread--black .label{color:rgba(236,230,214,.62)}
.label--light{color:rgba(239,233,220,.82)}

/* ---- chrome -------------------------------------------------------------- */
.masthead{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding:22px var(--gutter) 0;
  background:linear-gradient(rgba(0,0,0,.72),transparent)}
.brand{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--paper-print)}
.brand b{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.01em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.66}
.masthead nav{display:flex;gap:14px;padding-top:2px}
.masthead nav a{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(239,233,220,.66);transition:color .25s var(--ease)}
.masthead nav a::before{content:"[ "}
.masthead nav a::after{content:" ]"}
.masthead nav a:hover{color:var(--paper-print)}

.folio{position:fixed;right:var(--gutter);bottom:20px;z-index:30;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,220,.5);
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}

.fallback{position:absolute;left:-9999px}
.fallback:focus-within{position:static;padding:88px var(--gutter) 40px;z-index:50;background:#000}

@media (max-width:820px){
  .masthead{padding:14px var(--gutter) 0}
  .brand b{font-size:12px}
  .brand span{font-size:7.5px;letter-spacing:.14em}
  .masthead nav{gap:8px}
  .masthead nav a{font-size:8px;letter-spacing:.09em}
  .print--bordered{padding:6px 6px 18px}
  .print--bordered.is-square{padding:7px 7px 24px}
  .label{font-size:8px;letter-spacing:.12em}
}