/* ============================================================
   THE CATALOGUE — Eye Revolution component stylesheet.
   Ported into the live theme from the Catalogue handover
   (ThemeDev/EyeRevolution-Catalogue-Handover/, chosen 2026-06-11).
   Direction: light-first, photography full-bleed and square,
   Inter throughout (Playfair Display kept for archive/plate titles), one quiet gold, one dark
   "vitrine" moment, WCAG 2.2 AAA throughout.

   The palette + font stacks below ALIAS the theme.json preset
   custom properties, so theme.json is the single source of truth
   and the front end + block editor can never drift (house rule:
   no value drift between rendered and documented). Only the
   non-editor helpers (gold-soft / gold-lux / line) carry literal
   values, since they are not exposed in the palette. AAA ratios
   for the palette values are documented in the handover spec §2.
   ============================================================ */
:root{
  /* Aliased to the existing theme.json slug contract (the slugs the live content
     uses), redefined to Catalogue values — so the theme FORMATS existing content
     and the components share one source of truth. */
  --paper:var(--wp--preset--color--warm-white);
  --panel:var(--wp--preset--color--off-white);
  --vitrine:var(--wp--preset--color--charcoal-mid);
  --ink:var(--wp--preset--color--charcoal);
  --ink-2:var(--wp--preset--color--text-body);
  --ink-3:var(--wp--preset--color--text-muted);
  --gold:var(--wp--preset--color--gold-dark);
  --gold-display:var(--wp--preset--color--gold-light);
  --gold-line:var(--wp--preset--color--gold-mid);
  --gold-on-dark:#C0C0C0; /* component-only: small text on the dark band — AAA 8.28:1 */
  --gold-soft:#C0C0C0;    /* component-only: link underlines */
  --gold-lux:#C0C0C0;     /* component-only: dark-band button + focus-on-dark */
  --line:rgba(30,30,36,.13);
  --sans:var(--wp--preset--font-family--futura-pt,"Futura PT","Century Gothic",ui-sans-serif,system-ui,sans-serif);
  /* Will Pearson runs a single typeface. --serif is retained so existing
     component rules keep resolving; point it at a contrast face later if wanted. */
  --serif:var(--wp--preset--font-family--futura-pt,"Futura PT","Century Gothic",ui-sans-serif,system-ui,sans-serif);
  --wrap:1400px;
  /* WP doesn't generate custom props for digit-leading spacing slugs; the live
     content + templates use 2xl/3xl, so polyfill them (was in the old base.css). */
  --wp--preset--spacing--2xl:5rem;
  --wp--preset--spacing--3xl:7.5rem;
  /* ---------- spacing scale (8pt-rooted vertical rhythm) ----------
     One rhythm so every gap reads as deliberate, not incidental. The larger
     steps are fluid (clamp) so the layout breathes wider on desktop — the
     confidence of space — and tightens on mobile. Relational rule used
     throughout: bind a label to its subject with a SMALL step, separate groups
     with a LARGER one (gap-within < gap-between = Gestalt proximity). */
  --space-3xs:.5rem;                          /*  8 — inline / hairline      */
  --space-2xs:.75rem;                         /* 12 — caption↔image bind     */
  --space-xs:1rem;                            /* 16 — eyebrow↔title bind     */
  --space-sm:1.5rem;                          /* 24 — title↔standfirst       */
  --space-md:clamp(5rem,8vw,6.5rem);          /* 80–104 — block↔block, media (×2 type trial) */
  --space-lg:clamp(7rem,11vw,9.5rem);         /* 112–152 — heading-above (×2 type trial)     */
  --space-xl:clamp(5rem,9vw,8rem);            /* 80–128 — section padding    */
  --space-2xl:clamp(6.5rem,12vw,10rem);       /* 104–160 — hero / dark band  */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* AAA 2.4.13-friendly focus */
:focus:not(:focus-visible){outline:none} /* no ring for pointer users; keep it for keyboard */
.vitrine :focus-visible{outline-color:var(--gold-lux)}
.wp-block-cover :focus-visible{outline-color:var(--paper)} /* paper ring stays >=3:1 over any cover photo */
body{font-family:var(--sans);font-weight:300;font-size:clamp(16px,12px + 1.15vw,18.5px);line-height:2;letter-spacing:.03em;color:var(--ink-2);
  /* page ground is the off-white the original site uses; --paper (white) is kept
     for raised surfaces like the nav dropdown so they still lift off it */
  background:var(--panel);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* The page-load fade-in (body{animation:fadeIn}) was REMOVED 2026-06-13: an opacity
   animation on <body> promotes the whole page to a GPU compositing layer, which
   rasterises the inline-SVG eye-mark logos (masthead + footer) at the layer's
   backing-store resolution -> a soft, "squished bitmap" logo on HiDPI while text
   stays crisp. This was the long-running logo-pixelation cause. If a page fade is
   wanted again, scope it to a wrapper that does NOT contain the logos. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.entry-content p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:currentColor}
::selection{background:var(--gold-line);color:var(--ink)}

/* Legacy heading font-size slugs: WordPress kebab-cases the child's h1/h2 slugs
   to .has-h-1/.has-h-2, but some content uses the non-hyphen .has-h1/.has-h2
   forms (which WP never generates). Alias them to the same tokens so that
   content is formatted. Repair-only. */
.has-h1-font-size{font-size:var(--wp--preset--font-size--h-1)}
.has-h2-font-size{font-size:var(--wp--preset--font-size--h-2)}

/* WP integration essentials (ported from the retired base.css). */
.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.6rem 1.4rem;background:var(--ink);
  color:var(--paper);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;border-radius:0 0 4px 4px;transition:top .2s}
.skip-link:focus{top:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Existing-content contrast fixes — the live (Direction-C-authored) content baked
   some gold accents against the wrong ground; this re-applies the Direction-C AAA
   pass with Catalogue values, keyed to the stable section + background classes:
   gold-dark (AAA) on LIGHT, gold-on-dark on DARK. */
.process .has-gold-mid-color,.process .has-gold-light-color,
.process-sticky .has-gold-mid-color,.process-sticky .has-gold-light-color,
.step-num,.step-num em,
.has-off-white-background-color .has-gold-mid-color,
.has-off-white-background-color .has-gold-light-color{color:var(--gold)!important}
.why .has-gold-dark-color,.why-header .has-gold-dark-color,.why .has-gold-mid-color,.why .has-gold-light-color,
.has-charcoal-background-color .has-gold-dark-color,.has-charcoal-mid-background-color .has-gold-dark-color,
.has-charcoal-background-color .has-gold-mid-color,.has-charcoal-mid-background-color .has-gold-mid-color,
.has-charcoal-background-color .has-gold-light-color,.has-charcoal-mid-background-color .has-gold-light-color{color:var(--gold-on-dark)!important}
/* Cover blocks dim their ground with a CHILD .wp-block-cover__background layer, so the
   ancestor-keyed rule above can't see it (the bg class is a SIBLING of the text, not a
   parent). Catch gold accents inside a charcoal-dimmed cover here → gold-on-dark, which is
   9.06:1 on the #1E1E24 ground (AAA). (2026-06-18 AAA pass: the .s-cat eyebrow rendered as
   gold-mid #A8966A = 5.71:1 over the dark cover.) */
.wp-block-cover:has(> .wp-block-cover__background:is(.has-charcoal-background-color,.has-charcoal-mid-background-color)) :is(.has-gold-mid-color,.has-gold-light-color,.has-gold-dark-color){color:var(--gold-on-dark)!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.spine{max-width:864px;margin:0 auto;padding:0 32px}

.label{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.serif{font-family:var(--serif)}
.rule-gold{border:0;height:1px;background:var(--gold-line);opacity:.6}
.rule-hair{border:0;height:1px;background:var(--line)}
.rule-short{width:44px;margin:0 auto}

/* ---------- masthead (pattern A; nav = real DB-driven core/navigation menus) ---------- */
/* Masthead — 55px on the page's own ground, frosted.
   Matches the original site: a 55px bar on #f2f2f2 with backdrop-filter blur(15px).
   Sitting semi-transparent at all times gives the frost for free — at the top of the
   page the bar is over its own ground colour so it reads as solid, and once content
   scrolls beneath it the blur does the work. No scroll listener needed, which is how
   the original did it (.StickyHeader.scrolled).

   The donor theme carried a warning against ANY backdrop-filter in the masthead: it
   promotes the bar to its own GPU layer and rasterised their inline-SVG eye-mark at
   1x on HiDPI. That mark is gone — this site's logo is a 347x120 PNG shown at 140px,
   so it is downsampling from plenty of pixels and does not suffer the same way.
   Re-check on a retina screen if the wordmark ever looks soft. */
.masthead{position:sticky;top:0;z-index:70;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  border-bottom:0}
/* browsers without color-mix get the flat ground */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .masthead{background:var(--panel)}
}

/* Featured-image hero: sits flush beneath the masthead, matching the current live
   site. Core contributes a block-gap top margin to the first band after the header,
   and because the wrapping group has no padding that margin collapses through it —
   so zeroing it on the group alone does nothing. It has to be zeroed on the cover,
   The 55px offset comes from CSS injected into wp_head by a PLUGIN (the old
   site's stylesheet, see `<< CSS IS PLUGIN` in the previous child theme). It sets
   `.FeaturedCoverImage{margin-top:var(--header-h)!important}` where --header-h is
   55px — correct for the OLD `position:fixed` 55px header, wrong for this sticky
   91px one. Overridden here by specificity until that CSS is migrated out of the
   plugin and into this theme. */
.wp-site-blocks .FeaturedCoverImage{margin-top:0 !important;margin-block-start:0 !important}
/* NO backdrop-filter anywhere in the masthead (not on the bar, not on a pseudo):
   ANY backdrop-filter in the subtree forces the masthead onto a GPU layer that
   rasterises the inline-SVG eye-mark at 1x → the "downscaled / un-antialiased"
   logo on HiDPI screens. The bar is a clean translucent-paper layer instead, and
   the logo paints as crisp vector. (Opacity nudged .92→.96 to keep the bar solid
   now that there's no blur behind it.) */
.mh-top{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,3vw,32px);gap:18px;
  align-items:center;min-height:55px}
/* Live layout: logo hard left, burger hard right, nothing between.
   (The donor theme flanked a centred logo with two nav columns; Will Pearson's
   live site has no horizontal nav at all, so the mh-nav block is gone from
   parts/header.html and its rules below are inert — kept for now in case a
   desktop nav is reinstated.) */
.mh-top > .mh-logo{flex:0 0 auto;margin-right:auto}
.mh-top > .mh-burger{flex:0 0 auto;justify-content:flex-end}

/* centred eye-mark + wordmark lockup */
.mh-logo{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
/* 173px wide on a 347x120 source = 59.8px tall — the original site's logo size.
   The bar is sized by the logo rather than the reverse, so it settles at ~60px
   against the original's nominal 55px. Live actually renders the same 60px logo
   inside a force-height 55px bar, so the mark overflows the bottom there; with
   the ground uniform and the hairline gone that difference is not visible. */
.mh-logo img{display:block;width:173px;height:auto;object-fit:contain;object-position:left center}
.mh-mark{width:47px;height:auto;display:block}  /* width 47 + auto height = the old site's natural 47x48.42 (no forced/off-aspect box) */
.mh-wm{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);font-weight:400;text-indent:.34em;white-space:nowrap}

/* right text nav (HeaderContact menu, overlayMenu:never) */
.mh-nav .wp-block-navigation__container{gap:26px;flex-wrap:nowrap}
.mh-nav .wp-block-navigation-item__content{font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);padding:14px 2px}
.mh-nav .wp-block-navigation-item__content:hover{color:var(--gold);text-decoration:none}

