/* ===========================================================================
   Project pages — the file on one building.
   Masthead over the building itself, then the specification, then three
   galleries of photographs and one of drawings, with a hairline section bar
   pinned to the floor of the window throughout.
   =========================================================================== */

/* --- Masthead ------------------------------------------------------------- */

.pmast {
  position: relative;
  min-height: calc(100svh - var(--hdr));
  overflow: hidden;
  margin: 0 var(--frame) var(--frame);
}

.pmast__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pmast__wash {
  position: relative;
  z-index: 10;
  min-height: calc(100svh - var(--hdr));
  padding: clamp(2rem, 5vh, 4rem) var(--gut) clamp(5rem, 12vh, 9rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-band);
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.72) 0%,
    rgba(10, 10, 10, 0.34) 40%,
    rgba(10, 10, 10, 0.9) 100%
  );
}

.pmast__back {
  align-self: flex-start;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-key);
  transition: color var(--t) var(--ease);
}

.pmast__back:hover { color: var(--paper); }

.pmast__foot {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: flex-start;
}

.pmast__title {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 900;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}

.pmast__line {
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}

.pmast__spec {
  width: 100%;
  margin-block-start: var(--sp-tight);
  padding-block-start: var(--sp-step);
  border-block-start: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step) clamp(2rem, 5vw, 5.5rem);
}

.pmast__spec div { display: flex; flex-direction: column; gap: 0.2em; }
.pmast__spec dt { color: var(--muted); font-weight: 500; font-size: var(--fs-key); }
.pmast__spec dd { margin: 0; font-weight: 400; font-size: var(--fs-key); }

/* --- The section bar -----------------------------------------------------
   The hairline nav that runs under every panel of a project file, pinned to
   the floor of the window because this page scrolls rather than pans.

   Fixed rather than sticky: sticky would need the bar to sit early in the
   document, where it would take a strip of layout off the top of the
   masthead.                                                                */
.pbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  padding-inline: var(--gut);
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--hair-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-step);
  overflow-x: auto;
  scrollbar-width: none;
}

.pbar::-webkit-scrollbar { display: none; }

.pbar__link {
  position: relative;
  flex: none;
  padding-block: clamp(0.85rem, 1.6vw, 1.25rem);
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}

.pbar__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 100%;
  inset-inline-end: 0;
  height: 2px;
  background: var(--brand);
  transition: inset-inline-start var(--t) var(--ease);
}

.pbar__link:hover { color: var(--paper); }
.pbar__link[aria-current='true'] { color: var(--paper); }
.pbar__link[aria-current='true']::after,
.pbar__link:hover::after { inset-inline-start: 0; }

/* The bar is fixed, so the page owes it a floor. */
.has-pbar { padding-block-end: clamp(48px, 6vw, 64px); }

@media (max-width: 859px) {
  .pbar { display: none; }
  .has-pbar { padding-block-end: 0; }
}

/* --- The specification ---------------------------------------------------
   One schema, on every project page: the same rows in the same order, so a
   visitor comparing two buildings is comparing two of the same thing. It is
   a description list in two columns — term against value, a hairline
   between rows — which is the plainest thing a set of figures can be.    */

.pspec {
  padding: clamp(3rem, 7vw, 6rem) var(--gut);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pspec__head {
  padding-block-end: var(--sp-step);
  border-block-end: 1px solid var(--hair-soft);
}

.pspec__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 clamp(2rem, 5vw, 5rem);
  margin: 0;
}

.pspec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 1.5em;
  padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
  border-block-end: 1px solid var(--hair-soft);
}

.pspec__row dt {
  flex: none;
  width: 9rem;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-key);
}

.pspec__row dd {
  flex: 1 1 12rem;
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-key);
  line-height: 1.7;
}

/* --- The tour ------------------------------------------------------------
   One button in the masthead, on the projects that have a walkthrough. It
   shares a band with the project's one-line description rather than sitting
   under the figures: the sentence keeps the leading edge and the button
   takes the far end, so the empty half of that line becomes the thing the
   eye lands on instead of dead space.

   Below the wrap point the button drops to its own row and returns to the
   leading edge with everything else.                                      */

.pmast__say {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 4vw, 4rem);
}

.pmast__tour { flex: none; }

.btn__icon { width: 1.2em; height: 1.2em; flex: none; }

/* The walkthrough glyph is drawn on a 16-unit grid at a 1-unit stroke, so
   it wants a little more size than the arrow glyphs to keep that stroke at
   a hairline rather than a thread. */
.btn__icon--tour { width: 1.45em; height: 1.45em; }

/* --- Galleries ------------------------------------------------------------ */

.gallery {
  padding: clamp(3rem, 8vw, 7rem) var(--gut);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-step);
  padding-block-end: var(--sp-step);
  border-block-end: 1px solid var(--hair-soft);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(8px, 1vw, 16px);
}

/* Two out of every five shots run double width, so the grid breathes without
   any one image being singled out as important. */
.shot:nth-child(5n + 1),
.shot:nth-child(5n + 4) { grid-column: span 2; }

.shot { margin: 0; display: flex; flex-direction: column; gap: 0.6em; }

.shot__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.shot__open img {
  width: 100%;
  height: clamp(220px, 34svh, 420px);
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.03);
  transition: filter 620ms var(--ease), transform 900ms var(--ease);
}

.shot__open:hover img { filter: none; transform: scale(1.04); }

