/*
Theme Name: 605 Antiques
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for 605 Antiques & Collectibles, Sioux Falls SD. The
  organising idea is the plan: a mall of 175 booths is a floor you navigate,
  and their own logo is already a map of South Dakota with a star on Sioux
  Falls. So panels are plots marked by corner registration ticks rather than
  borders, figures sit on dimension lines, and the star is the locator.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: antiques605
*/

/* mechanics.css is enqueued first by functions.php and holds all behaviour.
   Everything below is the skin: colour, type, shape. No behaviour here. */

/* ============================================================ tokens ==== */
:root{
  --aq-ink:#0A2864;        /* their exact logo navy */
  --aq-ink-2:#1E2B44;      /* body text, 11.96 on paper */
  --aq-muted:#4A5878;      /* 6.00 on paper, 7.10 on white */
  --aq-paper:#E3E8F3;      /* blueprint: a tint of their own navy */
  --aq-paper-2:#D3DBEB;
  --aq-panel:#FFFFFF;
  --aq-rule:#CCD5E8;
  --aq-accent:#D2000B;     /* their exact logo red. Fills only. */
  --aq-link:#B10009;       /* 6.18 on paper, 7.31 on white */
  --aq-on-ink:#BCCCEA;     /* 8.64 on navy */
  --aq-on-ink-2:#9DB2DC;   /* 6.55 on navy */
  --aq-keyline:#2A4C87;    /* navy-on-navy gridline inside the plan */

  /* The four variables mechanics.css expects. */
  --aq-focus:#D2000B;
  --aq-nav-bg:#0A2864;
  --aq-burger:#FFFFFF;
  --aq-header-h:84px;

  --aq-tick:14px;          /* corner registration tick length */
  --aq-tickw:2px;
}

/* ============================================================== base ==== */
body{background:var(--aq-paper);color:var(--aq-ink-2)}

/* Saira carries a wdth axis as well as wght, and the condensed setting is a
   real part of this design rather than a flourish. It lives HERE and not in
   theme.json on purpose: the preview harness reproduces only the theme.json
   properties WordPress emits for headings, and fontStretch is not among them,
   so declaring it there would make the preview and the live site disagree
   about the width of every heading. style.css is loaded by both. */
h1,h2,h3,h4,h5,h6{font-stretch:82%}
h1{font-weight:800;font-stretch:78%;line-height:0.96;letter-spacing:-0.005em}
h2{font-weight:700;font-stretch:80%;line-height:1.04}
h3{font-weight:700;font-stretch:84%;line-height:1.18}
h4{font-weight:700;font-stretch:88%;line-height:1.25}

/* Every descendant-link rule carries :not(.aq-btn). `.aq-prose a` is (0,2,0)
   and beats `.aq-btn` (0,1,0), so without this a button inside a prose block
   takes the deep-red link colour — deep red on red is 1.30:1 and reads as a
   disabled button. This bit me on a previous build; keep the guard. */
.aq-prose a:not(.aq-btn):not(.aq-plot__hit){color:var(--aq-link);text-underline-offset:.18em;text-decoration-thickness:1px}
.aq-prose a:not(.aq-btn):not(.aq-plot__hit):hover{color:var(--aq-ink)}
.aq-prose p,.aq-prose li{max-width:66ch}
.aq-prose > * + *{margin-top:1.1rem}
.aq-prose ul{padding-left:1.1rem;list-style:none}
.aq-prose ul > li{position:relative;padding-left:1.15rem}
.aq-prose ul > li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--aq-accent)}

.aq-lead{font-size:1.1875rem;line-height:1.6;color:var(--aq-ink-2);max-width:60ch}

/* ============================================================= bands ==== */
.aq-band{padding-block:clamp(2.75rem,6vw,5rem)}
.aq-band--paper{background:var(--aq-paper)}
.aq-band--paper2{background:var(--aq-paper-2)}
.aq-band--panel{background:var(--aq-panel)}
.aq-band--navy{background:var(--aq-ink)}
.aq-band--tight{padding-block:clamp(2rem,4vw,3rem)}

/* ── DARK SURFACES ────────────────────────────────────────────────────────
   THERE IS MORE THAN ONE, AND THAT IS THE WHOLE PROBLEM. Scope an "on dark"
   rule to just the named band and some other dark surface ships with navy
   text on navy. It happened on this build: .aq-pagehead was added to the
   stylesheet after this list and left out of it, which made the <h1>
   invisible on six of the seven pages. Nothing flagged it; it was caught by
   looking at a screenshot.

   The complete list, and EVERY RULE BELOW CARRIES ALL SIX:
     .aq-band--navy  .aq-hero  .aq-header  .aq-footer  .aq-plan  .aq-pagehead
   Add a new dark surface here and to every selector in this block.
   ───────────────────────────────────────────────────────────────────────── */
