/* ==========================================================================
   /fullgallery/ — Huge IT Gallery grid

   The plugin's own stylesheets were never archived, but the grid geometry
   survives in the page's own inline <style> block and is transcribed here
   verbatim (see style-notes.md §5, and reference/inline-css/
   fullgallery__index.inline.css lines ~659-790).

   These values are the reason the page can be finished the moment the
   photographs arrive: the container, tiles, hover overlay and caption styling
   are all known. Only the lightbox and paginator JavaScript are lost.

   NOTE: this block uses #333333 as a surface and #8F827C as an accent. Neither
   belongs to the site palette — they are the gallery plugin's, and they are
   reproduced because they are what rendered.

   Two stylesheets fight over these tiles: the page's own inline block (keyed to
   li/.overLayer/.infoLayer) and the plugin's .view/.mask set. Only the second
   one ever matched the markup. Where they disagree, the .view rules are the
   ones transcribed here.
   ========================================================================== */

.gallery-img-content { display: block; }

/* The dark #333333 panel and the near-black 'box-shadow: 0 0 10px' halo around it
   were both removed at Christi's request, August 2026 — she read the panel as a grey
   box sitting behind the photographs. The grid now sits directly on the page, edge to
   edge with the rest of the content, on desktop and mobile alike.

   That colour was the Huge IT plugin's, not the site's, and it was reproduced only
   because it is what the original rendered. It is a deliberate departure now.
   See build-plan.md #39. */
#huge_it_gallery3 {
  margin: 0 0 30px;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
  background-color: transparent;
}

/* --- tiles: restored automatically once the photographs are dropped in ---- */
#huge_it_gallery3 .huge_it_big_li {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  max-width: 242px;
  height: 152px;
  margin: 1px -1px;
  padding: 0;
  border: 1px solid #444444;
  border-radius: 5px;
  box-sizing: border-box;
}
/* The tile's own <a> and <img>. The page's inline block also carries
   '#huge_it_gallery3 li img' and 'li a' rules, plus a whole '.overLayer' /
   '.infoLayer' hover treatment (#CCCCCC at 0.801) — none of which ever applied:
   the markup wraps each photograph in a DIV.huge_it_big_li, not an LI, and no
   element on the page has ever carried overLayer or infoLayer. An earlier
   version of this file transcribed those dead rules and got the whole hover
   behaviour wrong. What actually rendered is the plugin's .view / .mask set. */
#huge_it_gallery3 .huge_it_big_li img {
  display: block;
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  margin: 0 auto;              /* portrait photographs centre in the 240px tile */
  transition: all 0.2s linear;
}

