/* ─────────────────────────────────────────────────────────────
   See The House — the walkthrough film and the picture gallery.

   Loaded ONLY by see-the-house.html, on top of styles.css. The home
   page does not download a byte of this, which is the whole reason
   this is a separate page: the booking form is what index.html is
   for and nothing may slow it down.

   Every colour, font and the gold hairline come from styles.css.
   There is no new palette here on purpose.
   ───────────────────────────────────────────────────────────── */

/* ---------- the page head ---------- */

.page-head{padding:clamp(96px,13vw,150px) 0 clamp(40px,6vw,64px)}
.page-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:1.03;
  margin:0 0 24px;
}

/* ---------- the film ---------- */

.film{padding-top:0}

/* The 16:9 box is declared in CSS rather than left to the video's own
   dimensions. Without it the poster arrives, the page jumps to fit it, and
   everything below moves — the same load-jump Harold caught on the home page
   on 2026-08-20. */
.film-frame{
  position:relative;aspect-ratio:16/9;background:var(--ink);
  overflow:hidden;
}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
}
.film-note{
  margin-top:18px;font-family:var(--sans);font-size:.86rem;
  color:var(--ink-faint);
}

/* ---------- the gallery ---------- */

.gsec{padding:clamp(56px,8vw,92px) 0}
.gsec .head{margin-bottom:38px}
.gsec h2{font-family:var(--serif);font-weight:300}
.gsec .sub{
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);
  margin:14px 0 0;
}

/* A paragraph of explanation under a section subtitle. Added 2026-08-30 for
   the treatment room, which is the only section on this page where the
   photographs raise a question the pictures cannot answer by themselves.

   Deliberately NOT the .sub treatment. .sub is uppercase gold at .74rem with
   .22em of letter-spacing — a label, and unreadable at paragraph length. This
   is sentence case, ordinary weight, and measured to 66ch so the line length
   stays comfortable next to a wide gallery. */
.gsec .sec-note{
  font-family:var(--sans);font-size:.92rem;line-height:1.65;
  color:var(--ink-faint);max-width:66ch;margin:16px 0 0;
}

/* ⛔ NOTHING IN THIS GALLERY IS CROPPED TO FIT A TILE. Read this before
   putting `aspect-ratio` or `object-fit:cover` back.

   Until 2026-08-25 every tile was a fixed 16:9 box with `object-fit:cover`,
   because every picture was a slice of the 16:9 film. the client shot most of the
   house in portrait. Measured across the set, 27 of 56 tiles were throwing
   away a quarter or more of the photograph and 27 of those were losing 57-67%
   — so the treatment room and the living room opened, full screen, showing a
   horizontal band out of the middle. Harold, 2026-08-25: "on many of the
   images when you click into the image it cuts most of the image out."

   The fix is that the pictures keep their own shape and the LAYOUT bends
   instead. Columns, not a grid: a grid row forces every tile in it to one
   height, which is the thing that made cropping necessary in the first place.
   Column flow lets a portrait be tall and a panorama be short with no gaps
   and no cropping. The trade is that reading order runs down each column
   rather than across, which for two to ten pictures of one room is fine. */
.grid{
  column-count:3;
  column-gap:clamp(12px,1.6vw,20px);
}
@media (max-width:1160px){ .grid{column-count:2} }
@media (max-width:700px){  .grid{column-count:1} }

/* The establishing shot, full width above the rest. Only ever a landscape —
   build-gallery-page.py will not promote a portrait, because full width on a
   4000x6000 photograph is a slab taller than the screen. */
.grid a, .gsec > .wrap > a.lead{
  position:relative;display:block;overflow:hidden;
  background:var(--shell);text-decoration:none;
  border-radius:var(--photo-radius);
}
.grid a{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(12px,1.6vw,20px);
}

/* One picture in a grid, run full width across every column.
   Added 2026-08-27. `.grid` is a multi-column layout, so it balances items by
   HEIGHT and leaves a hole when the last row does not fill. Harold, on the
   Amara section: "I want this picture to be a little bigger and fit where I
   have it listed."
   ⚠️ A `.wide` tile must be LAST in its grid. `column-span:all` breaks the
   column flow where it sits, so anything after it restarts in fresh columns
   below and you get a hole above AND below instead of neither. */