.aq-band--navy,.aq-hero,.aq-header,.aq-footer,.aq-plan,.aq-pagehead{color:var(--aq-on-ink)}
.aq-band--navy h1,.aq-band--navy h2,.aq-band--navy h3,.aq-band--navy h4,
.aq-hero h1,.aq-hero h2,.aq-hero h3,
.aq-pagehead h1,.aq-pagehead h2,.aq-pagehead h3,
.aq-footer h2,.aq-footer h3,.aq-footer h4{color:#FFFFFF}
.aq-band--navy .aq-eyebrow,.aq-hero .aq-eyebrow,
.aq-pagehead .aq-eyebrow,.aq-footer .aq-eyebrow{color:var(--aq-on-ink-2)}
.aq-band--navy .aq-muted,.aq-hero .aq-muted,.aq-footer .aq-muted,
.aq-plan .aq-muted,.aq-pagehead .aq-muted{color:var(--aq-on-ink-2)}
.aq-band--navy .aq-prose p,.aq-band--navy .aq-prose li,
.aq-hero .aq-prose p,.aq-pagehead .aq-prose p,
.aq-footer p,.aq-footer li{color:var(--aq-on-ink)}
/* .aq-lead and .aq-fact both hard-set a dark colour for the light bands, so
   both need an override on every dark surface. The contrast sweep caught
   these at 1.00:1 and 1.97:1 on the flea market page: navy figures on a navy
   band, completely invisible. */
.aq-band--navy .aq-lead,.aq-hero .aq-lead,.aq-pagehead .aq-lead{color:var(--aq-on-ink)}
.aq-band--navy .aq-fact b,.aq-hero .aq-fact b,.aq-pagehead .aq-fact b{color:#FFFFFF}
.aq-band--navy .aq-fact span,.aq-hero .aq-fact span,
.aq-pagehead .aq-fact span{color:var(--aq-on-ink)}
/* The brand red is 2.50:1 on the brand navy, so on any dark surface a call to
   action has to be a FILLED button. Never red text, never a red rule carrying
   meaning on its own. */
.aq-band--navy .aq-prose a:not(.aq-btn),.aq-hero .aq-prose a:not(.aq-btn),
.aq-pagehead a:not(.aq-btn),
.aq-footer a:not(.aq-btn){color:#FFFFFF;text-decoration-color:var(--aq-on-ink-2)}
.aq-band--navy .aq-prose a:not(.aq-btn):hover,
.aq-pagehead a:not(.aq-btn):hover,
.aq-footer a:not(.aq-btn):hover{color:var(--aq-on-ink-2)}

/* ======================================================== typography ==== */
/* Eyebrow: a star lifted off their logo plus sentence case. Deliberately NOT
   uppercase and letterspaced — that is the agency's own eyebrow. */
.aq-eyebrow{
  display:flex;align-items:center;gap:.5rem;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:86%;
  font-size:.9375rem;font-weight:600;color:var(--aq-ink);
  margin:0 0 .85rem;letter-spacing:0;
}
.aq-eyebrow::before{content:"\2605";font-size:.8125rem;color:var(--aq-accent);line-height:1}
.aq-band--navy .aq-eyebrow::before,.aq-hero .aq-eyebrow::before,.aq-pagehead .aq-eyebrow::before,.aq-footer .aq-eyebrow::before{color:var(--aq-on-ink-2)}

.aq-sechead{margin:0 0 1.5rem;max-width:30ch}
.aq-sechead + .aq-lead{margin-top:-.75rem;margin-bottom:1.75rem}

/* A dimension line: the drafting convention for stating a measurement. The
   end ticks are the little strokes a draughtsman puts at each extent. */
.aq-dim{
  display:flex;align-items:center;gap:.9rem;
  margin:0 0 1.25rem;color:var(--aq-muted);
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:84%;
  font-weight:600;font-size:.875rem;
}
.aq-dim::before,.aq-dim::after{content:"";flex:1 1 auto;height:0;border-top:1px solid currentColor;position:relative}
.aq-dim::before{border-left:1px solid currentColor;height:9px}
.aq-dim::after{border-right:1px solid currentColor;height:9px}
.aq-hero .aq-dim,.aq-band--navy .aq-dim,.aq-pagehead .aq-dim{color:var(--aq-on-ink-2)}

.aq-muted{color:var(--aq-muted)}
.aq-figure{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:76%;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}

/* ========================================================= the plot ===== */
/* A panel is marked by four corner registration ticks, NOT by a border and NOT
   by a shadow. A white card with a 2px dark border is one of the agency's five
   house tells; this is a drawing convention instead, and it is the shape
   language for the whole site. */
.aq-plot{
  position:relative;background-color:var(--aq-panel);
  padding:1.35rem;border-radius:0;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--aq-ink),var(--aq-ink)),linear-gradient(var(--aq-ink),var(--aq-ink)),
    linear-gradient(var(--aq-ink),var(--aq-ink)),linear-gradient(var(--aq-ink),var(--aq-ink)),
    linear-gradient(var(--aq-ink),var(--aq-ink)),linear-gradient(var(--aq-ink),var(--aq-ink)),
    linear-gradient(var(--aq-ink),var(--aq-ink)),linear-gradient(var(--aq-ink),var(--aq-ink));
  background-size:
    var(--aq-tick) var(--aq-tickw),var(--aq-tickw) var(--aq-tick),
    var(--aq-tick) var(--aq-tickw),var(--aq-tickw) var(--aq-tick),
    var(--aq-tick) var(--aq-tickw),var(--aq-tickw) var(--aq-tick),
    var(--aq-tick) var(--aq-tickw),var(--aq-tickw) var(--aq-tick);
  background-position:
    left top,left top,right top,right top,
    left bottom,left bottom,right bottom,right bottom;
}
.aq-plot--flat{background-color:transparent}
.aq-plot--paper{background-color:var(--aq-paper)}
.aq-plot h3,.aq-plot h4{margin:0 0 .4rem}
.aq-plot p{margin:0;color:var(--aq-ink-2)}
.aq-plot p + p{margin-top:.6rem}

/* On a dark surface the ticks have to be light or they vanish. */
.aq-band--navy .aq-plot,.aq-hero .aq-plot,.aq-pagehead .aq-plot{
  background-color:transparent;color:var(--aq-on-ink);
  background-image:
    linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),
    linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),
    linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),
    linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2)),linear-gradient(var(--aq-on-ink-2),var(--aq-on-ink-2));
}
.aq-band--navy .aq-plot p,.aq-hero .aq-plot p,.aq-pagehead .aq-plot p{color:var(--aq-on-ink)}

