/* PZGL Studios refinement layer (2026-09-01)
   Loads after polish.css and portfolio-digital.css.
   1. Portfolio filter state contrast
   2. Display typography tracking
   3. Mobile projects: proof before preamble
   4. Contact: one dominant action, response expectation, brief checklist
   5. Distilled section labels
*/

/* ------------------------------------------------------------------
   1. Portfolio filter state
   polish.css set a near-white background on .atlas-projects-section
   .filters button (specificity 0,3,1), which outranked the base
   .filters button.active rule (0,2,1) and left the selected chip as
   near-white text on a near-white surface. These restore the intended
   inverted state at matching specificity.
   ------------------------------------------------------------------ */
.atlas-projects-section .filters button.active,
.atlas-projects-section .filters button[aria-pressed="true"] {
  color: var(--white);
  background: var(--carbon);
  border-color: var(--carbon);
}

.atlas-projects-section .filters button:hover {
  color: var(--white);
  background: var(--carbon);
  border-color: var(--carbon);
}

.atlas-projects-section .filters .web-digital-filter.active,
.atlas-projects-section .filters .web-digital-filter[aria-pressed="true"],
.atlas-projects-section .filters .web-digital-filter:hover {
  color: #101214;
  background: #b58a21;
  border-color: #b58a21;
}

.atlas-projects-section .filters button:focus-visible {
  outline: 2px solid var(--polish-focus, #315b8a);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   2. Display typography
   Display tracking sat between -0.045em and -0.065em, tighter than the
   -0.04em floor. The map homepage (.hero-copy h1) is deliberately left
   untouched.
   ------------------------------------------------------------------ */
.atlas-hero h1 {
  letter-spacing: -0.03em;
}

.page-hero h1,
.project-hero-copy h1 {
  letter-spacing: -0.03em;
}

.atlas-page h2,
.section h2 {
  letter-spacing: -0.025em;
}

/* ------------------------------------------------------------------
   3. Mobile projects page
   The hero, attribution note and archive facts pushed the first project
   card roughly 1800px down at 390px. On small screens the portfolio
   itself now follows the hero, and the supporting context follows the
   work.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  main.atlas-projects {
    display: flex;
    flex-direction: column;
  }

  main.atlas-projects > .atlas-hero {
    order: 1;
  }

  main.atlas-projects > .atlas-projects-section {
    order: 2;
  }

  main.atlas-projects > .atlas-project-disclosure {
    order: 3;
    margin-top: 0;
    margin-bottom: 18px;
  }

  main.atlas-projects > .atlas-facts {
    order: 4;
    margin-bottom: 8px;
  }

  main.atlas-projects > .atlas-next {
    order: 5;
  }

  main.atlas-projects > .atlas-hero {
    min-height: 0;
    padding-block: 26px;
  }

  main.atlas-projects .atlas-hero-panel {
    padding: 18px;
  }

  main.atlas-projects .atlas-hero h1 {
    margin: 11px 0 12px;
    font-size: clamp(32px, 8.6vw, 46px);
  }

  main.atlas-projects .atlas-hero p {
    font-size: 15px;
  }

  main.atlas-projects > .atlas-projects-section {
    padding-block: 30px 56px;
  }

  main.atlas-projects .atlas-section-heading {
    gap: 16px;
    margin-bottom: 22px;
  }
}

/* Overflow cue on the horizontally scrolling filter rail. Suppressed
   while a chip is focused so the focus ring is never clipped. */
@media (max-width: 900px) {
  .atlas-projects-section .filters:not(:focus-within) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
}

/* ------------------------------------------------------------------
   4. Contact lead block
   ------------------------------------------------------------------ */
.pzgl-contact-lead {
  margin-top: 26px;
  border: 1px solid var(--carbon);
  background: var(--polish-paper, #fff);
  padding: clamp(20px, 3vw, 30px);
}

.pzgl-contact-lead .atlas-label {
  display: block;
  margin-bottom: 10px;
}

.pzgl-contact-promise {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.pzgl-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pzgl-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--carbon);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease;
}

.pzgl-contact-actions .pzgl-action-primary {
  color: var(--white);
  background: var(--carbon);
  flex: 1 1 320px;
}

.pzgl-contact-actions .pzgl-action-primary:hover {
  color: var(--carbon);
  background: #f4b91f;
  border-color: var(--carbon);
}

.pzgl-contact-actions .pzgl-action-secondary {
  color: var(--carbon);
  background: 0 0;
}

.pzgl-contact-actions .pzgl-action-secondary:hover {
  color: var(--white);
  background: var(--carbon);
}

.pzgl-brief-checklist {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--polish-line, #d8ddd7);
}

.pzgl-brief-checklist li {
  border-bottom: 1px solid var(--polish-line, #d8ddd7);
  padding: 11px 0 11px 26px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}

.pzgl-brief-checklist li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12px;
}

.pzgl-contact-note {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1.65;
}

/* The seven service cards are a deep link, not the main route. */
.atlas-contact-services > .atlas-label {
  display: block;
}

@media (max-width: 640px) {
  .pzgl-contact-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pzgl-contact-actions a {
    width: 100%;
  }

  .project-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-hero-copy {
    min-width: 0;
  }

  .project-hero-copy h1 {
    font-size: clamp(40px, 11.75vw, 48px);
  }
}

@media (hover: none) {
  .pzgl-contact-actions a:hover {
    color: inherit;
  }

  .pzgl-contact-actions .pzgl-action-primary:hover {
    color: var(--white);
    background: var(--carbon);
  }

  .pzgl-contact-actions .pzgl-action-secondary:hover {
    color: var(--carbon);
    background: 0 0;
  }
}

/* The service cards lose their decorative 01-07 markers, so the heading
   no longer needs to clear one. */
.atlas-inquiries h3 {
  margin-top: 0;
}

/* ------------------------------------------------------------------
   6. Homepage map: Studio Quarter marker
   On wide screens the marker sat on top of the PZGL Studios hero panel.
   It moves down into open map, staying inside the same quarter.
   Narrow layouts already cleared the panel and are left alone.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .district-studio {
    top: 54% !important;
    left: 22% !important;
  }
}

/* Touch guidance mirrors the input method without changing the desktop cue. */
.map-instruction-copy-touch {
  display: none;
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .map-instruction .pointer-dot,
  .map-instruction-copy-desktop {
    display: none;
  }

  .map-instruction-copy-touch {
    display: inline;
  }
}