/* =========================================================================
 *  element_webpage_home_carousel_key_cards.css
 *  Daralbeida.com — Carousel Key Cards section
 *  Positioned between Triptych band and Manifesto.
 *
 *  DOCUMENT MAP
 *  §0  TUNING PANEL
 *  §1  SECTION WRAPPER
 *  §2  LABEL ROW
 *  §3  SLIDER + TRACK
 *  §4  CARD BASE + ACTIVE STATE
 *  §5  CARD INNER ELEMENTS
 *  §6  NAVIGATION (arrows, dots, progress bar)
 *  §7  RESPONSIVE
 * =========================================================================
 */


/* =========================================================================
   §0  TUNING PANEL — edit values here only
   ========================================================================= */

:root {
  /* PORTRAIT 3:4, FLUID. Card width caps at 400px on wide screens and shrinks
     to 92vw on phones so it always fits horizontally. Card height is derived
     from the width (3:4 portrait). On phones the height is further capped to
     fit the page above the fold — see §7 RESPONSIVE for the media query.    */
  --kc-card-w:        min(400px, 92vw);
  --kc-card-h:        calc(var(--kc-card-w) * 4 / 3);
  --kc-gap:            24px;   /* gap between cards                           */
  --kc-backing:    #C2622E;    /* orange placeholder shown behind a fading card */
  --kc-taupe:      #A1937F;    /* UPCOMING (unseen) dots + the forward arrow    */
  --kc-fade-h:         70px;   /* ivory→dark fade height top and bottom       */
  --kc-auto-ms:      3800;     /* NOTE: used in JS too — keep in sync         */

  /* Card typography */
  --kc-num-size:     0.60rem;
  --kc-title-size:   1.45rem;
  --kc-body-size:    1.20rem;
  --kc-body-lh:      1.6;

  /* Inactive card treatment */
  --kc-inactive-opacity: 0;   /* side cards hidden (temp); was 0.90 */
  --kc-inactive-scale:   0.86;

  /* Label word tracking — active state gets wider spacing */
  --kc-label-spacing:        0.18em;
  --kc-label-spacing-active: 0.24em;

  /* INLINE EXCEPTION: section visible width formula
     = card × 2 + gap × 2 (one full card + two half-cards + two gaps)
     Changing --kc-card-w or --kc-gap requires updating this too.        */
}


/* =========================================================================
   §1  SECTION WRAPPER
   Exact width: one full card + half a card on each side.
   Dark gradient with ivory fades matching the triptych band rhythm.
   ========================================================================= */

/* §1a  Full-width gradient layer — matches triptych band rhythm */
.kc-section {
  width: 100%;
  background: transparent;   /* carousel band background removed */
  padding: 0 0 24px;
  position: relative;
  z-index: 4;   /* sit above hero photo (0), vignette (1), grain (2) */
  -webkit-font-smoothing: antialiased;
  /* Flex centring (same as the header wordmark) so the fixed-width carousel
     stays centred even when the window is narrower than it — overflowing
     symmetrically on both sides rather than left-aligning. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Gold hairlines span full width, matching triptych */
.kc-section::before,
.kc-section::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  height: 1px;
  background: none;   /* hairlines removed with band background */
}
.kc-section::before { top:    var(--kc-fade-h); }
.kc-section::after  { bottom: var(--kc-fade-h); }

/* §1b  Carousel layer — 728px centered on top of the gradient */
.kc-inner {
  /* Fluid carousel width: caps at 560px on wide screens (≈ card 400 + 80 peek
     each side) and shrinks to 96vw on phones, so the slider and the cards
     inside it always fit the viewport. Centred by the flex parent. */
  width: min(560px, 96vw);
  margin: 0;
}


/* =========================================================================
   §2  LABEL ROW
   Three words separated by dots. Active word lights up and tracks the card.
   JS toggles .active on .kc-label-word matching the current card index.
   ========================================================================= */

.kc-label-row {
  display: none;   /* word titles hidden */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4em 0.55em;
  font-family: var(--f-mono);
  font-size: var(--ui-fs-label);
  letter-spacing: var(--kc-label-spacing);
  text-transform: uppercase;
  margin: 0 0 36px;
}

