is untouched.
========================================================================== */
ul.skagit-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: var(--sk-space-sm);
margin: var(--sk-space-lg) 0 0;
padding: 0;
list-style: none;
}
.skagit-gallery__item {
margin: 0;
overflow: hidden;
border-radius: var(--sk-radius-md);
background: var(--sk-mist);
aspect-ratio: 3 / 2;
}
@media (min-width: 48em) {
.skagit-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 2.05; }
}
.skagit-gallery__item img,
.skagit-gallery__item button {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
cursor: zoom-in;
object-fit: cover;
background: transparent !important;
color: inherit !important;
border-color: transparent !important;
}
.skagit-gallery__item img { transition: transform var(--sk-dur-base) var(--sk-ease-out); }
.skagit-gallery__item button:hover img,
.skagit-gallery__item button:focus-visible img { transform: scale(1.05); }
.skagit-gallery__item button:focus-visible { outline: 3px solid var(--sk-bronze-700); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
.skagit-gallery__item img { transition: none; }
.skagit-gallery__item button:hover img { transform: none; }
}
/* A page holding a room funnel needs the FULL container, not the reading
measure. The funnel is a card grid; inside a 700px measure it collapsed to a
single 505px column at 1280px, which is the same trap the self-barring form
hit. Same fix, same reason: a grid of cards is not a paragraph. */
.skagit-page-content:has(.skagit-funnel),
.skagit-page-body:has(.skagit-funnel) .skagit-page-content {
max-width: none;
}
/* ==========================================================================
BARE SECTION CARDS
--------------------------------------------------------------------------
A card that wraps other cards must not itself be a card.
inc/page-sections.php adds `--bare` to any section whose body is essentially
one self-contained block: the Featured Spaces rows, the gallery strip, the
capacity chart, an enquiry form, a restaurant menu, the room funnel. Each of
those already ships its own finished chrome, so the section frame was drawing
a second border around a border — and, worse, the whole page-width wrapper
lifted on hover, so pointing at one inner card moved every one of them.
Bare keeps the heading and the spacing and drops everything that made it look
like a container: border, background, radius, shadow, padding and the hover
lift. Only genuine small content cards keep the frame.
========================================================================== */
.skagit-sections > .skagit-section-card--bare {
/* NO grid-column here. Bare is about the frame, not the footprint — see the
note in page-sections.php. Whatever width the card had before, it keeps. */
border: 0;
background: none;
box-shadow: none;
border-radius: 0;
padding-inline: 0;
padding-block: clamp(0.5rem, 1.5vw, 1rem);
}
.skagit-sections > .skagit-section-card--bare > .skagit-section-card__body {
padding: 0;
/* A bare wrapper never multi-columns: the block inside owns its own layout. */
columns: auto;
column-count: 1;
}
/* No lift, no shadow, no transform — on hover or otherwise. The inner cards do
their own hovering, and a page-width box shifting under the pointer is what
made this look wrong in the first place. */
.skagit-sections > .skagit-section-card--bare:hover,
.skagit-sections > .skagit-section-card--bare:focus-within {
transform: none;
box-shadow: none;
border-color: transparent;
}
/* The heading keeps its brass rule so the section is still announced. */
.skagit-sections > .skagit-section-card--bare > .skagit-section-card__title {
padding-inline: 0;
}
/* ==========================================================================
SECTION CARDS RISE IN ON SCROLL
--------------------------------------------------------------------------
The reveal itself is the site's shared `sk-in` system (skagit-motion.*).
This only adds the stagger: cards in a grid row arriving in unison reads as
a page repainting, while a short offset between them reads as the row
assembling. Keyed off nth-child rather than an inline custom property
because these cards are generated by the section builder and carry no index.
Capped at six. Past that the last card in a long grid would wait most of a
second after the first, which stops feeling like a stagger and starts
feeling like a slow page.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
.skagit-sections > .skagit-section-card:nth-child(6n + 1) { transition-delay: 0ms; }
.skagit-sections > .skagit-section-card:nth-child(6n + 2) { transition-delay: 70ms; }
.skagit-sections > .skagit-section-card:nth-child(6n + 3) { transition-delay: 140ms; }
.skagit-sections > .skagit-section-card:nth-child(6n + 4) { transition-delay: 210ms; }
.skagit-sections > .skagit-section-card:nth-child(6n + 5) { transition-delay: 280ms; }
.skagit-sections > .skagit-section-card:nth-child(6n) { transition-delay: 350ms; }
/* A bare wrapper must not delay the cards inside it — they run their own. */
.skagit-sections > .skagit-section-card--bare { transition-delay: 0ms !important; }
}
/* ==========================================================================
ELECTRONIC TABLE GAMES — the paired floor photographs
--------------------------------------------------------------------------
Two portrait shots (1536x1920) of the actual machines, sitting in the lede's
media column beside the opening copy.
THE HOOK IS .skagit-page-figure--lede, NOT A CLASS OF OUR OWN.
skagit_lede_html() only lifts a figure whose class attribute is exactly
"skagit-page-figure", then re-tags it with --lede on the way into
.skagit-lede__media. Adding a second class to the figure in the content stops
it being lifted at all; adding a wrapper div inside it gets that div rewritten
to a by skagit_unwrap_legacy_divs(), which is inline-only-div behaviour.
So the figure carries the plain class and the two ![]()
are direct children.
Side by side rather than stacked: the media column is ~384px, and two 4:5
frames stacked would run ~960px tall against three paragraphs of copy.
========================================================================== */
.skagit-lede__media .skagit-page-figure--lede {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
margin: 0;
}
/* Specificity: the theme sets an aspect-ratio on figure images generally, and
it was winning — the 4:5 sources rendered as 4:3 and cropped the tops off two
tall subjects (a lit dice dome and a roulette sign, where the height IS the
subject). Matched through the lede chain so this rule is the specific one. */
.skagit-lede__media .skagit-page-figure--lede img.skagit-etg-pair__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--sk-radius-sm, 8px);
/* The floor is dark and neon-lit; a hairline stops the photographs bleeding
into a light page background at their edges. */
box-shadow: 0 0 0 1px rgba(11, 61, 104, 0.1), 0 8px 22px -16px rgba(11, 39, 68, 0.55);
}
.skagit-lede__media .skagit-page-figure--lede figcaption {
grid-column: 1 / -1;
margin-top: 0.2rem;
font-size: 0.8rem;
line-height: 1.4;
color: #5c6470;
text-transform: none;
letter-spacing: normal;
}
@media (prefers-reduced-motion: no-preference) {
.skagit-etg-pair__img { transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.skagit-etg-pair__img:hover { transform: translateY(-3px); }
}
/* ==========================================================================
PORTRAIT PHOTOGRAPHS IN THE GALLERY GRID
--------------------------------------------------------------------------
Every cell is 4:3 landscape, which is what keeps the rows even — and what
cost a portrait source about half its frame. Measured at ~50% on three
images site-wide (Star Lounge, the event centrepiece, a single slot machine),
each of them a tall subject.
A portrait cell spans two rows instead. The row rhythm survives because it
is a whole number of rows, and the photograph keeps roughly its own shape
rather than being cropped to somebody else's.
Only applied where the grid has rows to give: below 48em the gallery is one
or two columns and a double-height cell would dominate the screen.
========================================================================== */
/* The SHAPE applies at every width. Below 48em the gallery is a single column
— `gridTemplateColumns` computes to `none` — so there is no row rhythm to
protect and no reason to keep cropping a tall photograph to a wide box. This
was scoped to >= 48em on the first pass, which left the phone showing the
same 50% crop the fix was written to remove. */
.skagit-gallery__cell--portrait img {
aspect-ratio: 3 / 4;
height: 100%;
object-fit: cover;
}
/* The ROW SPAN only applies where there are rows: the multi-column grid. */
@media (min-width: 48em) {
.skagit-gallery__cell--portrait {
grid-row: span 2;
}
}