/* The Process. The rows and cards are the site's own - only the header and a
   couple of card tweaks live here. */
#docs-view{display:none;z-index:3;position:relative;padding:7.5rem 0 4rem}
.docs-head{padding:0 var(--gut);margin-bottom:2.2rem}
.docs-head h2{font-family:var(--font);font-weight:800;font-size:clamp(1.7rem,4vw,2.8rem);
  margin:.2rem 0 .6rem;letter-spacing:-.02em;color:var(--ink)}
.docs-head h2 b{color:var(--accent2);font-style:normal}
.docs-head p{margin:0;color:var(--ink-dim);font-size:.9rem;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* only hold it on one line where there is room for it */
@media(max-width:760px){.docs-head p{white-space:normal;overflow:visible}}

/* running time sits where the couture badge does on a runway card */
.card.doccard .cbadge{letter-spacing:.12em}
.card.doccard .cbadge.cout{color:var(--ink-dim);border-color:var(--line)}
.card.doccard .cname{font-size:.95rem;line-height:1.3}

/* collections a film discusses, linked back into the archive */
.doclinks{display:flex;flex-direction:column;gap:.1rem}
/* Name on the left, season on the right where there is room; the season drops
   onto its own line where there is not. Without the wrap and the min-width the
   season's nowrap claimed the whole row, pushed the title to one word per line
   in the narrow rail, and ran off the edge of the sheet. */
.doclink{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem .8rem;width:100%;
  padding:.45rem 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  cursor:pointer;text-align:left;font:inherit;color:var(--ink-dim);transition:color .18s}
.doclink:hover{color:var(--accent)}
.dl-name{font-family:var(--font);font-size:.86rem;min-width:0;flex:1 1 60%;overflow-wrap:anywhere}
.dl-season{font-family:var(--font);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
/* a post that lives on Instagram leaves the archive when clicked, so it is
   marked the way the Elsewhere links are rather than looking like a player */
.doclink.dl-out{text-decoration:none}
.doclink.dl-out .rwx{font-size:.78em;opacity:.65}

/* Search results from Off the Runway, sitting under the collections.
   #grid-view already carries the page gutter, so this does not add its own. */
.docres{margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(253,247,247,.12)}
.docres-head{margin:0 0 1.1rem}
.docres-head p{color:var(--ink-dim);margin:.25rem 0 0;font-size:.88rem}