.kc-label-word {
  color: rgba(184, 131, 42, 0.28);
  transition: color 0.45s ease, letter-spacing 0.45s ease;
  cursor: pointer;
  padding: 2px 0;
}

.kc-label-word.active {
  color: var(--gold);
  letter-spacing: var(--kc-label-spacing-active);
}

.kc-label-sep {
  color: rgba(184, 131, 42, 0.22);
  font-size: var(--ui-fs-micro);
}


/* =========================================================================
   §3  SLIDER + TRACK
   overflow:hidden on .kc-slider clips to the 728px visible window.
   .kc-track is translated by JS to center the active card.
   ========================================================================= */

.kc-slider {
  position: relative;
  width: min(560px, 96vw);   /* matches .kc-inner — fluid, phone-friendly  */
  overflow: hidden;
  padding: 84px 0;   /* room for the deep floating-frame shadow (kept clear of clipping) */
}

.kc-track {
  position: relative;
  z-index: 1;            /* cards sit above the orange backing */
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--kc-gap);
  will-change: transform;
}

.kc-track.animated {
  transition: transform 0.60s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Orange placeholder the size of one card, centred behind the track. It's
   normally hidden behind the opaque active card; as a card fades/slides away
   it's revealed, so the carousel never looks empty mid-transition. */
.kc-backing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;            /* behind the cards (track is z-index 1) */
  width: var(--kc-card-w);
  height: var(--kc-card-h);
  background: var(--kc-backing);
  /* Same layered float shadow as the card, so the orange placeholder also
     floats while it's revealed during a transition. */
  box-shadow:
    0 4px 8px   rgba(20, 10, 4, 0.12),
    0 12px 24px rgba(20, 10, 4, 0.18),
    0 22px 48px rgba(20, 10, 4, 0.30);
  pointer-events: none;
}


/* =========================================================================
   §4  CARD BASE + ACTIVE STATE
   ========================================================================= */

/* The .kc-card is now the BROWN MAT plate (a real layer). The content lives in a
   raised .kc-tile inside it, so the tile casts a REAL shadow onto the brown. */
.kc-card {
  --kc-mat-w: 15px;            /* brown reveal width around the tile            */
  --kc-mat:   #46331E;         /* warm espresso brown (warmer than --brand-dark) */
  box-sizing: border-box;
  flex: 0 0 var(--kc-card-w);  /* fixed width, no grow, no shrink */
  height: var(--kc-card-h);
  position: relative;
  padding: var(--kc-mat-w);    /* the mat reveal around the tile  */
  background: transparent;     /* only the centre (.active) card shows the mat */
  border: none;
  opacity: var(--kc-inactive-opacity);
  transform: scale(var(--kc-inactive-scale));
  transition:
    opacity    0.50s ease,
    transform  0.50s ease,
    background 0.50s ease,
    box-shadow 0.50s ease;
  cursor: pointer;
}

/* The raised TILE — the actual white (or gold) face, centred inside the mat. */
.kc-tile {
  position: relative;
  z-index: 1;                  /* above the mat bg + corner brackets */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 26px 22px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0;   /* SQUARE corners */
  background: transparent;
}

.kc-card.active {
  opacity: 1;
  transform: scale(1);
  cursor: default;
  background: var(--kc-mat);   /* the espresso brown mat */
  /* The whole framed plate FLOATS high above the hero: a thin outer gold line at
     the mat edge, a warm-gold ambient, and a deep soft shadow (on top, distant). */
  box-shadow:
    inset 0 0 0 1px rgba(184, 131, 42, 0.90),    /* outer gold line at mat edge */
    0 9px 20px  rgba(70, 44, 10, 0.30),           /* warm-gold ambient           */
    0 16px 30px rgba(0, 0, 0, 0.36),              /* float — mid                 */
    0 28px 48px rgba(0, 0, 0, 0.42);              /* float — deep & distant      */
}

/* The active tile: white face, a top highlight (emboss), a feathered GILDED
   inner edge (gold → brown over ~6px), and a REAL cast shadow onto the brown
   mat — so the tile reads as raised/embossed above the mat. */
