/* Variant B, loaded after landing.css. Every tile is an exhibit: the picture sits in an inner frame at the top of
   the card and the words sit below it on the same charcoal surface, so a warm photograph, a pale model and a dark
   campaign shot read as one series. Subgrid keeps the three frames the same height and the captions aligned. */

.tiles { grid-template-rows: 1fr auto; row-gap: 0; }
.tile { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 10px;
  background: var(--ink); border: 1px solid var(--line); transition: transform .7s var(--ease-soft), border-color .4s ease; }
.tiles .tile::before { display: none; }
.tile:hover, .tile:focus-visible { border-color: rgba(250, 250, 247, .3); }

.frame { position: relative; min-height: 0; overflow: hidden; border-radius: 14px; isolation: isolate; background: #030403; }
.tiles .frame img, .tiles .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: none; transform-origin: 50% 50%; filter: none; transition: transform 1.4s var(--ease-soft); }
.tiles .tile:hover .frame img, .tiles .tile:focus-visible .frame img,
.tiles .tile:hover .frame video, .tiles .tile:focus-visible .frame video { transform: scale(1.04); filter: none; }

/* Framing per picture: the sconces and sofa; the whole model, centred; the rocket from nose to laptop. */
#walk .frame img { object-position: 50% 59%; }
#plan .frame { background: #e8e5df; }
#plan .frame img { object-position: 50% 7%; }
#studio .frame img { object-fit: contain; transform-origin: 50% 30%; transform: scale(1.25); }
.tiles #studio:hover .frame img, .tiles #studio:focus-visible .frame img { transform: scale(1.3); }

/* The caption: one quiet label, the title, a line of text, then the action on a hairline. */
.tiles .tile-body { position: static; display: flex; flex-direction: column; gap: 10px; padding: 22px 16px 8px; }
.tiles .tag { position: static; color: var(--chalk-3); font-size: 10.5px; }
.tiles .tile-title { font-size: clamp(32px, 2.6vw, 44px); }
.tiles .signature { font-size: clamp(30px, 2.4vw, 40px); }
.tiles .tile-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.tiles .round { width: 40px; height: 40px; }

/* The page closes with the same hairline that opens it. */
.colophon { margin-top: clamp(14px, 2.2vh, 24px); border-top: 1px solid var(--line); }
/* The studio's name in the footer links to lertigo.com: brighter than the rest of the line and underlined, gold on
   hover and focus like the header links. The padding only enlarges the touch target. Local change, not in Damian's package. */
.colophon a { padding: 12px 0; color: var(--chalk-2); text-decoration-line: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 250, 247, .3); text-underline-offset: 3px; transition: color .25s ease, text-decoration-color .25s ease; }
.colophon a:hover, .colophon a:focus-visible { color: var(--chalk); text-decoration-color: var(--truss); outline: none; }

/* Portrait screens (rotated monitor, tablet upright): stretched to the full height, the frames became thin strips.
   Here the frames keep the 4:5 of the pictures, and the title with the cards sits a touch above the middle of the
   space between the header and the footer. Local change, not in Damian's package. */
@media (min-width: 861px) and (max-aspect-ratio: 1/1) {
  .page { grid-template-rows: auto .8fr auto auto 1fr auto; }
  .intro { grid-row: 3; }
  .tiles { grid-row: 4; grid-template-rows: auto auto; }
  .colophon { grid-row: 6; }
  .frame { aspect-ratio: 4 / 5; }
}

/* Phones: one card after another, each picture in a 4:3 frame. */
@media (max-width: 860px) {
  .tiles { grid-template-rows: none; row-gap: clamp(12px, 1.2vw, 20px); }
  .tile { grid-row: auto; display: flex; flex-direction: column; min-height: 0; }
  .frame { flex: none; aspect-ratio: 4 / 3; }
}