/* Suco de Tinta — a compact, paginated collection.
   Original photographs stay complete; the native viewer provides the large view. */
.archive {
  --archive-rule: rgba(25, 26, 22, .20);
  --archive-muted: #646658;
  padding-top: clamp(75px, 6.5vw, 110px);
  overflow: clip;
}
.archive-heading > .eyebrow {padding-top: 22px; font-size: 10px; letter-spacing: .14em;}
.archive-title-row {align-items: flex-end; padding: 36px 0 42px; gap: 6vw;}
.archive h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(76px, 8vw, 120px);
  line-height: .94;
  letter-spacing: -.075em;
}
.archive h2 .reveal-line {display: block; transform: translate3d(0, clamp(-15px, var(--editorial-y, 0px), 15px), 0);}
.archive h2 em {
  display: inline-block;
  padding-top: .05em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: .98em;
  letter-spacing: -.065em;
}
.archive-intro {width: 29%; max-width: 310px; padding-bottom: 5px;}
.archive .small-index {font-size: 9px; line-height: 1.6; color: var(--archive-muted);}
.archive-intro p {font-size: clamp(14px, 1.2vw, 18px); line-height: 1.6; margin: 20px 0 24px;}
.archive-intro a {font-size: 12px; max-width: 210px; padding-bottom: 9px;}
.archive-toolbar {padding: 12px 0; margin-bottom: 32px; gap: 24px;}
.archive .filters {gap: 30px;}
.archive .filter {font-size: 12px; min-height: 36px; align-items: center;}
.archive .filter span {font-size: 9px; align-self: flex-start; padding-top: 7px;}
.archive .archive-count {font-size: 10px; color: var(--archive-muted);}
.archive .works-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 42px);
  row-gap: 38px;
  align-items: start;
  padding-bottom: 32px;
}
.archive .work-card:nth-child(n) {min-width: 0; margin: 0; padding: 0; grid-column: auto; border: 0;}
.archive .work-card .work-visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(280px, 32vw, 480px);
  max-height: 480px;
  aspect-ratio: auto;
  background: #e3ded3;
  overflow: hidden;
}
.archive .work-visual img {
  width: 100%; height: 100%; min-height: 0;
  object-fit: contain;
  display: block;
  transform: none;
  transition: none;
}
.archive .work-button {position: relative; transform: translate3d(0, clamp(-8px, var(--editorial-y, 0px), 8px), 0);}
.archive .work-button:hover .work-visual img {transform: none;}
.archive .work-open {
  right: 12px; bottom: 12px; width: 36px; height: 36px;
  font-size: 20px; background: var(--paper);
  transition: background .2s, color .2s, transform .25s;
}
.archive .work-button:is(:hover, :focus-visible) .work-open {background: var(--ink); color: var(--paper); transform: translate(2px, -2px);}
.archive .work-button:focus-visible {outline-offset: 6px;}
.archive .work-description {padding-top: 12px; margin-top: 19px; gap: 16px; border-color: var(--archive-rule);}
.archive .work-description h3 {font-size: clamp(17px, 1.55vw, 24px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; margin-bottom: 7px;}
.archive .work-description p {font-size: 10px; line-height: 1.5; color: var(--archive-muted);}
.archive .work-number {font-size: 9px; padding-top: 3px; color: var(--archive-muted); font-variant-numeric: tabular-nums;}

.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 30px;
  border-top: 1px solid var(--archive-rule);
  font-size: 11px;
}
.archive-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  min-width: 112px;
  padding: 10px 14px;
  border: 1px solid var(--archive-rule);
  background: transparent;
  font-size: 11px;
  transition: color .2s, background .2s;
}
.archive-pagination button:not(:disabled):hover {background: var(--ink); color: var(--paper);}
.archive-pagination button:disabled {opacity: .35; cursor: default;}
.archive-pagination > span, .archive-pagination [role="status"] {color: var(--archive-muted); font-variant-numeric: tabular-nums; letter-spacing: .06em;}
.archive-endnote {margin-top: 16px; padding: 28px 0 34px; gap: 38px;}
.archive-endnote .endnote-mark {font-size: 48px;}
.archive-endnote p {font-size: 11px; line-height: 1.6; color: var(--archive-muted);}
.archive .back-top {font-size: 11px; gap: 30px;}