.kc-card.active .kc-tile {
  background: #ffffff;
  /* INNER MAT BORDER — a clearly-visible gilded band ringing the tile: a crisp
     gold line at the tile edge → a 3px gold band → a 3px feather into the brown
     mat (≈6px total, brown→gold). Plus a real cast shadow so the tile is raised. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),     /* top highlight (emboss)            */
    0 0 0 1px  rgba(236, 184, 86, 1),             /* crisp bright gold at the tile edge */
    0 0 0 3px  rgba(198, 148, 56, 0.95),          /* gold band out to 3px              */
    0 0 5px 3px rgba(104, 72, 26, 0.65),          /* 3px feather → brown mat           */
    0 3px 6px  rgba(0, 0, 0, 0.45),               /* tight cast shadow (raised)        */
    0 10px 20px rgba(0, 0, 0, 0.42);              /* soft cast shadow (raised)         */
}

.kc-card.active::before { content: none; }

/* Gold CORNER BRACKETS at the mat's outer corners (8 solid-gold bars). */
.kc-card.active::after {
  content: '';
  position: absolute;
  inset: 0;                 /* at the mat (card) edges */
  z-index: 0;               /* above the mat bg, below the tile */
  pointer-events: none;
  --kc-brk: rgba(184, 131, 42, 0.95);
  background:
    linear-gradient(var(--kc-brk), var(--kc-brk)) top    left  / 16px 2px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) top    left  / 2px 16px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) top    right / 16px 2px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) top    right / 2px 16px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) bottom left  / 16px 2px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) bottom left  / 2px 16px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--kc-brk), var(--kc-brk)) bottom right / 2px 16px no-repeat;
}

/* =========================================================================
   PICTURE FRAME  —  shared skeleton + three keycard_style treatments
   ─────────────────────────────────────────────────────────────────────────
   The frame look is chosen by keycard_style (derived from keycard_type in PHP):
     style 0  EMBOSSED  — picture pressed INTO the card (engraved)   [main]
     style 1  RAISED    — framed photo floating off the card         [slide]
     style 2  WINDOW     — picture set back behind faint green glass  [cardMedia]
   The class .kc-imgwrap--style0/1/2 is added in the PHP markup.

   ADJUSTABLE VARIABLES (per style, below):
     • outer box-shadow  → how much the frame lifts / sits flush / sinks
     • border / outline  → the frame lines (add more for a heavier window)
     • ::after background → the green tint (style 2) / glass sheen (style 1)
     • ::after box-shadow (inset) → the depth: raised vs engraved vs recessed
   ========================================================================= */

/* Shared skeleton — size, clipping, and the overlay slot. */
.kc-imgwrap {
  position: relative;   /* positioning context for the ::after depth/gloss layer */
  display: block;
  width: 100%;
  height: 188px;
  border-radius: 0;   /* SQUARE corners */
  overflow: hidden;
  margin: 8px 0 16px;
}
/* The depth/gloss overlay sits ABOVE the image (so it stays put while the photo
   Ken-Burns pans beneath it). Each style fills in its own background + shadows. */
.kc-imgwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Card image — cover fills the frame uniformly */
.kc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- STYLE 1 · RAISED — frame floats clearly UP off the card ---- */
.kc-imgwrap--style1 {
  border: 2px solid rgba(184, 131, 42, 0.90);
  outline: 1px solid rgba(184, 131, 42, 0.35);
  outline-offset: 4px;
  /* BIG layered float so the picture visibly lifts toward the viewer */
  box-shadow:
    0 4px 10px  rgba(20, 10, 4, 0.30),
    0 14px 28px rgba(20, 10, 4, 0.30),
    0 30px 60px rgba(20, 10, 4, 0.28);
}
.kc-imgwrap--style1::after {
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.06) 16%,
    rgba(255, 255, 255, 0)   38%);
  box-shadow:
    inset 0 2px 0 rgba(255, 250, 235, 0.45),    /* bright top edge — light on a proud surface */
    inset 0 -12px 20px rgba(20, 10, 4, 0.16);   /* faint underside shading                    */
}

