/* ============================================================================
   Portfolio index (light page). Source: ajid-portfolio-index-mockup-v4.html
   (09-21): Dan Rak's grid. vw-based, no width breakpoints; the only switch
   is orientation (landscape 3-up on 64.26vw, portrait 2-up on 95vw).
   Tiles keep native 2:3. Ground relief-b #D8D7D4 end to end (Robb, 2026-10-29;
   was #E7E7E4).
   ========================================================================= */

body { --relief: var(--relief-b); }

.gridwrap { width: 64.26vw; margin: 0 auto; }
@media (orientation: portrait) { .gridwrap { width: 95vw; } }

/* ---- Masthead and filters --------------------------------------------------- */
.masthead { padding: clamp(104px, 13vw, 148px) 0 clamp(36px, 4.4vw, 56px); }
.masthead .display { margin: 0 0 clamp(14px, 1.6vw, 20px); }
/* SITE (audit handoff, 2026-09-28): one readable line under the H1; it takes the
   H1's old bottom margin so the filters keep their spacing. */
.masthead__lede { max-width: 52ch; margin: 0 0 clamp(28px, 3.6vw, 44px); color: var(--ink-2); }
.filters { display: flex; flex-wrap: wrap; align-items: center; }
.filters li { display: flex; align-items: center; }
.filters li + li::before {
  content: "/"; margin: 0 .9em;
  font-size: var(--size-eyebrow); color: var(--ink-2); opacity: .45;
}
.filters a {
  padding: .4em 0; border-bottom: 1px solid transparent;
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-chrome) var(--ease), border-color var(--dur-chrome) var(--ease);
}
.filters a:hover { color: var(--headline); }
.filters a[aria-current="true"] { color: var(--headline); border-color: var(--quiet); }

/* ---- Grids ------------------------------------------------------------------------ */
.work { padding: 0 0 clamp(72px, 9vw, 120px); }
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
  column-gap: 2.083vw; row-gap: 4.32vh;
}
@media (orientation: portrait) {
  .grid { grid-template-columns: repeat(2, 1fr); column-gap: 3.8vw; row-gap: 2.5vw; }
}
.grid__empty {
  padding-top: 8px;
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--quiet);
}

/* ---- Tiles ------------------------------------------------------------------------
   SITE: the caption (.tile__info) sits OUTSIDE the frame, as the frame's
   sibling. With a mouse it is laid over the photo on hover; on touch screens it
   sits below the photo. (The mockup kept it inside the overflow:hidden frame,
   so touch screens showed no caption at all.) */
.tile { position: relative; display: block; color: inherit; }
.tile[hidden] { display: none; }
a.tile:focus-visible { outline: 2px solid var(--r-link); outline-offset: 6px; }
.tile .slot { --ar: 2 / 3; background: rgba(52,58,68,.10); }
.tile__veil {
  position: absolute; inset: 0; z-index: 1;
  background: var(--blueprint); opacity: 0;
  transition: opacity var(--dur-chrome) var(--ease);
}
.tile__info {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
  opacity: 0; transition: opacity var(--dur-chrome) var(--ease);
}
.tile__name { font-family: var(--display); font-weight: 300; font-size: 23px; line-height: 1.25; color: var(--d-display); }
.tile__type {
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: color-mix(in srgb, var(--d-display) 78%, transparent);
}
@media (hover: hover) {
  .tile:hover .tile__veil { opacity: .90; }
  .tile:hover .tile__info { opacity: 1; }
  /* the photo zoom only on tiles that are links (critique S-31); every tile keeps its caption */
  .js a.tile.reveal.in:hover .slot__inner { transform: scale(1.05); }
}
a.tile:focus-visible .tile__veil { opacity: .90; }
a.tile:focus-visible .tile__info { opacity: 1; }
/* Touch screens: caption below the photo. SITE (Robb, 2026-09-24): quieter
   than the mockup's 20px/12px, sitting close to its own photo, with more room
   between rows so it can't be read as belonging to the photo below. */
@media (hover: none) {
  .tile__veil { display: none; }
  .tile__info {
    position: static; opacity: 1;
    align-items: flex-start; gap: 3px; padding: 10px 0 0; text-align: left;
  }
  .tile__name,
  .grid--soon .tile__name { font-size: 16px; color: var(--headline); }
  .tile__type { font-size: 10px; letter-spacing: .16em; color: var(--quiet); }
  .grid { row-gap: clamp(30px, 8vw, 48px); }
}

/* ---- Coming Soon ----------------------------------------------------------------- */
.soon { margin-top: clamp(56px, 7vw, 96px); }
.soon__head { margin: 0 0 clamp(24px, 3vw, 40px); }
.grid--soon .slot { --ar: 5 / 4; }
@media (orientation: landscape) { .grid--soon { grid-template-columns: repeat(4, 1fr); } }
.grid--soon .tile__name { font-size: 20px; }
.grid--soon .tile__info { gap: 8px; padding: 18px; }
.tile--static { cursor: default; }

/* ---- Lightbox (projects with too little for their own page) ---------------------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--d-deep);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-chrome) var(--ease), visibility var(--dur-chrome) var(--ease);
}
.lb.is-open { opacity: 1; visibility: visible; }
/* WordPress port fix: on opening, visibility switches at once (the fade is opacity
   alone). While visibility was still transitioning the dialog counted as hidden, so
   focus() on Close failed and the Tab trap never engaged; the static build has the
   same bug. Closing still fades visibility out with the opacity. */
.lb.is-open { transition: opacity var(--dur-chrome) var(--ease), visibility 0s; }
.lb__close {
  position: fixed; top: 20px; right: var(--gut); z-index: 210;
  padding: 1.1em 1.8em;
  background: color-mix(in srgb, var(--d-deep) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--d-ink) 34%, transparent);
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--d-ink);
  transition: border-color var(--dur-chrome) var(--ease), color var(--dur-chrome) var(--ease);
}
.lb__close:hover { border-color: var(--d-ink); color: var(--d-display); }
.lb__inner { max-width: 820px; margin: 0 auto; padding: clamp(80px, 10vw, 120px) var(--gut) var(--sec); }
.lb__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  margin-bottom: clamp(36px, 4.4vw, 56px); padding-bottom: 26px;
  border-bottom: 1px solid var(--d-hairline);
}
.lb__head .h2 { width: 100%; }
.lb__figs { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px); }
.lb__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px;
  border-top: 1px solid var(--d-hairline);
}
.lb-open { overflow: hidden; }