.view { position: relative; overflow: hidden; text-align: center; color: #fff; cursor: default; float: none; }
/* The plugin resets the font inside every tile with !important. It is ugly and it is
   what rendered — every element in a tile except an <i> is on the browser's default
   sans, not the theme's Open Sans. */
.view *:not(i) { font-family: sans-serif, Arial, Verdana, Sylfaen !important; }
.view-first .text-category,
.view-first .mask-text h2,
.view-first .mask-text p { color: #fff; }
.view-wrapper { height: 100%; }

/* The hover overlay: black at 70%, faded in over 0.4s. */
.view .mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 0.4s ease-in-out;
}
.view-first:hover .mask { opacity: 1; }
/* The overlay's own background layer, which fills the tile behind the caption. */
.view .mask-bg { height: 100%; }

/* The caption drops in from above; the description rises from below. */
.view h2 {
  position: relative;
  margin: 20px 0 0;
  padding: 10px;
  font-family: Raleway, serif;
  font-size: 17px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.view .mask-text h2 { font-size: 20px !important; margin-top: 20px !important; }
.view p {
  position: relative;
  padding: 0 20px;
  font-family: Merriweather, serif;
  font-style: italic;
  font-size: 14px;
  color: #fff;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}
.view-first:hover h2,
.view-first:hover p { opacity: 1; transform: translateY(0); }
.view-first:hover p { transition-delay: 0.1s; }

/* --------------------------------------------------------------- tabs ----
   Client-requested (build-plan.md #13). Not from the archive: the original was one
   undifferentiated grid of 430. The type is the site's own nav idiom — Raleway, 13px,
   600, uppercase — so the tabs read as part of this site rather than as a widget.   */
/* The site header is sticky and 182px tall at every width. The tab bar no longer
   cares, but a deep link still has to scroll the grid clear of it — see
   scroll-margin-top at the foot of this file. If the header changes height, this
   is the line to change. */
:root { --gallery-header-h: 182px; }

/* NOT sticky. It was, briefly, as my answer to "make the tabs easy to locate" —
   first at every width, then desktop-only after Christi reported it parked across
   the middle of a phone screen. She reported the same thing again on desktop, so
   the idea is gone rather than narrowed further: the site header is itself sticky
   and 182px tall, and a second bar pinned under it reads as stuck, not as helpful,
   at any width.

   The tabs are found by being loud instead — filled pills, a ruled bar, counts.
   Nobody asked for sticky; it was mine. See build-plan.md #49. */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  /* Pulled out to the panel's edges so the bar spans it rather than floating in it. */
  margin: 0 0 24px;
  padding: 14px 8px;
  background: var(--surface);
  /* No shadow and no box: with the dark panel gone, a raised bar just reintroduces
     the framed look Christi asked to remove. A single hairline under the row is
     enough to separate the tabs from the photographs, and the opaque background
     still does its job when the bar is stuck to the header on desktop. */
  border-bottom: 1px solid var(--rule);
}
.gallery-tab {
  position: relative;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #6f6f6f;
  cursor: pointer;
  transition: color 0.2s ease-out, border-color 0.2s ease-out, background 0.2s ease-out;
}
.gallery-tab:hover { color: var(--heading); border-color: var(--rule); background: var(--surface-alt); }
/* The selected tab is filled, not underlined. An underline on a dark bar is easy to
   miss; a filled pill is not, which is the whole point of the change. */
.gallery-tab[aria-selected="true"] {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
}
.gallery-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The count is what turns the tabs from labels into a map of what is in here. */
.gallery-tab__count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: #8c8c8c;
}
.gallery-tab[aria-selected="true"] .gallery-tab__count { color: rgba(255,255,255,0.85); }

@media (max-width: 767px) {
  .gallery-tabs { margin: 0 0 18px; gap: 6px; padding: 10px 4px; }
  .gallery-tab { font-size: 11.5px; letter-spacing: 0.4px; padding: 8px 12px; }
}

.gallery-panel { margin: 0; padding: 0; list-style: none; }
.gallery-panel[hidden] { display: none; }
html:not(.js) .gallery-panel[hidden] { display: block; }
html:not(.js) .gallery-tabs { display: none; }

/* ---------------------------------------------------------------- grid ----
   A uniform 4:3 grid rather than a masonry of mixed portrait and landscape. With
   230 photographs of rooms, even rows are far quicker to scan; the lightbox shows
   each one uncropped. auto-fill means the column count follows the width instead of
   being declared per breakpoint.                                                  */
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-tile { margin: 0; }
.g-tile[data-extra] { display: none; }
.g-grid.is-expanded .g-tile[data-extra] { display: block; }

.g-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}
.g-link:hover,
.g-link:focus-visible {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
}
/* A hairline that only shows on hover: enough to say "this one", not enough to
   draw a box around every photograph on the page. */
.g-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.25s ease-out;
  pointer-events: none;
}
.g-link:hover::after,
.g-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--accent); }
.g-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease-out, opacity 0.2s linear;
}
.g-link:hover img,
.g-link:focus-visible img { transform: scale(1.06); }
.g-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 767px) {
  .g-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-link, .g-link img, .g-link::after { transition: none; }
  .g-link:hover, .g-link:focus-visible { transform: none; }
  .g-link:hover img, .g-link:focus-visible img { transform: none; }
}

/* "Show all" — 230 photographs is a lot of scrolling and a lot of requests if every
   tab renders in full. Twelve per tab up front, the rest on request. */
.g-more { margin-top: 18px; text-align: center; }
.g-more__btn {
  padding: 9px 22px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: none;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--heading);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.g-more__btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(70,183,191,0.10); }
.g-more__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-more.is-done { display: none; }