/* ---- STYLE 0 · EMBOSSED — clearly pressed DOWN into the card ---- */
.kc-imgwrap--style0 {
  border: 1px solid rgba(80, 56, 18, 0.85);
  box-shadow: none;   /* sunk — no float at all, the opposite of raised */
}
.kc-imgwrap--style0::after {
  /* Deep recess: a darkened top, a HEAVY top + left inner shadow (the card edge
     casting into the hollow), and light pooling along the bottom. */
  background: linear-gradient(rgba(20, 10, 4, 0.16), rgba(20, 10, 4, 0) 45%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 10, 4, 0.38),
    inset 0 13px 22px rgba(20, 10, 4, 0.72),      /* strong TOP recess shadow */
    inset 8px 0 18px rgba(20, 10, 4, 0.45),        /* left recess shadow       */
    inset 0 -8px 15px rgba(255, 250, 240, 0.34);  /* light pooling at the base */
}

/* ---- STYLE 2 · WINDOW — green FROSTED glass, subject set far back ---- */
.kc-imgwrap--style2 {
  border: 3px solid rgba(20, 28, 18, 0.92);       /* thick dark "window" frame   */
  outline: 1px solid rgba(184, 131, 42, 0.30);    /* thin gold reveal outside it */
  outline-offset: 3px;
  box-shadow: 0 2px 6px rgba(20, 10, 4, 0.20);
}
.kc-imgwrap--style2::after {
  /* Tinted-glass sheen + a GREEN wash that darkens toward the top (the recess
     wall), an actual blur so the subject looks distant, and DEEP inset shadows
     so the picture sits far down inside the frame. */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(rgba(6, 18, 10, 0.62) 0%, rgba(30, 66, 38, 0.40) 34%, rgba(12, 34, 20, 0.52) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px rgba(4, 14, 6, 0.72),
    inset 0 28px 44px rgba(1, 6, 3, 0.85),         /* very deep top recess (reveal wall) */
    inset 0 -12px 22px rgba(1, 6, 3, 0.45),         /* bottom recess too                  */
    inset 0 0 52px 18px rgba(1, 6, 3, 0.62);        /* deep all-round set-back vignette    */
}

/* Style 2 (window) — show the keycard_title BELOW the picture. The card is a
   flex column; the imgwrap stays first (order 0) and the title moves after it.
   (The note is absolutely positioned, so it stays pinned at the card foot.) */
.kc-cardstyle2 .kc-head {
  order: 1;
  margin-top: 12px;
}

/* Ken Burns — slow zoom + slight diagonal pan on the centred (active) card.
   Restarts each time a card becomes active, so it eases in as the card appears.
   Scale headroom (15%) exceeds the pan (≤3%) so no frame edges are revealed. */
.kc-card.active .kc-img {
  animation: kc-ken-burns 3s ease-in-out forwards;
  will-change: transform;
}

/* Pausing the slideshow also freezes the zoom in place; it continues from the
   same point when resumed. */
.kc-slider.kc-paused .kc-card.active .kc-img {
  animation-play-state: paused;
}

@keyframes kc-ken-burns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.15) translate(-3%, -2%); }
}

@media (prefers-reduced-motion: reduce) {
  .kc-card.active .kc-img { animation: none; }
}


/* =========================================================================
   §5  CARD INNER ELEMENTS
   num → title (with gold hairline ::after) → body
   ========================================================================= */

/* Header row — roman numeral sits next to the title */
.kc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 16px;
}

.kc-num {
  display: none;   /* roman numerals hidden for now — delete this line to show them */
  font-family: var(--f-display);
  font-size: var(--kc-num-size);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.30em;
  color: #8A5E1A;   /* deeper bronze — reads on the light card */
}

.kc-title {
  display: block;
  font-family: var(--f-display);
  font-size: var(--kc-title-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 20, 16, 0.92);   /* dark, reversed */
}

/* Subtitle — one-word category label, shown right below the picture */
.kc-subtitle {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--ui-fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8A5E1A;
  margin: 0 0 14px;
}

.kc-body {
  font-family: var(--f-display);
  font-size: var(--kc-body-size);
  font-weight: 400;
  line-height: var(--kc-body-lh);
  color: rgba(28, 20, 16, 0.80);   /* dark, reversed */
}

/* keycard_note — a small caption pinned to the BOTTOM of every card (shown on
   both "main" and "slide" cards). Absolutely positioned so it sits at the card
   foot regardless of how the rest of the content centres. */
