@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — ROOMS & THINGS TO DO
   "Midnight Brass" extension layer — rooms + amenities front end
   --------------------------------------------------------------------------
   Consumers:
     archive-room.php      single-room.php
     archive-amenity.php   single-amenity.php

   Load order: AFTER skagit-design-system.css / skagit-components.css /
   skagit-responsive.css, so every token below is already defined and nothing
   here needs !important to win. See AGENT-ROOMS-TEMPLATES-REPORT.md for the
   enqueue line.

   DESIGN NOTES
   - The card silhouette is deliberately identical to the promotions and
     entertainment cards in layer 2 (hairline border, --sk-radius-lg, layered
     shadow, brass edge-light on hover) so these two new sections read as part
     of the same site rather than a bolt-on.
   - Half the rooms and a sixth of the attractions have no photograph. Rather
     than a grey box or a missing placeholder file, the empty state is a
     designed object: the night gradient, the fluted-glass texture already in
     the token set, a brass ring around a category glyph, and an honest label.
     It is meant to look intentional at full size, because it will be on the
     page for a while.
   - Amenity bodies are empty, so the amenity card and single page are laid
     out to look complete WITHOUT body copy: photo, subheadline, one action.
   ========================================================================== */

/* ==========================================================================
   1. ARCHIVE SHELL
   ========================================================================== */

body .skagit-ra-archive {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 55%),
    var(--sk-mist);
  padding-block: var(--sk-space-xl) var(--sk-space-3xl);
  min-height: 60vh;
}

.skagit-ra-empty {
  padding-block: var(--sk-space-2xl);
  text-align: center;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-xl);
  color: var(--sk-text-faint);
}

/* ---- 1.1 Jump navigation ----------------------------------------------- */
.skagit-ra-jump {
  margin-bottom: var(--sk-space-xl);
  padding-bottom: var(--sk-space-sm);
  border-bottom: 1px solid var(--sk-border);
}

.skagit-ra-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skagit-ra-jump-list li { margin: 0; }

.skagit-ra-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-pill);
  background: var(--sk-white);
  color: var(--sk-navy-700);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-ra-jump-link i { color: var(--sk-accent-ink); font-size: 0.95em; }

.skagit-ra-jump-link:hover {
  background: var(--sk-navy-700);
  border-color: var(--sk-navy-700);
  color: var(--sk-white);
  box-shadow: 0 8px 20px rgba(11, 61, 104, 0.22);
}

.skagit-ra-jump-link:hover i { color: var(--sk-gold-400); }

/* ==========================================================================
   2. GROUPS (property / category bands)
   ========================================================================== */

.skagit-ra-group { padding-block: 0 var(--sk-space-2xl); }
.skagit-ra-group:last-of-type { padding-bottom: 0; }

/* The anchor target must clear the sticky sub-nav. */
.skagit-ra-group[id] { scroll-margin-top: 110px; }

.skagit-ra-group-header { margin-bottom: var(--sk-space-lg); }

.skagit-ra-group-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-navy-900);
  overflow-wrap: break-word;
}

.skagit-ra-group-title i {
  flex: 0 0 auto;
  font-size: 0.62em;
  color: var(--sk-accent-ink);
}

.skagit-ra-group-count {
  margin: 0.35rem 0 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-text-faint);
}

/* The signature brass rule, reused as a section mark. */
.skagit-ra-group-rule {
  display: block;
  width: clamp(56px, 8vw, 96px);
  height: 2px;
  margin-block: var(--sk-space-sm);
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.35);
}

.skagit-ra-group-desc {
  max-width: var(--sk-measure);
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-base);
  line-height: var(--sk-lh-body);
}

.skagit-ra-group-desc p:last-child { margin-bottom: 0; }

.skagit-ra-section-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-navy-900);
  overflow-wrap: break-word;
}

/* ==========================================================================
   3. CARD GRID
   --------------------------------------------------------------------------
   minmax(min(100%, 300px), 1fr) is the whole responsive story: the track can
   never demand more than the container, so there is no horizontal overflow at
   360px, and the columns fill naturally out to 2560px.
   ========================================================================== */

.skagit-ra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sk-space-md);
  align-items: stretch;
}

/* ==========================================================================
   4. CARD
   ========================================================================== */

.skagit-ra-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sk-surface-raised);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  overflow: hidden;
  box-shadow: var(--sk-shadow-sm);
  transition: transform var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out);
}

/* Brass edge-light along the top — the card family's tell. */
.skagit-ra-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 3px;
  background: var(--sk-grad-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sk-dur-slow) var(--sk-ease-out);
}

.skagit-ra-card:hover::before,
.skagit-ra-card:focus-within::before { transform: scaleX(1); }

.skagit-ra-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: var(--sk-shadow-lg);
}