/* =========================================================== buttons ==== */
/* Square, flat, no border. Red fill with a WHITE label (5.61). The agency's
   button is an orange fill with a DARK label and a 2px border at 6px radius —
   this differs on every one of those. */
.aq-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.75rem 1.5rem;border:0;border-radius:0;
  background:var(--aq-accent);color:#FFFFFF;text-decoration:none;cursor:pointer;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:84%;
  font-weight:700;font-size:1rem;line-height:1.1;
  transition:background .15s ease;
}
.aq-btn:hover{background:#A80008;color:#FFFFFF}
.aq-btn--ghost{background:transparent;color:var(--aq-ink);box-shadow:inset 0 0 0 2px var(--aq-ink)}
.aq-btn--ghost:hover{background:var(--aq-ink);color:#FFFFFF}
/* On navy, the ghost button has to be light or it disappears into the band. */
.aq-band--navy .aq-btn--ghost,.aq-hero .aq-btn--ghost,.aq-pagehead .aq-btn--ghost,.aq-footer .aq-btn--ghost{
  color:#FFFFFF;box-shadow:inset 0 0 0 2px var(--aq-on-ink-2)
}
.aq-band--navy .aq-btn--ghost:hover,.aq-hero .aq-btn--ghost:hover,.aq-pagehead .aq-btn--ghost:hover,.aq-footer .aq-btn--ghost:hover{
  background:#FFFFFF;color:var(--aq-ink)
}
.aq-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* ============================================================ header ==== */
.aq-header{background:var(--aq-ink);border-bottom:3px solid var(--aq-accent)}
/* min-height is a LITERAL, never var(--aq-header-h). site.js measures this bar
   and publishes its height as --aq-header-h for scroll-padding and the mobile
   nav offset; feeding that back in as the bar's own min-height is a loop, and
   it quietly grew the header from 84px to 93px. The variable is an output of
   this element, not an input to it. */
.aq-headbar{max-width:82rem;margin:0 auto;padding:0 1.25rem;min-height:84px;gap:1rem}
/* Their logo is navy artwork on a white field bounded by the state outline, so
   on a navy bar it needs its own white plate. Stretched to the full height of
   the bar it reads as a sign plate fixed to the building rather than a sticker
   floating in the middle of a navy strip, which is what it looked like when it
   was a free-standing box with air above and below it. */
.aq-brand{
  background:#FFFFFF;padding:.45rem .7rem;align-self:stretch;
  display:flex;align-items:center;
}
.aq-brand img{display:block;height:48px;width:auto}
@media (max-width:52rem){
  .aq-brand{padding:.4rem .6rem}
  .aq-brand img{height:40px}
}
.aq-nav__link{
  color:#FFFFFF;text-decoration:none;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:88%;
  font-weight:600;font-size:1rem;
}
.aq-nav__link:hover{color:var(--aq-on-ink-2)}
.aq-nav__link[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--aq-accent)}
.aq-header .aq-btn{min-height:44px;padding:.55rem 1.1rem;font-size:.9375rem;white-space:nowrap}

/* Mobile panel furniture. mechanics.css owns the layout; this is only paint. */
.aq-nav__foot{border-top:1px solid var(--aq-keyline);margin-top:1.25rem}
.aq-nav__foot .aq-btn{width:100%;margin-bottom:.6rem}
.aq-nav__foot p{color:var(--aq-on-ink-2);font-size:.9375rem;margin:.9rem 0 0}
@media (max-width:52rem){
  .aq-header .aq-nav__link{
    border-bottom:1px solid var(--aq-keyline);font-size:1.25rem;font-stretch:84%;
  }
}
/* Desktop navigation MUST be scoped. mechanics.css lays the mobile panel out
   inside a max-width query, a media query adds no specificity, and style.css
   loads second — so an unscoped display:flex here would stomp the phone layout
   at every width. That exact bug shipped once. */
@media (min-width:52.0625rem){
  .aq-nav__inner{display:flex;align-items:center;gap:1.5rem}
  .aq-nav__foot{display:none}
  /* mechanics.css gives .aq-brand margin-right:auto, which shoved the logo
     hard left and crushed the links up against the call to action with a
     field of empty navy in between. Move the spring to the nav instead:
     logo, links, gap, button. (0,2,0) so it beats the mechanics rule. */
  .aq-header .aq-brand{margin-right:1.75rem}
  .aq-header .aq-nav{margin-right:auto}
  .aq-header .aq-headbar > .aq-btn{margin-left:1rem}
}
/* The tightest desktop band. Just above the 52rem breakpoint the logo, six
   links and the button want about 900px and only have 833, which wrapped
   "Hours & directions" onto two lines and made the bar lurch taller. Shave the
   gap, the link size and the button padding rather than letting it wrap. */
@media (min-width:52.0625rem) and (max-width:61rem){
  .aq-nav__inner{gap:.85rem}
  .aq-nav__link{font-size:.9375rem}
  .aq-header .aq-brand{margin-right:1rem}
  .aq-brand img{height:40px}
  .aq-header .aq-headbar > .aq-btn{font-size:.875rem;padding:.5rem .75rem;margin-left:.6rem}
}
@media (max-width:52rem){
  /* Burger to the far right, past the call to action, which is where a thumb
     expects it. In source order it sits before the button. */
  .aq-header .aq-burger{order:3;margin-left:.25rem}
  .aq-header .aq-headbar > .aq-btn{order:2}
}

/* ======================================================== hero / plan === */
.aq-hero{background:var(--aq-ink);padding-top:clamp(2.5rem,5vw,4rem);overflow:hidden}
.aq-hero__inner{max-width:82rem;margin:0 auto;padding-inline:1.25rem}
.aq-hero h1{margin:0 0 1.1rem;max-width:21ch}
.aq-hero .aq-lead{color:var(--aq-on-ink);max-width:58ch}
/* Spread across the full width rather than huddling in the left column: it
   balances the band above the plan and reads like the title block on a
   drawing, which is where the figures belong. */
.aq-hero__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;
  margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--aq-keyline);
}
.aq-hero__fact{min-width:0}
.aq-hero__fact b{display:block;font-family:Saira,'Arial Narrow',sans-serif;font-stretch:76%;
  font-weight:800;font-size:2rem;line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
.aq-hero__fact span{display:block;margin-top:.3rem;font-size:.875rem;color:var(--aq-on-ink-2)}

/* The plan itself. Cells share 1px gridlines rather than floating apart, which
   is what stops it reading as a bento grid and starts it reading as a drawing. */
.aq-plan{margin-top:clamp(2rem,4vw,3rem)}
/* The rows are a FIXED height, not auto. With auto rows the photographs set
   the row heights by their own aspect ratio, a 3:2 image in a 420px cell made
   a 280px row, and the whole thing stopped reading as a plan and started
   reading as a photo collage. A drawing has a grid; the pictures fit into it. */
.aq-plan__grid{
  display:grid;gap:1px;background:var(--aq-keyline);
  border:1px solid var(--aq-keyline);
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:116px;
}
.aq-cell{background:var(--aq-ink);position:relative;overflow:hidden}
.aq-cell--photo{padding:0}
.aq-cell--photo img{display:block;width:100%;height:100%;object-fit:cover}
.aq-cell--label{
  display:flex;align-items:flex-end;padding:.7rem .8rem;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:600;font-size:.8125rem;color:var(--aq-on-ink-2);
}
.aq-cell--star{display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:.7rem .8rem}
/* White, not the brand red: red on the brand navy is 2.50:1 and the marker
   went dim and muddy. It also keeps the accent meaning "act" and nothing else. */
.aq-cell--star b{color:#FFFFFF;font-size:1.25rem;line-height:1}
.aq-cell--star span{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:700;font-size:.8125rem;color:#FFFFFF}
.aq-plan__cap{margin:.85rem 0 0;font-size:.8125rem;color:var(--aq-on-ink-2)}
.aq-hero .aq-dim{margin-bottom:.75rem}

/* Plots placed explicitly on the 6-column desktop plan. Auto-placement around
   spanning items leaves holes in unpredictable places; a drawing should be
   drawn. Below 62rem every placement is released and the cells simply flow. */
@media (min-width:62.0625rem){
  .aq-cell--p1{grid-column:1/3;grid-row:1/3}
  .aq-cell--p2{grid-column:5/7;grid-row:1/3}
  .aq-cell--p3{grid-column:3/5;grid-row:3/4}
  .aq-cell--l1{grid-column:3/4;grid-row:1/2}
  .aq-cell--l2{grid-column:4/5;grid-row:1/2}
  .aq-cell--l3{grid-column:3/4;grid-row:2/3}
  .aq-cell--l4{grid-column:4/5;grid-row:2/3}
  .aq-cell--l5{grid-column:5/6;grid-row:3/4}
  .aq-cell--l6{grid-column:6/7;grid-row:3/4}
  .aq-cell--star{grid-column:1/2;grid-row:3/4}
  .aq-cell--l7{grid-column:2/3;grid-row:3/4}
}
/* Every plot is now a way into the gallery, so nothing in the plan may be
   hidden on a phone. Below the desktop layout the explicit placement is
   released and the cells flow: three columns on a tablet, two on a phone,
   with rows tall enough to carry a label and still be a comfortable tap. */
@media (max-width:62rem){
  .aq-plan__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:118px}
}
@media (max-width:52rem){
  .aq-plan__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:116px}
  .aq-cell__tag{font-size:.875rem;padding:.55rem .7rem}
  .aq-cell--label{font-size:.9375rem;padding:.75rem .8rem}
  .aq-cell--all b{font-size:1.75rem}
}

/* ================================================== floor directory ===== */
.aq-floor{display:grid;gap:1.25rem;grid-template-columns:repeat(4,1fr)}
/* NEVER height:100% on a grid item — it resolves against the row height
   computed before the webfont loads and the content then spills out. */
.aq-floor__item{display:flex;flex-direction:column;padding:.7rem}
.aq-floor__shot{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:.8rem}
.aq-floor__item h3{font-size:1.0625rem;font-stretch:86%;margin:0 0 .3rem}
.aq-floor__item p{font-size:.9375rem;line-height:1.5;color:var(--aq-muted)}
/* Each card is a real link into its section of the gallery page, upgraded by
   gallery.js to open the lightbox where you stand. */
a.aq-floor__item{text-decoration:none;color:inherit}
a.aq-floor__item .aq-floor__shot{transition:transform .3s ease}
a.aq-floor__item:hover h3{color:var(--aq-link)}
a.aq-floor__item:focus-visible{outline:3px solid var(--aq-focus);outline-offset:2px}
.aq-floor__item{overflow:hidden}
a.aq-floor__item:hover .aq-floor__shot{transform:scale(1.03)}
.aq-floor__n{
  margin-top:.6rem;align-self:flex-start;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:700;font-size:.75rem;color:#FFFFFF;background:var(--aq-ink);
  padding:.22rem .5rem;font-variant-numeric:tabular-nums;
}
a.aq-floor__item:hover .aq-floor__n{background:var(--aq-accent)}
.aq-floor__more{margin-top:1.5rem;font-size:.9375rem;color:var(--aq-muted)}

/* The full category list, drawn as plots sharing gridlines so it echoes the
   plan in the hero rather than becoming another row of cards. */
.aq-cats{display:grid;gap:1px;background:var(--aq-rule);border:1px solid var(--aq-rule);
  grid-template-columns:repeat(4,1fr)}
.aq-cat{background:var(--aq-panel);padding:1.1rem 1.2rem}
.aq-cat h3{font-size:1rem;font-stretch:86%;margin:0 0 .3rem}
.aq-cat p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--aq-muted)}
@media (max-width:62rem){.aq-cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.aq-cats{grid-template-columns:1fr}}