/* ---------- desktop nav dropdowns ----------
   The donor theme's right-hand nav was a flat contact menu, so submenus were never
   styled. Will Pearson's menu has three (Portfolio, About, News & Articles), so they
   are styled here in the same language as the top level: paper panel, hairline rule,
   Futura, letter-spaced caps. Core owns the open/close behaviour (hover, click and
   keyboard via its Interactivity API) — this only dresses it.
   Contrast on paper: --ink-2 14.08:1, --gold 11.30:1. Both AAA.
   The selectors carry .mh-nav.wp-block-navigation deliberately: core's own submenu
   rules have the same four-class weight and are printed AFTER the theme stylesheet,
   so an equal-specificity rule here loses. The extra class wins it without
   !important. */
.masthead .mh-nav.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container{
  min-width:236px;padding:6px 0;left:0;top:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  box-shadow:0 12px 34px rgba(30,30,36,.10)}
/* tracking is tightened vs the top level — caps at 11px need less air when stacked */
.masthead .mh-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:flex;align-items:center;width:100%;
  font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);padding:13px 20px;min-height:44px;white-space:nowrap}
.masthead .mh-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  color:var(--gold);background:var(--panel);text-decoration:none}
.masthead .mh-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{
  outline:2px solid var(--ink);outline-offset:-2px}
/* the parent stays marked while its submenu is open */
.mh-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.mh-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content{
  color:var(--gold)}
/* core's dropdown arrow: match the text colour rather than sitting black */
.mh-nav .wp-block-navigation__submenu-icon svg{width:11px;height:11px}
/* Hide the contact links from tablet down (keep the flex slot so the logo stays centred);
   avoids the ~680-820px two-line wrap. The burger menu holds navigation below this width. */
@media (max-width:900px){.mh-top > .mh-nav .wp-block-navigation__container{display:none}}

/* left burger (main menu, overlayMenu:always) — Catalogue hamburger + slide-out */
.mh-burger .wp-block-navigation__responsive-container-open{color:var(--ink);padding:10px;min-width:44px;min-height:44px}
.mh-burger .wp-block-navigation__responsive-container-open svg{fill:var(--ink);width:32px;height:32px}
/* ---------- slide-out drawer (left) ----------
   WP toggles .is-menu-open (display:none -> flex) and owns the focus-trap, ESC and
   aria-modal via its Interactivity API — we only restyle + animate. The drawer is a
   third of the screen (full-width under 800px): a frosted white panel that eases in
   from the left, with the links arriving one at a time on an elastic curve.
   nav-overlay.js adds click-outside-to-close. */
/* The drawer is FULL height (operator request 2026-06-16): covers the whole viewport and
   sits above the sticky popup buttons (the .masthead z-index was lifted above them). */
.mh-burger .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;
  display:flex;justify-content:center;align-items:stretch;
  /* override WP's white overlay default so the page shows through on the right;
     the panel's own backdrop-filter then frosts the real page behind it. */
  padding:0;background:transparent!important;
  /* WP core runs overlay-menu__fade-in-animation on this container (it animates opacity +
     transform). A running/filling animation on those properties composites the element
     into its own isolated layer — a "backdrop-root" — which silently nullifies the panel's
     backdrop-filter below, so the frost never renders. Overriding only `transform` is NOT
     enough; the animation itself must go. Kill it outright (panel keeps its own
     mh-drawer-in slide, so the open still animates); force opacity:1 since the fade-in no
     longer supplies it (base state is opacity:0, which would itself be a backdrop-root);
     transform:none for good measure. !important to beat WP's animation/rules. 2026-06-23. */
  animation:none!important;opacity:1!important;transform:none!important}

/* the panel — full-bleed dark overlay, matching the current live site:
   rgba(37,37,37,.93) over a blur(20px) backdrop, links centred in the viewport. */
.mh-burger .is-menu-open .wp-block-navigation__responsive-close{
  position:relative;width:100%;min-width:0;max-width:none;height:100%;margin:0;
  background:rgba(37,37,37,.93);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-right:0;box-shadow:none;overflow-y:auto;
  animation:mh-overlay-in .34s ease both}
@keyframes mh-overlay-in{from{opacity:0}to{opacity:1}}
.mh-burger .is-menu-open .wp-block-navigation__responsive-dialog{
  min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(72px,9vh,104px) clamp(24px,3.4vw,60px)}

/* links: big serif, left-aligned, staggered elastic entrance */
/* The nav block carries justifyContent:right (so the burger sits hard right in the
   bar), which also puts .items-justified-right on the overlay's own container and
   pushes the links to the right edge. Inside the overlay they must be centred, so
   the class is answered directly here. gap:0 because the 50px line-height already
   supplies the rhythm — live measures 250px for five items, and a block-gap on top
   of that made it 336px. */
/* Core pads the content wrapper 56px at the top to clear its close button. Ours is
   absolutely positioned, so that padding only pushes the links 38px below centre —
   live centres them in the viewport. */
.mh-burger.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:0!important;padding-block-start:0!important;gap:0;row-gap:0}

.mh-burger .is-menu-open .wp-block-navigation__container,
.mh-burger .is-menu-open .wp-block-navigation__container.items-justified-right{
  flex-direction:column;align-items:center;justify-content:center;
  gap:0;row-gap:0;text-align:center}
/* Futura 36.8px/50px, weight 400, #F8F8F8 — measured off the live site. On #252525
   that is 12.9:1, AAA. Sentence case, near-zero tracking, exactly as live. */
.mh-burger .is-menu-open .wp-block-navigation-item__content{
  font-family:var(--sans);font-weight:400;font-size:clamp(26px,2.9vw,36.8px);letter-spacing:.0151em;
  line-height:50px;color:#F8F8F8;text-transform:none;padding:0 10px;display:inline-block;
  animation:mh-item-in .5s ease backwards}