/* ---- 4.1 Media --------------------------------------------------------- */
.skagit-ra-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sk-cloud);
}

.skagit-ra-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* The card clips its overflow, which would eat an outward focus ring on the
   photo link, and the layer-1 halo is a box-shadow so it would be clipped too.
   Pull the ring INSIDE the media box instead: outlines are painted after
   content, so an inset ring still sits on top of the photograph. Widened by
   1px to compensate for losing the halo. */
.skagit-ra-media-link:focus-visible {
  outline: calc(var(--sk-focus-width) + 1px) solid var(--sk-focus-color);
  outline-offset: -7px;
  box-shadow: none;
}

.skagit-ra-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-dur-lazy) var(--sk-ease-out);
}

.skagit-ra-card:hover .skagit-ra-media img { transform: scale(1.06); }

/* Scrim so the category badge stays legible on any photograph. */
.skagit-ra-media:not(.skagit-ra-media--empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 16, 28, 0.42) 0%, rgba(4, 16, 28, 0) 38%);
  pointer-events: none;
}

/* ---- 4.2 The no-photo empty state --------------------------------------
   Not a placeholder image — a designed panel. Night gradient + the fluted
   glass texture from the token set + a brass ring around the category glyph.
   assets/img/placeholder.jpg does NOT exist and is never referenced. */
.skagit-ra-media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-2xs);
  padding: var(--sk-space-md);
  background: var(--sk-grad-night);
  text-align: center;
}

.skagit-ra-media--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sk-tex-flute), var(--sk-tex-vignette);
  background-size: 9px 100%, 100% 100%;
  pointer-events: none;
}

.skagit-ra-media-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 9vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.1);
  color: var(--sk-gold-400);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  box-shadow: var(--sk-rim-light);
}

.skagit-ra-media-note {
  position: relative;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-text-on-dark-muted);   /* 10:1 on the night ground */
}

/* Tall variant for the single-page media column when there is no photo. */
.skagit-ra-media--tall {
  aspect-ratio: 4 / 3;
  border-radius: var(--sk-radius-lg);
}

/* ---- 4.3 Category badge ------------------------------------------------- */
.skagit-ra-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  max-width: calc(100% - 1.8rem);
  padding: 0.4rem 0.85rem;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(4, 16, 28, 0.68);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--sk-gold-200);
  font-family: var(--sk-font-body);
  font-size: 0.66rem;
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(4, 16, 28, 0.35);
}

/* ---- 4.4 Card body ------------------------------------------------------ */
.skagit-ra-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  padding: var(--sk-space-md);
}

.skagit-ra-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-snug);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-navy-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.skagit-ra-title a { color: inherit; }
.skagit-ra-card:hover .skagit-ra-title a { color: var(--sk-navy-700); }

.skagit-ra-subheadline {
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-accent-ink);           /* 5.8:1 on white */
  overflow-wrap: break-word;
}

.skagit-ra-excerpt {
  flex: 1 1 auto;
  margin: 0.25rem 0 var(--sk-space-2xs);
  font-size: var(--sk-fs-sm);
  line-height: var(--sk-lh-body);
  color: var(--sk-text-muted);           /* 7.9:1 on white */
}

/* Without body copy the subheadline must not be left hanging against the
   footer: the action row takes the slack instead. */
.skagit-ra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: var(--sk-space-sm);
}

.skagit-ra-actions .skagit-ra-btn { flex: 1 1 auto; }

/* ==========================================================================
   5. BUTTONS
   Same two roles as layer 2 (solid brass primary, ink outline secondary),
   restated for the prefixed classes used by these templates.
   ========================================================================== */

.skagit-ra-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.8rem 1.5rem;
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.skagit-ra-btn--lg {
  padding: 0.95rem 2rem;
  font-size: var(--sk-fs-sm);
}