/* ===================================================== gallery grids ==== */
/* The per-category thumbnail grids on /whats-inside/. Shared gridlines again,
   so a category reads as a block of plots rather than a row of cards. */
.aq-gal{display:grid;gap:1px;background:var(--aq-rule);border:1px solid var(--aq-rule);
  grid-template-columns:repeat(4,1fr)}
/* A category with three photographs in a four-column grid leaves a blank plot
   that reads as a missing image rather than as an empty space. Narrow the row
   instead. The media queries below carry the attribute selector too so they
   keep equal specificity and still win on a small screen. */
.aq-gal[data-n="1"]{grid-template-columns:1fr}
.aq-gal[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.aq-gal[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.aq-gal__item{
  display:block;position:relative;background:var(--aq-panel);
  aspect-ratio:3/2;overflow:hidden;border:0;padding:0;cursor:pointer;
  width:100%;
}
.aq-gal__item img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease}
.aq-gal__item:hover img,.aq-gal__item:focus-visible img{transform:scale(1.04)}
.aq-gal__item:focus-visible{outline:3px solid var(--aq-focus);outline-offset:-3px;z-index:2}
/* A hairline of the ground colour around each frame so a dark photograph does
   not bleed into its neighbour. */
.aq-gal__item::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(10,40,100,.10);pointer-events:none}
.aq-galsec + .aq-galsec{margin-top:clamp(2rem,4vw,3rem)}
.aq-galsec__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:0 0 .35rem}
.aq-galsec__head h3{margin:0}
.aq-galsec__count{
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;font-weight:700;
  font-size:.875rem;color:var(--aq-muted);font-variant-numeric:tabular-nums;
}
.aq-galsec__blurb{margin:0 0 1rem;color:var(--aq-muted);font-size:.9375rem;max-width:72ch}
@media (max-width:62rem){.aq-gal,.aq-gal[data-n]{grid-template-columns:repeat(3,1fr)}
  .aq-gal[data-n="1"]{grid-template-columns:1fr}
  .aq-gal[data-n="2"]{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.aq-gal,.aq-gal[data-n]{grid-template-columns:repeat(2,1fr)}
  .aq-gal[data-n="1"]{grid-template-columns:1fr}}

/* ================================================= the plan, clickable == */
/* Every plot on the hero plan is a real link to its section of the gallery
   page, so it works with no JavaScript at all; the script upgrades it to open
   the lightbox in place. */
/* No blanket display here: `a.aq-cell` is (0,1,1) and would beat
   `.aq-cell--label`'s (0,1,0) display:flex, which ran the label and its count
   together as "Toys & diecast7". Only the photo cells need a block box. */
a.aq-cell{text-decoration:none;color:inherit}
a.aq-cell--photo{display:block}
a.aq-cell:focus-visible{outline:3px solid var(--aq-focus);outline-offset:-3px;z-index:3}
.aq-cell__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.5rem .65rem;
  background:linear-gradient(to top,rgba(10,40,100,.92),rgba(10,40,100,.72) 60%,rgba(10,40,100,0));
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:600;font-size:.8125rem;color:#FFFFFF;line-height:1.2;
}
.aq-cell__tag b{font-weight:800;font-variant-numeric:tabular-nums;color:#FFFFFF;flex:0 0 auto}
.aq-cell--label{justify-content:space-between;gap:.5rem}
.aq-cell--label .aq-cell__name{flex:1 1 auto;min-width:0}
.aq-cell--label b{font-weight:800;font-variant-numeric:tabular-nums;color:#FFFFFF;flex:0 0 auto}
a.aq-cell--label:hover{background:#113781}
a.aq-cell--photo:hover img{transform:scale(1.03)}
.aq-cell--photo img{transition:transform .3s ease}
.aq-cell--all{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;
  padding:.7rem .8rem;background:var(--aq-accent);
}
.aq-cell--all b{display:block;font-family:Saira,'Arial Narrow',sans-serif;font-stretch:76%;
  font-weight:800;font-size:1.5rem;line-height:1;color:#FFFFFF;font-variant-numeric:tabular-nums}
.aq-cell--all span{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:600;font-size:.75rem;color:#FFFFFF}
a.aq-cell--all:hover{background:#A80008}

/* ========================================================== lightbox ==== */
/* z-index 200. mechanics.css puts the sticky header at 100, the quick-action
   bar at 95 and back-to-top at 96, and a modal that opens underneath the
   header paints its own heading and close button away. Anything modal on this
   site goes above 100. */
.aq-lb{
  position:fixed;inset:0;z-index:200;display:none;
  /* Fully opaque. A photo viewer wants nothing competing behind the picture,
     and a translucent scrim over a navy page just made the headline underneath
     readable through it. */
  background:#071636;
  padding:max(.5rem,env(safe-area-inset-top)) .5rem max(.5rem,env(safe-area-inset-bottom));
}
.aq-lb[data-open="true"]{display:grid;grid-template-rows:auto 1fr auto}
body[data-lb="open"]{overflow:hidden}
/* The action bar and back-to-top would punch through the overlay. */
body[data-lb="open"] .aq-actionbar,
body[data-lb="open"] .aq-top,
body[data-lb="open"] .aq-demo-badge{display:none!important}

.aq-lb__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.35rem .35rem .6rem}
.aq-lb__title{
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:82%;font-weight:700;
  font-size:1.0625rem;color:#FFFFFF;margin:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aq-lb__count{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:80%;
  font-weight:600;font-size:.875rem;color:var(--aq-on-ink-2);
  font-variant-numeric:tabular-nums;flex:0 0 auto}

.aq-lb__stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr);
  min-height:0;overflow:hidden}
/* On a phone the arrows live in the bar under the photo, where a thumb is.
   Left inside the stage they became grid rows of their own, pushing the
   picture into a third of the screen with an arrow floating above and below. */
.aq-lb .aq-lb__prev,.aq-lb .aq-lb__next{display:none}
/* width/height 100% with object-fit:contain, NOT max-height:100%. A grid item's
   percentage max-height resolves against the grid area in a way that left the
   photograph at its full width and cropped the bottom off against the stage's
   overflow. Contain letterboxes instead, which is what a photo viewer owes you. */
.aq-lb__img{
  display:block;width:100%;height:100%;min-height:0;
  object-fit:contain;object-position:center;
}
.aq-lb__spin{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--aq-on-ink-2);font-size:.875rem}
.aq-lb[data-loading="false"] .aq-lb__spin{display:none}

.aq-lb__cap{margin:.6rem .35rem 0;color:var(--aq-on-ink);font-size:.9375rem;
  line-height:1.45;text-align:center;max-width:70ch;justify-self:center}

/* 56px targets. These get used with a thumb, one-handed, on a phone. */
.aq-lb__btn{
  display:inline-grid;place-items:center;width:56px;height:56px;flex:0 0 auto;
  border:0;border-radius:0;background:rgba(255,255,255,.10);color:#FFFFFF;
  cursor:pointer;line-height:1;font-size:1.5rem;
  transition:background .15s ease;
}
.aq-lb__btn:hover{background:var(--aq-accent)}
.aq-lb__btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:-3px}
.aq-lb__btn[disabled]{opacity:.3;cursor:default}
.aq-lb__btn[disabled]:hover{background:rgba(255,255,255,.10)}
.aq-lb__nav{display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:.6rem .35rem 0}
.aq-lb__dots{display:flex;align-items:center;gap:.3rem;overflow:hidden;
  max-width:min(60vw,22rem);padding:0 .25rem}
.aq-lb__dot{width:7px;height:7px;flex:0 0 auto;background:rgba(255,255,255,.3)}
.aq-lb__dot[data-on="true"]{background:var(--aq-accent);width:18px}

/* On a wide screen the arrows move to the edges of the image and the thumb
   strip appears; on a phone they stay in the bar under it, where a thumb is. */
@media (min-width:52.0625rem){
  .aq-lb{padding:1rem 1.25rem}
  .aq-lb .aq-lb__prev,.aq-lb .aq-lb__next{
    display:inline-grid;position:absolute;top:50%;transform:translateY(-50%);
    width:64px;height:64px;z-index:2;
  }
  .aq-lb .aq-lb__prev{left:.5rem}
  .aq-lb .aq-lb__next{right:.5rem}
  .aq-lb .aq-lb__prev2,.aq-lb .aq-lb__next2{display:none}
  /* With arrows at the edges of the picture the duplicate pair underneath is
     clutter, so the bottom bar is reduced to the position dots. */
  .aq-lb__nav{gap:1rem}
}

/* ============================================================= facts ==== */
.aq-facts{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr)}
.aq-fact b{display:block;font-family:Saira,'Arial Narrow',sans-serif;font-stretch:76%;
  font-weight:800;font-size:2.25rem;line-height:1;color:var(--aq-ink);font-variant-numeric:tabular-nums}
