/* Test look: inspired by whitney.org. White page, black type, one tight grotesk set in caps,
   thin black rules, titles with a grey second line, plain outlined buttons. Loaded only with ?look=whitney. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');

html.w {
  --paper: #FFFFFF;
  --ink: #000000;
  --newsprint: #E6E6E6;
  --graphite: #8C8C8C;
  --cobalt: #000000;
  --cobalt-on-ink: #FFFFFF;
  --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bar: 64px;
}
.w body { font: 400 17px/1.45 var(--sans); }
.w a:hover { color: var(--graphite); }
.w .mono { font-family: var(--sans); font-size: 13px; letter-spacing: 0; font-weight: 500; text-transform: none; }
.w .edge { color: var(--ink); border-top: 1px solid var(--ink); padding-block: 10px; font-size: 14px; font-weight: 500; }

/* Bar: name as a wordmark, big caps nav like a museum menu */
.w .bar { background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--ink); }
.w .mark { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.w .bar nav { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.005em; gap: 18px; }
.w .bar nav a { padding: 4px 0; }
.w .bar nav a.on { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.w .bar nav .wbtn i { font-size: 11px; }
.w .wmenu { background: #fff; box-shadow: none; }
.w .wmenu h3 { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--graphite); }
.w .wmenu li a { font-weight: 600; text-transform: uppercase; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.01em; }
.w .wmenu li a span { font-family: var(--sans); color: var(--graphite); }
@media (max-width: 560px) { .w .mark { font-size: 15px; } .w .bar nav { font-size: 13px; gap: 10px; } }
@media (max-width: 430px) { .w .mark { font-size: 13px; } .w .bar nav { font-size: 11.5px; gap: 7px; } }

/* Headlines: caps, tight, one weight; second line in grey */
.w .sig, .w .t, .w .op-txt h1, .w .case .cap b {
  font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em; line-height: .88;
}
.w .sig { font-size: clamp(56px, 13vw, 220px); }
.w .t { font-size: clamp(44px, 7vw, 104px); }
.w .op-txt h1 { font-size: clamp(36px, 4vw, 64px); }
.w .intro { position: relative; }
.w .intro::after { content: none; }
/* The angled line: drawn in when it scrolls into view, then its corner travels as you scroll (site.js) */
.w .zz { display: block; width: 100%; height: clamp(40px, 7vw, 110px); margin-top: 18px; overflow: visible; border-bottom: 1px solid var(--ink); }
.w .zz.small { height: clamp(28px, 4vw, 64px); margin: 0 0 clamp(18px, 3vw, 32px); }
.w .zz path { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.w .zz { clip-path: inset(-2px 100% -2px 0); transition: clip-path 1.2s cubic-bezier(.6, .1, .2, 1); }
.w .zz.in { clip-path: inset(-2px 0 -2px 0); }
@media (prefers-reduced-motion: reduce) { .w .zz { transition: none; clip-path: none; } }
.w .intro .lede, .w .lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; font-weight: 500; max-width: 38ch; }
.w .tags span { font-weight: 600; text-transform: uppercase; font-size: 14px; }
.w .aside { font-family: var(--sans); font-style: normal; font-weight: 600; text-transform: uppercase; color: var(--graphite); font-size: 20px; letter-spacing: -.01em; }
.w .role { color: var(--graphite); }

/* Grids: regular columns, plain images, caps titles with grey dates */
.w .grid12 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 20px; }
.w .pick { grid-column: span 1 !important; }
.w .pick .ph { aspect-ratio: 4 / 5 !important; background: var(--newsprint); }
.w .pick .cap { display: flex; flex-direction: column; gap: 0; }
.w .pick .cap > .mono:first-child { display: none; }
.w .pick .cap b { font-size: clamp(22px, 2vw, 30px); font-weight: 600; text-transform: uppercase; line-height: .92; letter-spacing: -.015em; }
.w .pick .cap .dim { font-family: var(--sans); font-size: clamp(22px, 2vw, 30px); font-weight: 600; text-transform: uppercase; line-height: .92; letter-spacing: -.015em; color: var(--graphite); }
.w .frames, .w .frames.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 20px; }
.w .frame .ph, .w .frames.four .ph { aspect-ratio: 4 / 5; }
.w .frame .cap { flex-direction: column-reverse; }
.w .frame .cap b, .w .frames.four .cap b { font-size: 19px; font-weight: 600; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; }
.w .frame .cap .mono { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 900px) { .w .grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w .frames, .w .frames.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w .grid12 { grid-template-columns: 1fr; } }

/* Drop the darkroom details: grease pencil, frame numbers, hand-drawn loops */
.w .pencil, .w .fno, .w .loop { display: none !important; }
.w .looped { font-weight: inherit; }
.w figcaption.mono { display: none; }

/* Buttons and filters: small outlined boxes */
.w .filters button, .w .snd, .w .to-archive, .w .jump {
  border: 1px solid var(--ink); padding: 6px 10px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; background: #fff; color: var(--ink);
}
.w .filters button.on { background: var(--ink); color: #fff; }
.w .to-archive { display: inline-flex; gap: 16px; margin-top: 32px; }
.w .to-archive b { font-weight: 600; }

/* Project pages */
.w .opener { border-bottom: 1px solid var(--ink); }
.w .beats { border-top: 1px solid var(--ink); }
.w .beats .lab { font-weight: 600; text-transform: uppercase; color: var(--ink); font-size: 13px; }
.w .credits dt { font-family: var(--sans); color: var(--graphite); }
.w .pn b { text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; }

/* About: portrait without the film frame */
.w .negative { transform: none; aspect-ratio: 4 / 5; }
.w .negative .neg-frame { display: none; }
.w .negative .neg-pic { inset: 0; width: 100%; height: 100%; filter: none; }

/* Footer */
.w .big-foot { font-weight: 600; letter-spacing: -.02em; }

/* Look switch, test only */
.look-switch { position: fixed; left: 12px; bottom: 12px; z-index: 60; display: flex; border: 1px solid #000; background: #fff; font: 600 12px/1 'Inter Tight', Helvetica, Arial, sans-serif; text-transform: uppercase; }
.look-switch a { padding: 8px 10px; color: #000; }
.look-switch a.on { background: #000; color: #fff; }