/* ---- 5.1 Solid brass ---------------------------------------------------- */
.skagit-ra-btn--primary {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: var(--sk-grad-brass);
  background-size: 220% 100%;
  background-position: 18% 0;
  color: var(--sk-navy-950);              /* >6:1 against every gradient stop */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 8px 22px rgba(212, 175, 55, 0.28);
  transition: background-position var(--sk-dur-slow) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-ra-btn--primary:hover {
  background-position: 82% 0;
  color: var(--sk-navy-950);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
              0 14px 34px rgba(212, 175, 55, 0.38);
}

.skagit-ra-btn--primary:active { transform: translateY(0); }

/* ---- 5.2 Outline ink ---------------------------------------------------- */
.skagit-ra-btn--ghost {
  border: 1.5px solid var(--sk-navy-700);
  background: transparent;
  color: var(--sk-navy-700);              /* 8.6:1 on white */
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-ra-btn--ghost:hover,
.skagit-ra-card:hover .skagit-ra-btn--ghost {
  background: var(--sk-navy-700);
  border-color: var(--sk-navy-700);
  color: var(--sk-white);
  box-shadow: 0 8px 20px rgba(11, 61, 104, 0.26);
}

.skagit-ra-btn i { font-size: 0.92em; }

/* ==========================================================================
   6. SINGLE PAGES  (room + amenity)
   ========================================================================== */

body .skagit-ra-single {
  display: block;
  background: var(--sk-white);
  padding-block: var(--sk-space-xl) var(--sk-space-2xl);
}

.skagit-ra-backnav { margin-bottom: var(--sk-space-md); }

.skagit-ra-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

/* No photograph: one column, comfortable measure, so the page still reads as
   a finished layout rather than a half-empty grid. */
.skagit-ra-single-layout--nophoto {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--sk-container-narrow);
}

.skagit-ra-single-layout--nophoto .skagit-ra-single-media {
  max-width: 420px;
}

.skagit-ra-single-media { min-width: 0; }

.skagit-ra-single-media .skagit-ra-single-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-lg);
}

.skagit-ra-single-detail { min-width: 0; }

.skagit-ra-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--sk-space-2xs);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-accent-ink);
}

.skagit-ra-single-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-4xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-navy-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.skagit-ra-single-sub {
  margin: var(--sk-space-2xs) 0 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-style: italic;
  line-height: var(--sk-lh-snug);
  color: var(--sk-text-muted);
}

.skagit-ra-single-copy {
  max-width: var(--sk-measure);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
  color: var(--sk-text);
}

.skagit-ra-single-copy p { color: var(--sk-text); font-size: inherit; }
.skagit-ra-single-copy > :last-child { margin-bottom: 0; }

.skagit-ra-single-copy img {
  height: auto;
  border-radius: var(--sk-radius-md);
}

/* Shown in place of body copy when a record genuinely has none. */
.skagit-ra-single-note {
  max-width: var(--sk-measure);
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-md);
  font-style: italic;
  line-height: var(--sk-lh-loose);
  color: var(--sk-text-faint);
}

.skagit-ra-single-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--sk-space-lg);
}

.skagit-ra-single-host {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  letter-spacing: 0.06em;
  color: var(--sk-text-faint);
  overflow-wrap: anywhere;
}

/* ---- 6.1 Gallery -------------------------------------------------------- */
.skagit-ra-gallery-section {
  /* A full seam — the gallery is its own section under the two-column lockup. */
  margin-top: var(--sk-section-seam);
}

.skagit-ra-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sk-space-sm);
  margin: var(--sk-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.skagit-ra-gallery-item {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-cloud);
  aspect-ratio: 4 / 3;
}

.skagit-ra-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   7. "MORE" STRIP (below the single pages)
   ========================================================================== */

.skagit-ra-more {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 60%),
    var(--sk-mist);
  border-top: 1px solid var(--sk-border);
  padding-block: var(--sk-space-2xl);
}

.skagit-ra-more-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  margin-bottom: var(--sk-space-lg);
  padding-bottom: var(--sk-space-sm);
  border-bottom: 1px solid var(--sk-border);
}

.skagit-ra-more-header .skagit-ra-btn { flex: 0 0 auto; }

/* ==========================================================================
   8. BREAKPOINTS
   Verified mentally against 360 / 390 / 768 / 1024 / 1440 / 2560.
   ========================================================================== */

@media (max-width: 900px) {
  .skagit-ra-single-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .skagit-ra-single-layout--nophoto .skagit-ra-single-media { max-width: 100%; }
}

@media (max-width: 560px) {
  .skagit-ra-grid { gap: var(--sk-space-sm); }

  /* Single column at phone widths: full-bleed actions read better than two
     cramped half-width pills. */
  .skagit-ra-actions .skagit-ra-btn { flex: 1 1 100%; }
  .skagit-ra-single-cta .skagit-ra-btn { flex: 1 1 100%; }

  .skagit-ra-more-header { align-items: flex-start; }
  .skagit-ra-more-header .skagit-ra-btn { flex: 1 1 100%; }
}

@media (min-width: 1800px) {
  .skagit-ra-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--sk-space-lg);
  }
}

/* ==========================================================================
   9. REDUCED MOTION
   Layer 1 zeroes transition DURATIONS globally, but its transform:none list
   is enumerated per selector and cannot know about these classes. Restate it.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .skagit-ra-card:hover,
  .skagit-ra-card:hover .skagit-ra-media img,
  .skagit-ra-btn--primary:hover {
    transform: none;
  }

  .skagit-ra-card::before,
  .skagit-ra-card:hover::before,
  .skagit-ra-card:focus-within::before {
    transition: none;
  }
}

/* ==========================================================================
   10. FORCED COLOURS
   The empty state and the brass buttons are both painted with gradients,
   which Windows High Contrast Mode discards. Give them real borders so they
   do not vanish into the system background.
   ========================================================================== */