.mh-burger .is-menu-open .wp-block-navigation-item__content:hover{color:#FFFFFF;text-decoration:none}
.mh-burger .is-menu-open .wp-block-navigation-item__content:focus-visible{outline:2px solid #F8F8F8;outline-offset:4px}
/* Sub-menus in the drawer (owner direction 2026-09-05): no arrows. The parent word is
   the control (nav-overlay.js swaps the link for a button; its page is reachable from
   the sub-menu, e.g. About Me). Open state is a short rule that grows beneath the word.
   The list folds open and closed on height + opacity — the script sets the pixel
   height so it can transition — and the items rise in one after another. One section
   open at a time. Core's chevron stays hidden; its toggle is pinned open in overlays. */
.mh-burger .is-menu-open .wp-block-navigation__submenu-icon{display:none}
.mh-burger .is-menu-open .wp-block-navigation-item.has-child{flex-direction:column;align-items:center;height:auto;flex:0 0 auto}
.mh-burger .is-menu-open .mh-sub-parent{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;position:relative}
.mh-burger .is-menu-open .mh-sub-parent::after{content:"";display:block;height:1px;width:0;margin:1px auto 0;
  background:#C0C0C0;transition:width .45s cubic-bezier(.2,.6,.2,1)}
.mh-burger .is-menu-open .mh-sub-open > .mh-sub-parent::after{width:28px}
/* These carry core's own six-class overlay selector so they outrank its height:auto /
   opacity:1 / visibility:visible for sub-menus inside an open overlay. */
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
  display:flex;flex-direction:column;align-items:center;position:static;
  min-width:0;width:auto;padding:0;margin:0;gap:0;overflow:hidden;
  background:none;border:0;box-shadow:none;color:inherit;
  flex:0 0 auto; /* the parent <li> is a column flex item; without this the list is shrunk to 0 */
  height:0;opacity:0;visibility:hidden;
  transition:height .45s cubic-bezier(.2,.6,.2,1),opacity .3s ease,visibility 0s linear .45s}
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.mh-sub-open > .wp-block-navigation__submenu-container{
  opacity:1;visibility:visible;
  transition:height .45s cubic-bezier(.2,.6,.2,1),opacity .35s ease .05s,visibility 0s}
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.mh-no-anim > .wp-block-navigation__submenu-container{transition:none}
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child{padding-top:6px}
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child{padding-bottom:14px}
.mh-burger .is-menu-open .mh-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content{
  animation:mh-item-in .45s ease backwards;animation-delay:calc(70ms * var(--i,0) + 60ms)}
.mh-burger .is-menu-open .mh-no-anim > .wp-block-navigation__submenu-container .wp-block-navigation-item__content{animation:none}
/* Six-class selector again: core pads sub-menu links .5em/1em at a 40px line inside an
   open overlay, which read as too much air between items (owner, 2026-09-05). */
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-size:clamp(17px,1.9vw,22px);line-height:30px;padding:2px 10px;margin:0;color:#C8C8C8;letter-spacing:.02em}
.mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > .wp-block-navigation-item{margin:0;padding:0}
.mh-burger .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{color:#FFFFFF}
/* Closing: the mirror of the opening. The script adds .mh-closing, waits for this to
   play, then lets core close the overlay. */
.mh-burger .is-menu-open.mh-closing .wp-block-navigation__responsive-close{animation:mh-overlay-out .3s ease both}
.mh-burger .is-menu-open.mh-closing .wp-block-navigation-item__content{animation:mh-item-out .25s ease both}
.mh-burger .is-menu-open.mh-closing .wp-block-navigation__responsive-container-close{animation:mh-close-out .3s ease both}
@keyframes mh-overlay-out{to{opacity:0}}
@keyframes mh-item-out{to{opacity:0;transform:translateY(8px)}}
@keyframes mh-close-out{to{opacity:0;transform:rotate(90deg) scale(.6)}}
.mh-burger .is-menu-open .wp-block-navigation-item__description{display:none}
@keyframes mh-item-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(1)>.wp-block-navigation-item__content{animation-delay:.20s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(2)>.wp-block-navigation-item__content{animation-delay:.28s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(3)>.wp-block-navigation-item__content{animation-delay:.36s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(4)>.wp-block-navigation-item__content{animation-delay:.44s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(5)>.wp-block-navigation-item__content{animation-delay:.52s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(6)>.wp-block-navigation-item__content{animation-delay:.60s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(7)>.wp-block-navigation-item__content{animation-delay:.68s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(8)>.wp-block-navigation-item__content{animation-delay:.76s}
.mh-burger .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item:nth-child(9)>.wp-block-navigation-item__content{animation-delay:.84s}

/* close button: spins in, then rotates into a gold disc on hover/focus */
.mh-burger .is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;color:#F8F8F8;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .25s,color .25s;
  animation:mh-close-in .55s cubic-bezier(.34,1.56,.64,1) .12s backwards}
.mh-burger .is-menu-open .wp-block-navigation__responsive-container-close svg{width:24px;height:24px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.mh-burger .is-menu-open .wp-block-navigation__responsive-container-close:hover,
.mh-burger .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible{background:rgba(255,255,255,.14);color:#FFFFFF;transform:rotate(90deg) scale(1.08)}
.mh-burger .is-menu-open .wp-block-navigation__responsive-container-close:hover svg{transform:scale(1.06)}
@keyframes mh-close-in{from{opacity:0;transform:rotate(-120deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}

/* full-width under 800 */
@media (max-width:800px){
  .mh-burger .is-menu-open .wp-block-navigation__responsive-close{width:100%;min-width:0;border-right:0}
}
/* reduced motion: arrive without the choreography */
@media (prefers-reduced-motion:reduce){
  .mh-burger .wp-block-navigation__responsive-container.is-menu-open,
  .mh-burger .is-menu-open .wp-block-navigation__responsive-close,
  .mh-burger .is-menu-open .wp-block-navigation-item__content,
  .mh-burger .is-menu-open .wp-block-navigation__responsive-container-close{animation:none}
  .mh-burger .is-menu-open .wp-block-navigation__responsive-container-close{transition:none}
  .mh-burger .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container,
  .mh-burger .is-menu-open .mh-sub-parent::after{transition:none}
  .mh-burger .is-menu-open .mh-sub-open > .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .mh-burger .is-menu-open.mh-closing .wp-block-navigation__responsive-close,
  .mh-burger .is-menu-open.mh-closing .wp-block-navigation-item__content,
  .mh-burger .is-menu-open.mh-closing .wp-block-navigation__responsive-container-close{animation:none}
}

/* When the drawer is open the masthead STAYS in place (operator request 2026-06-14):
   the drawer opens BELOW it (see top:var(--mh-h) above), so the logo, nav and frosted
   bar remain visible. We only hide the now-redundant burger — the open drawer carries
   its own close button, and nav-overlay.js closes on a backdrop click. :has() is a
   safe progressive enhancement; without it the burger simply stays too. */
.masthead:has(.is-menu-open) .mh-burger .wp-block-navigation__responsive-container-open{
  opacity:0;visibility:hidden;pointer-events:none}

/* ---------- masthead sub-row (brand guide §05) ----------
   The current section's child pages beneath a hairline; rendered by [er_subnav]
   and sitting inside the sticky masthead. Active only within a section. */
.mh-subnav{border-top:1px solid var(--line)}
.mh-subnav__inner{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mh-subnav__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;margin:0;padding:0}
.mh-subnav__list li{margin:0}
.mh-subnav__list a{display:inline-block;padding:11px 0;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .15s}
.mh-subnav__list a:hover{color:var(--gold)}
.mh-subnav__list .current-menu-item>a{color:var(--ink);position:relative}
.mh-subnav__list .current-menu-item>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
@media (max-width:680px){
  .mh-subnav__inner{padding:0 16px}
  .mh-subnav__list{justify-content:center;gap:4px 18px;flex-wrap:wrap}
  .mh-subnav__list a{white-space:nowrap}
}

/* ---------- hero ---------- */
.hero{text-align:center;padding:104px 32px 88px}
.hero .eb{color:var(--gold);display:block;margin-bottom:32px}
.hero h1{font-family:var(--sans);font-weight:400;font-size:clamp(40px,6.4vw,90px);line-height:1.02;
  letter-spacing:-.022em;color:var(--ink);font-optical-sizing:auto}
/* Titles carry no emphasis word (operator note 2026-06-11): any <em> in a
   heading inherits — never italic, never gold. The accent lives in eyebrows,
   plate numbers and rules, not inside the title itself. */
.hero h1 em,.hero--sub h1 em{font-style:normal;font-weight:inherit;color:inherit}
.hero .standfirst{font-size:18.5px;font-weight:300;color:var(--ink-2);max-width:46ch;margin:34px auto 0;line-height:1.7}
.hero .rule-short{margin-top:42px}
.hero--sub{padding:88px 32px 72px}
.hero--sub h1{font-size:clamp(32px,4.5vw,61px)}

/* ---------- plates (photography) ---------- */
.plate{margin:0;padding:0}
.plate .ph{position:relative;background:var(--ink);overflow:hidden}
.plate img{width:100%;object-fit:cover;display:block}
a.plate img{transition:transform .65s cubic-bezier(.2,.6,.2,1)}
a.plate:hover img{transform:scale(1.02)}
.plate.full img{max-height:86vh}
.badge-360{position:absolute;right:24px;bottom:22px;width:58px;height:58px;border:1px solid rgba(255,255,255,.75);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;
  letter-spacing:.05em;background:var(--vitrine)} /* AAA: solid disc, 13.9:1 regardless of the photograph behind */

/* tombstone label with photo-mount corners */
.tomb{position:relative;display:block;max-width:560px;margin:32px auto 0;padding:25px 36px 27px;text-align:center}
.tomb::before,.tomb::after,.tomb .c::before,.tomb .c::after{content:"";position:absolute;width:14px;height:14px;
  border-color:var(--gold-line);border-style:solid;opacity:.85}
.tomb::before{top:0;left:0;border-width:1px 0 0 1px}
.tomb::after{top:0;right:0;border-width:1px 1px 0 0}
.tomb .c::before{bottom:0;left:0;border-width:0 0 1px 1px}
.tomb .c::after{bottom:0;right:0;border-width:0 1px 1px 0}
.tomb .no{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--gold);margin-bottom:9px}
.tomb .ti{display:block;font-family:var(--serif);font-weight:500;font-size:29px;letter-spacing:-.005em;color:var(--ink);line-height:1.14}
.tomb .meta{display:block;margin-top:11px;font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
a.plate:hover .tomb .ti{color:var(--gold)}

/* paired / gridded plates */
.plates-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.plates-pair .plate .ph,.plates-grid .plate .ph{aspect-ratio:4/3}
.plates-pair .plate img,.plates-grid .plate img{height:100%}
.plates-pair .tomb,.plates-grid .tomb{max-width:460px;padding:21px 28px 23px}
.plates-pair .tomb .ti,.plates-grid .tomb .ti{font-size:23px}
.plates-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 30px}

/* Print section on photography posts — the .com print-shop content folded into the
   image pages (first page: London from the Leadenhall). Reuses .sec-head/.plates-pair/
   .specs; the in-situ product shots are wide interiors, so widen the pair's 4:3 crop,
   and the three spec rows read better as one centred column than the pattern's two. */
.print-section{background:#ECE9E4} /* warm grey, distinct from the --panel #F2F2F2 page ground */
/* (the print-section wide re-cap that lived here moved to blocks.css on 2 Sep 2026 —
   wide is now honoured at the theme.json wideSize (1400px) site-wide, so the special case is redundant) */
.print-section .plate-hero{margin-top:14px} /* matches the pair gutter — reads as one mosaic (owner reordered: pair first, hero below) */
/* Gentle cast shadow under the hero plate ("a bit more dimension"). Pure CSS, no JS:
   a static edge shadow everywhere, plus — where scroll-driven animations exist — a soft
   ellipse that drifts as the plate crosses the viewport. Transform/opacity only, so it
   stays on the compositor; reduced motion gets the static version. */
.print-section .plate-hero{position:relative}
.print-section .plate-hero .ph{box-shadow:0 1px 2px rgba(30,30,36,.10),0 14px 34px -14px rgba(30,30,36,.22)}
.print-section .plate-hero::after{content:"";position:absolute;left:3%;right:3%;bottom:-30px;height:52px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(30,30,36,.55),transparent 72%);
  filter:blur(7px);opacity:.7;pointer-events:none}
@supports (animation-timeline:view()){
  /* named timeline on the plate, consumed by the pseudo — an anonymous view() declared
     ON the ::after never advances in Chrome (tested live 1 Sep 2026), the named form does */
  .print-section .plate-hero{view-timeline:--wp-plate-view}
  .print-section .plate-hero::after{animation:wp-plate-shadow linear both;animation-timeline:--wp-plate-view;animation-range:entry 20% exit 80%}
}
@keyframes wp-plate-shadow{
  from{opacity:1;transform:translateY(26px) scaleX(.90)}
  to{opacity:.15;transform:translateY(-14px) scaleX(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .print-section .plate-hero::after{animation:none}
}
.print-section .plates-pair .plate .ph{aspect-ratio:16/9}
.print-section .specs{grid-template-columns:1fr;max-width:720px;margin-top:clamp(48px,6vw,72px)}
/* the single-post content sheet zeroes p margins, which kills .specs-note's auto centring */
.print-section .specs-note{margin-left:auto;margin-right:auto}
/* Gutenberg-native build shims. The section is authored as core group/image/paragraph
   blocks (owner wants it editable, not a wp:html blob), which changes three things:
   1) core blocks can't emit the bare .c span the tombstone's bottom corner ticks hang
      on — draw that pair from .meta's pseudos instead;
   2) the zero-blockGap containers and the post-content p reset flatten the tombstone
      and note margins — re-assert them at .print-section specificity;
   3) images arrive wrapped in figure.wp-block-image — neutralise its own box. */
.print-section .tomb .meta::before,.print-section .tomb .meta::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold-line);border-style:solid;opacity:.85}
.print-section .tomb .meta::before{bottom:0;left:0;border-width:0 0 1px 1px}
.print-section .tomb .meta::after{bottom:0;right:0;border-width:0 1px 1px 0}
.print-section .tomb{margin-top:32px}
.print-section .tomb .no{margin-bottom:9px}
.print-section .tomb .meta{margin-top:11px}
.print-section .specs-note{margin-top:44px}
.print-section .wp-block-image{margin:0}
.print-section .plate-anatomy{margin-top:clamp(48px,6vw,72px)} /* acrylic cross-section below the ordering note */
/* the global mobile collapse hides .spec-row p (fine for the services list, where the
   names stand alone) — here the descriptions ARE the data (size, formats, date), so
   keep them and let each wrap under its name. .no/.nm are paragraphs in the Gutenberg
   build, so exempt them from the full-width wrap or the row stacks three deep */
@media (max-width:680px){
  .print-section .spec-row{flex-wrap:wrap}
  .print-section .spec-row p{display:block}
  .print-section .spec-row p:not(.no):not(.nm){flex-basis:100%;margin-top:4px}
}

/* curated home "Plates" block ([eyerev_plates ids="…"]) — reuses .plate/.tomb/.plates-pair.
   Breaks out of the 800px content column to full-bleed (contained by the global
   .wp-site-blocks overflow-x:clip); the inner .wrap re-constrains content to the 1400px
   wide width. a.plate must be block (the hero plate is a bare anchor, not a grid item). */
.eyerev-plates{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
a.plate{display:block}
.eyerev-plates .plates-pair{margin-top:clamp(40px,5vw,64px)}
/* panoramic 16:9 crop for every plate image in this block (the hero has no aspect-ratio by
   default, and the pair would otherwise be the global 4:3); object-fit:cover does the crop. */
.eyerev-plates .plate .ph{aspect-ratio:16/9}
.eyerev-plates .plate img{height:100%}
.eyerev-plates__h{text-align:center;margin:0 0 clamp(30px,4vw,48px);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- portfolio "The Plates" (template portfolio.html → page "Our Portfolio") ----------
   The page already renders a Query Loop of the real Portfolio-category posts
   (each = a linked featured image + a linked title.folio-title). This FORMATS that
   existing content into the Catalogue plates grid — no plate markup is invented;
   the posts ARE the plates. Scoped to .folio so the blog/journal lists are untouched.
   The mount-corners are drawn with eight corner-gradient slivers on one element
   (the .tomb pattern needs a .c span for its lower pair; the WP title has no .c). */
.folio .wp-block-query{margin-block:clamp(40px,5vw,72px)}
.folio .wp-block-post-template{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,72px) 30px;
  margin:0;list-style:none;counter-reset:plate}
.folio .wp-block-post-template > li{counter-increment:plate;margin:0;max-width:none}
.folio .wp-block-post-template > li:first-child{grid-column:1 / -1}

/* the photo mount */
.folio .wp-block-post-featured-image{
  position:relative;margin:0;overflow:hidden;background:var(--ink);aspect-ratio:16/9!important}
.folio .wp-block-post-template > li:first-child .wp-block-post-featured-image{aspect-ratio:16/9!important}
.folio .wp-block-post-featured-image a{display:block;width:100%;height:100%}
.folio .wp-block-post-featured-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.folio .wp-block-post-template > li:hover .wp-block-post-featured-image img{transform:scale(1.02)}
/* (360 disc on the featured plate removed 2026-06-14 per operator — it's a photography
   portfolio, not a tour, so the 360 badge was misleading on the lead image) */

/* the tombstone label — overrides the block's inline type, then draws the corners */
.folio .folio-title{
  position:relative;display:block!important;max-width:460px!important;
  margin:28px auto 0!important;padding:22px 30px 24px!important;text-align:center!important;
  font-family:var(--serif)!important;font-style:normal!important;font-weight:500!important;
  font-size:23px!important;line-height:1.14!important;letter-spacing:-.005em!important;
  text-transform:none!important;color:var(--ink)!important;
  background-image:linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line));
  background-repeat:no-repeat;
  background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}
.folio .wp-block-post-template > li:first-child .folio-title{
  max-width:560px!important;padding:25px 36px 27px!important;font-size:29px!important}
.folio .folio-title::before{
  content:"Plate " counter(plate,upper-roman);display:block;
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--gold);
  margin-bottom:9px;letter-spacing:normal;text-transform:none}
.folio .folio-title a{color:inherit!important;text-decoration:none!important}
.folio .wp-block-post-template > li:hover .folio-title{color:var(--gold)!important}

section.gap{padding:110px 0}
section.gap-sm{padding:84px 0}

/* ---------- section heads ---------- */
.sec-head{text-align:center;margin-bottom:62px}
.sec-head .eb{color:var(--gold);display:block;margin-bottom:22px}
.sec-head h2{font-family:var(--sans);font-weight:500;font-size:clamp(32px,4.2vw,54px);line-height:1.08;
  letter-spacing:-.015em;color:var(--ink);max-width:20ch;margin:0 auto;font-optical-sizing:auto}
.sec-head h2 em{font-style:normal;font-weight:inherit;color:inherit}
/* a sec-head authored as blocks inside post content: the post-content sheet styles
   h2.wp-block-heading at (0,2,1), which outranks .sec-head h2 — re-assert the display
   style (this is why the wp:html version never showed the problem: no block class) */
.wp-block-post-content .sec-head h2.wp-block-heading{font-weight:500;font-size:clamp(32px,4.2vw,54px);line-height:1.08;letter-spacing:-.015em;max-width:none;margin:0 auto}
/* no prose measure inside a sec-head: the 645px cap boxed the eyebrow into the left of
   the wide group (its text centred within the capped box, not the group) — the group's
   own none/wide/full alignment is the width control, children just fill it */
.wp-block-post-content .sec-head p{max-width:none;margin-left:auto;margin-right:auto}
.sec-head .rule-short{margin-top:30px}

/* ---------- foreword / prose ---------- */
.foreword{text-align:left}
.foreword .eb{color:var(--gold);display:block;margin-bottom:26px}
.foreword h2{font-family:var(--sans);font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.12;letter-spacing:-.015em;color:var(--ink);max-width:34ch;margin:0}
.foreword h2 em{font-style:normal;font-weight:inherit;color:inherit}
.foreword p{font-size:18.5px;line-height:1.74;max-width:58ch;margin:28px 0 0}
.foreword .sign{margin-top:30px;font-family:var(--sans);font-style:italic;font-size:19px;color:var(--ink-3)}

/* ---------- provenance ---------- */
.provenance{background:var(--panel)}
.prov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:58px}
.prov{padding:0 30px;text-align:center}
.prov + .prov{border-left:1px solid var(--line)}
.prov .n{font-family:var(--sans);font-weight:500;font-size:clamp(36px,3.8vw,52px);line-height:1;color:var(--ink);
  font-variant-numeric:oldstyle-nums;font-optical-sizing:auto}
.prov .n em{font-style:italic;color:var(--gold-display)} /* large text: 4.5:1 tier */
.prov .l{margin-top:14px}
.prov .l span{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.prov-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin-top:60px;padding-top:32px;border-top:1px solid var(--gold-line)}
.prov-roster span{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.prov-roster i{font-style:normal;color:var(--gold-line);font-size:10px;align-self:center}

/* ---------- spec rows (services / method) ---------- */
.specs{max-width:980px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
.spec-row{display:flex;align-items:baseline;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}
.spec-row .no{font-family:var(--sans);font-style:italic;font-size:16px;color:var(--gold);flex:0 0 34px}
.spec-row .nm{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:0 0 auto;min-width:172px}
.spec-row p{font-size:14px;line-height:1.5;color:var(--ink-3)}
.specs-note{text-align:center;margin-top:44px;font-family:var(--sans);font-style:italic;font-size:19px;color:var(--ink-3);max-width:64ch;margin-left:auto;margin-right:auto} /* keep the measure inside 80ch (1.4.8) */
.specs-note a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.specs-note a:hover{border-color:var(--gold)}
.specs--method .nm{min-width:150px}

/* ---------- industries (sector index) ----------
   A hairline grid of the sectors we work across; each cell links to its hub.
   Editorial touches: an italic gold plate-numeral per cell (CSS counter), the name
   golding + an arrow sliding in, and a gold accent bar drawing along the base on
   hover. Resting state is ink-on-paper (AAA); focus keeps the global gold outline. */
.industries .ind-intro{max-width:60ch;margin:22px auto 0;text-align:center;font-family:var(--sans);font-style:italic;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink-3)}
.ind-grid{counter-reset:ind;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,4vw,58px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ind-cell{counter-increment:ind;position:relative;display:flex;align-items:baseline;gap:15px;padding:27px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .25s}
.ind-cell::before{content:counter(ind,decimal-leading-zero);flex:0 0 auto;font-family:var(--sans);font-style:italic;font-size:15px;line-height:1.5;color:var(--gold);opacity:.8;transition:opacity .25s}
.ind-cell .nm{font-family:var(--sans);font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.005em;line-height:1.18;color:var(--ink);transition:color .25s}
.ind-cell .ar{margin-left:auto;align-self:center;flex:0 0 auto;font-size:15px;color:var(--gold);opacity:0;transform:translateX(-7px);transition:opacity .25s,transform .25s}
.ind-cell::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);transition:width .35s cubic-bezier(.2,.6,.2,1)}
.ind-cell:hover,.ind-cell:focus-visible{background:var(--panel)}
.ind-cell:hover .nm,.ind-cell:focus-visible .nm{color:var(--gold)}
.ind-cell:hover .ar,.ind-cell:focus-visible .ar{opacity:1;transform:none}
.ind-cell:hover::before,.ind-cell:focus-visible::before{opacity:1}
.ind-cell:hover::after,.ind-cell:focus-visible::after{width:100%}
.ind-all{text-align:center;margin-top:clamp(34px,3.4vw,46px)}
.ind-all a{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--gold-soft);padding-bottom:3px;transition:color .2s,border-color .2s}
.ind-all a:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:820px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ind-grid{grid-template-columns:1fr}}

/* ---------- appraisals ---------- */
.appraisals{max-width:880px;margin:0 auto;padding:0 32px;text-align:center}
.appraisal{padding:42px 0}
.appraisal + .appraisal{border-top:1px solid var(--line)}
.appraisal blockquote{font-family:var(--sans);font-style:italic;font-weight:400;font-size:clamp(23px,2.8vw,32px);line-height:1.32;color:var(--ink)}
.appraisal .cite{margin-top:20px;font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.appraisal .cite::before{content:"";display:block;width:30px;height:1px;background:var(--gold-line);margin:0 auto 16px}

/* ---------- index of fields ---------- */
.fields{text-align:center;padding:0 32px}
.fields .eb{color:var(--gold);display:block;margin-bottom:24px}
.fields .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;max-width:820px;margin:0 auto}
.fields .row span{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.fields .row i{font-style:normal;color:var(--gold-line);font-size:10px;align-self:center}

/* ---------- vitrine (the one dark moment) ---------- */
.vitrine{background:var(--vitrine);color:#EAE6DD;text-align:center;padding:clamp(96px,12vw,148px) 32px}
.vitrine .eb{color:var(--gold-lux);display:block;margin-bottom:30px}
.vitrine h2{font-family:var(--sans);font-weight:500;font-size:clamp(34px,4.6vw,58px);line-height:1.12;
  letter-spacing:-.015em;color:#F4F0E7;max-width:20ch;margin:0 auto}
.vitrine h2 em{font-style:normal;font-weight:inherit;color:inherit}
.vitrine .addr{margin-top:30px;font-size:15px;line-height:1.9;color:rgba(234,230,221,.8)} /* AAA: 8.8:1 on vitrine */
.vitrine .addr b{color:#EAE6DD;font-weight:400}
.btn-vitrine{display:inline-block;margin-top:40px;border:1px solid var(--gold-lux);color:var(--gold-lux);
  font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:17px 44px;transition:.22s}
.btn-vitrine:hover{background:var(--gold-lux);color:var(--vitrine)}
.vitrine .fine{margin-top:52px;font-family:var(--sans);font-style:italic;font-size:16px;color:rgba(234,230,221,.8)} /* AAA: was .5 alpha at 4.3:1 */

/* ---------- enquiry form (the vitrine, as a contact transaction) ---------- */
.enquiry{background:var(--vitrine);color:#EAE6DD;padding:clamp(74px,9vw,118px) 0}
.enquiry :focus-visible{outline:2px solid var(--gold-on-dark);outline-offset:4px}
.enq-head{text-align:center;margin-bottom:56px}
.enq-head .eb{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-on-dark);display:block;margin-bottom:18px}
.enq-head h2{font-family:var(--sans);font-weight:500;font-size:clamp(34px,4.6vw,58px);line-height:1.1;letter-spacing:-.015em;color:#F4F0E7;max-width:18ch;margin:0 auto;font-optical-sizing:auto}
.enq-head .standfirst{font-size:17px;line-height:1.7;color:rgba(234,230,221,.82);max-width:50ch;margin:24px auto 0}
.enq-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:62px;align-items:start;max-width:1040px;margin:0 auto}
form.enq{display:grid;gap:25px}
.field{display:grid;gap:9px}
.field label{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#EAE6DD}
.field label .rn{color:var(--gold-on-dark);font-family:var(--sans);font-style:italic;text-transform:none;letter-spacing:0;margin-right:10px;font-size:15px}
.field label .opt{color:rgba(234,230,221,.82);font-weight:400;letter-spacing:.02em;text-transform:none;margin-left:8px} /* AAA: 9.0:1 (was .62 at 5.8:1) */
.field input,.field select,.field textarea{background:rgba(255,255,255,.03);border:0;
  border-bottom:1px solid rgba(214,189,132,.5);color:#F8F5EE;font-family:var(--sans);font-size:16px;
  padding:11px 4px;width:100%;transition:border-color .2s,background .2s;border-radius:0}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D6BD84' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.field select option{color:#1B1B1E;background:#FAFAF7} /* native list is light */
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgba(214,189,132,.8)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold-on-dark);background:rgba(255,255,255,.05)}
.field .req{color:var(--gold-on-dark);margin-left:4px}
.enq-submit{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.btn-send{display:inline-block;background:var(--gold-lux);color:var(--vitrine);font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:16px 40px;border:0;
  cursor:pointer;transition:.18s}
.btn-send:hover{background:#D6BD84}
.enq-fine{font-size:13px;color:rgba(234,230,221,.72)}
.enq-aside{border-left:1px solid rgba(214,189,132,.3);padding-left:42px}
.enq-aside h2{font-family:var(--sans);font-style:italic;font-weight:400;font-size:21px;color:var(--gold-on-dark);margin-bottom:18px}
.enq-aside .line{font-size:15px;line-height:1.85;color:rgba(234,230,221,.86)}
.enq-aside .line a{color:#F4F0E7;border-bottom:1px solid rgba(214,189,132,.4)}
.enq-aside .line a:hover{border-color:var(--gold-on-dark)}
.enq-aside .sub{margin-top:30px;padding-top:24px;border-top:1px solid rgba(214,189,132,.3)}
.enq-aside .sub h3{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#EAE6DD;margin-bottom:16px}
.enq-next{display:grid;gap:15px}
.enq-next li{list-style:none;display:flex;gap:14px;font-size:14.5px;line-height:1.5;color:rgba(234,230,221,.84)}
.enq-next li .n{font-family:var(--sans);font-style:italic;color:var(--gold-on-dark);flex:0 0 auto}
.enq-done{display:none;text-align:center;max-width:46ch;margin:0 auto}
.enq-done.is-on{display:block}
.enq-grid.is-sent{display:none}
.enq-done h2{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3.4vw,40px);color:#F4F0E7;letter-spacing:-.01em}
.enq-done p{font-size:16px;line-height:1.7;color:rgba(234,230,221,.84);margin-top:18px}
.enq-done .mk{width:40px;height:41px;margin:0 auto 26px;opacity:.9}

/* ---------- enquiry form, LIGHT variant (calm form on the warm panel; alt to the dark vitrine) ----------
   Reuses the same .field / .enq-* structure; only re-tones colours for a light ground. All AAA on #F4F1EA. */
.enquiry-light{background:var(--panel);color:var(--ink-2);padding:clamp(64px,8vw,104px) 0}
.enquiry-light :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.enquiry-light .enq-head .eb{color:var(--gold)}
.enquiry-light .enq-head h2{color:var(--ink)}
.enquiry-light .enq-head .standfirst{color:var(--ink-2)}
.enquiry-light .field label{color:var(--ink)}
.enquiry-light .field label .rn{color:var(--gold)}
.enquiry-light .field label .opt{color:var(--ink-3)}
.enquiry-light .field input,.enquiry-light .field select,.enquiry-light .field textarea{
  background-color:rgba(255,255,255,.55);border-bottom:1px solid var(--gold-line);color:var(--ink)} /* background-color, NOT background, so the select chevron's no-repeat survives */
.enquiry-light .field input:hover,.enquiry-light .field select:hover,.enquiry-light .field textarea:hover{border-bottom-color:var(--gold)}
.enquiry-light .field input:focus,.enquiry-light .field select:focus,.enquiry-light .field textarea:focus{
  border-bottom-color:var(--gold);background-color:#fff}
.enquiry-light .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C4E24' stroke-width='1.4'/%3E%3C/svg%3E")}
.enquiry-light .field select option{color:var(--ink);background:var(--paper)}
.enquiry-light .field .req{color:var(--gold)}
.enquiry-light .btn-send{background:var(--ink);color:var(--paper)}
.enquiry-light .btn-send:hover{background:#000}
.enquiry-light .enq-fine{color:var(--ink-3)}
.enquiry-light .enq-aside{border-left-color:var(--line)}
.enquiry-light .enq-aside h2{color:var(--gold)}
.enquiry-light .enq-aside .line{color:var(--ink-2)}
.enquiry-light .enq-aside .line a{color:var(--ink);border-bottom-color:var(--gold-line)}
.enquiry-light .enq-aside .line a:hover{border-color:var(--gold)}
.enquiry-light .enq-aside .sub{border-top-color:var(--line)}
.enquiry-light .enq-aside .sub h3{color:var(--ink)}
.enquiry-light .enq-next li{color:var(--ink-2)}
.enquiry-light .enq-next li .n{color:var(--gold)}
.enquiry-light .enq-done h2{color:var(--ink)}
.enquiry-light .enq-done p{color:var(--ink-2)}

/* ---------- buttons / inline links (light context) ---------- */
.btn-cat{display:inline-block;border:1px solid var(--ink);color:var(--ink);background:transparent;
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:15px 36px;transition:.2s}
.btn-cat:hover{background:var(--ink);color:var(--paper)}
a.inline{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
a.inline:hover{border-color:var(--gold)}

/* ---------- case study ---------- */
.case-hero{text-align:center;padding:88px clamp(20px,3.9vw,50px) 0}
.case-hero .eb{color:var(--gold);display:block;margin-bottom:28px}
.case-hero h1{font-family:var(--sans);font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.3;
  letter-spacing:.014em;color:var(--ink);max-width:none;margin:0 auto}
.case-hero h1 em{font-style:normal;font-weight:inherit;color:inherit}
.case-hero .cta{margin:34px 0 56px}
.figcap{text-align:center;font-family:var(--sans);font-style:italic;font-size:14.5px;color:var(--ink-3);padding:12px 32px 0}
.figcap b{color:var(--gold);font-weight:400}

/* the ledger: museum-label provenance table */
.ledger{position:relative;max-width:640px;margin:0 auto;padding:34px 44px 38px;text-align:left}
.ledger::before,.ledger::after,.ledger .c::before,.ledger .c::after{content:"";position:absolute;width:16px;height:16px;
  border-color:var(--gold-line);border-style:solid;opacity:.85}
.ledger::before{top:0;left:0;border-width:1px 0 0 1px}
.ledger::after{top:0;right:0;border-width:1px 1px 0 0}
.ledger .c::before{bottom:0;left:0;border-width:0 0 1px 1px}
.ledger .c::after{bottom:0;right:0;border-width:0 1px 1px 0}
.ledger h3{font-family:var(--sans);font-style:italic;font-weight:400;font-size:17px;color:var(--gold);text-align:center;margin-bottom:18px}
.ledger dl{display:grid;grid-template-columns:auto 1fr;gap:0 28px}
.ledger dt{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);padding:10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ledger dd{font-family:var(--sans);font-size:16.5px;color:var(--ink);padding:8px 0 10px;border-bottom:1px solid var(--line)}
.ledger dt:last-of-type,.ledger dd:last-of-type{border-bottom:0}

/* case body prose.
   The reading column is the layout system's job, not this rule's. post-content
   inside .textspine is a constrained container, so WordPress gives its children
   contentSize (800px, the same column this used to clamp at 864px minus its own
   32px gutters) and lets an align:wide block reach wideSize (1400px). Clamping
   .textspine here would cap that wide block back to the reading width, so the
   wrapper now only centres. Side gutters come from the constrained container's
   own has-global-padding (28px, the root padding), which is why this no longer
   sets padding — setting both would double the gutter. */
.textspine{margin:0 auto}
/* Let full-bleed media (galleries, cover images) escape the reading column.
   Naming post-content in the selector is deliberate: core emits
   .has-global-padding > .alignfull{margin-inline:-28px} at the same specificity
   as a bare .textspine .alignfull, so which one wins would come down to
   stylesheet order. The extra class settles it. Both rules land on the same
   edge anyway — this only removes the tie — and the descendant combinator also
   catches an alignfull nested inside a group, which core's child combinator
   does not. */
.textspine .wp-block-post-content .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* Contain the ~scrollbar-width overflow that 100vw full-bleed creates (clip, not hidden,
   so position:sticky on the masthead is unaffected). */
.wp-site-blocks{overflow-x:clip}
.textspine.pad{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(56px,8vw,100px)}
.textspine h3{font-family:var(--sans);font-weight:500;font-size:clamp(25px,2.8vw,33px);letter-spacing:-.012em;color:var(--ink);margin:54px 0 6px}
.textspine h3:first-child{margin-top:0}
.textspine p{font-size:18px;line-height:1.72;margin-top:20px}
.textspine h3 + p{margin-top:14px}

/* full-bleed rhythm */
.bleed-img{display:block;width:100%;margin:0}
.bleed-img img{display:block;width:100%;max-height:88vh;object-fit:cover}
.bleed-grid{display:grid;gap:12px;width:100%}
.bleed-grid.two{grid-template-columns:1fr 1fr}
.bleed-grid .media{aspect-ratio:3/2;background:var(--ink);overflow:hidden}
.bleed-grid .media img{width:100%;height:100%;object-fit:cover}

/* post tags — a delicate centred row above the prev/next (single posts). The
   core/post-terms block renders nothing when a post has no tags, so the "Tagged"
   label (::before) and the row only appear when there are tags. */
.post-tags.wp-block-post-terms{max-width:980px;margin:0 auto;padding:clamp(40px,4.5vw,56px) 32px clamp(30px,3.2vw,38px);
  display:flex;flex-wrap:wrap;gap:9px}
.post-tags a{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:9px 17px;
  text-decoration:none;transition:border-color .15s,color .15s}
.post-tags a:hover{border-color:var(--gold);color:var(--gold)}

/* prev / next plates */
.prevnext{display:flex;justify-content:space-between;gap:20px;max-width:980px;margin:0 auto;
  padding:clamp(30px,3.2vw,38px) 32px clamp(30px,3.2vw,38px);border-top:1px solid var(--line)}
.prevnext a:hover .t{color:var(--gold)}
.prevnext .lbl{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.prevnext .t{font-family:var(--sans);font-size:19px;color:var(--ink);transition:color .18s}
.prevnext a:last-child{text-align:right}

/* single post: full-bleed featured image + WP prev/next links */
.single-hero-img{margin:48px 0 0}
.single-hero-img img{width:100%;max-height:80vh;object-fit:cover}

/* virtual-tour CTA on portfolio posts (the [eyerev_project_url] button) */
.tour-cta{text-align:center;margin:38px 0 4px}
.tour-cta__btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;padding:15px 30px;border-radius:8px;
  text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s}
.tour-cta__btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 7px 22px rgba(27,27,30,.2)}
.tour-cta__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.prevnext .wp-block-post-navigation-link a{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .15s}
.prevnext .wp-block-post-navigation-link a:hover{color:var(--gold)}
.prevnext .pn-prev a::before{content:"\2190";margin-right:.55em;text-decoration:none}
.prevnext .pn-next a::after{content:"\2192";margin-left:.55em;text-decoration:none}
.prevnext .pn-next{text-align:right}

/* ---------- generic WP templates: page title band + journal/archive list ---------- */
/* horizontal padding matches the root inset so the title lands on the same wide
   measure as everything else (1165px at 1280) */
.page-head{text-align:center;padding:clamp(64px,8vw,100px) clamp(20px,3.9vw,50px) clamp(36px,5vw,52px)}
.page-head .eb,.page-head .label{color:var(--gold);display:block;margin-bottom:22px}
/* No max-width: the original runs the page title across the full wide measure and
   keeps it on one line. A 24ch cap (689px at 48px) was wrapping it to two. */
.page-head h1,.page-head .wp-block-post-title,.page-head .wp-block-query-title{font-family:var(--sans);font-weight:300;font-size:clamp(28px,4vw,52px);line-height:1.3;letter-spacing:.014em;color:var(--ink);max-width:none;margin:0 auto}
.page-head .wp-block-post-excerpt,.page-head .standfirst{font-size:18px;font-weight:300;color:var(--ink-2);max-width:56ch;margin:22px auto 0;line-height:1.7}
/* archive/category opening paragraph (term description) — contained ~800px measure
   (was the full --wrap 1400px, which gave a 150+ char run-on line) */
.page-head .wp-block-term-description{font-size:18px;font-weight:300;color:var(--ink-2);max-width:800px;margin:22px auto 0;line-height:1.7;text-align:left}
/* uniform rhythm: same 22px gap below the h1 (the div margin) and between paragraphs
   (the core term-description style zeroes <p> margins, so multi-para intros ran together) */
.page-head .wp-block-term-description p + p{margin-top:22px}

.journal{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,64px) 32px clamp(64px,8vw,96px)}
.journal .wp-block-post-template{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,72px) 30px;margin:0;list-style:none}
.journal .wp-block-post-template > li{margin:0}  /* WP's flow-layout adds block-gap as margin-block-start on non-first items, shoving the right grid cell ~20px down; grid gap handles spacing */
.journal-item{margin:0;padding:0;border:0;max-width:none}
/* the photo mount — matches the portfolio plates */
.journal-item .wp-block-post-featured-image{
  position:relative;margin:0;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.journal-item .wp-block-post-featured-image a,
.journal-item .wp-block-post-featured-image img{display:block;width:100%;height:100%}
.journal-item .wp-block-post-featured-image img{object-fit:cover;transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.journal-item:hover .wp-block-post-featured-image img{transform:scale(1.02)}
/* tombstone title with the gold photo-mount corners (eight gradient slivers) */
.journal-item .wp-block-post-title{
  position:relative;max-width:460px;margin:26px auto 0;padding:21px 28px 23px;text-align:center;
  font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.16;letter-spacing:-.005em;color:var(--ink);
  background-image:linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line)),linear-gradient(var(--gold-line),var(--gold-line));
  background-repeat:no-repeat;
  background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}
.journal-item .wp-block-post-title a{color:inherit;text-decoration:none}
.journal-item:hover .wp-block-post-title{color:var(--gold)}
.journal-item .wp-block-post-excerpt{max-width:460px;margin:14px auto 0;text-align:center;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.journal-item .wp-block-post-excerpt__more-link{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.journal .wp-block-query-pagination{display:flex;gap:18px;justify-content:center;margin-top:48px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.journal .wp-block-query-pagination a:hover{color:var(--gold)}
.journal .wp-block-search{max-width:480px;margin:0 auto clamp(32px,4vw,48px)}

/* ---------- footer ----------
   Rebuilt 2026-08-25; typography and spacing reworked 2026-08-25 (second pass).

   The problem with the first pass (which mirrored live) was that every element sat
   at #C0C0C0 in weight 300 at 14–18px, so nothing outranked anything: the column
   labels read as body copy that happened to be uppercase, the copyright was the
   BRIGHTEST thing in the footer, and the strapline ran 117 characters per line
   (the readable range is 45–75).

   Hierarchy is now carried by three things at once — tone, weight and tracking —
   rather than size alone. Every step clears WCAG AAA on #151515; #A1A1A1 is the
   dimmest grey that does (7.07:1), so the whole ladder lives between it and white.

     role              tone      ratio    size / weight / tracking
     column labels     #FFFFFF   18.3:1   13px / 500 / .18em / caps
     strapline         #E4E4E4   14.4:1   19px / 300
     news links        #CFCFCF   11.7:1   16px / 400
     body + contact    #BDBDBD    9.8:1   16px / 300
     site links        #ADADAD    8.2:1   15px / 300 / .02em
     copyright         #A1A1A1    7.1:1   13px / 400 / .10em / caps

   Sizes raised 2026-08-26. The first ladder ran 11-14px, which left four of the six
   roles at 11-13px: under the 12px floor Google's legible-font-sizes audit used to
   enforce, and well under the 18.5px the page body reads at. WCAG sets no minimum
   size, so nothing here was failing - it was simply small. Nothing in the footer is
   now below 13px, and the two tracked-caps roles gained the most, because .18em of
   letter-spacing makes a line read smaller than its nominal size.

   Ratios are unchanged: contrast does not vary with size, and every step still clears
   AAA on #151515. Larger text only loosens the requirement.

   Spacing runs on a 24px base (16px x 1.5): tight within a group, loose between
   them, so proximity does the grouping rather than rules. The base is untouched -
   body copy moved from 14/1.7 to 16/1.5, which is the same 24px line. */
footer.cat-footer{border-top:0}
.wp-footer{color:#bdbdbd;padding-top:88px!important;padding-bottom:64px!important}
.wp-footer > *{max-width:var(--wp--style--global--wide-size,1400px);margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,3.9vw,50px);padding-right:clamp(20px,3.9vw,50px)}
.wp-footer > .alignwide{max-width:var(--wp--style--global--wide-size,1400px)}

/* strapline - the one piece of voice.

   Set to match live, 2026-08-26: uppercase, left-aligned on the wide-width column,
   line-height 2.0, letter-spacing .032em. Live's own values, measured at 1280px, are
   17.5px / 2.00 / 0.555px (= .0317em) / weight 300, left.

   Width deliberately carries NO max-width or margin of its own. `.wp-footer > *`
   already caps every child at 1340px and centres it, and this rule outweighs that one
   (0,2,0 against 0,1,0) - so declaring `max-width:none` here silently took the
   strapline full-bleed while the columns, logo strip, nav and copyright stayed at
   1340. That only shows above a 1340px viewport, which is why a 1280px check missed
   it. Live constrains the same paragraph to 1340px, aligned with its columns.

   The previous treatment - 62ch, centred, 1.65 - was a deliberate departure, on the
   grounds that the full measure runs well outside the readable 45-75 characters. That
   objection stands: measured after this change, the three lines set at 114-120
   characters at both 1280px and 1600px. Caps and .032em of tracking widen each glyph
   but not nearly enough
   to close that gap. The 2.0 leading is the mitigation, and it is live's own - at this
   measure the line spacing is the only thing keeping the eye on the right line, so do
   not reduce it without also capping the width again.

   The transform is CSS, not content. The paragraph in `parts/footer.html` stays in
   sentence case, so assistive technology reads it as prose rather than as an
   abbreviation, and the copy stays editable in the normal way.

   Size is left at the theme's own clamp(16,1.5vw,19) rather than live's 17.5px -
   the 2026-08-26 legibility pass raised this footer deliberately. */
.wp-footer .has-medium-font-size{font-size:clamp(16px,1.5vw,19px)!important;
  line-height:2;font-weight:300;letter-spacing:.032em;text-transform:uppercase;
  color:#e4e4e4;text-align:left}

/* Separators.
   Drawn as a background clipped to the content box, NOT as a border-top. Every child
   of .wp-footer carries the fluid horizontal padding, and a border spans that padding
   too — so the rule was rendering 1265px wide against the 1165px content column it
   should match. background-clip:content-box lands it on the content width and keeps
   tracking the padding as the viewport changes.

   Colour is a mid grey, #757575 — 3.96:1 on this ground, so it reads as a definite
   rule. The previous rgba(255,255,255,.10) composited to roughly #2E2E2E at 1.34:1,
   which was barely there. (Live used #ABB8C3, a blue-grey — the only chromatic note
   in an otherwise achromatic palette, so not carried over.) */
.wp-footer .wp-block-separator{border:0;height:1px;
  background:#757575;background-clip:content-box;
  opacity:1;margin:40px auto;width:auto;max-width:none;align-self:stretch}

/* client logo strip */
.wp-footer .wp-block-image{margin:0 auto}
.wp-footer .wp-block-image img{display:block;width:100%;height:auto;max-width:var(--wp--style--global--wide-size,1400px)}

/* columns */
.wp-footer .wp-block-columns{gap:56px;margin:0 auto;align-items:flex-start}
.wp-footer .wp-block-column{min-width:0}

/* body copy */
.wp-footer p{font-size:16px;line-height:1.5;font-weight:300;color:#bdbdbd;margin:0}
/* the columns carry core's has-small-font-size (14px, !important), which would leave
   any non-paragraph text behind at the old size */
.wp-footer .wp-block-column.has-small-font-size{font-size:16px!important}
.wp-footer a{color:inherit;text-decoration:none}
.wp-footer a:hover,.wp-footer a:focus-visible{color:#fff;text-decoration:underline;
  text-underline-offset:3px}
.wp-footer a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* column labels — small, bright, widely tracked. These carry the structure. */
.wp-footer .wp-block-column > p:first-child{font-size:13px!important;font-weight:500;
  line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  margin:0 0 36px}

/* the contact block: one unit, so the lines bind tightly */
.wp-footer .footer-logo{font-size:13px!important;font-weight:500;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 36px}
.wp-footer .footer-location,
.wp-footer .footer-phone,
.wp-footer .footer-email{margin:0 0 6px}
.wp-footer .footer-email{margin-top:14px}

/* latest posts — slightly brighter than body because they are links */
.wp-footer .wp-block-latest-posts__list{list-style:none;margin:0;padding:0}
.wp-footer .wp-block-latest-posts__list li{margin:0 0 12px;padding:0;display:block}
.wp-footer ul.wp-block-latest-posts__list li a,
.wp-footer .wp-block-latest-posts__post-title{font-size:16px!important;line-height:1.5;
  font-weight:400;color:#cfcfcf;display:block}

/* site links row */
.wp-footer .foot-links{margin-top:4px}
.wp-footer .foot-links .wp-block-navigation__container{justify-content:center;
  flex-wrap:wrap;gap:14px 26px}
.wp-footer .foot-links .wp-block-navigation-item{margin:0}
.wp-footer .foot-links .wp-block-navigation-item__content{font-size:15px;font-weight:300;
  letter-spacing:.02em;color:#adadad;padding:4px 0;line-height:1.5;display:inline-block}
.wp-footer .foot-links .wp-block-navigation-item__description{display:none}

/* copyright — the quietest line, not the loudest */
.wp-footer .foot-copy{margin-top:40px;font-size:13px;font-weight:400;line-height:1.5;
  letter-spacing:.10em;text-transform:uppercase;color:#a1a1a1;text-align:center}

@media (max-width:900px){
  .wp-footer{padding-top:64px!important;padding-bottom:48px!important}
  .wp-footer .wp-block-columns{flex-wrap:wrap;gap:40px}
  .wp-footer .wp-block-column{flex-basis:100%!important}
  .wp-footer .wp-block-separator{margin:32px auto}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .specs{grid-template-columns:1fr}
  .prov-grid{grid-template-columns:1fr 1fr;gap:40px 0}
  .prov:nth-child(odd){border-left:0}
  .foot-cols{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:680px){
  .mh-top{padding:0 20px}
  .hero{padding:76px 24px 64px}
  section.gap{padding:80px 0}
  section.gap-sm{padding:64px 0}
  .plates-pair,.plates-grid{grid-template-columns:1fr;gap:56px}
  .folio .wp-block-post-template{grid-template-columns:1fr;gap:56px}
  .journal .wp-block-post-template{grid-template-columns:1fr;gap:56px}
  .folio .wp-block-post-template > li:first-child .wp-block-post-featured-image{aspect-ratio:16/9!important}
  .prov-grid{grid-template-columns:1fr}
  .prov + .prov{border-left:0}
  .spec-row .nm{min-width:0;flex:1}
  .spec-row p{display:none}
  .tomb{padding:21px 18px 23px}
  .enq-grid{grid-template-columns:1fr;gap:48px}
  .enq-aside{border-left:0;border-top:1px solid rgba(214,189,132,.3);padding-left:0;padding-top:38px}
  .bleed-grid.two{grid-template-columns:1fr}
  .ledger{padding:28px 24px 32px}
  .ledger dl{grid-template-columns:1fr}
  .ledger dt{border-bottom:0;padding-bottom:2px}
  .foot-cols{grid-template-columns:1fr}
  .foot-base{flex-direction:column;justify-content:center;text-align:center;gap:10px}
  .prevnext{flex-direction:column;gap:26px}
  .prevnext a:last-child{text-align:left}
}

/* The donor theme's sticky Get-a-quote (bottom-right) and Accessibility
   (bottom-left) buttons, and their shared lightbox dialogs, were removed 2026-08-25
   — service-business furniture that sits badly on a portfolio site. Their CSS lived
   here; the per-page suppression rules that went with them are gone too, since
   there is no longer anything to suppress. See functions.php. */
/* ---------- home hero (ThemeDev "studio" layout: two-col type block + full-bleed NG plate) ---------- */
.home-hero{padding:clamp(48px,6vw,80px) 0 0}
.home-hero .hh-grid{max-width:var(--wrap);margin:0 auto clamp(40px,5vw,56px);padding:0 32px;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,4vw,52px);align-items:center}
.home-hero .hh-eb{display:block;margin-bottom:24px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.home-hero h1{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(34px, 1.9rem + 2.6vw, 52px);letter-spacing:-.018em;line-height:1.06;color:var(--ink)}
.home-hero .hh-lede{margin:0;font-family:var(--sans);font-size:17.5px;font-weight:300;line-height:1.62;color:var(--ink-2);max-width:46ch}
.home-hero .hh-btns{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:28px}
/* hero buttons (operator 2026-06-16): "Make an Enquiry" (.hh-btn-2) = solid #1E1E24 + white;
   "Explore Our Work" (.hh-btn) = outline with a #1E1E24 ("Make an Enquiry") border, fills on hover.
   Shared 1px transparent border so both keep the same box size. */
.home-hero .hh-btn,.home-hero .hh-btn-2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;padding:13px 27px;border:1px solid transparent;border-radius:7px;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.home-hero .hh-btn-2{background:#1E1E24;color:#fff}
.home-hero .hh-btn-2:hover{background:#000}
.home-hero .hh-btn{color:#1E1E24;border-color:#1E1E24}
.home-hero .hh-btn:hover{background:#1E1E24;color:#fff}
/* both home CTA pills -> #D2C6A1 (gold-light) + charcoal #1E1E24 text: 9.74:1 AAA pass.
   Scoped to home (page-id-36610) so no other .btn-pill is affected. */
body.page-id-36610 .wp-block-button.btn-pill .wp-block-button__link{background-color:#D2C6A1!important;color:#1E1E24!important}
body.page-id-36610 .wp-block-button.btn-pill .wp-block-button__link:hover{background-color:#C2B68F!important;color:#1E1E24!important}
.home-hero .hh-link{font-family:var(--sans);font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--gold-line);transition:text-decoration-color .18s}
.home-hero .hh-link:hover{text-decoration-color:var(--gold)}
.home-hero .hh-fig{margin:0;height:clamp(440px,80vh,960px)}
.home-hero .hh-fig img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .home-hero .hh-grid{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:36px}
  .home-hero .hh-fig{height:clamp(320px,56vh,560px)}
}

/* ---------- home services: two-col list (icon marker + caps name + terse line + hairline) ---------- */
.home-services .srv-list{max-width:var(--wrap);margin:clamp(32px,4vw,48px) auto 0;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,80px)}
.home-services .srv-row{display:flex;gap:20px;align-items:flex-start;padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.home-services .srv-icon{flex:0 0 auto;width:40px;height:40px;object-fit:contain;margin-top:2px}
.home-services .srv-b{display:block}
.home-services .srv-nm{display:block;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);transition:color .18s}
.home-services .srv-d{display:block;margin-top:7px;font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink-3)}
.home-services .srv-row:hover .srv-nm{color:var(--gold)}
.home-services .srv-row:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:760px){ .home-services .srv-list{grid-template-columns:1fr;padding:0 26px} }

/* ---------- testimonials: light appraisal cards (masonry grid, gold rating) ---------- */
.testimonials{column-count:2;column-gap:50px;max-width:1000px;margin:0 auto;padding:0 32px}
.testimonials .tcard{break-inside:avoid;margin:0 0 46px;padding-top:20px;border-top:1px solid var(--gold-line)}
.testimonials .stars{display:inline-flex;gap:3px;margin-bottom:14px;line-height:0}
.testimonials .star{width:15px;height:15px;fill:var(--gold-display);display:block} /* SVG = non-text, AAA via 1.4.11 */
.testimonials .tquote{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.66;color:var(--ink-2);margin:0 0 13px}
.testimonials .tcite{font-family:var(--sans);font-style:italic;font-size:15px;color:var(--gold);margin:0}
@media (max-width:820px){ .testimonials{column-count:1;max-width:560px;padding:0 26px} }

/* ---------- print ---------- */
@media print{
  .masthead,.cat-footer{display:none}
  body{background:#fff;color:#000}
  .wp-block-post-content{max-width:100%}
}

/* ---------- logo scroller (home "Trusted by" marquee; ported from the prior theme) ----------
   The home content carries .er-logo-scroller / __track with the logo set duplicated, so the
   track animates 0 -> -50% for a seamless loop. Logos greyscale, colour on hover. */
.er-logo-scroller{overflow:hidden;white-space:nowrap;padding:10px 0;max-width:var(--wp--style--global--wide-size,1400px)!important;width:100%;margin-left:auto;margin-right:auto}
.er-logo-scroller__track{display:inline-flex;animation:er-scroll-logos 30s linear infinite}
.er-logo-scroller__track img{height:90px;width:auto;max-width:none;flex:0 0 auto;margin:0 40px;filter:grayscale(100%);opacity:1;transition:filter .3s ease,opacity .3s ease}
.er-logo-scroller__track img:hover{filter:none;opacity:1}
@keyframes er-scroll-logos{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.er-logo-scroller__track{animation:none;flex-wrap:wrap;justify-content:center}}