/* unwd.net — /worked-with/<slug>
   A page for one of the names on the home page's "worked with" list.

   It borrows film.css for the ground, the mark, the header, the sticky bar and
   the footer, so this and a film page are the same site.

   Two rules this page holds to. Everything is Archivo — the site has no serif
   voice and never should. And nothing is boxed: a person's page separates by
   space and by the edge of an image, never by a drawn rectangle, so the only
   lines on it are the ones the photographs bring. */

.w{ --w-gap: clamp(28px, 4vw, 60px); }

/* ------------------------------------------------------------------ the top */
/* Text down the left against the ground; the portrait bleeds off the top and
   right corners and dissolves into the black rather than sitting in a box. */
.w-top{
  position: relative;
  background: var(--unwd-panel);
  min-height: clamp(560px, 76vh, 860px);
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  padding: clamp(110px, 15vh, 170px) var(--unwd-pad) clamp(56px, 9vh, 104px);
}
@media (min-width: 900px){
  .w-top { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .w-top__text { grid-column: 1; }
}

.w-portrait{
  margin: 0;
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(52%, 780px);
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 899px){
  /* No room to bleed it beside the name, so it sits above, cropped wide. */
  .w-portrait{
    position: relative; width: auto; height: clamp(240px, 40vh, 380px);
    margin: calc(clamp(110px, 15vh, 170px) * -1 + 64px) calc(var(--unwd-pad) * -1)
            clamp(28px, 4vh, 44px);
  }
}
.w-portrait img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(.18) contrast(1.04) brightness(.94);
}
/* Dissolved on the left and along the bottom so the name never fights it. */
.w-portrait::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--unwd-panel) 0%, rgba(19,19,17,.86) 16%,
                    rgba(19,19,17,.22) 44%, rgba(19,19,17,0) 72%),
    linear-gradient(to top, var(--unwd-panel) 0%, rgba(19,19,17,0) 26%);
}

.w-top__text { position: relative; z-index: 2; }

.w-eyebrow { margin: 0 0 clamp(16px, 2.4vh, 26px); color: var(--unwd-quiet); }

/* Set exactly as a film's title is on its own page — film.css .f-stage__title.
   A name and a film title are the same kind of thing here, so they are cut the
   same way: heavy, slightly condensed, uppercase, opened on the letter. */
.w-name{
  margin: 0;
  font-weight: 760; font-stretch: 92%;
  font-size: clamp(2rem, 6.6vw, 6rem);
  line-height: .96; letter-spacing: .05em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Body copy as film.css sets it in .f-brief__text. */
.w-caption{
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  max-width: 34ch;
  font-weight: 430; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.56;
  color: rgba(235, 230, 220, .88);
}

.w-note{
  margin: clamp(14px, 2vh, 22px) 0 0;
  max-width: 46ch;
  font-weight: 430; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.56;
  color: var(--unwd-quiet);
}

/* ---------------------------------------------------------- the signature */
/* An endscreen is a few seconds of type and mark — the tag that closed a piece
   made with this person. Set at the size of a signature, not a film. */
.w-sign { margin: clamp(30px, 5vh, 54px) 0 0; }
.w-sign__label { margin: 0 0 clamp(12px, 1.8vh, 18px); color: var(--unwd-quiet); }
/* A button, because it opens. No frame — the endscreen is already a black
   rectangle, so a rule around it would only draw a second one. */
.w-sign__inner{
  display: block; padding: 0; border: 0; background: none;
  width: clamp(160px, 15vw, 205px);
  cursor: pointer; overflow: hidden;
  opacity: .8; transition: opacity .35s;
}
.w-sign__inner:hover, .w-sign__inner:focus-visible { opacity: 1; }
.w-sign__inner:focus-visible { outline: 2px solid var(--unwd-signal); outline-offset: 3px; }
.w-sign video, .w-sign img { width: 100%; height: auto; display: block; background: #000; }

/* ---------------------------------------------------- work, and the rail */
.w-band{
  background: var(--unwd-panel);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vh, 72px) var(--w-gap);
  padding: 0 var(--unwd-pad) clamp(56px, 9vh, 104px);
}
@media (min-width: 1000px){
  .w-band { grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 330px); }
}