/* ------------------------------------------------------------ lightbox ----
   The original opened photographs in a Huge IT lightbox whose script was never
   archived. This is a replacement, not a reconstruction: no library, keyboard
   driven, and it returns focus to the tile you opened it from.                    */
/* The arrows used to be pinned to the viewport edges, which on a wide screen left
   them a long way from a portrait photograph — you had to travel to the edge of the
   screen to reach "next". Christi asked for them closer and clearer, August 2026.

   The dialog is a flex row now, so prev / image / next sit together and the arrows
   land right beside the photograph whatever shape it is. Markup order already reads
   prev, img, next; close and the counter stay pinned. See build-plan.md #43. */
.g-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 14px 48px;
  background: rgba(0, 0, 0, 0.92);
}
.g-lightbox[hidden] { display: none; }
.g-lightbox img {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
/* Solid targets rather than bare glyphs: a 48px circle stays legible over a light
   photograph, which a thin white chevron on its own did not. */
.g-lightbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.g-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.06); }
.g-lightbox__btn:active { transform: scale(0.96); }
.g-lightbox__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.g-lightbox__close {
  position: absolute;
  top: 12px; right: 14px;
  width: 42px; height: 42px;
  padding: 0 0 4px;
  font-size: 30px;
}
.g-lightbox__count {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
@media (max-width: 767px) {
  /* Smaller circles and a tighter gap, so the arrows take as little width from the
     photograph as they can while staying a real tap target. */
  .g-lightbox { gap: 6px; padding: 52px 6px 40px; }
  .g-lightbox__btn { width: 40px; height: 40px; font-size: 27px; }
  .g-lightbox__close { top: 8px; right: 8px; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-lightbox__btn { transition: background 0.15s; }
  .g-lightbox__btn:hover, .g-lightbox__btn:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-link img { transition: none; }
  .g-link:hover img, .g-link:focus-visible img { transform: none; }
}

/* --- load-more / paginator: styling survives, the JS behind them does not --- */
.load_more3 { position: relative; width: 100%; margin: 10px 0; text-align: center; }
.load_more_button3 {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 10px;
  background: #333333;
  color: #CCCCCC;
  font-size: 19px;
  cursor: pointer;
}
.load_more_button3:hover { background: #8F827C; color: #D9D9D9; }
.paginate3 { font-size: 22px; color: #0A0202; text-align: center; }

/* --------------------------------------------------------------------------
   The awaiting-photographs notice. One marked block rather than 574 individual
   placeholders — see build-plan.md, settled decisions. Sized to the grid it
   replaces so the page keeps the proportions it will have when filled.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------- placeholder notice ---
   This has to do one job well: make it unmistakable, at a glance, that the twelve
   photographs above are not the finished gallery — without looking like a broken
   page. So: no candy-stripe background, no alarm-red panel. A quiet card, a single
   amber rule down the left edge, and a small uppercase label doing the work.

   Scoped to .entry-content so it outranks '.entry-content p { margin: 0 0 .9375rem }',
   which was overriding the auto side margins and pinning the note to the left.      */
.entry-content .gallery-pending {
  display: block;
  position: relative;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 22px 26px 22px 30px;
  border: 1px solid #e8e2d6;
  border-left: 3px solid #d99a2b;
  border-radius: 3px;
  background: #fdfbf7;
  color: #5c5344;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.75;
  text-align: left;
}
/* The label. Raleway, uppercase, tracked — the same idiom as the section eyebrows
   elsewhere on the site, so it reads as designed rather than as an error message. */
.entry-content .gallery-pending strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #b7791f;
}
.entry-content .gallery-pending em {
  font-style: normal;
  font-weight: 600;
  color: #3f382d;
}
@media (max-width: 767px) {
  .entry-content .gallery-pending { padding: 18px 18px 18px 22px; font-size: 13px; }
}



/* A deep link (/fullgallery/#cleaning) scrolls this panel into view, and the site
   header is sticky above it — without this the header would land on top of the
   tab bar. Matches --gallery-header-h, plus a little air. */
#huge_it_gallery3 { scroll-margin-top: calc(var(--gallery-header-h) + 12px); }