/* office.html page styles. Owned by wave B (interiors-plan.md); loaded after
   tokens.css, site.css and interior.css on office.html only. Shared selectors
   (chrome, .sheet, .canvas-wrap, .int-*, .contact) are wave A's: never restyle
   them here; file a request to the main session instead.
   Spec: v2-specs/interiors-spec-office.md */

/* ---- sheet 1: mahwah-int/02 strict article (photo, deck, prose) ---- */
.of-wide { margin: 0; }
.of-wide img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover;        /* 2:1 of the full well (1128x564 at 1440) */
}
.of-deck {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27.4px; line-height: 30.2px; letter-spacing: -0.99px;
  color: var(--teal);                            /* the recipe's pale-hue deck slot */
}

/* ---- sheet 2: humphries-int/06 procedure rows ---- */
.of-rows { list-style: none; margin: 0 auto; padding: 0; max-width: 1060px; }
.of-row {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 520px);
  column-gap: 20px; justify-content: center; align-items: start;
  padding: 45px 0;
}
.of-row:first-child { padding-top: 24px; }
/* heading and exit ride the same 1060 paper column as the rows (humphries column) */
.of-tech > .int-h2, .of-exit { max-width: 1060px; margin-left: auto; margin-right: auto; }
.of-row + .of-row { border-top: 1px solid var(--grey-structural); }
.of-photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: var(--shadow-card); border-radius: 0;
}
.of-term {
  font-family: var(--font-display); font-weight: 400;
  font-size: 25px; line-height: 1.2; letter-spacing: 0.5px;
  color: var(--teal-deep); margin: 0;
}
.of-text .of-term { margin-top: 15px; }
.of-text p { font-size: 18px; line-height: 25.2px; color: var(--body-ink); margin: 20px 0 0; }
.of-row--text .of-text p { margin-top: 0; }
.of-text a { color: var(--teal); text-decoration: underline; display: inline-block; padding: 10px 0; margin: -10px 0; }

/* exit: mahwah-int/02 intrinsic button, bottom-left */
.of-exit { display: flex; justify-content: flex-start; }

/* ---- tablet: rows stack photo-first (humphries <=1119 mechanism, house tier 900) ---- */
@media (max-width: 900px) {
  .of-row { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .of-row:first-child { padding-top: 8px; }
  .of-row--text .of-text p { margin-top: 12px; }
  .of-text .of-term { margin-top: 20px; }
}

/* ---- phone ---- */
@media (max-width: 600px) {
  .of-wide { margin: 0 -12px; }                  /* bleeds to the sheet edges (A4.6 device) */
  .of-deck { font-size: 24px; line-height: 1.25; }
  .of-row { padding: 28px 0; }
  .of-row:first-child { padding-top: 8px; }
  .of-term { font-size: 22px; }
  .of-exit .pill { width: 100%; }                /* mahwah-mobile/05: full-width block */
}

/* ==== OWNER RULING (2026-09-25): interactive map high on the page ====
   A canvas-level strip between the two sheets, on the sheet's own geometry
   (1200 / 94%, same 3% canvas reveal above and below), height = site.css
   .map-strip recipe (400 desktop, 280 phone). The strip breaks the
   `.sheet + .sheet` adjacency, so the reveal under it is re-authored. */
.of-map {
  width: 1200px; max-width: 94%; height: 400px; margin: 3% auto 0;
  border-radius: var(--radius-sheet); overflow: hidden; box-shadow: var(--shadow-sheet);
  background: var(--teal-mist);                  /* holds the box while Google paints */
}
.of-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.of-map + .sheet { margin-top: 3%; }
@media (max-width: 900px) {
  .of-map { margin-top: 28px; }
  .of-map + .sheet { margin-top: 28px; }
}
@media (max-width: 600px) {
  /* full-bleed on the phone, like the band's map strip */
  .of-map { width: 100%; max-width: none; height: 280px; margin-top: 16px; border-radius: 0; box-shadow: none; }
  .of-map + .sheet { margin-top: 16px; }
}