@media (forced-colors: active) {
  .skagit-ra-card,
  .skagit-ra-media--empty,
  .skagit-ra-btn { border: 1px solid CanvasText; }

  .skagit-ra-card::before { display: none; }
}

/* ==========================================================================
   8. ROOM AMENITIES

   A room page has to answer "what do I actually get?" and prose is the wrong
   shape for that — a guest scans for the fridge and the coffee, they do not
   read a paragraph about them. Two columns of ticked lines, collapsing to one
   on a phone, using the same brass tick as the rest of the site.
   ========================================================================== */
.skagit-ra-amenities {
  /* Half a seam: this sits inside the detail column beside the photo, so it is
     a block boundary rather than a section boundary. */
  margin-top: calc(var(--sk-section-seam) / 2);
}

.skagit-ra-amenities__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sk-space-2xs) var(--sk-space-lg);
  margin: var(--sk-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.skagit-ra-amenities__item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--sk-border);
  font-size: var(--sk-fs-sm);
  line-height: 1.4;
  color: var(--sk-text);
}

.skagit-ra-amenities__item i {
  flex: none;
  font-size: 0.78em;
  color: var(--sk-bronze-700);
}

/* ==========================================================================
   9. GALLERY LIGHTBOX

   The gallery tiles become <button>s so they are reachable by keyboard and
   announced as controls. Everything below styles the dialog the script
   creates; with JS off none of it is ever rendered and the tiles stay a plain
   grid of photographs.
   ========================================================================== */
.skagit-ra-gallery-item button {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  /* style.css paints every <button> navy with !important — restate all three
     with !important or the tile renders as a solid navy block. */
  background: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}

.skagit-ra-gallery-item button img { transition: transform var(--sk-dur-base) var(--sk-ease-out); }

.skagit-ra-gallery-item button:hover img,
.skagit-ra-gallery-item button:focus-visible img { transform: scale(1.04); }

.skagit-ra-gallery-item button:focus-visible {
  outline: 3px solid var(--sk-bronze-700);
  outline-offset: -3px;
}

/* Stop the page scrolling behind the open viewer. */
.skagit-lb-open, .skagit-lb-open body { overflow: hidden; }

.skagit-lb {
  width: min(100vw, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.skagit-lb::backdrop { background: rgba(9, 17, 28, 0.92); }

.skagit-lb__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sk-space-xs);
  width: 100%;
  height: 100%;
  padding: var(--sk-space-md);
  box-sizing: border-box;
}

.skagit-lb__figure {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sk-space-xs);
  margin: 0;
  min-height: 0;
}

.skagit-lb__img {
  max-width: 100%;
  /* Leaves room for the caption and counter without them overlapping the
     photo on a short landscape screen. */
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: var(--sk-radius-sm);
}

.skagit-lb__cap {
  max-width: 60ch;
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}

.skagit-lb__count {
  grid-column: 2;
  margin: 0;
  font-size: var(--sk-fs-xs);
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.skagit-lb__close,
.skagit-lb__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px: this is a touch control over a photo, so it clears the 44px floor
     in WCAG 2.5.8 with room to spare. */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  transition: background var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-lb__close:hover,
.skagit-lb__nav:hover { background: rgba(255, 255, 255, 0.24) !important; }

.skagit-lb__close:focus-visible,
.skagit-lb__nav:focus-visible { outline: 3px solid var(--sk-gold-200); outline-offset: 2px; }

.skagit-lb__nav--prev { grid-column: 1; }
.skagit-lb__nav--next { grid-column: 3; }

.skagit-lb__close {
  position: absolute;
  top: var(--sk-space-md);
  right: var(--sk-space-md);
  z-index: 2;
}

@media (max-width: 47.99em) {
  .skagit-lb__inner { padding: var(--sk-space-xs); gap: 0.35rem; }
  .skagit-lb__img { max-height: calc(100vh - 11rem); }

  /* The arrows sit under the photo on a phone rather than squeezing it. */
  .skagit-lb__inner { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; }
  .skagit-lb__figure { grid-column: 1 / -1; grid-row: 1; }
  .skagit-lb__count { grid-column: 1 / -1; grid-row: 2; }
  .skagit-lb__nav--prev { grid-column: 1; grid-row: 3; justify-self: end; }
  .skagit-lb__nav--next { grid-column: 2; grid-row: 3; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .skagit-ra-gallery-item button img { transition: none; }
  .skagit-ra-gallery-item button:hover img,
  .skagit-ra-gallery-item button:focus-visible img { transform: none; }
}