.aq-fact span{display:block;margin-top:.35rem;color:var(--aq-muted);font-size:.9375rem}

/* ============================================================= hours ==== */
.aq-hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.aq-hours th,.aq-hours td{text-align:left;padding:.55rem 0;border-bottom:1px solid var(--aq-rule);font-weight:400}
.aq-hours th{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:86%;font-weight:600;color:var(--aq-ink)}
.aq-hours td{text-align:right;color:var(--aq-ink-2)}
.aq-hours tr:last-child th,.aq-hours tr:last-child td{border-bottom:0}

/* ============================================================== map ===== */
.aq-map{position:relative;aspect-ratio:16/7;background:var(--aq-paper);
  box-shadow:inset 0 0 0 1px var(--aq-rule)}
.aq-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:40rem){.aq-map{aspect-ratio:4/3}}

/* ============================================================== faq ===== */
/* The SEO plugin parses these <details> into FAQ schema, so the markup here
   and the structured data can never drift apart. */
.aq-faq details{background:var(--aq-panel);border-bottom:1px solid var(--aq-rule)}
.aq-faq details:first-of-type{border-top:1px solid var(--aq-rule)}
.aq-faq summary{
  display:flex;align-items:center;gap:.75rem;cursor:pointer;list-style:none;
  padding:1rem 1.1rem;min-height:56px;color:var(--aq-ink);
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:86%;font-weight:600;font-size:1.0625rem;
}
.aq-faq summary::-webkit-details-marker{display:none}
.aq-faq summary::before{content:"+";color:var(--aq-accent);font-weight:700;font-size:1.25rem;line-height:1}
.aq-faq details[open] summary::before{content:"\2212"}
.aq-faq summary:focus-visible{outline:3px solid var(--aq-focus);outline-offset:-3px}
.aq-faq details > p{margin:0;padding:0 1.1rem 1.1rem 2.6rem;max-width:68ch;color:var(--aq-ink-2)}

