/* Direction 05: only the works overview loads this file.
   Cover pixels, type assets, the homepage and detail pages remain unchanged. */
.works-page {
  --edge: 28px;
  --work-copy: 360px;
  --work-space: 24px;
}
.works-page .nav-caption { font-size: 12px; }
.works-page .masthead { min-height: 104px; }
.works-page .works-statement { min-height: 0; padding: 28px 0 32px; }
.works-page .works-statement .hero-kicker { font-size: 12px; margin-bottom: 20px; }
.works-page #statement-title {
  max-width: none;
  font-size: clamp(70px, 6.9vw, 108px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.works-page .statement-bottom {
  align-items: center;
  font-size: 12px;
  line-height: 1.65;
  margin-top: 24px;
  gap: 24px;
}
.works-page .statement-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.works-page .work-stage { overflow: clip; background: #f0f1ed; }
.works-page .stage-heading {
  align-items: center;
  padding: 20px 0 12px;
  border: 0;
  font-size: 12px;
  line-height: 1.5;
}
.works-page .stage-heading button { min-height: 44px; font-size: 12px; padding: 10px 16px; box-shadow: none; }
.works-page .project-list { padding-top: 0; }
.works-page .project-meta { font-size: 12px; gap: 14px; }
.works-page .project-entry h2 { font-size: 64px; margin: 14px 0 20px; letter-spacing: -.03em; }
.works-page .entry-description { font-size: 14px; line-height: 1.8; max-width: var(--work-copy); }
.works-page .series-link { font-size: 14px; min-height: 44px; padding: 10px 0; margin-top: 16px; }
.works-page .ip-note { font-size: 11px; line-height: 1.75; max-width: var(--work-copy); }
.works-page .inline-cover {
  padding: 8px;
  border-radius: 12px;
  background: rgb(255 255 255 / 42%);
  box-shadow: 0 12px 28px rgb(32 32 32 / 7%);
  margin-top: 24px;
}
.works-page .site-footer { padding-top: 144px; padding-bottom: 24px; }
.works-page .footer-information { font-size: 13px; line-height: 1.65; }
.works-page .footer-display { margin-top: 56px; }

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .works-page .stage-enhanced .stage-grid { grid-template-columns: 40% 60%; }
  .works-page .stage-enhanced .project-entry { min-height: 64vh; padding: 72px 28px 72px 20px; }
  .works-page .stage-enhanced #project-dream { min-height: 55vh; padding-left: 56px; }
  .works-page .stage-enhanced #project-jian { min-height: 61vh; }
  .works-page .stage-enhanced #project-my-font { min-height: 67vh; }
  .works-page .stage-enhanced #project-molly { min-height: 78vh; padding-left: 56px; }
  .works-page .stage-enhanced #project-photography { min-height: 85vh; }
  .works-page .stage-enhanced .preview-rail {
    top: 12vh;
    min-height: 54vh;
    padding: 24px 16px;
    justify-content: flex-end;
  }
  .works-page .preview-window {
    padding: 12px;
    max-width: 100%;
    border-radius: 12px;
    border-color: rgb(255 255 255 / 80%);
    background: linear-gradient(130deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 18%));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 38px rgb(32 32 32 / 11%);
  }
  .works-page .preview-window::before { content: none; }
  .works-page .preview-label { font-size: 12px; margin-bottom: 10px; padding: 2px 2px 4px; line-height: 1.6; }
  .works-page .floating-preview { box-shadow: none; border-radius: 2px; }
  .works-page .floating-preview img { max-height: 64vh; }
  .works-page .preview-window:has(a:hover) { transform: translateY(-3px); box-shadow: 0 20px 42px rgb(32 32 32 / 14%); }
  .works-page .work-stage[data-current="dream"] .preview-rail { justify-content: flex-start; padding-left: 24px; }
  .works-page .work-stage[data-current="jian"] .preview-rail { padding-right: 56px; }
  .works-page .work-stage[data-current="molly"] .preview-rail { padding-right: 64px; }
  .works-page .work-stage[data-current="photography"] .preview-rail { justify-content: flex-start; padding-left: 24px; }
  .works-page .backdrop-images img.is-active { opacity: .48; }
  .works-page .work-stage[data-current="molly"] .backdrop-images img.is-active { opacity: .3; }
  .works-page .work-stage[data-current="photography"] .backdrop-images img.is-active { opacity: .36; }
  .works-page .backdrop-wash {
    background: linear-gradient(90deg, rgb(242 243 240 / 98%) 0%, rgb(242 243 240 / 96%) 26%, rgb(242 243 240 / 85%) 43%, rgb(242 243 240 / 42%) 67%, rgb(242 243 240 / 12%) 100%);
  }
  .works-page .type-sheet { inset: 2vh 3vw 4vh 41%; gap: 32px; }
  .works-page .type-large { font-size: clamp(156px, 13vw, 230px); line-height: .94; }
  .works-page .type-lines { font-size: clamp(22px, 2.6vw, 44px); line-height: 1.07; opacity: .62; }
  .works-page .type-lines>div:nth-child(3) { margin-top: 8px; }
  .works-page .type-numbers { margin-top: 10px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .works-page { --edge: 24px; }
  .works-page .stage-enhanced .project-entry { padding-left: 0; padding-right: 24px; }
  .works-page .stage-enhanced #project-dream,
  .works-page .stage-enhanced #project-molly { padding-left: 12px; }
  .works-page .stage-enhanced .project-entry h2 { font-size: 52px; }
  .works-page .stage-enhanced .project-entry[data-project="my-font"] h2 { font-size: 66px; }
  .works-page .stage-enhanced .preview-rail { padding-left: 16px; padding-right: 0; }
  .works-page .work-stage[data-current="jian"] .preview-rail,
  .works-page .work-stage[data-current="molly"] .preview-rail { padding-right: 16px; }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .works-page .project-entry { padding: 40px 0 64px; }
  .works-page .project-entry + .project-entry { padding-top: 32px; }
  .works-page .inline-cover { max-width: 620px; }
  .works-page #project-dream .inline-cover { max-width: 360px; }
  .works-page #project-jian .inline-cover { max-width: 490px; }
  .works-page #project-molly .inline-cover { max-width: 330px; }
}
@media (max-width: 600px) {
  .works-page { --edge: 18px; }
  .works-page .masthead { min-height: 74px; padding-top: 14px; }
  .works-page .masthead a { display: inline-block; min-height: 44px; }
  .works-page .masthead .display { font-size: 18px; }
  .works-page .nav-caption { font-size: 11px; padding-top: 4px; }
  .works-page .nav-brand { width: 51%; }
  .works-page .works-statement { min-height: 0; padding: 20px 0 20px; }
  .works-page .works-statement .hero-kicker { font-size: 11px; margin-bottom: 18px; }
  .works-page #statement-title { font-size: 12.8vw; line-height: 1.06; letter-spacing: -.025em; text-wrap: pretty; }
  .works-page .statement-bottom { margin-top: 18px; font-size: 11px; line-height: 1.7; }
  .works-page .statement-bottom a { margin-top: 8px; font-size: 13px; min-height: 44px; }
  .works-page .stage-heading { padding: 12px 0; font-size: 11px; gap: 12px; }
  .works-page .stage-heading button { font-size: 11px; padding: 10px 12px; flex: none; }
  .works-page .project-entry { padding: 22px 0 52px; scroll-margin-top: 20px; }
  .works-page .project-entry + .project-entry { padding-top: 24px; }
  .works-page .project-meta { font-size: 11px; gap: 12px; }
  .works-page .project-entry h2 { font-size: 44px; margin: 12px 0 14px; }
  .works-page .project-entry[data-project="my-font"] h2 { font-size: 60px; }
  .works-page .project-entry[data-project="molly"] h2 { font-size: 54px; }
  .works-page .entry-description { font-size: 14px; line-height: 1.75; }
  .works-page .inline-cover { margin-top: 20px; padding: 6px; }
  .works-page .inline-secondary { max-width: 85%; margin: 20px 0 0 auto; }
  .works-page .series-link { font-size: 13px; }
  .works-page .ip-note { margin-top: 20px; font-size: 11px; }
  .works-page .site-footer { padding-top: 72px; padding-bottom: 20px; }
  .works-page .footer-information { font-size: 12px; }
  .works-page .footer-right { gap: 20px; }
  .works-page .footer-right p { flex-basis: 100%; }
  .works-page .footer-display { margin-top: 36px; font-size: 18vw; }
}