.w-work__eyebrow, .w-rail__eyebrow{
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  color: var(--unwd-quiet);
}

.w-tiles { display: grid; gap: clamp(16px, 2vw, 26px); }

/* One study, read across: its own frame on the left, what it was on the right.
   A person's page carries few enough of these that a grid of cards would look
   like a gallery with one picture in it. */
.w-tile{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 30px);
  align-items: center;
}
@media (min-width: 700px){
  .w-tile { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.w-tile__frame{
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden; background: var(--unwd-ink);
}
.w-tile__frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.w-tile:hover .w-tile__frame img { transform: scale(1.035); }

.w-tile__text{
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(10px, 1.4vh, 16px);
  padding: 0 clamp(4px, 1vw, 16px);
}
.w-tile__eyebrow { color: var(--unwd-quiet); }
.w-tile__eyebrow b { font-weight: inherit; color: rgba(235, 230, 220, .38); }
/* A study reads as a film tile reads on the wall — film.css .f-tile__name. */
.w-tile__title{
  font-weight: 700; font-stretch: 88%;
  font-size: clamp(1.15rem, 2.2vw, 2.2rem);
  line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .3s;
}
.w-tile:hover .w-tile__title { color: var(--unwd-signal); }
.w-tile__meta { color: var(--unwd-quiet); }

/* The seven, standing beside the work rather than under the whole page. A row
   is lit when this person's studies actually reached that discipline. */
.w-rail__list { list-style: none; margin: 0; padding: 0; }
.w-rail__row{
  display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(7px, 1vh, 11px) 0;
  color: rgba(235, 230, 220, .5);
  transition: color .3s;
}
.w-rail__num { flex: 0 0 2em; font-variant-numeric: tabular-nums; opacity: .74; }
/* The rail is the rail — film.css .f-rail__name, values and all. */
.w-rail__name{
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 700; font-stretch: 82%;
  letter-spacing: -.01em; line-height: 1.12;
  opacity: .4; transition: opacity .3s ease, color .3s ease;
}
a.w-rail__row:hover .w-rail__name { opacity: 1; }
.w-rail__row--on .w-rail__name { opacity: 1; }
a.w-rail__row:hover { color: var(--unwd-paper); }
.w-rail__row--on { color: var(--unwd-signal); }

/* The site's own convention: say a thing is outstanding rather than write
   something in to fill the space. */
.w-awaiting { margin: 0; color: var(--unwd-quiet); max-width: 52ch; }

@media (prefers-reduced-motion: reduce){
  .w-tile__frame img, .w-tile__title, .w-rail__row { transition: none; }
  .w-tile:hover .w-tile__frame img { transform: none; }
}

/* ------------------------------------------------------------- the lightbox */
/* The signature opens at a size worth looking at. The page behind stays
   visible and goes soft, so it reads as a step closer rather than a new place. */
.w-lb{
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 64px);
}
.w-lb__scrim{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(10, 10, 9, .58);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  backdrop-filter: blur(14px) saturate(.9);
  opacity: 0; transition: opacity .38s cubic-bezier(.22, 1, .36, 1);
}
.w-lb__box{
  position: relative;
  width: min(620px, 100%);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(12px, 2vh, 18px);
  opacity: 0; transform: scale(.985);
  transition: opacity .38s cubic-bezier(.22, 1, .36, 1),
              transform .38s cubic-bezier(.22, 1, .36, 1);
}
.w-lb.is-on .w-lb__scrim { opacity: 1; }
.w-lb.is-on .w-lb__box { opacity: 1; transform: none; }

.w-lb__stage { width: 100%; background: #000; }
.w-lb__stage video, .w-lb__stage img { width: 100%; height: auto; display: block; }

.w-lb__x{
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: var(--unwd-quiet); transition: color .3s;
}
.w-lb__x:hover { color: var(--unwd-paper); }
.w-lb__x:focus-visible { outline: 2px solid var(--unwd-signal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .w-lb__scrim, .w-lb__box { transition: opacity .01ms; }
  .w-lb__box { transform: none; }
}