/* ========================================================================== JAGRITI DHAM — PHOTO GALLERY · page 18 only /assisted-living-facility-photo-gallery/ · page-templates/photo-gallery.php "THE SALON HANG" — final build css/photo-gallery-lux.css panel 2026-09-12 New file. Enqueue from functions.php on is_page(18) with deps array('responsive'), so it prints after style.css and responsive.css (the Customizer's wp-custom-css block prints later still; it names none of these classes). It restyles the GENERIC theme classes .sectiongap / .section-title / .post-box / .photo-* / .view_title / .gallery / .photo_page and must never load anywhere else (L1). The fixed header above (header-lux.css) and the contact section below (#contact, contact-lux.css) are not touched by any rule here; the one rule that names `.innerbanner` (L2) zeroes a spacer's margin and nothing of the header itself. ========================================================================== THE IDEA, IN ONE SENTENCE ------------------------- The page is one ROOM of the house hung salon-style on the grained cream paper: every photograph is a print on a flat cream MAT with a hairline edge, casting a deep soft shadow onto the wall; beneath the print, on the mat, a small Fraunces-italic brass folio numeral (01–16, jiva's plate numeral applied to prints) and the caption in Fraunces heading ink; in the mat's bottom-right corner, never over the photograph, a 36px plate disc with a brass magnifier — the framer's blind stamp that says "look closer", visible before any hover. The wall label is "Photo Gallery" in Fraunces with the house diamond punched into a rule that runs to the right margin, and one quiet Karla line beneath it that says in words what the disc shows. The pages of the hang are plate index cells under a diamond seam. One print across on a narrow phone, two from 480, four from 992; the lattice keeps its rhythm whatever ratio is uploaded because the print window is a 4:3 box the photograph covers. PAPER HAS GRAIN. THE MAT DOES NOT. (longstay-lux's material rule.) The wall is --jg-paper with the feTurbulence grain; the mat is --jg-plate with `background-image:none`, so the print reads as an object laid on the wall and the 1px rules on it keep their measured contrast. WHAT THE PANEL DECIDED (four designs, four judges, two syntheses) · base: The Salon Hang — the only design that was already the site; every fault the judges found was local, and each is closed below. · from The Frame: the "opens" mark lives IN THE MAT, not over the print; 48px index cells; nothing in the picture moves on hover; a quieter fade for the entrance. · from The Contact Sheet: the folio numeral as a counter on .photo-item; the descendant `.wow` flex chain for the video variant; 1-up under 480; the affordance said in words as well as shown. · from The Album: the diamond seam above the index; object-position 50% 40%; :focus:not(:focus-visible); the lightbox under reduced motion. · from all four judges: the header offset must not double the live page's .innerbanner spacer (L2). · not taken: the Sheet's dark ground (the wrong page to be the site's dark page), the Album's nth-child hierarchy (CSS cannot choose the honoured photograph), the Frame's caps captions and "VIEW" stamp. ========================================================================== LOAD-BEARING — DO NOT "TIDY" ANY OF THESE. Each fails SILENTLY. ========================================================================== L1 SCOPE. Every selector is rooted at `.page-id-18` (the WordPress body class); the custom properties (`--jg-*`) live on that body, not on :root. `.post-box`, `.photo-item`, `.photo-img`, `.photo-date`, `.photo-icon`, `.view_title`, `.gallery`, `.section-title` and `.sectiongap` are all used by the staycation template and the front page. NOTHING HERE MAY MOVE INTO style.css OR responsive.css. L2 THE HEADER OFFSET — THREE RULES, ONE SPACE, NEVER COUNTED TWICE. header.php falls through to template-parts/content-banner.php, which wraps the fixed header in `
`; header-lux.css (§ INNER PAGES) makes that div an in-flow spacer exactly the header's height (`height:var(--jd-h-total) !important; margin-bottom:20px`) and its own comment says "do NOT offset it as well or the space is counted twice". The panel's first harness dropped that wrapper, which is why the baseline read "heading under the header" — live, it never was. On the live DOM `.innerbanner` is a body child and the section a LATER body child (an HTML comment between them). So: .photo_gallery{margin-top:var(--jd-h-total,146px)} the fallback — a harness or a future header part WITHOUT the spacer still clears the fixed header; .innerbanner ~ .photo_gallery{margin-top:0} the live DOM — the spacer already holds the space; body is display:flex, so the margins would not even collapse. `~`, not `+`: a comment is not an element, and an element injected between the two later (a notice, a wrapper) must not bring the double count back; .innerbanner{margin-bottom:0} (0,2,0) over header-lux's (0,1,0): without it a 20px strip of the body's white shows between the header's paper and this cream section. The page loads un-scrolled, so the UN-condensed --jd-h-total (146 / 94 / 90 by tier) is the right height; header-lux condenses the header only after 96px of scroll. No `:has()`, no JavaScript. Put NO margin-top on `.container` or `.section-title`. L3 `a.post-box:empty{display:none}`. The template prints ~18 EMPTY anchors after every visible one (the hidden fancybox group members). In the baseline they are inline anchors that measure >0 wide on phones (290 of them at 375) and form an empty line box under each print. Fancybox 3 groups by the data-fancybox/rel ATTRIBUTES, not by layout, so hidden anchors still open in the strip. `:empty` matches only the members — the visible anchor contains .photo-item. L4 `.mb-4` is a Bootstrap utility (`margin-bottom:1.5rem !important`); only a flagged rule beats it, so the column's margin-bottom is zeroed WITH the flag here and the row's vertical rhythm is carried by `--bs-gutter-y` on `.row` instead (Bootstrap's own mechanism: the row takes a negative top margin, each column a positive one). The gutter variables are changed on `.row` ONLY — never on `.container`, whose `--bs-gutter-x` is the site's page margin. L5 THE GRID IS `.col-lg-3` OVERRIDDEN, NOT REPLACED. Bootstrap gives the column 100% under 992 and 25% above; here it is 100% / 50% / 25% at 0 / 480 / 992 as `flex:0 0 auto; width:` at (0,4,0) against Bootstrap's (0,1,0). 16 and 14 posts both tile without a stray at 2 and 4 across (a 3-up tablet tier would orphan one of sixteen); `.justify-content-center` on the row is the template's and is kept so any future count still centres its last row. The height runs down a FLEX CHAIN — column → .wow → a.post-box → .photo-item — so every row finishes level however long a caption runs, with no percentage height anywhere (animate.css's transform on .wow breaks percentage chains). The `.wow` rule is a DESCENDANT selector on purpose: the video variant nests a second `.wow` (`.col-lg-3 > .wow > .wow > a`) and a child selector would leave that post's mat short of its row. A post with neither an image gallery nor a video makes the template emit a `.col-lg-3 > .wow` with nothing in it. `:empty` cannot see it (whitespace), so the guard is `:not(:has(a.post-box))` INSIDE `@supports selector(:has(a))` — the one permitted use of :has(); a browser without it shows a blank centred cell, nothing worse. L6 THE PRINT WINDOW IS `aspect-ratio:4/3` ON `.photo-img`, the image `height:100%; object-fit:cover; object-position:50% 40%` (heads stay in when a 3:2 or portrait file is cover-fitted). There is no fixed height anywhere (style.css:2891 gives `.video_thumb img` 210px and is overridden). `min-height:57px` on `.photo-img` (style.css:1703) is zeroed. `.photo-img` is `position:static` here — see L7. NOTHING IN THE PICTURE MOVES: the theme's `scale(1.1)` on hover (style.css:1693, (0,3,1)) is answered at (0,3,1) by source order AND restated at (0,5,2) on the anchor's hover, and the image's transition is off. L7 THE VISIBLE "OPENS" MARK is the theme's own `.photo-date > .photo-icon` (the fa-search-plus the template already prints), moved OUT OF THE PICTURE and onto the mat: `.photo-date` is absolutely positioned against `.photo-item` (which is why `.photo-img` must stay position:static — it is `overflow:hidden`, but overflow only clips descendants whose containing block it is, so the disc escapes it cleanly), bottom-right, opacity 1, no transform, no delay, at (0,4,0) over style.css:1716's base (0,1,0) and :1753's hover (0,3,0). `.photo-icon` is a 36px plate disc with a brass-ink ring and a 15px brass-ink glyph (6.95:1); on hover/focus it inverts to the house green with a cream glyph. The caption keeps `padding-right` equal to the disc plus 8px so no line runs under it. The disc is pointer-events:none: the anchor is the single target and `cursor:zoom-in` on it says the same thing a second way. THE VIDEO VARIANT is the one exception: a film still needs its play mark in the pixels, so `.video_thumb .photo-img` is position:relative and its `.photo-date` centres a 56px green play disc over the still; that caption's padding-right is zeroed. L8 THE FOLIO NUMERAL is `.photo-item::before` — `counter(jg-print, decimal-leading-zero)` reset on `.gallery .row` and INCREMENTED ON `.photo-item`, never on the anchor: the ~18 empty anchors per post are display:none and a display:none element cannot increment a counter, but they would be counted the day a minifier "simplifies" the increment onto `a.post-box`. The pseudo-element is a flex item of the mat with `order:1` so it sits BETWEEN the print (order 0) and the caption (order 2) without markup — jiva's captioned plate, numeral above the title. It is written twice, plain then with the `/ ""` alt form, so assistive tech skips it. L9 THE WHOLE MAT IS THE TARGET. `a.post-box` is a flex column (an inline anchor round a block is what the baseline had); the mat, the print, the numeral, the caption and the disc are all inside it. The focus ring is drawn on the anchor with `outline-offset:4px`, outside the cast shadow, so it never mixes with the mat's own hairline; the `:focus:not(:focus-visible)` rule keeps mouse clicks ring-free. L10 `.gallery .view_title` (style.css:1775) is a flex row 55px tall with `justify-content:space-around; text-align:center` and a white-on- #4f6f52 fill. Every one of those declarations is answered here at (0,4,0): the caption is a BLOCK, `height:auto`, transparent, heading ink, ranged left, unitless line-height (a fixed px line-height was the one measured failure on the panel under Android text scaling). `.innerpage .view_title` does not apply (the body has no .innerpage class) — if a future body class adds it, its (0,2,0) still loses. L11 THE HOVER is a 2px lift of the mat on `.photo-item`, NOT on the anchor and NOT on the `.wow` wrapper: WOW animates the wrapper's transform/opacity and would fight a transition on the same box. The disc inverts, the edge warms, the shadow deepens; the photograph does not move (L6). Zeroed under reduced motion. L12 WOW IS RETUNED, NOT REMOVED. `.wow.zoomIn{animation-name:fadeIn}` at (0,4,0) over animate.css's (0,1,0) turns sixteen zooming mats into a quiet fade — WOW caches the COMPUTED animation-name at init and re-applies it inline when the box scrolls in, so the fade survives — and `.wow.animated{animation-duration:.55s}` shortens it. `@media (prefers-reduced-motion:reduce)` sets BOTH `visibility:visible !important` AND `animation:none !important` on `.wow`. WOW.js writes `visibility:hidden` INLINE and animate.css gives `.animated` `animation-fill-mode:both`. Remove either flag and the wall is blank for anyone who asked for less motion. Same pair in @media print. The lightbox's transition durations are zeroed too: fancybox 3 has a setTimeout fallback that fires `transitionend` itself, so nothing hangs. L13 THE PAGE CELLS. `.photo_page .page-numbers` (style.css:2904) is a 29×26px inline box; here each is an inline-flex CELL, min 48×48 (SC 2.5.5 asks 44), cells sharing their rules (`margin-left:-1px`), brass-ink numerals on the mat plate. The current page changes FILL and INK (green, cream ink 9.72:1 — the baseline's white on #cbb279 was 2.0:1), never colour alone; `span.current` is not a link and gets no hover. "Next »" is the template's text and is kept, on a wider cell. Bootstrap's `.pagination{display:flex}` is what the theme's `display:block` (style.css:2901) had undone; flex is restored here. The seam above the index is the house diamond on a fading rule — an ornament at .5 alpha, exactly home-lux's section mark; the cells' own edges are the meaningful rules at .72 (3.58:1). L14 THE FANCYBOX CHROME is themed under `.page-id-18 .fancybox-container` — fancybox appends the container to , which carries the page class, so the scope holds and no other page's lightbox changes. Every control keeps its native size (toolbar buttons 44×44, arrows 70×100, thumbnails 100×75 at 4px pitch); only fills, inks and the active-thumb frame (brass, not #ff5268) change. style.css:1932 fills every `.fancybox-button svg path` brass `!important` (white on hover); that is NOT fought — the button fill here is the house green at .88 precisely so those brass glyphs sit at 5.73:1 on it; the cream `color` is the fallback if that theme rule is ever removed. L15 GENERATED TEXT. Every generated glyph is `content:""` or, where it is a mark with no text meaning, written with the `/ ""` alt form as well so it is hidden from screen readers in Chrome 77+ / Safari 17.4+ / Firefox 128+; a minifier that collapses duplicate `content` declarations breaks one class of browser. The ONE line of English is the hint under the wall label (`.section-title::after`, §2): it is meant to be read — the instruction for a visitor who does not recognise a magnifier, on a phone where nothing hovers — and screen readers read it on purpose (no alt form). If the client objects to CSS-authored copy, that ONE rule is deleted and the disc, the whole- mat target and the zoom-in cursor still carry the affordance. jiva- lux's "Questions" running head is the precedent. L16 EVERY media query is `min-width` (base → 480 → 576 → 768 → 992 → 1200 → 1400); no max-width, no seam at a boundary. The section is `overflow:clip` (with `overflow:hidden` before it for browsers without clip) so the cast shadows and the 2px lift can never widen the document; both fall inside the section's own padding. ========================================================================== CONTRAST, COMPUTED (WCAG 2.x relative luminance; grain worst-pixel — the paper's feTurbulence at .04 alpha darkens at most to #f0ede5 — in brackets) ========================================================================== #2b3f2f heading ink on #faf7ef paper 10.58:1 (9.68) h2, focus ring on paper #2b3f2f heading ink on #fdfbf6 mat 10.95:1 captions, current-cell boundary, ring on mat #3a4238 body ink on #faf7ef paper 9.73:1 (8.90) the hint line #6b5426 brass ink on #fdfbf6 mat 6.95:1 folio numerals, the disc's glyph, page numerals, "Next »" #6b5426 brass ink on #faf7ef paper 6.71:1 (6.14) the wall-label diamond #f6edd8 cream ink on #2b3f2f green 9.72:1 current page cell, hovered disc glyph, play glyph #f6edd8 cream ink on #1d2a20 night 12.83:1 lightbox infobar, buttons (fallback ink); caption 11.64:1 on the gradient's foot over a mid-grey print #cbb279 brass on rgba(43,63,47,.88) over night 5.73:1 NON-TEXT: the (= #293c2d) lightbox glyphs (style.css:1932) #cbb279 brass on #1d2a20 night 7.25:1 NON-TEXT: active- thumb frame #e6d4a6 focus ring on #1d2a20 night 10.21:1 #2b3f2f hover ink on #f3eedf wash 9.76:1 hovered page cell rgba(107,84,38,.72)=#93825e on paper 3.51:1 (3.34) the wall-label rule rgba(107,84,38,.72)=#948360 on mat 3.58:1 disc ring, page-cell edges (non-text ≥3:1) rgba(107,84,38,.5) =#b2a68a on paper 2.25:1 ORNAMENT: the seam above the index (the same recipe as home-lux's mark) rgba(203,178,121,.55)=#e0d1ae on paper 1.41:1 DECORATIVE: the mat's hairline edge (the shadow is the mat's boundary) rgba(43,63,47,.16)=#dbddd6 on mat 1.32:1 DECORATIVE: the print's own edge Baseline for comparison: current page white on #cbb279 2.0:1 FAIL; the 14px white caption on #4f6f52 5.63:1. ========================================================================== */ .page-id-18{ --jg-paper:#faf7ef; --jg-plate:#fdfbf6; --jg-night:#2b3f2f; --jg-night-deep:#1d2a20; --jg-ink:#3a4238; --jg-strong:#2b3f2f; --jg-brass-ink:#6b5426; --jg-brass:#cbb279; --jg-cream-ink:#f6edd8; --jg-ring-dark:#e6d4a6; --jg-wash:#f3eedf; --jg-hair:rgba(203,178,121,.55); --jg-rule:rgba(107,84,38,.72); --jg-rule-soft:rgba(107,84,38,.5); --jg-print-edge:rgba(43,63,47,.16); --jg-shadow:43,63,47; --jg-ease:cubic-bezier(.2,.7,.2,1); --jg-t:.22s; --jg-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jg-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --jg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); /* the house diamond, punched into a rule: the paper cut */ --jg-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23faf7ef'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E"); /* the rhythm, by tier */ --jg-pad-top:36px; --jg-pad-bot:46px; --jg-head-gap:22px; --jg-gap:16px; /* the lattice, both axes */ --jg-mat:8px; /* the mat's width round the print */ --jg-caption:16px; --jg-caption-gap:9px; /* print → numeral */ --jg-folio:13px; --jg-disc:36px; /* the magnifier disc in the mat */ } @media (min-width:480px){ .page-id-18{ --jg-caption:15px; --jg-folio:12.5px; } } @media (min-width:576px){ .page-id-18{ --jg-pad-top:42px; --jg-pad-bot:54px; --jg-gap:18px; --jg-mat:10px; --jg-caption:16px; --jg-folio:13px; --jg-caption-gap:10px; } } @media (min-width:768px){ .page-id-18{ --jg-pad-top:46px; --jg-pad-bot:58px; --jg-head-gap:28px; --jg-gap:22px; --jg-mat:12px; --jg-caption:17px; --jg-folio:13.5px; } } @media (min-width:992px){ .page-id-18{ --jg-pad-top:52px; --jg-pad-bot:64px; --jg-head-gap:32px; --jg-gap:22px; --jg-mat:10px; --jg-caption:16px; --jg-folio:13px; --jg-caption-gap:10px; } } @media (min-width:1200px){ .page-id-18{ --jg-pad-top:56px; --jg-pad-bot:70px; --jg-gap:24px; --jg-caption:16.5px; --jg-caption-gap:11px; } } @media (min-width:1400px){ .page-id-18{ --jg-caption:17px; } } /* -------------------------------------------------------------------------- 1. THE ROOM — the section clears the fixed header once (L2) and is the grained paper wall; the theme's 20px `.sectiongap` becomes the tiered rhythm. -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery{ position:relative; margin-top:var(--jd-h-total, 146px); /* L2 — the fallback, for a DOM without the spacer */ padding:var(--jg-pad-top) 0 var(--jg-pad-bot); background-color:var(--jg-paper); background-image:var(--jg-grain); overflow:hidden; overflow:clip; /* L16 */ font-family:var(--jg-sans); color:var(--jg-ink); } .page-id-18 .innerbanner ~ .photo_gallery{ margin-top:0; } /* L2 — the live DOM: the spacer holds the space */ .page-id-18 .innerbanner{ margin-bottom:0; } /* L2 — header-lux's 20px would show as a white strip */ .page-id-18 .photo_gallery > .container{ margin-top:0; } .page-id-18 .photo_gallery .section-gaping{ padding:0; margin:0; } /* -------------------------------------------------------------------------- 2. THE WALL LABEL — "Photo Gallery" in Fraunces, ranged left, the house diamond punched into a rule that runs from the title to the right margin (a flex item inside the h2, alt-hidden), and the one hint line beneath (L15). The title block stays a BLOCK, so any h6 deck a future edit adds to the template stacks under the h2 instead of beside it. -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .section-title{ display:block; margin:0 0 var(--jg-head-gap); padding:0; text-align:left; } .page-id-18 .photo_gallery .section-title h2{ display:flex; align-items:center; gap:20px; margin:0; padding:0; font-family:var(--jg-serif); font-optical-sizing:auto; font-weight:600; font-size:31px; font-size:clamp(31px, 3.3vw, 44px); line-height:1.1; letter-spacing:-.012em; color:var(--jg-strong); /* 10.58:1 */ text-align:left; text-wrap:balance; } .page-id-18 .photo_gallery .section-title h2::after{ content:""; content:"" / ""; display:block; flex:1 1 44px; min-width:44px; height:9px; background-image:var(--jg-diamond), linear-gradient(var(--jg-rule), var(--jg-rule)); background-repeat:no-repeat, no-repeat; background-position:0 50%, 0 50%; background-size:17px 9px, 100% 1px; /* the rule is 3.51:1 on the paper */ } /* the hint — generated text, and meant to be read (L15); ONE rule to delete */ .page-id-18 .photo_gallery .section-title::after{ content:"Tap or click a photograph to see its album."; display:block; max-width:60ch; margin:10px 0 0; font-family:var(--jg-sans); font-size:15px; font-weight:400; line-height:1.5; letter-spacing:.005em; color:var(--jg-ink); /* 9.73:1 on the paper */ text-align:left; } @media (min-width:768px){ .page-id-18 .photo_gallery .section-title h2{ gap:26px; } .page-id-18 .photo_gallery .section-title::after{ margin-top:12px; font-size:16px; } } /* -------------------------------------------------------------------------- 3. THE LATTICE — one, two, four across (L4, L5); the folio counter starts here (L8) -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .gallery .row{ --bs-gutter-x:var(--jg-gap); --bs-gutter-y:var(--jg-gap); counter-reset:jg-print; /* pages 2 and 3 continue the count: WordPress adds body.paged-N */ } .page-id-18 .photo_gallery .gallery .row > .col-lg-3{ flex:0 0 auto; width:100%; margin-bottom:0 !important; /* L4 — against .mb-4's flag */ display:flex; flex-direction:column; min-width:0; } @media (min-width:480px){ .page-id-18 .photo_gallery .gallery .row > .col-lg-3{ width:50%; } } @media (min-width:992px){ .page-id-18 .photo_gallery .gallery .row > .col-lg-3{ width:25%; } } /* a post with neither galleries nor videos: the template's blank cell (L5) */ @supports selector(:has(a)){ .page-id-18 .photo_gallery .gallery .row > .col-lg-3:not(:has(a.post-box)){ display:none; } } /* the WOW wrapper(s) and the anchor pass the column's height down (L5) — descendant selector: the video variant nests a second .wow */ .page-id-18 .photo_gallery .gallery .col-lg-3 .wow{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; min-width:0; } /* the entrance: a fade, not a zoom (L12) */ .page-id-18 .photo_gallery .gallery .wow.zoomIn{ -webkit-animation-name:fadeIn; animation-name:fadeIn; } .page-id-18 .photo_gallery .gallery .wow.animated{ -webkit-animation-duration:.55s; animation-duration:.55s; animation-timing-function:var(--jg-ease); } /* L3 — the hidden group members */ .page-id-18 .photo_gallery a.post-box:empty{ display:none; } /* -------------------------------------------------------------------------- 4. THE PRINT ON ITS MAT — the anchor is the whole target (L9); the mat is flat plate with a hairline edge and a deep soft cast shadow; the print window is a 4:3 box the photograph covers (L6). Nothing in the picture moves (L11). -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery a.post-box{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; padding:0; margin:0; color:inherit; text-decoration:none; cursor:zoom-in; -webkit-tap-highlight-color:transparent; outline:0; transition:none; /* style.css:26 gives every transition:all .3s, which tweened the focus ring's width, colour and offset from zero; the mat, disc and cells carry their own transitions */ } .page-id-18 .photo_gallery a.post-box:focus:not(:focus-visible){ outline:none; } .page-id-18 .photo_gallery a.post-box:focus-visible{ outline:2px solid var(--jg-strong); /* 10.58:1 on the paper */ outline-offset:4px; } .page-id-18 .photo_gallery .photo-item{ position:relative; display:flex; flex-direction:column; flex:1 1 auto; width:100%; padding:var(--jg-mat); counter-increment:jg-print; /* L8 */ background-color:var(--jg-plate); background-image:none; /* the mat has no grain */ border:1px solid var(--jg-hair); border-radius:0; box-shadow: 0 1px 2px -1px rgba(var(--jg-shadow),.14), 0 22px 36px -20px rgba(var(--jg-shadow),.42); transform:translateY(0); transition:transform .32s var(--jg-ease), box-shadow .32s var(--jg-ease), border-color var(--jg-t) ease; } .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item{ transform:translateY(-2px); /* L11 */ border-color:rgba(203,178,121,.85); box-shadow: 0 2px 4px -2px rgba(var(--jg-shadow),.16), 0 30px 44px -22px rgba(var(--jg-shadow),.5); } .page-id-18 .photo_gallery a.post-box:active .photo-item{ transform:translateY(0); transition-duration:.08s; box-shadow: 0 1px 2px -1px rgba(var(--jg-shadow),.14), 0 14px 24px -18px rgba(var(--jg-shadow),.4); } .page-id-18 .photo_gallery .photo-item.video_thumb{ cursor:pointer; } /* a film, not a print to enlarge */ /* the print window — position:static on purpose (L7) */ .page-id-18 .photo_gallery .photo-img{ position:static; order:0; display:block; width:100%; flex:0 0 auto; aspect-ratio:4 / 3; /* L6 */ min-height:0; /* style.css:1703 says 57px */ overflow:hidden; border-radius:0; border:1px solid var(--jg-print-edge); background-color:#e8e3d5; /* the window while the print loads */ cursor:inherit; } .page-id-18 .photo_gallery .photo-img img{ display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; object-position:50% 40%; /* faces sit above centre */ border-radius:0; transform:none; /* style.css:1693's scale(1.1) — tie on specificity, later source wins */ transition:none; } .page-id-18 .photo_gallery a.post-box:focus-visible .photo-img img, .page-id-18 .photo_gallery a.post-box:active .photo-img img{ transform:none; /* restated at (0,5,2): nothing in the picture moves (L6) */ } /* the video variant (L6): style.css:2891 gives its img a fixed 210px */ .page-id-18 .photo_gallery .photo-item.video_thumb .photo-img img{ height:100%; -o-object-fit:cover; object-fit:cover; } /* -------------------------------------------------------------------------- 5. THE FOLIO NUMERAL — jiva's plate numeral applied to prints: Fraunces italic, brass ink, between the print and the caption on the mat (L8) -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .photo-item::before{ content:counter(jg-print, decimal-leading-zero); content:counter(jg-print, decimal-leading-zero) / ""; order:1; display:block; flex:0 0 auto; margin:var(--jg-caption-gap) 0 0; padding:0 calc(var(--jg-disc) + 8px) 0 1px; font-family:var(--jg-serif); font-optical-sizing:auto; font-style:italic; font-weight:500; font-size:var(--jg-folio); line-height:1.1; letter-spacing:.06em; font-variant-numeric:lining-nums tabular-nums; color:var(--jg-brass-ink); /* 6.95:1 on the mat */ text-align:left; pointer-events:none; } /* -------------------------------------------------------------------------- 6. THE CAPTION — Fraunces, heading ink, ranged left on the mat under the numeral; room kept on the right for the disc (L7, L10) -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .gallery .view_title{ position:static; order:2; left:auto; bottom:auto; display:block; flex:1 1 auto; width:100%; height:auto; min-height:calc(var(--jg-disc) - var(--jg-folio) * 1.1 - 3px); /* a one-line caption still fills the disc's height */ margin:3px 0 0; padding:0 calc(var(--jg-disc) + 8px) 0 0; background:transparent; box-shadow:none; border-radius:0; font-family:var(--jg-serif); font-optical-sizing:auto; font-weight:500; font-size:var(--jg-caption); line-height:1.3; letter-spacing:-.004em; color:var(--jg-strong); /* 10.95:1 on the mat */ text-align:left; text-wrap:pretty; overflow-wrap:anywhere; } .page-id-18 .photo_gallery .gallery .view_title::before, .page-id-18 .photo_gallery .gallery .view_title::after{ content:none; } /* .innerpage's wedge, should the class ever arrive */ .page-id-18 .photo_gallery .gallery .video_thumb .view_title{ padding-right:0; } /* -------------------------------------------------------------------------- 7. THE MARK — the theme's search-plus as a plate disc IN THE MAT, bottom right, visible before any hover; inverts to green on hover/focus (L7) -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .photo-item .photo-date{ position:absolute; top:auto; left:auto; right:var(--jg-mat); bottom:var(--jg-mat); width:var(--jg-disc); height:var(--jg-disc); z-index:2; display:flex; align-items:center; justify-content:center; margin:0; padding:0; color:var(--jg-brass-ink); background:transparent; transform:none; opacity:1; transition:none; transition-delay:0s; pointer-events:none; } .page-id-18 .photo_gallery .photo-item .photo-icon{ position:static; top:auto; left:auto; width:var(--jg-disc); height:var(--jg-disc); transform:none; display:flex; align-items:center; justify-content:center; background:var(--jg-plate); border:1px solid var(--jg-rule); /* 3.58:1 on the mat — non-text */ border-radius:50%; box-shadow:none; font-size:0; letter-spacing:0; text-transform:none; transition:background-color var(--jg-t) var(--jg-ease), border-color var(--jg-t) var(--jg-ease); } .page-id-18 .photo_gallery .photo-item .photo-icon i{ line-height:1; font-size:15px; color:var(--jg-brass-ink); /* 6.95:1 on the disc */ transition:color var(--jg-t) var(--jg-ease); } .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item .photo-icon{ background:var(--jg-night); border-color:var(--jg-night); } .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item .photo-icon i{ color:var(--jg-cream-ink); /* 9.72:1 on the green */ } /* a film still: the play disc is in the picture before any hover (L7) */ .page-id-18 .photo_gallery .photo-item.video_thumb .photo-img{ position:relative; } .page-id-18 .photo_gallery .photo-item.video_thumb .photo-date{ top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(43,63,47,0) 55%, rgba(43,63,47,.28) 100%); } .page-id-18 .photo_gallery .photo-item.video_thumb .photo-icon{ width:56px; height:56px; background:var(--jg-night); border-color:rgba(203,178,121,.85); box-shadow:0 8px 18px -8px rgba(var(--jg-shadow),.55); } .page-id-18 .photo_gallery .photo-item.video_thumb .photo-icon i{ font-size:20px; color:var(--jg-cream-ink); /* 9.72:1 on the disc */ padding-left:4px; /* optically centre the triangle */ } .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item.video_thumb .photo-icon{ background:var(--jg-night-deep); border-color:var(--jg-brass); } /* -------------------------------------------------------------------------- 8. THE INDEX — the pages of the hang as plate cells under the diamond seam, quoted from jiva's carousel index (L13) -------------------------------------------------------------------------- */ .page-id-18 .photo_gallery .photo_page{ margin:calc(var(--jg-gap) + 22px) 0 0; padding:0; border:0; text-align:center; } .page-id-18 .photo_gallery .photo_page::before{ content:""; content:"" / ""; display:block; width:100%; height:9px; margin:0 0 24px; background-image:var(--jg-diamond), linear-gradient(90deg, rgba(107,84,38,0) 0%, var(--jg-rule-soft) 18%, var(--jg-rule-soft) 82%, rgba(107,84,38,0) 100%); background-repeat:no-repeat, no-repeat; background-position:50% 50%, 50% 50%; background-size:17px 9px, 100% 1px; /* ornament, 2.25:1 — the seam, not a boundary */ } .page-id-18 .photo_gallery .photo_page .pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:10px 0; /* pages 2 and 3 print "« Previous" first (five cells, 348px) and wrap under ~335px: the wrapped cell needs its own row */ margin:0; padding:0; list-style:none; } .page-id-18 .photo_gallery .photo_page .page-numbers{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:48px; /* SC 2.5.5 asks 44, both axes */ min-height:48px; margin:0 0 0 -1px; /* cells share their rules */ padding:0 15px; background-color:var(--jg-plate); border:1px solid var(--jg-rule); /* 3.58:1 on the mat */ border-radius:0; font-family:var(--jg-sans); font-size:16px; font-weight:600; letter-spacing:.04em; line-height:1; color:var(--jg-brass-ink); /* 6.95:1 */ font-variant-numeric:lining-nums tabular-nums; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color var(--jg-t) var(--jg-ease), color var(--jg-t) var(--jg-ease), border-color var(--jg-t) var(--jg-ease); } .page-id-18 .photo_gallery .photo_page .page-numbers:first-child{ margin-left:0; } .page-id-18 .photo_gallery .photo_page .page-numbers.next, .page-id-18 .photo_gallery .photo_page .page-numbers.prev{ padding:0 18px; letter-spacing:.06em; text-transform:uppercase; font-size:13px; } .page-id-18 .photo_gallery .photo_page .page-numbers.dots{ border-color:transparent; background:transparent; } /* current: filled green AND inverted ink — two channels, never colour alone */ .page-id-18 .photo_gallery .photo_page .page-numbers.current{ position:relative; z-index:1; background-color:var(--jg-night); border-color:var(--jg-night); color:var(--jg-cream-ink); /* 9.72:1 */ cursor:default; } .page-id-18 .photo_gallery .photo_page a.page-numbers:focus:not(:focus-visible){ outline:none; } .page-id-18 .photo_gallery .photo_page a.page-numbers:focus-visible{ position:relative; z-index:2; outline:2px solid var(--jg-strong); outline-offset:2px; } .page-id-18 .photo_gallery .photo_page a.page-numbers:active{ background-color:var(--jg-night); border-color:var(--jg-night); color:var(--jg-cream-ink); } /* -------------------------------------------------------------------------- 9. THE LIGHTBOX — the house's night behind the print (L14) -------------------------------------------------------------------------- */ .page-id-18 .fancybox-container .fancybox-bg{ background:var(--jg-night-deep, #1d2a20); } .page-id-18 .fancybox-container.fancybox-is-open .fancybox-bg{ opacity:.985; } /* fancybox's .87 lets the wall ghost through; .985 keeps the fade and loses the ghost */ .page-id-18 .fancybox-container .fancybox-button{ width:44px; height:44px; background:rgba(43,63,47,.88); /* the brass glyphs style.css:1932 forces sit at 5.73:1 here */ color:var(--jg-cream-ink, #f6edd8); /* 12.83:1 on the night — the fallback ink */ border-radius:0; } .page-id-18 .fancybox-container .fancybox-button[disabled], .page-id-18 .fancybox-container .fancybox-button[disabled]:hover{ color:rgba(246,237,216,.45); } /* style.css:1932 fills every `.fancybox-button svg path` #cbb279 !important, so a colour on the button never reaches the glyph and a disabled arrow looked identical to an enabled one. Opacity and the plate carry the state instead: brass at .35 over the .88 green reads 1.95:1 -- plainly "off" -- while the enabled arrow stays 5.73:1. */ .page-id-18 .fancybox-container .fancybox-button[disabled] svg{ opacity:.35; } .page-id-18 .fancybox-container .fancybox-button[disabled] div{ background:rgba(43,63,47,.45); } .page-id-18 .fancybox-container .fancybox-button.fancybox-focus{ outline:2px solid var(--jg-ring-dark, #e6d4a6); /* 10.21:1 on the night */ outline-offset:-2px; } .page-id-18 .fancybox-container .fancybox-navigation .fancybox-button{ width:70px; height:100px; background:transparent; background-clip:content-box; } .page-id-18 .fancybox-container .fancybox-navigation .fancybox-button div{ background:rgba(43,63,47,.88); padding:7px; } .page-id-18 .fancybox-container .fancybox-infobar{ background:rgba(43,63,47,.88); /* the buttons' plate: cream on it is 10.13:1 whatever the photograph underneath (on a landscape phone the counter sat over the picture) */ font-family:var(--jg-sans); font-size:14px; font-weight:600; letter-spacing:.04em; font-variant-numeric:lining-nums tabular-nums; color:var(--jg-cream-ink, #f6edd8); mix-blend-mode:normal; } .page-id-18 .fancybox-container .fancybox-caption{ font-family:var(--jg-serif); font-optical-sizing:auto; font-weight:500; font-size:17px; line-height:1.4; color:var(--jg-cream-ink, #f6edd8); /* 11.64:1 on the gradient's foot over a mid-grey print; 12.83:1 over the night */ background:linear-gradient(0deg, rgba(29,42,32,.92) 0, rgba(29,42,32,.4) 50%, rgba(29,42,32,.16) 65%, rgba(29,42,32,.06) 78%, rgba(29,42,32,0) 100%); } .page-id-18 .fancybox-container .fancybox-progress{ background:var(--jg-brass, #cbb279); } .page-id-18 .fancybox-container .fancybox-thumbs{ background:var(--jg-night, #2b3f2f); border-left:1px solid rgba(203,178,121,.35); } .page-id-18 .fancybox-container .fancybox-thumbs__list a{ background-color:rgba(255,255,255,.06); } .page-id-18 .fancybox-container .fancybox-thumbs__list a:before{ border:3px solid var(--jg-brass, #cbb279); } /* outer edge on the #2b3f2f strip, 5.49:1 */ .page-id-18 .fancybox-container .fancybox-thumbs__list a.fancybox-thumbs-active{ box-shadow:0 0 0 2px var(--jg-brass, #cbb279); } /* on the strip, not the photograph */ .page-id-18 .fancybox-container .fancybox-thumbs__list a:focus:before{ opacity:.6; } .page-id-18 .fancybox-container .fancybox-thumbs__list a:focus-visible{ outline:2px solid var(--jg-ring-dark, #e6d4a6); outline-offset:-2px; } .page-id-18 .fancybox-container .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{ background:rgba(0,0,0,.25); box-shadow:none; } .page-id-18 .fancybox-container .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{ background:rgba(203,178,121,.6); } .page-id-18 .fancybox-container .fancybox-loading{ border-color:rgba(203,178,121,.35); border-bottom-color:var(--jg-brass, #cbb279); } /* -------------------------------------------------------------------------- 10. REDUCED MOTION (L12), FORCED COLOURS and PRINT -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- HOVER — only where a pointer can hover. On a touch screen a tap that opened the lightbox left the tapped mat in :hover (lifted, edge at .85, disc inverted) after the lightbox closed, until the next tap elsewhere. The sibling sheets guard theirs the same way (jiva-lux:1720). -------------------------------------------------------------------------- */ @media (hover:hover){ .page-id-18 .photo_gallery a.post-box:hover .photo-item{ transform:translateY(-2px); /* L11 */ border-color:rgba(203,178,121,.85); box-shadow: 0 2px 4px -2px rgba(var(--jg-shadow),.16), 0 30px 44px -22px rgba(var(--jg-shadow),.5); } .page-id-18 .photo_gallery a.post-box:hover .photo-img img{ transform:none; } .page-id-18 .photo_gallery a.post-box:hover .photo-item .photo-icon{ background:var(--jg-night); border-color:var(--jg-night); } .page-id-18 .photo_gallery a.post-box:hover .photo-item .photo-icon i{ color:var(--jg-cream-ink); } .page-id-18 .photo_gallery a.post-box:hover .photo-item.video_thumb .photo-icon{ background:var(--jg-night-deep); border-color:var(--jg-brass); } .page-id-18 .photo_gallery .photo_page a.page-numbers:hover{ position:relative; z-index:1; background-color:var(--jg-wash); border-color:var(--jg-strong); color:var(--jg-strong); /* 9.76:1 on the wash */ } .page-id-18 .fancybox-container .fancybox-button:hover{ color:#ffffff; background:rgba(43,63,47,1); } } body.page-id-18.paged-2 .photo_gallery .gallery .row{ counter-reset:jg-print 16; } body.page-id-18.paged-3 .photo_gallery .gallery .row{ counter-reset:jg-print 32; } body.page-id-18.paged-4 .photo_gallery .gallery .row{ counter-reset:jg-print 48; } @media (prefers-reduced-motion:reduce){ .page-id-18 .wow{ visibility:visible !important; animation:none !important; } .page-id-18{ --jg-t:0s; } .page-id-18 .photo_gallery .photo-item, .page-id-18 .photo_gallery .photo-img img, .page-id-18 .photo_gallery .photo-item .photo-date, .page-id-18 .photo_gallery .photo-item .photo-icon, .page-id-18 .photo_gallery .photo-item .photo-icon i, .page-id-18 .photo_gallery .photo_page .page-numbers{ transition:none; } .page-id-18 .photo_gallery a.post-box:hover .photo-item, .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item, .page-id-18 .photo_gallery a.post-box:active .photo-item{ transform:none; } .page-id-18 .photo_gallery a.post-box{ transition:none; } /* the lightbox: fancybox's own slide/zoom transitions off; its timers still close every animate() call, so nothing waits on transitionend */ .page-id-18 .fancybox-container, .page-id-18 .fancybox-container *{ transition-duration:0s !important; animation-duration:0s !important; } } @media (forced-colors:active){ .page-id-18 .photo_gallery .photo-item{ border:1px solid CanvasText; box-shadow:none; } .page-id-18 .photo_gallery .photo-img{ border-color:CanvasText; } .page-id-18 .photo_gallery .photo-item .photo-icon{ border:1px solid ButtonText; forced-color-adjust:none; background:ButtonFace; } .page-id-18 .photo_gallery .photo-item .photo-icon i{ color:ButtonText; } .page-id-18 .photo_gallery a.post-box:hover .photo-item .photo-icon, .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item .photo-icon{ background:Highlight; border-color:Highlight; } .page-id-18 .photo_gallery a.post-box:hover .photo-item .photo-icon i, .page-id-18 .photo_gallery a.post-box:focus-visible .photo-item .photo-icon i{ color:HighlightText; } .page-id-18 .photo_gallery .section-title h2::after, .page-id-18 .photo_gallery .photo_page::before{ background-image:none; border-top:1px solid CanvasText; height:1px; } .page-id-18 .photo_gallery .section-title h2::after{ align-self:center; } .page-id-18 .photo_gallery .photo_page .page-numbers{ border:1px solid ButtonText; } .page-id-18 .photo_gallery .photo_page .page-numbers.current{ forced-color-adjust:none; background:Highlight; border-color:Highlight; color:HighlightText; } .page-id-18 .photo_gallery a.post-box:focus-visible, .page-id-18 .photo_gallery .photo_page a.page-numbers:focus-visible{ outline:2px solid Highlight; } } @media print{ .page-id-18 .wow{ visibility:visible !important; animation:none !important; } .page-id-18 .photo_gallery, .page-id-18 .innerbanner ~ .photo_gallery{ margin-top:0; padding:12mm 0; background:#fff; } .page-id-18 .photo_gallery .section-title h2{ color:#000; } .page-id-18 .photo_gallery .section-title h2::after{ background-image:none; border-top:1px solid #000; height:1px; align-self:center; } .page-id-18 .photo_gallery .photo-item{ box-shadow:none; border-color:#bbb; break-inside:avoid; page-break-inside:avoid; } .page-id-18 .photo_gallery .photo-item::before{ color:#000; } .page-id-18 .photo_gallery .gallery .view_title{ color:#000; padding-right:0; } .page-id-18 .photo_gallery .section-title::after, .page-id-18 .photo_gallery .photo-item .photo-date, .page-id-18 .photo_gallery .photo_page, .page-id-18 .fancybox-container{ display:none !important; } } /* ========================================================================== MEASURED — the panel rig's own measure() run in headless Chrome at the 13 widths on D:\Jagriti Dham\_preview-gallery-final-live.html (the corrected harness: live .innerbanner + #navbar_top wrappers, real fancybox / WOW / header-lux.js, ?static) and again on _preview-gallery-final-plain.html (no wrappers, the fallback margin). 2026-09-12. ========================================================================== width hdr ib sec h2 per-row print(4:3 cover) cap folio cells secH pageH 320 90 90/0 90 126 1 276x207 16px 13 48x48 x3 + 86x48 5,115 6,650 375 90 90/0 90 126 1 331x248 16px 13 " 5,713 7,146 480 90 90/0 90 126 2 200x150 15px 12.5 " 2,334 3,667 575 90 90/0 90 126 2 248x185 15px 12.5 " 2,561 3,893 576 90 90/0 90 132 2 225x168 16px 13 " 2,562 3,895 767 90 90/0 90 132 2 225x168 16px 13 " 2,562 3,895 768 94 94/0 94 140 2 309x231 17px 13.5 " 3,087 4,177 991 94 94/0 94 140 2 309x231 17px 13.5 " 3,089 4,191 992 146 146/0 146 198 4 194x145 16px 13 " 1,444 2,298 1199 146 146/0 146 198 4 194x145 16px 13 " 1,452 2,312 1200 146 146/0 146 202 4 252x189 16.5px 13 " 1,593 2,363 1280 146 146/0 146 202 4 257x192 16.5px 13 " 1,611 2,381 1440 146 146/0 146 202 4 257x192 17px 13 " 1,618 2,389 (hdr = fixed header bottom; ib = .innerbanner height / margin-bottom; sec = .photo_gallery top — equal to hdr at every width, section margin-top computing 0 with the spacer present and 90/94/146 without it; h2 top = hdr + --jg-pad-top; heading never under the header; bodyOverflow ok and 0 spilling elements at all 13; every row level; every image 1.34 cover, object-position 50% 40%, natural 1280x960; caption #2b3f2f on the mat, boxes 20–83px, 0 clipped; disc 36x36 opacity 1, 9–13px inside the mat's right and bottom edges, 29–59px below the print, never over it; empty anchors visible 0; current cell rgb(43,63,47)/rgb(246,237,216); section bottom meets #contact at 0px. Baseline: 5,496 / 9,759 / 1,302 at 375 / 768 / 1280.) Probe (375/768/992/1280): hover = mat translateY(-2px), edge rgba(203,178,121,.85), disc rgb(43,63,47) with rgb(246,237,216) glyph, image transform none; Tab = anchor outline solid 2px rgb(43,63,47) offset 4px; index cell focus ring solid 2px; 300px scroll condenses the header (.jd-scrolled) and leaves the section top unchanged; 150% text scaling on every element: 0 overflow, 0 uneven rows, 0 clipped captions, cells 48x48 x3 + 110x48; a 600x900 portrait and a 900x600 3:2 swapped into items 2–3 hold 1.34; a video clone (nested .wow > .wow, 16:9 poster, fa-play) sits level with its row (331/331 at 768, 309/309 at 1280) with a 56px green play disc centred in the picture; N=14 tiles 4|4|4|2, level; a blank .col-lg-3 > .wow (a post with neither field) is display:none under the @supports guard and the rows stay 4|4|4|2. Lightbox clicked open at 375/768/1280: bg rgb(29,42,32) at .985, buttons 44x44 x4 on rgba(43,63,47,.88) with glyph fill rgb(203,178,121) (style.css:1932), arrows 70x100, thumbs 110/212 wide on rgb(43,63,47), thumb 95x75/100x75, active frame brass, caption Fraunces 17px cream, infobar cream blend normal, 0 overflow. WOW live: inline animation-name fadeIn re-applied by WOW, .animated .55s cubic-bezier(.2,.7,.2,1), 0 hidden after scroll. Reduced motion: 0 hidden, animation none, transitions none, hover static, lightbox opens and ArrowRight pages with 0s transitions. Print: margin-top 0, white, disc and index hidden, captions and numerals black, 0 hidden. Leakage: without body.page-id-18 the theme returns exactly. css-tree: 0 parse errors, 107 rules, 466 declarations, 0 empty, 0 max-width, 1 :has() (inside @supports), 8 flagged declarations, every selector rooted at .page-id-18. forced-colors could not be emulated in this puppeteer build; that block is reasoned, not measured. ========================================================================== */