/* Press on the Info page: it sits under the portrait on wide screens and after everything else on phones.
   Publication in ink, the piece in grey, an arrow that moves on hover. */
.portfolio-page .info-layout { grid-template-rows: min-content 1fr; row-gap: 0; }
.portfolio-page .info-layout .info-photo { grid-column: 1; grid-row: 1; }
.portfolio-page .info-layout .info-content { grid-column: 2; grid-row: 1 / span 2; }
.portfolio-page .info-layout .info-press { grid-column: 1; grid-row: 2; align-self: start; width: min(100%, 500px); justify-self: center; margin-top: clamp(28px, 3vw, 44px); }
.info-press h2 {
  margin: 0; padding-bottom: 14px; color: var(--label-ink); font-weight: 500;
  font: 500 clamp(15px, 1.25vw, 18px)/1.5 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; letter-spacing: -.035em;
}
.press-list { list-style: none; margin: 0; padding: 0; }
.press-list li { border-top: 1px solid var(--line); }
.press-list li:last-child { border-bottom: 1px solid var(--line); }
.press-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  padding: 13px 0 14px; color: var(--ink); text-decoration: none;
  font: 500 clamp(15px, 1.25vw, 17px)/1.5 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; letter-spacing: -.012em;
}
.press-list strong { grid-column: 1; font-weight: 500; }
.press-list span { grid-column: 1; color: #555650; transition: color 180ms ease; }
.press-year { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #8a8a82; font-weight: 500; font-size: .86em; font-variant-numeric: tabular-nums; }
.press-list i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; transition: transform 220ms ease; }
.press-list a:hover span, .press-list a:focus-visible span { color: var(--ink); }
.press-list a:hover i, .press-list a:focus-visible i { transform: translate(3px, -3px); }
@media (max-width: 700px) {
  .portfolio-page .info-layout .info-photo,
  .portfolio-page .info-layout .info-content,
  .portfolio-page .info-layout .info-press { grid-column: 1; grid-row: auto; }
  .portfolio-page .info-layout .info-press { width: 100%; justify-self: start; margin-top: 8px; }
}

.press-all { display: inline-block; margin-top: 16px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; font: 500 clamp(13px, 1vw, 15px)/1.4 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; letter-spacing: -.01em; }
.press-all:hover { opacity: .6; }
/* The Press page. */
.press-page { max-width: 1040px; margin: 70px 0 0; padding: 0 0 80px; box-sizing: border-box; }
.press-page h1 { margin: 0 0 10px; font: 500 clamp(15px, 1.25vw, 18px)/1.5 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; letter-spacing: -.035em; color: var(--label-ink); }
.press-intro { margin: 0 0 clamp(24px, 3vw, 40px); color: #555650; font: 400 clamp(15px, 1.25vw, 17px)/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.press-index { list-style: none; margin: 0; padding: 0; }
.press-index li { border-top: 1px solid var(--line); }
.press-index li:last-child { border-bottom: 1px solid var(--line); }
.press-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: clamp(18px, 2vw, 26px) 0; color: var(--ink); text-decoration: none; }
.pp-year { color: #8a8a82; font: 500 clamp(15px, 1.25vw, 18px)/1.4 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; font-variant-numeric: tabular-nums; }
.pp-text strong { display: block; font: 500 clamp(20px, 2.2vw, 32px)/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.02em; }
.pp-text > span { display: block; margin-top: 4px; color: #555650; font: 400 clamp(15px, 1.25vw, 18px)/1.45 'Helvetica Neue', Helvetica, Arial, sans-serif; transition: color 180ms ease; }
.press-index i { font-style: normal; font-size: clamp(18px, 1.6vw, 24px); transition: transform 220ms ease; align-self: center; }
.press-index a:hover .pp-text > span, .press-index a:focus-visible .pp-text > span { color: var(--ink); }
.press-index a:hover i, .press-index a:focus-visible i { transform: translate(4px, -4px); }
.press-back { display: inline-block; margin-top: 32px; color: #646464; text-decoration: none; font: 500 clamp(13px, 1vw, 15px)/1.4 "Portfolio Mono", monospace; font-family: "Portfolio Mono", monospace !important; }
.press-back:hover { color: var(--ink); }
@media (max-width: 700px) {
  .press-page { margin-top: 24px; }
  .press-index a { column-gap: 12px; }
}