/* ============================================================ dates ===== */
.aq-dates{display:grid;gap:1px;background:var(--aq-rule);border:1px solid var(--aq-rule)}
.aq-date{display:flex;align-items:baseline;gap:1rem;background:var(--aq-panel);padding:.9rem 1.1rem}
.aq-date b{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:78%;font-weight:800;
  font-size:1.375rem;color:var(--aq-ink);min-width:6.5rem;font-variant-numeric:tabular-nums}
.aq-date span{color:var(--aq-muted);font-size:.9375rem}

/* ============================================================= split ==== */
.aq-split{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr 1fr;align-items:start}
.aq-split--wide{grid-template-columns:1.25fr 1fr}
.aq-shot{display:block;width:100%;height:auto}

/* ============================================================= forms ==== */
.aq-form{display:grid;gap:1.1rem}
.aq-field-row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr;align-items:end}
.aq-field{display:flex;flex-direction:column;gap:.35rem}
.aq-field label{font-family:Saira,'Arial Narrow',sans-serif;font-stretch:88%;
  font-weight:600;font-size:.9375rem;color:var(--aq-ink)}
.aq-field .aq-hint{font-size:.8125rem;color:var(--aq-muted);font-weight:400;font-family:inherit;font-stretch:normal}
.aq-field input,.aq-field textarea,.aq-field select{
  font:inherit;color:var(--aq-ink-2);background:var(--aq-panel);
  border:1px solid var(--aq-muted);border-radius:0;padding:.7rem .8rem;min-height:48px;width:100%;
}
.aq-field textarea{min-height:8rem;resize:vertical}
.aq-field input:focus-visible,.aq-field textarea:focus-visible,.aq-field select:focus-visible{
  outline:3px solid var(--aq-focus);outline-offset:1px;border-color:var(--aq-ink)
}
.aq-form__note{font-size:.8125rem;color:var(--aq-muted);margin:0}
.aq-notice{padding:.9rem 1.1rem;background:var(--aq-panel);
  box-shadow:inset 0 0 0 2px var(--aq-ink);margin-bottom:1.5rem}