.kc-note {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 16px;
  margin: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--ui-fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(28, 20, 16, 0.50);   /* muted on the light card */
}

/* The four card links (title, image, subtitle, verbiage) — strip default
   anchor styling so they keep the card's typography; a gentle gold tint on
   hover gives a clickable affordance.
   NOTE: selectors are element-qualified (a.kc-*) so they outrank the UA
   `a:link` colour; otherwise the anchors would render in the browser's
   default link colour (or inherit white) instead of the card palette. */
a.kc-link {
  color: inherit;          /* verbiage + imgwrap take the surrounding colour */
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
}
/* Title & subtitle keep their own designed colours even as anchors */
a.kc-title    { color: rgba(28, 20, 16, 0.92); }
a.kc-subtitle { color: #8A5E1A; }
.kc-card.active a.kc-link:hover { color: #8A5E1A; }

/* The picture pauses/resumes the slideshow — show a pointer + slight dim on
   hover (active card only) so it reads as interactive without being a link. */
.kc-card.active .kc-imgwrap { cursor: pointer; transition: opacity 0.25s ease; }
.kc-card.active .kc-imgwrap:hover { opacity: 0.92; }


/* =========================================================================
   §4b  MAIN (category-opening) CARD  —  GOLD cover + larger title
   A "main" card opens a category, so it reads as a "chapter cover": a rich
   GOLD background, a dark accent rule above the title, a larger spaced title,
   and dark text for contrast on the gold. (Fields shown are set in the PHP
   $KC_TYPE_FIELDS map: title · image · verbiage · note — no subtitle.)
   ========================================================================= */

/* Gold background (a soft gradient for depth) instead of the regular white.
   The inset frame's gap colour is matched to the gold so the ring blends. */
/* Main card: the espresso MAT is shared (.kc-card.active); only the TILE face
   is gold. The tile keeps the shared emboss + gilded-feather + cast shadow. */
.kc-card--main.active .kc-tile {
  background: linear-gradient(160deg, #E2B45B 0%, #C89231 52%, #A9781F 100%);
}

/* Dark accent rule centred above the title (reads on the gold) */
.kc-card--main .kc-head { position: relative; }
.kc-card--main.active .kc-head::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(60,40,10,0) 0%, rgba(60,40,10,0.85) 50%, rgba(60,40,10,0) 100%);
}

/* Larger, spaced title in deep brown for strong contrast on the gold */
.kc-card--main .kc-title {
  font-size: calc(var(--kc-title-size) * 1.30);
  letter-spacing: 0.16em;
  color: #3A2708;
}

/* Verbiage + note shift to dark brown so they read on the gold ground */
.kc-card--main .kc-body { color: rgba(40, 26, 6, 0.88); }
.kc-card--main .kc-note { color: rgba(40, 26, 6, 0.62); }

/* The picture frame's gold border is lost on a gold card — give it a dark edge */
.kc-card--main .kc-imgwrap {
  border-color: rgba(60, 40, 10, 0.65);
  outline-color: rgba(60, 40, 10, 0.30);
}

/* Hide the "Main" sentinel label if a stray one is ever rendered */
.kc-card--main .kc-subtitle { display: none; }


/* =========================================================================
   §4c  cardMedia CARD  —  media-forward (title · image · note only)
   Standard light card background (same as a slide). The reduced field set is
   driven by the PHP $KC_TYPE_FIELDS map; no special background here, so it
   inherits the regular .kc-card.active white treatment.
   ========================================================================= */
/* (No background override — cardMedia uses the default slide treatment.) */


/* =========================================================================
   PAUSE BADGE  —  shown only while the slideshow is frozen (.kc-paused)
   ========================================================================= */
.kc-pause-ind {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 0;   /* SQUARE corners */
  background: rgba(12, 8, 4, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--ui-fs-display);
  letter-spacing: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.kc-slider.kc-paused .kc-pause-ind {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}


/* =========================================================================
   §6  NAVIGATION
   Arrows: lightweight chevrons in the half-card zones.
   Dots: 3 circles below.
   Progress bar: thin gold line tracking auto-advance timing.
   ========================================================================= */

/* The dots ASSEMBLY: left arrow · dots row · right arrow on one baseline.
   The arrows are BOOKENDS that extend the assembly (each adds its width + a
   3px gap); the dots keep their full width. Centered below the card. */
.kc-bar {
  display: flex;
  flex-wrap: nowrap;
  /* CENTER the arrow bookends on the dot bar. The arrows are taller than the
     dots; centering keeps them vertically aligned to the line of dots instead
     of towering above the (bottom-aligned) row. The active-dot scaleY is a
     transform (no layout change), so this never jitters as you navigate. */
  align-items: center;
  gap: 3px;                  /* arrow ↔ dots gap = the dot gap */
  width: fit-content;
  margin: -40px auto 0;      /* lift toward the card (framed plaque sits below) */
  /* The lift overlaps the slider box. .kc-slider is position:relative
     (positioned), so by CSS painting order it would paint ON TOP of this
     static bar and swallow every click on the arrows/dots. Make the bar a
     positioned element with a higher z-index so the controls stay clickable. */
  position: relative;
  z-index: 5;
  /* FRAMED PLAQUE — mirrors the keycard frame so the assembly matches it:
     espresso BROWN MAT + a thin outer GOLD LINE + a deep FLOAT shadow.
     The raised inner tile face (the "background" the controls sit on) is the
     ::before below. Content (arrows/dots) is inset by the padding so the
     gilded band around the tile stays visible. */
  padding: 13px 15px;
  background: var(--kc-mat, #46331E);
  box-shadow:
    inset 0 0 0 1px rgba(184, 131, 42, 0.90),    /* outer gold line at mat edge */
    0 7px 16px  rgba(70, 44, 10, 0.30),          /* warm-gold ambient           */
    0 12px 24px rgba(0, 0, 0, 0.34),             /* float — mid                 */
    0 20px 36px rgba(0, 0, 0, 0.40);             /* float — deep & distant      */
}

/* The raised inner TILE — the white face the controls sit on, ringed by the
   same gilded band as the keycard tile, casting a real shadow onto the mat. */
.kc-bar::before {
  content: '';
  position: absolute;
  inset: 7px 9px;                                /* = the mat thickness        */
  z-index: 0;                                    /* above mat bg, below controls */
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),     /* top highlight (emboss)      */
    0 0 0 1px  rgba(236, 184, 86, 1),            /* crisp gold at the tile edge */
    0 0 0 3px  rgba(198, 148, 56, 0.95),         /* 3px gold band               */
    0 0 5px 3px rgba(104, 72, 26, 0.65),         /* 3px feather → brown mat     */
    0 3px 6px  rgba(0, 0, 0, 0.42);              /* cast shadow (raised tile)   */
}

/* Keep the controls above the inner tile face. */
.kc-prev,
.kc-next,
.kc-dots {
  position: relative;
  z-index: 1;
}

/* Arrows — SQUARE bookends matching the dot assembly. ALWAYS visible.
   COLOUR LOGIC (mirrors the dots):
     • left arrow  = GOLD  (points back to SEEN / played slides)
     • right arrow = TAUPE (points to UPCOMING / unseen slides, like those dots)
       …until the LAST slide, when nothing is ahead → it turns GOLD (.kc-next--end).
   Clicking either RESTARTS the show + moves prev/next (JS). */
.kc-prev,
.kc-next {
  flex: 0 0 auto;
  width: 21px;               /* arrow block: +5px wider */
  height: 27px;              /* arrow block: +5px taller */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;          /* SQUARE corners */
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.30),              /* thin black border (matches dots) */
    inset 0 1px 0 rgba(255, 250, 235, 0.50),    /* gilded top highlight */
    inset 0 -2px 3px rgba(70, 46, 10, 0.30);    /* gilded bottom shade  */
  font-family: Georgia, serif;
  font-size: var(--ui-fs-value);
  line-height: 1;
  transition: color 0.2s ease, background 0.25s ease;
}

/* GOLD: the left arrow, and the right arrow on the last slide. (Gilded + foil.) */
.kc-prev,
.kc-next.kc-next--end {
  background: linear-gradient(110deg,
    #BE8A2C 0%, #D8A845 38%, #F3DC9A 50%, #D8A845 62%, #BE8A2C 100%);
  background-size: 250% 100%;
  color: rgba(34, 22, 6, 0.92);                  /* dark chevron on gold */
  animation: kc-foil 16s linear infinite;
}
.kc-prev:hover,
.kc-next.kc-next--end:hover { color: #140C06; }

/* TAUPE: the right arrow while slides remain ahead — matches the upcoming dots
   (white→taupe centre, static, no foil). */
.kc-next {
  /* Matches the upcoming dots — ANTIQUE BRONZE PATINA (matte aged bronze, warm
     top sheen → soft bottom shade, stronger antique-gold rim, no foil). */
  background-color: #4C3923;
  background-image:
    linear-gradient(to right,  #C99A4C 0%, rgba(201, 154, 76, 0) 9%, rgba(201, 154, 76, 0) 91%, #C99A4C 100%),
    linear-gradient(to bottom, #C99A4C 0%, rgba(201, 154, 76, 0) 9%, rgba(201, 154, 76, 0) 91%, #C99A4C 100%),
    linear-gradient(155deg, rgba(226, 188, 124, 0.22) 0%, rgba(226, 188, 124, 0) 36%, rgba(18, 9, 3, 0.22) 100%);
  color: rgba(244, 224, 170, 0.92);              /* light chevron on bronze */
  animation: none;
}
.kc-next:hover { color: #221608; }

.kc-dots {
  position: relative;   /* positioning context for the gold progress line */
  display: flex;
  flex-wrap: nowrap;       /* one row — the dots fill the frame exactly */
  align-items: center;     /* every dot vertically CENTERED on the row's midline */
  gap: 3px;                /* fixed 3px between segments */
  /* The whole framed plaque is sized to match the keycard width. The dots row
     therefore = card width MINUS the two arrow bookends (21px + 3px gap each)
     and the plaque's mat padding (15px each side) → card_w − 78px. The dots
     fill this width proportionally. */
  box-sizing: border-box;
  width: calc(var(--kc-card-w) - 78px);
  /* A THIN GOLD LINE hugging the dots — the same idea as the frame line around
     the keycard PICTURE. A little padding keeps the line close but off the dots,
     and a drop shadow lifts the dot strip off the white tile face. */
  padding: 4px 5px;
  border: 1px solid rgba(184, 131, 42, 0.85);
  box-shadow: 0 2px 5px rgba(20, 10, 4, 0.40);
}

.kc-dot {
  position: relative;   /* sit above the gold rail; container for the fill */
  z-index: 1;
  display: block;
  /* WIDTH ∝ staytime: flex-grow is set per dot in PHP to the staytime (seconds)
     over a 3px basis, so every dot keeps a 3px minimum and the rest of the
     frame width is shared in proportion to dwell time. Rectangular, no shrink. */
  flex: 0 0 3px;            /* grow is overridden inline; shrink 0; basis 3px */
  height: 14px;            /* DEFAULT (slide / type 1 = medium) */
  border-radius: 0;        /* SQUARE corners */
  overflow: hidden;        /* clip the gold fill */
  /* UPCOMING (unseen) segment — ANTIQUE BRONZE PATINA: a matte aged-bronze body
     with a faint warm top sheen → soft bottom shade, ringed by a stronger
     antique-gold rim. SQUARE, gradients only, NO foil — deliberately less shiny
     than the played gold, so it reads as the same metal lying dormant.
     Layer order (top→bottom): gold rim · gold rim · patina sheen · base colour. */
  background-color: #4C3923;
  background-image:
    linear-gradient(to right,  #C99A4C 0%, rgba(201, 154, 76, 0) 9%, rgba(201, 154, 76, 0) 91%, #C99A4C 100%),
    linear-gradient(to bottom, #C99A4C 0%, rgba(201, 154, 76, 0) 9%, rgba(201, 154, 76, 0) 91%, #C99A4C 100%),
    linear-gradient(155deg, rgba(226, 188, 124, 0.22) 0%, rgba(226, 188, 124, 0) 36%, rgba(18, 9, 3, 0.22) 100%);
  box-shadow:
    inset 0 1px 0 rgba(234, 200, 142, 0.22),   /* faint top patina highlight */
    inset 0 -2px 3px rgba(18, 9, 3, 0.30),      /* soft bottom shade (matte)  */
    0 0 0 1px rgba(0, 0, 0, 0.32);              /* thin black border          */
  cursor: pointer;
  transform-origin: center center;   /* scale symmetrically — dots are centered */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The gold FILL — a gilded "metal tile" (top highlight + bottom shade) with a
   slow foil sheen sweeping across it. Its WIDTH is driven from JS: 0→100% over
   the active card's dwell time; played = full; upcoming = 0. */
.kc-dot-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(110deg,
    #BE8A2C 0%, #D8A845 38%, #F3DC9A 50%, #D8A845 62%, #BE8A2C 100%);
  background-size: 250% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.50),    /* top highlight (gilded metal) */
    inset 0 -2px 3px rgba(70, 46, 10, 0.35);    /* bottom shade                 */
  animation: kc-foil 16s linear infinite;
}
.kc-dot.played .kc-dot-fill { opacity: 0.72; }   /* visited = soft gold */
.kc-dot.active  .kc-dot-fill { opacity: 1; }      /* current = bright    */

/* HEIGHT by keycard_type:  main (0) tall · slide (1) medium · cardMedia (2) short */
.kc-dot--main      { height: 22px; }
.kc-dot--cardmedia { height: 8px; }

/* ACTIVE segment — grows a little TALLER (no width change, so it never overlaps
   neighbours). NO glow — the bright gradient fill + the taller scale carry it. */
.kc-dot.active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30);
  transform: scaleY(1.16);
}

/* Slow foil sheen sweep — HORIZONTAL (shared by the dot fills + the arrows) */
@keyframes kc-foil {
  from { background-position: 175% 0; }
  to   { background-position: -75% 0; }
}

.kc-progress-wrap {
  /* A faint static gilded band BEHIND the segments (the segments carry the
     bright gold now). Spans the full row; vertically CENTERED with the dots. */
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 100%;
  height: 24px;
  background: transparent;
  margin: 0;
  border-radius: 0;   /* SQUARE corners */
  overflow: visible;
  /* NO glow — assembly uses gradients only. */
  pointer-events: none;
}

.kc-progress {
  height: 24px;
  width: 100%;
  /* STATIC vertical gradient behind the dots: GOLD at the top and bottom edges
     → WHITE at the centre. No shimmer. A static horizontal mask feathers the
     band at its left/right ends. */
  background: linear-gradient(to bottom,
    #D8A845 0%,
    #FFFFFF 50%,
    #D8A845 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  border-radius: 0;   /* SQUARE corners */
}

@media (prefers-reduced-motion: reduce) {
  .kc-dot-fill,
  .kc-progress,
  .kc-prev,
  .kc-next { animation: none; }
}


/* =========================================================================
   §7  RESPONSIVE
   The card is now a PORTRAIT 3:4 with a FLUID width (see §0):
   --kc-card-w = min(400px, 92vw), --kc-card-h = card-w × 4/3. The .kc-inner
   and .kc-slider track the same min(560px, 96vw), so the whole carousel
   always fits the viewport horizontally. The dots plaque scales from
   --kc-card-w via calc(var(--kc-card-w) − 78px); no extra rules needed for
   horizontal fit.

   PHONE FIT — vertically, the whole page (header 140 + slider padding 80 +
   card_h + plaque 58 + footer 80 = card_h + 358) must fit one viewport.
   Below 600px wide we therefore (1) cap card_h to 100vh − 358px so the page
   fits above the fold, and (2) trim the slider's top/bottom padding from
   84px → 40px so the deep float shadow doesn't eat that budget.
   ========================================================================= */
@media (max-width: 700px) {
  :root {
    /* PHONE: narrower + TALLER — a 3:5 portrait (vs the wide-screen 3:4),
       shrunk to min(330px, 84vw) so it reads as a slim vertical card. */
    --kc-card-w: min(330px, 84vw);
    --kc-card-h: min(calc(var(--kc-card-w) * 5 / 3), calc(100vh - 240px));
  }
  /* Symmetric slider padding keeps the orange backing centred on the card;
     the section margin clears the fixed 140px header (card top ~150px). */
  .kc-slider  { padding: 40px 0; }
  .kc-section { margin-top: 40px; }
}