/* ----------------------------------------------------------
   PRACTICE PAGE
   Shares the exact fixed 12-column system and typography tokens.
----------------------------------------------------------- */
.practice-page {
  min-height: 100vh;
  background: var(--bg);
}

/* Project-page style static nav: bars/type are present immediately. */
.practice-page .practice-nav .nav-pill::before {
  animation: none;
  transform: scaleX(1);
}
.practice-page .practice-nav .nav-pill span {
  opacity: 1;
  clip-path: none;
  animation: none;
}

/* Practice is the active section: reverse the approved grey pair. */
.practice-page .practice-nav .practice-current::before {
  background: var(--nav-type);
}
.practice-page .practice-nav .practice-current {
  color: var(--nav-bar);
}
.practice-page .practice-nav .practice-current:hover,
.practice-page .practice-nav .practice-current:focus-visible {
  color: var(--nav-bar);
}

.practice-main {
  padding-top: clamp(12px, 1vw, 18px);
}

.practice-intro,
.practice-grid {
  margin-left: var(--grid-margin);
  margin-right: var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.practice-intro {
  min-height: 91vh;
  align-items: start;
}

.practice-intro-copy {
  grid-column: 1 / span 9;
  font-family: "Univers Black", Arial Black, Arial, sans-serif;
  font-size: clamp(38px, 3.82vw, 74px);
  line-height: .94;
  letter-spacing: -0.044em;
  color: #4d4b47;
  font-weight: 900;
  padding-right: calc(var(--grid-gutter) * 2);
}
.practice-intro-copy p { margin: 0; }
.practice-intro-copy p + p { margin-top: 1.08em; }

/*
  Flat 12-column mosaic. Every practice image is one column wide; each project
  is followed by one intentionally empty column, so project boundaries read as
  blank vertical gaps. Auto-placement means groups naturally wrap into the next
  line, producing arrangements like 2 images above + 1 below when space runs out.
*/
.practice-grid {
  grid-auto-flow: row;
  grid-auto-rows: auto;
  row-gap: var(--grid-gutter);
  align-items: start;
  padding-bottom: 18vh;
}

.practice-tile,
.practice-project-gap {
  grid-column: span 1;
  min-width: 0;
}

.practice-project-gap {
  min-height: 1px;
  pointer-events: none;
}

.practice-tile {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transform: translateY(13px);
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.practice-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.practice-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  filter: none;
  opacity: 1;
  transition:
    filter .38s var(--ease),
    opacity .38s var(--ease),
    transform .48s var(--ease);
}

/* Hovering any image shifts every image in that project into the inverted monochrome state. */
.practice-tile.is-project-hovered .practice-media {
  filter: grayscale(1) invert(1) contrast(1.04);
  opacity: var(--image-muted-opacity);
}
.practice-tile.is-hovered .practice-media {
  transform: scale(1.012);
}
.practice-tile:focus-visible { outline: none; }

/* ----------------------------------------------------------
   LOCKED PRACTICE MEDIA VIEW
   Image: columns 3–8. Caption: columns 9–10. Controls: columns 2 / 11.
----------------------------------------------------------- */
.practice-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
}
.practice-lightbox.is-open {
  visibility: visible;
  pointer-events: auto;
}
.practice-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
.practice-lightbox-grid {
  position: absolute;
  inset: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr;
  column-gap: var(--grid-gutter);
  align-items: center;
  pointer-events: none;
}
.practice-lightbox-media-wrap {
  grid-column: 3 / span 6;
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 94vh;
}
.practice-lightbox-media-wrap img,
.practice-lightbox-media-wrap video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 94vh;
  object-fit: contain;
  filter: none;
  opacity: 1;
  animation: practiceFullMediaIn .3s var(--ease) both;
}
@keyframes practiceFullMediaIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.practice-lightbox-back,
.practice-lightbox-next,
.practice-lightbox-caption {
  grid-row: 1;
  align-self: start;
  margin-top: calc(var(--nav-top) + var(--nav-height) + 27px);
  z-index: 3;
  min-width: 0;
  font-family: "Univers Black", Arial Black, Arial, sans-serif;
  font-size: clamp(8px, .64vw, 12px);
  line-height: .93;
  letter-spacing: -0.04em;
  color: #4d4b47;
  pointer-events: auto;
  white-space: pre-line;
}
.practice-lightbox-back,
.practice-lightbox-next {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.practice-lightbox-back { grid-column: 2; }
.practice-lightbox-caption { grid-column: 9 / span 2; width: 100%; }
.practice-lightbox-next { grid-column: 11; }

body.is-practice-media-view .practice-main {
  opacity: .1;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}
body.is-practice-media-view .practice-intro-copy { opacity: 0; }
body.is-practice-media-view .practice-nav { z-index: 110; }
body.is-practice-media-view .practice-lightbox { z-index: 100; }

/* Keep the Selected Work project index available here too. */
.practice-page .project-menu-item { text-decoration: none; }

@media (max-width: 900px) {
  .practice-intro,
  .practice-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .practice-intro-copy {
    grid-column: 1 / span 5;
    font-size: clamp(34px, 6.5vw, 60px);
  }
  .practice-lightbox-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .practice-lightbox-media-wrap { grid-column: 2 / span 4; }
  .practice-lightbox-back { grid-column: 1; }
  .practice-lightbox-caption { grid-column: 5 / span 1; }
  .practice-lightbox-next { grid-column: 6; }
}

@media (max-width: 560px) {
  .practice-intro {
    min-height: 78vh;
  }
  .practice-intro-copy {
    grid-column: 1 / -1;
    font-size: clamp(30px, 10vw, 48px);
  }
  .practice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .practice-lightbox-grid { display: block; inset: 0 12px; }
  .practice-lightbox-media-wrap {
    position: absolute; left: 15%; right: 15%; top: 50%; transform: translateY(-50%);
  }
  .practice-lightbox-back { position: absolute; left: 0; top: 50%; }
  .practice-lightbox-caption { position: absolute; right: 15%; top: 50%; width: 28%; }
  .practice-lightbox-next { position: absolute; right: 0; top: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-tile,
  .practice-lightbox-media-wrap { transition: none; }
  .practice-tile { opacity: 1; transform: none; }
}

/* ==========================================================
   PRACTICE — MOBILE EDITORIAL TRANSLATION
========================================================== */
@media (max-width: 700px) {
  .practice-main { padding-top: 10px; }
  .practice-intro,
  .practice-grid {
    margin: 0 var(--grid-margin);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }
  .practice-intro { min-height: 82svh; }
  .practice-intro-copy {
    grid-column: 1 / -1;
    padding-right: 0;
    font-size: clamp(34px, 9.7vw, 54px);
    line-height: .93;
    letter-spacing: -0.052em;
  }
  .practice-grid {
    row-gap: 2px;
    padding-bottom: 16svh;
  }
  .practice-tile,
  .practice-project-gap { grid-column: span 2; }
  .practice-project-gap { min-height: 9svh; }
  .practice-media { aspect-ratio: auto; }

  .practice-tile:hover .practice-media,
  .practice-tile.is-project-hovered .practice-media {
    filter: none;
    opacity: 1;
    transform: none;
  }
  .practice-tile.is-mobile-scroll-active-group .practice-media {
    filter: grayscale(1) invert(1) contrast(1.04);
    opacity: .36;
  }
  .practice-tile.is-mobile-scroll-active .practice-media { transform: scale(1.006); }

  .practice-lightbox-grid {
    inset: 0 var(--grid-margin);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--grid-gutter);
    row-gap: 8px;
    align-content: center;
    align-items: start;
  }
  .practice-lightbox-media-wrap {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    left: auto; right: auto; top: auto;
    transform: none;
    width: 100%;
    max-height: 70svh;
  }
  .practice-lightbox-media-wrap img,
  .practice-lightbox-media-wrap video {
    width: 100%;
    max-height: 70svh;
    object-fit: contain;
  }
  .practice-lightbox-back,
  .practice-lightbox-next,
  .practice-lightbox-caption {
    position: static;
    grid-row: 2;
    margin: 0;
    padding-top: 0;
    font-size: 9px;
    line-height: 1.05;
    align-self: start;
  }
  .practice-lightbox-back { grid-column: 1; }
  .practice-lightbox-caption { grid-column: 2 / span 2; width: 100%; }
  .practice-lightbox-next { grid-column: 4; text-align: left; }
}

/* v28 mobile: project inversion follows scroll centre, never hover/tap. */
@media (max-width: 700px) {
  .practice-media {
    transition: filter .72s cubic-bezier(.16,1,.3,1), opacity .72s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1);
  }
  .practice-tile:hover .practice-media,
  .practice-tile:focus-within .practice-media,
  .practice-tile:active .practice-media,
  .practice-tile.is-project-hovered .practice-media {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .practice-tile.is-mobile-scroll-active-group .practice-media {
    filter: grayscale(1) invert(1) contrast(1.035) !important;
    opacity: .42 !important;
  }
  .practice-tile.is-mobile-scroll-active .practice-media {
    transform: scale(1.003) !important;
  }
}

/* ==========================================================
   FINAL PRACTICE MOBILE LAYOUT — 2026-09-30
========================================================== */
@media (max-width: 700px) {
  .practice-main { padding-top: 82px !important; }
  .practice-intro,
  .practice-grid {
    margin: 0 var(--grid-margin) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: var(--grid-gutter) !important;
  }
  .practice-intro {
    min-height: 0 !important;
    padding-bottom: 160px !important;
  }
  .practice-intro-copy {
    grid-column: 1 / -1 !important;
    padding: 0 !important;
    font-family: "Univers Black", Arial Black, Arial, sans-serif !important;
    font-size: clamp(34px, 9.65vw, 52px) !important;
    line-height: .94 !important;
    letter-spacing: -0.048em !important;
    color: #4d4b47 !important;
  }
  .practice-intro-copy p + p { margin-top: .9em; }
  .practice-grid {
    row-gap: 32px !important;
    padding-bottom: 16svh !important;
  }
  .practice-tile,
  .practice-project-gap {
    grid-column: span 2 !important;
  }
  .practice-project-gap {
    min-height: 42px !important;
  }
  .practice-media { width: 100%; height: auto; aspect-ratio: auto !important; }

  /* Existing project-group inversion interaction remains intact. */
  .practice-tile.is-mobile-scroll-active-group .practice-media {
    filter: grayscale(1) invert(1) contrast(1.035) !important;
    opacity: .42 !important;
  }

  .practice-lightbox-grid {
    inset: 0 var(--grid-margin) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: var(--grid-gutter) !important;
    row-gap: 7px !important;
    align-content: center !important;
  }
  .practice-lightbox-media-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-height: 72svh !important;
  }
  .practice-lightbox-back,
  .practice-lightbox-caption,
  .practice-lightbox-next {
    grid-row: 2 !important;
    position: static !important;
    font-family: "Univers Black", Arial Black, Arial, sans-serif !important;
    font-size: 9.2px !important;
    line-height: 1.04 !important;
    color: #4d4b47 !important;
  }
  .practice-lightbox-back { grid-column: 1 !important; }
  .practice-lightbox-caption { grid-column: 2 / span 2 !important; width: 100% !important; }
  .practice-lightbox-next { grid-column: 4 !important; text-align: right !important; }
}

/* MOBILE FEEDBACK: all practice projects are muted by default; the project
   currently occupying the central viewing zone returns to full colour. */
@media (max-width: 700px) {
  .practice-tile .practice-media,
  .practice-tile:hover .practice-media,
  .practice-tile:focus-within .practice-media,
  .practice-tile:active .practice-media,
  .practice-tile.is-project-hovered .practice-media {
    filter: grayscale(1) invert(1) contrast(1.035) !important;
    opacity: .42 !important;
    transform: none !important;
  }
  .practice-tile.is-mobile-scroll-active-group .practice-media,
  .practice-tile.is-mobile-scroll-active-group:hover .practice-media,
  .practice-tile.is-mobile-scroll-active-group:focus-within .practice-media,
  .practice-tile.is-mobile-scroll-active-group:active .practice-media {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .practice-tile.is-mobile-scroll-active .practice-media {
    transform: scale(1.003) !important;
  }
}