.grid a.wide{
  column-span:all;-webkit-column-span:all;
}
.gsec > .wrap > a.lead{margin:0 0 clamp(12px,1.6vw,20px)}
.grid a::after, .gsec > .wrap > a.lead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--photo-radius);
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
}
/* height:auto, not 100%. The <img> is what gives the link its height now. */
.grid img, .gsec > .wrap > a.lead img{
  display:block;width:100%;height:auto;
  border-radius:var(--photo-radius);
}
@media (hover:hover){
  .grid img, .gsec > .wrap > a.lead img{transition:transform .55s ease}
  .grid a:hover img, .gsec > .wrap > a.lead:hover img{transform:scale(1.035)}
}
.grid a:focus-visible,
.gsec > .wrap > a.lead:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}

/* ---------- the lightbox ---------- */

/* ⚠️ Every tile is a real <a> pointing at the 1600px file. The lightbox is
   an enhancement on top: if gallery.js never runs, tapping a picture simply
   opens it. Same rule as the phone menu — a script failing must never leave
   a visitor stuck. */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(14,12,10,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  /* ⚠️ The delay belongs on the CLOSING direction only. Written as a plain
     `visibility .28s`, the flip to visible was ALSO delayed by 280ms, and an
     element that is still visibility:hidden cannot take focus — so opening
     the lightbox with the keyboard left focus behind on the page and Tab
     walked the gallery links underneath the overlay. Caught in testing. */
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.lb.is-open{
  opacity:1;visibility:visible;
  transition:opacity .28s ease, visibility 0s linear 0s;
}
/* ⚠️ The caption sits BELOW the picture, in the flow, and the picture gives up
   the height the caption needs. It used to be `position:absolute; bottom:22px`,
   which measures from the VIEWPORT and not from the picture. A portrait
   photograph takes the full `max-height`, so on a short window there was only
   7vh of dark left underneath it — and the caption reached up into the
   photograph. Harold, on `lounge-doors` at 718px tall: "the writing is in
   image", measured at 10px of overlap.

   Absolute positioning could not be tuned out of this: the gap under the
   picture shrinks with the window while the caption stays the same height, so
   any fixed offset overlaps at SOME window size. Stacking them is the fix that
   holds at every size. `.lb` becomes a column, so `align-items:center` now
   centres them horizontally and `justify-content:center` centres the pair as a
   group. The close/prev/next buttons are absolutely positioned and unaffected. */
.lb{flex-direction:column}
.lb img{
  max-width:min(1400px,92vw);
  max-height:calc(86vh - 48px);   /* 48px = the caption plus its gap */
  display:block;box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.lb .cap{
  margin:14px 0 0;text-align:center;
  max-width:min(1400px,92vw);
  font-family:var(--sans);font-size:.84rem;color:rgba(253,252,250,.72);
  padding:0 20px;
}
.lb button{
  position:absolute;border:0;background:transparent;cursor:pointer;
  color:var(--ivory);font-size:2.4rem;line-height:1;
  padding:14px 20px;opacity:.72;transition:opacity .2s ease;
}
.lb button:hover{opacity:1}
.lb .close{top:8px;right:12px;font-size:2.1rem}
.lb .prev{left:4px;top:50%;transform:translateY(-50%)}
.lb .next{right:4px;top:50%;transform:translateY(-50%)}
.lb button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;opacity:1}

@media (max-width:700px){
  .lb .prev,.lb .next{font-size:1.9rem;padding:10px 12px}
  .lb .cap{font-size:.78rem;margin-top:10px}
}

/* ---------- back to booking ---------- */

.gcta{padding:clamp(64px,9vw,110px) 0;text-align:center}
.gcta h2{font-family:var(--serif);font-weight:300;margin-bottom:26px}
.gcta .lede{max-width:52ch;margin:0 auto 34px}

/* ---------- motion off ---------- */

@media (prefers-reduced-motion:reduce){
  .grid a,.grid img,.lb{transition:none}
  .grid a:hover img{transform:none}
}

/* The gallery tiles get the same curved corners as every other photograph on
   the site (added 2026-08-25). The radius token lives in styles.css, which is
   loaded first. The ::after carries the gold hairline and needs the radius
   too, or a square line shows through the rounded corner. */
.grid a,
.grid a::after{border-radius:var(--photo-radius)}