.aq-notice p{margin:0}

/* The enquiry plugin's own markup. These class names come from
   010-<theme>-enquiries.php, so they have to be painted here or the form
   ships unstyled — which is exactly how a demo loses a sale. */
.aq-form h3{margin:0 0 .5rem}
.aq-form__intro{margin:0 0 1.5rem;color:var(--aq-ink-2);max-width:60ch}
.aq-form__fine{margin:.9rem 0 0;font-size:.8125rem;color:var(--aq-muted);max-width:60ch}
.aq-form form{display:grid;gap:1.1rem}
.aq-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.75rem 1.75rem;border:0;border-radius:0;
  background:var(--aq-accent);color:#FFFFFF;cursor:pointer;justify-self:start;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:84%;
  font-weight:700;font-size:1rem;line-height:1.1;
}
.aq-submit:hover{background:#A80008}
.aq-note{padding:.9rem 1.1rem;margin:0 0 1.5rem;background:var(--aq-panel)}
.aq-note--ok{box-shadow:inset 0 0 0 2px var(--aq-ink)}
.aq-note--err{box-shadow:inset 0 0 0 2px var(--aq-accent)}
.aq-note a{color:var(--aq-link)}
/* Off-screen, not display:none — a bot has to be able to see and fill it. */
.aq-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================ footer ==== */
.aq-footer{background:var(--aq-ink);padding-block:clamp(2.5rem,5vw,3.5rem);border-top:3px solid var(--aq-accent)}
.aq-footer__inner{max-width:82rem;margin:0 auto;padding-inline:1.25rem;
  display:grid;gap:2rem;grid-template-columns:1.3fr 1fr 1fr}
.aq-footer h4{font-size:1rem;margin:0 0 .75rem;color:#FFFFFF}
.aq-footer ul{list-style:none;margin:0;padding:0}
.aq-footer a{color:#FFFFFF;text-decoration:none}
.aq-footer a:hover{color:var(--aq-on-ink-2);text-decoration:underline}
.aq-footer__brand{background:#FFFFFF;padding:.45rem .65rem;display:inline-block;margin-bottom:1rem}
.aq-footer__brand img{display:block;height:46px;width:auto}
.aq-footer__legal{max-width:82rem;margin:2rem auto 0;padding:1.25rem 1.25rem 0;
  border-top:1px solid var(--aq-keyline);font-size:.8125rem;color:var(--aq-on-ink-2)}

/* ====================================================== mobile chrome === */
.aq-actionbar__inner .aq-ab{
  background:var(--aq-accent);color:#FFFFFF;text-decoration:none;border-radius:0;
  font-family:Saira,'Arial Narrow',sans-serif;font-stretch:84%;font-weight:700;font-size:.9375rem;
}
.aq-actionbar__inner .aq-ab--alt{background:var(--aq-ink);color:#FFFFFF}
.aq-top{background:var(--aq-ink);color:#FFFFFF;border:0;border-radius:0}
.aq-top:hover{background:var(--aq-accent)}

/* ======================================================= page furniture = */
.aq-pagehead{background:var(--aq-ink);padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.aq-pagehead__inner{max-width:82rem;margin:0 auto;padding-inline:1.25rem}
.aq-pagehead h1{margin:0;max-width:20ch}
.aq-pagehead .aq-lead{color:var(--aq-on-ink);margin-top:.9rem}
.aq-crumbs{font-size:.875rem;color:var(--aq-on-ink-2);margin:0 0 .6rem}
.aq-crumbs a{color:var(--aq-on-ink-2)}

/* ========================================================= responsive === */
@media (max-width:62rem){
  .aq-floor{grid-template-columns:repeat(2,1fr)}
  .aq-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:52rem){
  .aq-split,.aq-split--wide{grid-template-columns:1fr}
  .aq-facts{grid-template-columns:1fr 1fr}
  .aq-hero__fact b{font-size:1.75rem}
}
@media (max-width:40rem){
  .aq-floor{grid-template-columns:1fr 1fr}
  .aq-field-row{grid-template-columns:1fr}
  .aq-footer__inner{grid-template-columns:1fr}
  .aq-date{flex-direction:column;gap:.15rem}
  .aq-date b{min-width:0}
  .aq-btns .aq-btn{width:100%}
}
@media (max-width:26rem){
  .aq-floor{grid-template-columns:1fr}
  .aq-facts{grid-template-columns:1fr}
}