/* Clear routes into the film, collection and contact. */
.site-header .main-nav {gap: 26px;}
.site-header .main-nav a {min-height: 40px; align-items: center;}
body.is-archive .site-header {border-bottom: 1px solid rgba(25, 26, 22, .10);}
.site-footer {padding-top: clamp(48px, 5vw, 80px); padding-bottom: 26px;}
.footer-lead {padding-bottom: clamp(45px, 5vw, 80px);}
.footer-lead > p {font-size: clamp(44px, 5.7vw, 86px); line-height: .98;}
.site-footer .contact-circle {font-size: 14px; width: clamp(140px, 14vw, 200px); height: clamp(140px, 14vw, 200px);}
.footer-bottom {font-size: 10px; padding-top: 23px; gap: 22px;}

@media (max-width: 1200px) {
  .header-note {display: none;}
}
@media (max-width: 960px) {
  .archive-title-row {gap: 30px;}
  .archive h2 {font-size: clamp(65px, 8.4vw, 80px);}
  .archive-intro {width: 31%;}
  .archive .works-grid {column-gap: 22px; row-gap: 34px;}
  .archive .work-description {gap: 8px;}
  .archive .work-description h3 {font-size: 18px;}
  .archive .work-card .work-visual {height: clamp(250px, 34vw, 330px);}
}
@media (max-width: 700px) {
  .archive {padding-top: 75px;}
  .archive-heading > .eyebrow {font-size: 9px; padding-top: 18px;}
  .archive-title-row {display: block; padding: 28px 0 30px;}
  .archive h2 {font-size: clamp(48px, 11.5vw, 70px); line-height: .98;}
  .archive h2 em {font-size: 1em;}
  .archive-intro {display: block; width: 100%; max-width: 360px; margin-top: 22px; padding: 0;}
  .archive .small-index {font-size: 8px;}
  .archive-intro p {font-size: 13px; margin: 12px 0 17px; max-width: 33ch;}
  .archive-intro a {font-size: 11px; padding-bottom: 7px; max-width: 170px;}
  .archive-toolbar {padding: 9px 0; margin-bottom: 24px; gap: 12px;}
  .archive .filters {gap: 20px;}
  .archive .filter {font-size: 11px; min-height: 36px;}
  .archive .archive-count {font-size: 9px;}
  .archive .works-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 16px; padding-bottom: 28px;}
  .archive .work-card:nth-child(n) {width: 100%; margin: 0; grid-column: auto;}
  .archive .work-card .work-visual {height: auto; aspect-ratio: 3 / 4; max-height: 230px;}
  .archive .work-visual img {max-height: 230px;}
  .archive .work-description {margin-top: 15px; padding-top: 10px; gap: 7px;}
  .archive .work-description h3 {font-size: 14px; line-height: 1.25; margin-bottom: 5px;}
  .archive .work-description p {font-size: 9px; line-height: 1.45;}
  .archive .work-number {font-size: 8px; padding-top: 2px;}
  .archive .work-open {width: 28px; height: 28px; right: 8px; bottom: 8px; font-size: 16px;}
  .archive-pagination {padding: 15px 0 20px; gap: 10px; font-size: 10px;}
  .archive-pagination button {min-width: 94px; gap: 9px; font-size: 10px; padding: 10px;}
  .archive-endnote {gap: 20px; padding: 25px 0 28px; margin-top: 12px;}
  .archive-endnote .endnote-mark {font-size: 40px;}
  .archive-endnote p {font-size: 10px;}
  .archive .back-top {font-size: 10px; gap: 12px;}
  .site-header .main-nav {gap: 19px; font-size: 10px;}
  .main-nav a[href="#studio"], .main-nav a[href="#processo"], .main-nav .contact-link {display: none;}
  .site-footer {padding-top: 45px; padding-bottom: 24px;}
  .footer-lead {padding-bottom: 45px; gap: 18px;}
  .footer-lead > p {font-size: clamp(36px, 9vw, 54px);}
  .site-footer .contact-circle {width: 98px; height: 98px; font-size: 11px;}
  .footer-bottom {font-size: 9px; padding-top: 21px; gap: 15px;}
}
@media (max-width: 360px) {
  .archive h2 {font-size: 14.8vw;}
  .archive .filters {gap: 14px;}
  .archive .works-grid {column-gap: 13px;}
  .archive .work-description h3 {font-size: 13px;}
  .archive-pagination button {min-width: 83px; padding: 9px;}
  .archive-endnote {gap: 15px;}
  .footer-lead > p {font-size: 35px;}
  .site-footer .contact-circle {width: 86px; height: 86px; font-size: 10px;}
}
@media (prefers-reduced-motion: reduce) {
  .archive .work-open, .archive-pagination button {transition: none;}
  .archive .work-button, .archive .reveal-line,
  .archive .work-button:is(:hover, :focus-visible) .work-open {transform: none;}
}
body.reduce-motion .archive .work-open {transition: none; transform: none;}
body.reduce-motion .archive .work-button,
body.reduce-motion .archive .reveal-line {transform: none;}