.shot__cap { color: var(--muted); font-weight: 500; font-size: var(--fs-key); }

/* --- The sheet -----------------------------------------------------------
   A drawing is not a photograph and is not treated like one. It keeps the
   proportion it was drawn at — `contain`, never `cover`, because a plan
   cropped to fill a box is a plan with rooms missing — and it is laid on
   white with a margin round it.

   The white is load-bearing, not decoration: these PNGs are black line on
   transparency, so with nothing behind them they would be black line on a
   black page. It is also what replaces the inversion the plate used to
   apply, and it is what the drawings actually look like on paper.        */

/* Two to a row rather than three: the drawings are the one thing on this
   page that is read rather than looked at. */
.gallery--plans .gallery__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

.sheet {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  /* Every sheet is the same width — a plan is never singled out. */
  grid-column: span 1;
}

.sheet__open {
  display: block;
  width: 100%;
  padding: clamp(0.65rem, 1.4vw, 1.25rem);
  border: 0;
  background: #FFFFFF;
  cursor: zoom-in;
  overflow: hidden;
}

.sheet__open img {
  display: block;
  width: 100%;
  /* Taller than a photograph gets. A floor plan is hairline ink: below
     roughly 400px of height the walls stop resolving and the sheet reads as
     an empty rectangle, which is worse than not showing it. */
  height: clamp(320px, 52svh, 600px);
  object-fit: contain;
  transition: transform 800ms var(--ease);
}

.sheet__open:hover img { transform: scale(1.04); }

/* In the viewer the field stays dark — the chrome has to stay legible — so
   the sheet brings its own paper with it. */
.lb--sheet .lb__img {
  background: #FFFFFF;
  padding: clamp(0.5rem, 1.6vw, 1.25rem);
}

/* --- The viewer ----------------------------------------------------------- */

/* A native <dialog>: the focus trap, Escape, and the return of focus are the
   platform's job, and nothing here reimplements them. */
.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.lb[open] { display: flex; flex-direction: column; }

.lb::backdrop { background: rgba(6, 6, 6, 0.92); }

.lb__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 8vh, 6rem) clamp(3.5rem, 8vw, 7rem);
}

.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lb__btn {
  position: absolute;
  background: none;
  border: 0;
  padding: 12px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.7;
  transition: opacity var(--t) var(--ease);
}

.lb__btn:hover { opacity: 1; }
.lb__btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.lb__close { inset-block-start: clamp(12px, 2vh, 24px); inset-inline-end: clamp(12px, 2vw, 28px); }
.lb__prev  { inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: clamp(4px, 1.2vw, 20px); }
.lb__next  { inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: clamp(4px, 1.2vw, 20px); }

.lb__cap {
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 3vh, 2rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-step);
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-key);
}

.lb__count { direction: ltr; unicode-bidi: isolate; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 859px) {
  .shot:nth-child(5n + 1),
  .shot:nth-child(5n + 4) { grid-column: span 1; }
}

/* --- A building that is not finished -------------------------------------
   Its masthead carries a render, or — when not even that exists — the same
   mounted sheet the projects wall gives it. Either way the page says which
   it is: the tag at the top, the note under the figures.                  */

.pmast__tag { align-self: flex-start; margin-block-end: var(--sp-tight); }

.pmast__note { margin: var(--sp-tight) 0 0; }

.pmast__sheet {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px, var(--hair-soft) 11px 12px);
}

.pspec__say { width: min(100%, 62ch); margin-block-start: var(--sp-tight); }

/* A figure the company's own project record cannot answer yet. Said out
   loud under the list rather than filled with another building's number. */
.pspec__pending {
  margin: var(--sp-step) 0 0;
  padding-inline-start: 0.9em;
  border-inline-start: 2px solid var(--hair);
}


/* ===== Client revision 2026-10: brighter mastheads and interactive rows ===== */
.pmast__wash {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.62) 0%,
    rgba(10, 10, 10, 0.26) 40%,
    rgba(10, 10, 10, 0.82) 100%
  );
}
.pmast__line { max-width: 72ch; }

/* Every photo row rests at equal widths; only the hovered photograph grows. */
.gallery__grid--rows {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 16px);
}
.gallery__row {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  width: 100%;
}
.gallery__row > .shot {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 520ms var(--ease-hover);
}
@media (hover: hover) {
  .gallery__row:has(.shot:hover) > .shot { flex-grow: .72; }
  .gallery__row:has(.shot:hover) > .shot:hover { flex-grow: 1.56; }
}
.gallery__row .shot__open img {
  width: 100%;
  height: clamp(220px, 34svh, 420px);
}

/* Roshana plans/renders: uniform square previews; viewer still opens originals. */
.gallery--square-plans .gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery--square-plans .sheet__open,
.gallery--square-plans .shot__open { aspect-ratio: 1 / 1; }
.gallery--square-plans .sheet__open img,
.gallery--square-plans .shot__open img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.gallery--square-plans .shot__open { background: #fff; padding: clamp(.65rem, 1.4vw, 1.25rem); }
.gallery--square-plans .shot__open img { filter: none; }

@media (max-width: 859px) {
  .gallery__row { flex-direction: column; }
  .gallery__row > .shot { width: 100%; }
  .gallery--square-plans .gallery__grid { grid-template-columns: 1fr; }
}
.gallery--square-plans .shot { grid-column: span 1 !important; }
@media (min-width: 1100px) {
  .pmast__line { max-width: none; white-space: nowrap; }
}