/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* ==========================================================================
   128 South Events — Interior Page System

   This is the single stylesheet for the site. All custom CSS goes here.

   The Customizer already owns: body font/size/line-height, heading font,
   H1-H6 responsive sizes, body + heading colours, accent colour, body
   background, header colours, footer widget colours, layout widths.
   Change those there, not here.

   Cache-busting is automatic — functions.php versions this file with
   filemtime(), so the Version number above no longer needs bumping.

   Companion: ROW-BUILD-SHEET.md lists the CSS classes each Beaver Builder
   row expects.
   ========================================================================== */

:root{
  /* PALETTE — blush & mauve, 19 Oct 2026, replacing the #000080 navy after
     client feedback ("soft neutral pretty girly colour, not bright blue").
     The old token names --s128-navy / --s128-navy-hover are kept so every
     existing rule follows automatically; they now hold mauve. Measured:
     white on mauve 6.29:1, mauve on white 6.29:1, mauve on cream 5.43:1,
     #333 on blush 6.85:1, plum on blush 5.05:1, plum on blush-light 7.53:1.
     Blush is too light for white text (1.84:1) — use it as a ground only.
     Section 13 at the end of this file re-points the grounds that used to be
     navy (the feature band, the footer). */
  --s128-navy:        #7D5560;  /* mauve — buttons, links, nav hover, small fills */
  --s128-navy-hover:  #654550;  /* deeper mauve — hover and active states only */
  --s128-mauve:       #7D5560;
  --s128-plum:        #5C3F47;  /* eyebrows and links on blush grounds */
  --s128-blush:       #ECCFCA;  /* feature band ground — lightened 20 Oct (was #DCB6B4) */
  --s128-champagne:   #E8DCC6;  /* soft gold ground — replaces brass behind blush, 20 Oct */
  --s128-blush-light: #F3E4E1;  /* footer ground */
  --s128-brass:       #AF8D56;  /* accent — rules, eyebrows, large text */
  --s128-brass-deep:  #9D7539;  /* hover, image overlays */
  --s128-brass-light: #C9A96A;  /* brass on dark grounds (contrast-safe) */
  --s128-cream:       #F2EEE6;  /* page ground */
  --s128-off:         #F4F4F3;  /* alternating section ground */
  --s128-ink:         #333333;  /* headings */
  --s128-ink-body:    #5B5B5B;  /* body */
  --s128-ink-light:   #E8E1D4;  /* text on navy */
  --s128-line:        #DFD6C5;

  --s128-pad:         96px;     /* section padding, desktop */
  --s128-pad-mobile:  56px;
  --s128-measure:     68ch;     /* reading width */
  --s128-ui: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --s128-display: "Playfair Display", Georgia, serif;
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — the parts the Customizer has no field for
   -------------------------------------------------------------------------- */

/* H4 is the UI label role: Poppins, uppercase, tracked. The Customizer only
   allows ONE heading family, so H4 is re-pointed here. */
.fl-page h4,
.s128-label{
  font-family: var(--s128-ui);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s128-ink);
}

/* Eyebrow — small brass label above a heading. Large enough tracking that
   #AF8D56 stays legible; never use brass for body copy (2.9:1 on white). */
.s128-eyebrow{
  display: block;
  font-family: var(--s128-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s128-brass-deep);
  margin: 0 0 14px;
}

/* Cap running text at a comfortable measure even inside a 1200px row. */
.s128-measure,
.s128-measure p{ max-width: var(--s128-measure); }
.s128-measure.s128-centred{ margin-left: auto; margin-right: auto; }

/* Reserve the script face for a single accent word. Never a page title. */
.s128-script{
  font-family: "Ms Madi", cursive;
  font-size: 1.5em;
  line-height: .9;
  color: var(--s128-brass-deep);
}

h1,h2,h3{ text-wrap: balance; }

/* --------------------------------------------------------------------------
   2. HEADER — Book a Tour button + tap-to-call
   Add the CSS class in Appearance → Menus → the item's "CSS Classes" field.
   -------------------------------------------------------------------------- */

.fl-page-nav .menu-item.nav-cta > a{
  background: var(--s128-brass);
  /* Navy, not white. White on brass measures 3.10:1 — below the 4.5:1 AA floor
     for a 14px label. Navy on brass is 5.16:1 and keeps the brass untouched. */
  color: var(--s128-navy) !important;
  font-family: var(--s128-ui);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 26px !important;
  margin-left: 14px;
  border-radius: 0;
  transition: background .18s ease;
  line-height: 1.2;
}
.fl-page-nav .menu-item.nav-cta > a:hover,
.fl-page-nav .menu-item.nav-cta > a:focus-visible{
  background: var(--s128-brass-deep);
  color: #fff !important;  /* white on deep brass is 4.17:1 — acceptable on hover only */
}
/* Full width in the mobile overlay so it reads as the primary action. */
@media (max-width: 992px){
  .fl-page-nav .navbar-nav > li.menu-item.nav-cta > a{
    display: block;
    margin: 12px 0 0;
    text-align: center;
  }
}

/* Tap-to-call — hidden on desktop, where the footer carries the number.
   !important is required: BB Theme sets
     @media (min-width:992px) .fl-page-nav-right .fl-page-nav ul.navbar-nav > li {display:block}
   at (0,3,2), which outranks any reasonable selector we can write here. */
.fl-page-nav .navbar-nav > li.menu-item.nav-call{ display: none !important; }
@media (max-width: 992px){
  .fl-page-nav .navbar-nav > li.menu-item.nav-call{ display: block !important; }
}

/* Nav link colour. The BB Theme default #828282 is 3.84:1 on white — below the
   4.5:1 AA floor for a 14px link, on every page. #4A4A4A is 8.86:1 and still
   reads as a soft grey next to the navy headings, so the header keeps its light
   feel. Hover goes navy rather than the brass accent, which is only 3.10:1.
   Set here rather than in the Customizer so the system stays in one file — if
   fl-nav-link-color is ever changed in Appearance → Customize, delete this block
   so there is only one source of truth. */
.fl-page-nav .navbar-nav > li > a,
.fl-page-nav .navbar-nav .sub-menu > li > a{ color: #4A4A4A; }
/* The mobile menu toggle carries its own label, outside .navbar-nav, so the rule
   above misses it — it was the last #828282 left on the site at 3.84:1. */
.fl-page-nav .navbar-toggle,
.fl-page-nav .navbar-toggle span,
.fl-page-nav .navbar-toggler,
.fl-page-nav .navbar-toggler span{ color: #4A4A4A; }

.fl-page-nav .navbar-nav > li > a:hover,
.fl-page-nav .navbar-nav > li > a:focus-visible,
.fl-page-nav .navbar-nav .sub-menu > li > a:hover,
.fl-page-nav .navbar-nav .sub-menu > li > a:focus-visible,
.fl-page-nav .navbar-nav > li.current-menu-item > a,
.fl-page-nav .navbar-nav > li.current-menu-ancestor > a{ color: var(--s128-navy); }

/* --------------------------------------------------------------------------
   3. PAGE BANNER  — row class: s128-banner
   Row settings: full width, background photo, min-height 360px.
   Overlay colour is set here, not per row, so all 16 pages stay identical.
   -------------------------------------------------------------------------- */

.fl-row.s128-banner{ position: relative; }

/* The scrim. Two layers, and the split matters.
   The flat brass tint alone was 55% and measured 2.03:1 for white text over a
   bright photograph — the copy was legible only because every banner photo so
   far happens to be dark. Brass sits mid-luminance, so raising its alpha mutes
   the photo long before it fixes contrast.
   So: brass at 45% carries the warmth across the whole image, and a navy
   gradient does the darkening — heaviest through the middle 18-84%, which is
   where the centred text block sits at every banner height we use (360px full,
   280px short, 240px mobile), and lighter at the top and bottom edges so the
   photograph still reads and the row does not slam into the white header.
   The gradient colour is a warm brown #2D200C, not navy. Navy at the same alpha
   measures slightly better (6.82 / 6.08 / 5.48) but turns every banner cool and
   grey and throws away the sepia the brass tint is there to create. Brown keeps
   the warmth and still clears AA comfortably.
   Measured behind the text over a PURE WHITE photo — the worst case there is:
   H1 6.06:1, body copy 5.44:1, eyebrow 4.92:1. All pass.
   If you change either alpha, re-check against a white photo, not a dark one.
   To go cool instead, swap 45,32,12 for the navy 0,0,128 in the four stops. */
.fl-row.s128-banner > .fl-row-content-wrap::before{
  content:"";
  position:absolute; inset:0;
  background-color: rgba(157,117,57,.45);
  background-image: linear-gradient(
    to bottom,
    rgba(45,32,12,.28) 0%,
    rgba(45,32,12,.60) 18%,
    rgba(45,32,12,.60) 84%,
    rgba(45,32,12,.32) 100%
  );
  pointer-events:none;
}
.fl-row.s128-banner .fl-row-content{
  position: relative;
  z-index: 1;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.fl-row.s128-banner h1{
  font-family: var(--s128-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
}
.fl-row.s128-banner .s128-eyebrow{ color: #fff; opacity: .85; }
.fl-row.s128-banner p{
  color: rgba(255,255,255,.92);
  font-size: 18px;
  max-width: 56ch;
  margin: 0 auto;
}
@media (max-width: 768px){
  .fl-row.s128-banner .fl-row-content{ min-height: 240px; padding: 44px 0; }
  .fl-row.s128-banner h1{ font-size: 34px; }
  .fl-row.s128-banner p{ font-size: 16px; }
}

/* Utility pages use a shallower banner — row class: s128-banner s128-banner-short */
.fl-row.s128-banner-short .fl-row-content{ min-height: 280px; }
@media (max-width: 768px){
  .fl-row.s128-banner-short .fl-row-content{ min-height: 200px; }
}

/* --------------------------------------------------------------------------
   4. BREADCRUMB STRIP — row class: s128-crumbs
   -------------------------------------------------------------------------- */

.fl-row.s128-crumbs .fl-row-content{
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.fl-row.s128-crumbs,
.fl-row.s128-crumbs .fl-row-content-wrap{ background: var(--s128-cream); }
.fl-row.s128-crumbs .fl-module-content{ margin: 0; }
.s128-crumbs a,
.s128-crumbs span{
  font-family: var(--s128-ui);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--s128-ink-body);
  text-decoration: none;
}
.s128-crumbs a:hover{ color: var(--s128-brass-deep); text-decoration: underline; }
.s128-crumbs .sep{ color: var(--s128-brass); padding: 0 8px; }
@media (max-width: 768px){
  .fl-row.s128-crumbs{ display: none; } /* schema still emits; saves 44px */
}

/* --------------------------------------------------------------------------
   5. SECTION RHYTHM — row classes
   Apply ONE ground class per row. Never two adjacent rows on the same ground.
   -------------------------------------------------------------------------- */

.fl-row.s128-pad > .fl-row-content-wrap{
  padding-top: var(--s128-pad);
  padding-bottom: var(--s128-pad);
}
@media (max-width: 768px){
  .fl-row.s128-pad > .fl-row-content-wrap{
    padding-top: var(--s128-pad-mobile);
    padding-bottom: var(--s128-pad-mobile);
  }
}

.fl-row.s128-ground-cream > .fl-row-content-wrap{ background-color: var(--s128-cream); }
.fl-row.s128-ground-white > .fl-row-content-wrap{ background-color: #fff; }
.fl-row.s128-ground-off   > .fl-row-content-wrap{ background-color: var(--s128-off); }

.fl-row.s128-ground-navy > .fl-row-content-wrap{ background-color: var(--s128-navy); }
.fl-row.s128-ground-navy h2,
.fl-row.s128-ground-navy h3,
.fl-row.s128-ground-navy h4{ color: #fff; }
.fl-row.s128-ground-navy p,
.fl-row.s128-ground-navy li{ color: var(--s128-ink-light); }
.fl-row.s128-ground-navy .s128-eyebrow{ color: var(--s128-brass-light); }
.fl-row.s128-ground-navy a:not(.fl-button){ color: var(--s128-brass-light); }

/* Column gaps — BB sets these per row; this is the default the system assumes. */
.fl-row.s128-pad .fl-col{ padding-left: 20px; padding-right: 20px; }
@media (max-width: 768px){
  .fl-row.s128-pad .fl-col + .fl-col{ margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   5b. INTRO SPLIT — row class: s128-split (add alongside s128-pad + a ground)
   Photo one side, copy the other. Columns are vertically centred so a short
   photo doesn't leave a dead band of ground colour beneath it.
   -------------------------------------------------------------------------- */

.fl-row.s128-split .fl-col-group{ align-items: center; }
.fl-row.s128-split .fl-module-photo .fl-photo,
.fl-row.s128-split .fl-module-photo .fl-photo-content{ width: 100%; }
.fl-row.s128-split .fl-module-photo img{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px){
  .fl-row.s128-split .fl-col-group{ align-items: stretch; }
}

/* --------------------------------------------------------------------------
   5c. BUTTON COLOUR BY CONTEXT
   Body buttons are navy. Brass is reserved for the header nav CTA and the
   closing band — using it in body copy too makes the page read as all-CTA.
   -------------------------------------------------------------------------- */

.fl-page .fl-row:not(.s128-cta) a.fl-button,
.fl-page .fl-row:not(.s128-cta) a.fl-button:visited{
  background: var(--s128-navy);
  border-color: var(--s128-navy);
  color: #fff;
}
.fl-page .fl-row:not(.s128-cta) a.fl-button:hover,
.fl-page .fl-row:not(.s128-cta) a.fl-button:focus-visible{
  background: var(--s128-navy-hover);
  border-color: var(--s128-navy-hover);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5d. SPEC PANEL — row class: s128-specs (with s128-pad + a ground class)
   A 2-4 column strip of hard facts. Small uppercase label, figure beneath.
   Written as one Rich Text module per column: <h4>label</h4><h3>figure</h3>.
   Left-aligned on purpose - centring three items across a 1200px row scatters
   them. A hairline rule separates the columns; it turns horizontal when they
   stack at phone width. Border sits on .fl-col, outside the 20px column
   padding, so the rule never crowds the text.
   -------------------------------------------------------------------------- */

.fl-row.s128-specs h4{
  font-size: 12px;
  letter-spacing: .14em;
  margin: 0 0 10px;
}
.fl-row.s128-specs h3{
  font-family: var(--s128-display);
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

/* Divider colour follows the ground, so the panel works on navy or on cream. */
@media (min-width: 769px){
  .fl-row.s128-specs .fl-col + .fl-col{
    border-left: 1px solid rgba(12,27,68,.14);
  }
  .fl-row.s128-specs.s128-ground-navy .fl-col + .fl-col{
    border-left-color: rgba(255,255,255,.18);
  }
}
@media (max-width: 768px){
  .fl-row.s128-specs h3{ font-size: 26px; }
  .fl-row.s128-specs .fl-col + .fl-col{
    border-top: 1px solid rgba(12,27,68,.14);
    padding-top: 24px;
  }
  .fl-row.s128-specs.s128-ground-navy .fl-col + .fl-col{
    border-top-color: rgba(255,255,255,.18);
  }
}

/* --------------------------------------------------------------------------
   5e. INLINE LINKS AND FORM BUTTONS IN CONTENT ROWS
   The theme accent is brass, so every inline link inherits it. Measured:
   brass #af8d56 is 3.10:1 on white and 2.68:1 on cream; even the deep brass
   #9d7539 only reaches 4.17:1 / 3.60:1. All below the 4.5:1 WCAG AA floor for
   body text. So inline links in content rows are navy with a brass underline —
   16.0:1 on white, and colour is never the only signal. Brass stays where it
   is large and tracked: the eyebrow, the nav CTA, the closing band.
   Excluded: the CTA band and navy grounds, which set their own link colour,
   and the banner, whose copy is white on the scrim.
   -------------------------------------------------------------------------- */

.fl-page .fl-row:not(.s128-cta):not(.s128-banner):not(.s128-ground-navy) .fl-module-rich-text a:not(.fl-button),
.fl-page .fl-row:not(.s128-cta):not(.s128-banner):not(.s128-ground-navy) .fl-module-text-editor a:not(.fl-button){
  color: var(--s128-navy);
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fl-page .fl-row:not(.s128-cta):not(.s128-banner):not(.s128-ground-navy) .fl-module-rich-text a:not(.fl-button):hover,
.fl-page .fl-row:not(.s128-cta):not(.s128-banner):not(.s128-ground-navy) .fl-module-rich-text a:not(.fl-button):focus-visible{
  color: var(--s128-brass-deep);
  text-decoration-color: currentColor;
}

/* WPForms submit button.
   !important is deliberate here. The Ultimate Addons WPForms Styler writes its
   colours into the per-page layout stylesheet as .fl-node-<id> selectors, which
   are generated per module and enqueued after the child theme, so no selector
   we can write in this file wins on specificity or order. The alternative is to
   clear the colour in each module's settings, which has to be redone on every
   new form. One rule here covers every form on the site. */
.fl-page .wpforms-form button[type="submit"],
.fl-page .wpforms-form input[type="submit"]{
  background: var(--s128-navy) !important;
  border-color: var(--s128-navy) !important;
  color: #fff !important;
}
.fl-page .wpforms-form button[type="submit"]:hover,
.fl-page .wpforms-form input[type="submit"]:hover,
.fl-page .wpforms-form button[type="submit"]:focus-visible,
.fl-page .wpforms-form input[type="submit"]:focus-visible{
  background: var(--s128-navy-hover) !important;
  border-color: var(--s128-navy-hover) !important;
}

/* --------------------------------------------------------------------------
   5f. AWARD BADGES — row class: s128-badges (with s128-pad + a ground)
   The award images are whatever each awarding body supplied: 180x180, 275x275,
   80x160, in three formats. Left alone they render at natural size and the row
   reads as a scrapbook. Capping the HEIGHT (not the width) and centring each one
   in its column normalises them without distorting any logo's proportions.
   -------------------------------------------------------------------------- */

.fl-row.s128-badges .fl-col-content{ text-align: center; }
.fl-row.s128-badges .fl-module-photo .fl-photo{ display: inline-block; }
.fl-row.s128-badges img{
  height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 768px){
  .fl-row.s128-badges img{ height: 96px; }
}

/* --------------------------------------------------------------------------
   6. CLOSING CTA BAND — row class: s128-cta
   Identical on every page. Saved as a GLOBAL row in Beaver Builder.
   -------------------------------------------------------------------------- */

.fl-row.s128-cta > .fl-row-content-wrap{
  background-color: var(--s128-brass);
  padding-top: var(--s128-pad);
  padding-bottom: var(--s128-pad);
}
.fl-row.s128-cta h2{
  font-family: var(--s128-display);
  font-size: 34px;
  color: #2A1D06;
  margin: 0 0 10px;
}
.fl-row.s128-cta p{
  color: #2A1D06;   /* was #3B2A0C at 4.44:1 — just under AA. This is 5.30:1. */
  font-size: 16px;
  max-width: 52ch;
  margin: 0 auto 26px;
}
/* Centred stack. Without this the row inherits left alignment and the
   buttons stack full-width. */
.fl-row.s128-cta .fl-row-content{ text-align: center; }

/* Links here must NOT use the theme accent — the accent IS this band's
   background colour, so a tel: link renders invisible against it. */
.fl-row.s128-cta a:not(.fl-button){
  color: #2A1D06;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fl-row.s128-cta a:not(.fl-button):hover{ color: #000; }

/* Buttons side by side, centred, sized to their text.
   NOTE: .fl-col-content is display:flex in Beaver Builder 2.10, so its children
   are flex items and `display:inline-block` on them is blockified by the browser
   — even with !important. Lay them out via the flex container instead: make it a
   wrapping row, force the heading and copy to full-width lines, and let the two
   buttons share the last line. */
.fl-row.s128-cta .fl-col-content{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.fl-row.s128-cta .fl-module-heading,
.fl-row.s128-cta .fl-module-rich-text{ flex: 0 0 100%; }
.fl-row.s128-cta .fl-module-button{
  flex: 0 0 auto;
  width: auto;
  margin: 0 6px;
}
.fl-row.s128-cta .fl-module-button .fl-module-content{ margin-left: 0; margin-right: 0; }
.fl-row.s128-cta .fl-button{ width: auto; }

/* Primary — solid navy. Secondary — white outline. */
.fl-row.s128-cta .s128-btn-primary a.fl-button{
  background: var(--s128-navy) !important;
  border-color: var(--s128-navy) !important;
  color: #fff !important;
}
.fl-row.s128-cta .s128-btn-secondary a.fl-button{
  background: transparent !important;
  /* Navy outline and label, not white. A white label sits directly on the brass
     band at 3.10:1; navy is 5.16:1. */
  border: 1px solid var(--s128-navy) !important;
  color: var(--s128-navy) !important;
}
.fl-row.s128-cta .s128-btn-secondary a.fl-button:hover,
.fl-row.s128-cta .s128-btn-secondary a.fl-button:focus-visible{
  background: var(--s128-navy) !important;
  color: #fff !important;
}
@media (max-width: 768px){
  .fl-row.s128-cta h2{ font-size: 27px; }
  .fl-row.s128-cta .fl-module-button{ flex: 0 0 100%; width: 100%; margin: 0 0 12px; }
  .fl-row.s128-cta .fl-button{ display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS — site-wide floor
   -------------------------------------------------------------------------- */

.fl-page .fl-button,
.fl-page .fl-button:visited{
  font-family: var(--s128-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 15px 36px;
  min-height: 48px;              /* accessible tap target */
  transition: background .18s ease, color .18s ease;
}
@media (max-width: 768px){
  .fl-page .fl-button{ width: 100%; text-align: center; }
}

/* Beaver Builder wraps the button label in a <span> carrying its own colour,
   which wins over any colour set on the <a>. Make the span inherit so the
   anchor-level rules below (and anywhere else) actually take effect. Without
   this, a navy button renders black text on navy. */
.fl-page .fl-button span,
.fl-page .fl-button .fl-button-text{ color: inherit !important; }

/* --------------------------------------------------------------------------
   8. FOOTER — four columns
   Colours come from the Customizer (footer widget bg/text/link).
   -------------------------------------------------------------------------- */

.fl-page-footer-widgets{ padding: 64px 0 48px; }
.fl-page-footer-widgets .fl-widget + .fl-widget{ margin-top: 28px; }
.fl-page-footer-widgets .widget-title,
.fl-page-footer-widgets h4{
  font-family: var(--s128-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s128-brass-light);
  margin: 0 0 14px;
}
.fl-page-footer-widgets p,
.fl-page-footer-widgets li{
  font-size: 15px;
  line-height: 1.75;
  color: var(--s128-ink-light);
}
.fl-page-footer-widgets ul{ list-style: none; margin: 0; padding: 0; }
.fl-page-footer-widgets a{ text-decoration: none; }
.fl-page-footer-widgets a:hover{ color: #fff; text-decoration: underline; }
.fl-page-footer{ padding: 20px 0; border-top: 1px solid rgba(232,225,212,.16); }
.fl-page-footer *{ font-size: 13px; }

@media (max-width: 768px){
  .fl-page-footer-widgets{ padding: 48px 0 32px; }
  .fl-page-footer-widgets .fl-col + .fl-col{ margin-top: 34px; }
}

/* --------------------------------------------------------------------------
   9. MOBILE ACTION BAR — markup injected by functions-snippet.php
   Two actions, always reachable. Body gets bottom padding so it never
   covers the footer's last line.
   -------------------------------------------------------------------------- */

.s128-actionbar{ display: none; }
@media (max-width: 768px){
  .s128-actionbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    box-shadow: 0 -2px 14px rgba(0,0,0,.18);
  }
  .s128-actionbar a{
    font-family: var(--s128-ui);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 8px;
    min-height: 52px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .s128-actionbar .s128-call{ background: var(--s128-navy); color: #fff; }
  .s128-actionbar .s128-tour{ background: var(--s128-brass); color: #fff; }
  .fl-page{ padding-bottom: 52px; }
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY + HOUSEKEEPING
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.fl-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--s128-brass-deep);
  outline-offset: 2px;
}

/* Brass is 2.9:1 on white — fails WCAG AA for body text. Guard against it
   being used for small copy by mistake. */
.s128-eyebrow,
.s128-crumbs .sep{ /* large/tracked contexts only — intentional */ }

img{ max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nothing should ever scroll the page sideways. */
.fl-page{ overflow-x: hidden; }

/* ==========================================================================
   11. THE BLOG — archive, single post, sidebar
   The posts page cannot take a Beaver Builder layout, so none of the row
   classes above reach it. Everything here is scoped to the BB Theme's own
   blog markup (.fl-archive, .fl-post, .fl-sidebar) instead.

   TEXT-FIRST BY DESIGN. 107 of the 108 posts have no image, featured or
   inline, and the client does not want images added to the back catalogue.
   So the archive is a typographic list — date, title, excerpt — with no
   thumbnail slot anywhere. A card grid would leave an empty frame on every
   row and read as broken; a list reads as deliberate.
   ========================================================================== */

/* Breathing room — the archive butts straight against the header otherwise. */
.fl-archive.container,
body.single-post .fl-page-content > .container{
  padding-top: 64px;
  padding-bottom: 64px;
}

/* --- Archive list --------------------------------------------------------- */

.fl-archive .fl-post{
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--s128-line);
}
.fl-archive .fl-post:last-of-type{ border-bottom: 0; }

/* Date first, as the small uppercase label. It is the only metadata these
   posts have, and it sets expectations honestly — most are several years old. */
.fl-archive .fl-post-header{ display: flex; flex-direction: column; }
.fl-archive .fl-post-meta-top{
  order: -1;
  font-family: var(--s128-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--s128-brass-deep);
  margin: 0 0 8px;
}

.fl-archive .fl-post-title{
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 10px;
  text-wrap: balance;
}
.fl-archive .fl-post-title a{
  color: var(--s128-navy);
  text-decoration: none;
}
.fl-archive .fl-post-title a:hover,
.fl-archive .fl-post-title a:focus-visible{
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-underline-offset: 3px;
}

.fl-archive .fl-post-content{ max-width: var(--s128-measure); }
.fl-archive .fl-post-content p{ margin: 0 0 12px; }

.fl-post-more-link{
  font-family: var(--s128-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s128-navy);
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-underline-offset: 4px;
}
.fl-post-more-link:hover,
.fl-post-more-link:focus-visible{
  color: var(--s128-brass-deep);
  text-decoration-color: currentColor;
}

/* One post in the whole catalogue has an image, and BB gives it a different
   two-column layout. Normalise it so it sits in the same rhythm as the rest
   instead of announcing itself as the odd one out. */
.fl-archive .fl-post-image-beside-wrap{ display: block; }
.fl-archive .fl-post-image-beside,
.fl-archive .fl-post-content-beside{ width: 100%; max-width: none; float: none; padding: 0; }
.fl-archive .fl-post-image-beside{ margin: 0 0 18px; }
.fl-archive .fl-post-image-beside img{ width: 100%; height: auto; display: block; }

/* --- Single post ---------------------------------------------------------- */

body.single-post .fl-post-header .fl-post-title,
body.single-post h1.fl-post-title{
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 12px;
  text-wrap: balance;
}
@media (max-width: 768px){
  body.single-post .fl-post-header .fl-post-title,
  body.single-post h1.fl-post-title{ font-size: 30px; }
  .fl-archive .fl-post-title{ font-size: 24px; }
}

body.single-post .fl-post-meta-top{
  font-family: var(--s128-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--s128-brass-deep);
  margin: 0 0 24px;
}

/* Post titles. The old pink "Mr De Haviland" site-title settings were fixed at
   the root in the Customizer on 19 Oct 2026 (Playfair Display, #333333), so the
   override that used to live here is gone. Archive title links stay navy: the
   theme's link colour is brass, which fails contrast on white. */
.fl-archive .fl-post-title a{ color: var(--s128-navy); }

/* Reading measure. These posts were written for a full-width theme and run the
   whole 923px column otherwise — about 120 characters a line. Constraining the
   whole article, not just the copy, keeps the title, date and body on one
   left edge. 640px is roughly 75 characters at 17px. */
body.single-post .fl-post{ max-width: 640px; }

/* The back catalogue is plain editor content, but the two most recent posts
   were built with Beaver Builder. Zero BB's own row and column padding inside
   a post so both kinds line up with the title instead of sitting 40px in. */
body.single-post .fl-post-content .fl-builder-content .fl-row-content-wrap,
body.single-post .fl-post-content .fl-builder-content .fl-col{
  padding-left: 0;
  padding-right: 0;
}
body.single-post .fl-post-content .fl-builder-content .fl-module{
  margin-left: 0;
  margin-right: 0;
}
body.single-post .fl-post-content p{ margin: 0 0 20px; }
body.single-post .fl-post-content h2{ font-size: 28px; margin: 34px 0 12px; }
body.single-post .fl-post-content h3{ font-size: 22px; margin: 28px 0 10px; }
body.single-post .fl-post-content img{ height: auto; margin: 8px 0 20px; }
body.single-post .fl-post-content blockquote{
  border-left: 2px solid var(--s128-brass);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
}

/* Inline links in post bodies — same rule as section 5e, which cannot reach
   here because it is scoped to Beaver Builder rows. */
body.single-post .fl-post-content a:not(.fl-button),
.fl-archive .fl-post-content a:not(.fl-button):not(.fl-post-more-link){
  color: var(--s128-navy);
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fl-post-meta-bottom{
  border-top: 1px solid var(--s128-line);
  margin-top: 34px;
  padding-top: 18px;
  font-size: 15px;
}

/* --- Sidebar -------------------------------------------------------------- */

.fl-sidebar .fl-widget{ margin-bottom: 38px; }
.fl-sidebar .fl-widget-title{
  font-family: var(--s128-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--s128-ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--s128-line);
}
.fl-sidebar ul{ list-style: none; margin: 0; padding: 0; }
.fl-sidebar li{ margin: 0 0 9px; line-height: 1.4; }
.fl-sidebar a{
  color: var(--s128-navy);
  text-decoration: none;
}
.fl-sidebar a:hover,
.fl-sidebar a:focus-visible{
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-underline-offset: 3px;
}
.fl-sidebar input[type="search"],
.fl-sidebar input[type="text"]{ width: 100%; }

/* --- Pagination ----------------------------------------------------------- */

.fl-archive-nav,
.fl-post-nav{
  margin-top: 40px;
  font-family: var(--s128-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fl-archive-nav a,
.fl-post-nav a{
  color: var(--s128-navy);
  text-decoration: underline;
  text-decoration-color: var(--s128-brass);
  text-underline-offset: 4px;
}

/* --- Blog banner ---------------------------------------------------------- */
/* Printed by s128_blog_banner() in functions.php, on the posts page and the
   category, date and search archives. It reuses .s128-banner, so the scrim,
   type and heights in section 3 apply unchanged — but the photo has to come
   from here, because /journal/ has no Beaver Builder layout to set it in.
   One image serves every blog view. Path is root-relative so it survives the
   move to the live domain.

   Deliberately the 1536px JPEG variant, not the full-size original: 197KB
   against 405KB, and behind the scrim on a 280px strip nobody will ever see
   the difference. The first choice here was home-1.png — a 3.1MB PNG. */
.s128-blog-banner > .fl-row-content-wrap{
  background-image: url("/wp-content/uploads/2021/03/128-South-Erin-Costa-Photography-6-11-1536x1024.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* The archive already has generous padding of its own; with a banner above it
   the combined gap is too much. */
.s128-blog-banner + .fl-page-content .fl-archive.container,
body.blog .fl-archive.container{ padding-top: 48px; }

/* ==========================================================================
   12. PHOTO CREDITS  (added 15 Oct 2026)
   ========================================================================== */
/* Every client photo carries its photographer's name. Three places:
   a) Gallery rows (UABB Photo Gallery): the media-library Caption field is
      set to "Photo: <Studio>" and shown in the lightbox, so no CSS needed.
   b) Banner rows: a small Text module with class .s128-photo-credit, pinned
      to the bottom-right corner of the banner. It sits on the scrim, so
      white text holds contrast even over a pale photo.
   c) /gallery/ ends with a "Photography by" list: .s128-credits.
   The rotating homepage hero is covered by (c), not per-slide labels. */
.s128-banner > .fl-row-content-wrap{ position: relative; }
.s128-banner .s128-photo-credit{
  position: absolute;
  right: 16px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  pointer-events: auto;
}
.s128-banner .s128-photo-credit,
.s128-banner .s128-photo-credit p,
.s128-banner .s128-photo-credit a{
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  text-decoration: none;
  margin: 0;
}
.s128-banner .s128-photo-credit a:hover{ text-decoration: underline; }

.s128-credits{ font-size: 14px; color: #4A4A4A; text-align: center; }
.s128-credits ul{ list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.s128-credits a{ color: var(--s128-navy); text-decoration: underline;
  text-decoration-color: var(--s128-brass); text-underline-offset: 3px; }

@media (max-width: 767px){
  .s128-banner .s128-photo-credit{ right: 10px; bottom: 6px; }
  .s128-banner .s128-photo-credit,
  .s128-banner .s128-photo-credit p{ font-size: 10px; }
}


/* ==========================================================================
   13. BLUSH & MAUVE GROUNDS  (added 19 Oct 2026)
   The tokens at the top turned every navy fill, button and link mauve. These
   rules handle the places where the navy was a *ground* with light text on it,
   which now become soft blush grounds with dark text.
   ========================================================================== */

/* Feature band (row class s128-ground-navy — name kept so no rows need editing). */
.fl-row.s128-ground-navy > .fl-row-content-wrap{ background-color: var(--s128-blush); }
.fl-row.s128-ground-navy h2,
.fl-row.s128-ground-navy h3,
.fl-row.s128-ground-navy h4{ color: var(--s128-ink); }
.fl-row.s128-ground-navy p,
.fl-row.s128-ground-navy li{ color: var(--s128-ink); }
.fl-row.s128-ground-navy .s128-eyebrow{ color: var(--s128-plum); }
.fl-row.s128-ground-navy a:not(.fl-button){
  color: var(--s128-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 769px){
  .fl-row.s128-specs.s128-ground-navy .fl-col + .fl-col{ border-left-color: rgba(92,63,71,.28); }
}
@media (max-width: 768px){
  .fl-row.s128-specs.s128-ground-navy .fl-col + .fl-col{ border-top-color: rgba(92,63,71,.28); }
}

/* Brass stays (the gold reads well with blush) but its label is now dark
   brown, not navy: #2A1D06 on brass is 5.30:1. */
.fl-page-nav .menu-item.nav-cta > a{ color: #2A1D06 !important; }
.fl-row.s128-cta .s128-btn-secondary a.fl-button{
  border-color: #2A1D06 !important;
  color: #2A1D06 !important;
}
.fl-row.s128-cta .s128-btn-secondary a.fl-button:hover,
.fl-row.s128-cta .s128-btn-secondary a.fl-button:focus-visible{
  background: #2A1D06 !important;
  border-color: #2A1D06 !important;
  color: #fff !important;
}

/* Footer — light blush with dark text. The Customizer's footer colour fields
   are set to match, but these rules win either way. */
.fl-page-footer-widgets,
.fl-page-footer{ background-color: var(--s128-blush-light) !important; }
.fl-page-footer-widgets .widget-title,
.fl-page-footer-widgets h4{ color: var(--s128-plum); }
.fl-page-footer-widgets p,
.fl-page-footer-widgets li,
.fl-page-footer,
.fl-page-footer p{ color: #4A4A4A; }
.fl-page-footer-widgets a,
.fl-page-footer a{ color: var(--s128-plum) !important; }
.fl-page-footer-widgets a:hover,
.fl-page-footer a:hover{ color: var(--s128-ink) !important; text-decoration: underline; }
.fl-page-footer{ border-top: 1px solid rgba(92,63,71,.18); }

/* Mobile action bar — three buttons: Call · Text · Book a Tour. */
@media (max-width: 768px){
  .s128-actionbar{ grid-template-columns: 1fr 1fr 1fr; }
  .s128-actionbar .s128-call{ background: var(--s128-mauve); color: #fff; }
  .s128-actionbar .s128-text{ background: var(--s128-plum); color: #fff; }
  .s128-actionbar .s128-tour{ background: var(--s128-brass); color: #2A1D06; }
  .s128-actionbar a{ font-size: 13px; letter-spacing: .04em; }
}

/* "Text us" link in the header phone line. */
.s128-header-text{ margin-left: 10px; }
.s128-header-text a{ color: var(--s128-mauve); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   14. HOMEPAGE — Ultimate Addons modules still carrying the old navy
   These modules (interactive banners and flip boxes) keep their colours in
   nested setting groups that cannot be safely rewritten over the builder API
   — doing so crashed the builder on 19 Oct 2026. Recoloured here instead.
   Node IDs are the homepage's (page 11). If a module is rebuilt, its ID
   changes and its rule here can be deleted.
   ========================================================================== */

/* Venue tiles (Interactive Banner 2): hover overlay navy → mauve tint. */
.fl-node-6njt8af93dyp .fl-node-content .uabb-new-ib:before,
.fl-node-p0odr4sa78uk .fl-node-content .uabb-new-ib:before,
.fl-node-83x6qicmsfwk .fl-node-content .uabb-new-ib:before{
  background-color: rgba(125,85,96,.77) !important;
}

/* Suite tiles (Interactive Banner 1): title and button hover. */
.fl-node-kez3uva25wsq h3.uabb-ib1-title,
.fl-node-urd548yjwbis h3.uabb-ib1-title{ color: var(--s128-mauve) !important; }
.fl-builder-content .fl-node-kez3uva25wsq .uabb-creative-button-wrap a:hover,
.fl-builder-content .fl-node-kez3uva25wsq .uabb-creative-button-wrap a:focus,
.fl-builder-content .fl-node-urd548yjwbis .uabb-creative-button-wrap a:hover,
.fl-builder-content .fl-node-urd548yjwbis .uabb-creative-button-wrap a:focus{
  background: var(--s128-mauve) !important;
  border-color: var(--s128-mauve) !important;
}
.fl-builder-content .fl-node-kez3uva25wsq a.uabb-creative-transparent-btn:hover:after,
.fl-builder-content .fl-node-urd548yjwbis a.uabb-creative-transparent-btn:hover:after{
  background: var(--s128-mauve) !important;
}

/* Flip boxes: button. */
.fl-builder-content .fl-node-0usr8teqg4iv .uabb-creative-button-wrap a,
.fl-builder-content .fl-node-0usr8teqg4iv .uabb-creative-button-wrap a:visited,
.fl-builder-content .fl-node-gepxfoadisqc .uabb-creative-button-wrap a,
.fl-builder-content .fl-node-gepxfoadisqc .uabb-creative-button-wrap a:visited{
  background: var(--s128-mauve) !important;
  border-color: var(--s128-mauve) !important;
  color: #fff !important;
}
.fl-builder-content .fl-node-0usr8teqg4iv .uabb-creative-button-wrap a:hover,
.fl-builder-content .fl-node-gepxfoadisqc .uabb-creative-button-wrap a:hover{
  background: var(--s128-navy-hover) !important;
  border-color: var(--s128-navy-hover) !important;
}

/* Scroll-to-top arrow sat on top of "Book a Tour" in the mobile action bar.
   Lift it above the 52px bar on phones. */
@media (max-width: 768px){
  #fl-to-top{ bottom: 68px !important; }
}


/* =========================================================================
 * 15. Lighter blush + softer gold on the homepage (20 Oct 2026, client:
 *     "a lighter pink, more of a blush, and soften the gold behind it").
 *     These row/column colours are set in the builder, so they are
 *     overridden here by node ID. The stripe texture stays, toned down.
 * ====================================================================== */
/* Our Venues: gold textured row + blush intro column */
.fl-node-vbdsrqz4a53n > .fl-row-content-wrap{
  background-color: var(--s128-champagne) !important;
  background-blend-mode: soft-light;
}
.fl-node-mwek4djs23ta > .fl-col-content{ background-color: var(--s128-blush) !important; }

/* VIP Suites: blush textured row + gold title column */
.fl-node-7kiejzdn5tlb > .fl-row-content-wrap{
  background-color: var(--s128-blush) !important;
  background-blend-mode: soft-light;
}
.fl-node-akvn12jz58p7 > .fl-col-content{ background-color: var(--s128-champagne) !important; }

/* Testimonials band */
.fl-node-jb18hsr6u50y > .fl-row-content-wrap{ background-color: var(--s128-blush) !important; }


/* =========================================================================
 * 16. Homepage hero box (20 Oct 2026, client: "I love the look of the box
 *     on the first page of the old site"). One rich-text module with the
 *     class s128-hero-box, centred over the slideshow. Title is Playfair
 *     Display upright (client's choice), "Weddings & Events" (no "Special").
 * ====================================================================== */
.fl-module.s128-hero-box{
  max-width: 780px;
  margin: 0 auto !important;
  padding: 44px 56px 40px;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.85);
  outline: 1px solid rgba(255,255,255,.55);
  outline-offset: 8px;
  text-align: center;
  box-sizing: border-box;
}
.s128-hero-box p{ margin: 0; }
.s128-hero-box .s128-hero-venues{
  font-family: var(--s128-ui);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--s128-ink) !important;
}
.s128-hero-box .s128-hero-title{
  font-family: var(--s128-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--s128-ink) !important;
  margin: 14px 0 18px;
  text-transform: none;
}
.s128-hero-box .s128-amp{
  font-style: italic;
  color: var(--s128-brass-deep) !important;
}
.s128-hero-box .s128-hero-strap{
  font-family: var(--s128-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--s128-ink) !important;
}
@media (max-width: 768px){
  .fl-module.s128-hero-box{ margin: 0 16px !important; padding: 26px 14px 24px; outline-offset: 5px; }
  .s128-hero-box .s128-hero-venues{ font-size: 10.5px; letter-spacing: 0; white-space: nowrap; }
  .s128-hero-box .s128-hero-strap{ font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
}


/* =========================================================================
 * 17. Wedding films (Bakery 105 page, 21 Oct 2026). Markup lives in an
 *     HTML module: .s128-films > .s128-films__reel + .s128-film-grid.
 *     YouTube cards are click-to-load (see s128 films script in
 *     functions.php) so no YouTube code loads until someone presses play.
 * ====================================================================== */
.s128-films{ max-width: 1100px; margin: 0 auto; }
.s128-films__intro{ text-align: center; max-width: 640px; margin: 0 auto 40px; }
.s128-films__reel{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 0 auto 56px;
  max-width: 900px;
}
.s128-films__reel video{
  display: block; width: 100%; aspect-ratio: 9 / 16; height: auto;
  background: #222; object-fit: cover;
}
.s128-films__reel h3{ font-family: var(--s128-display); font-weight: 400; color: var(--s128-ink); margin: 0 0 12px; }
.s128-film-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}
.s128-film{ margin: 0; }
.s128-yt{
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 16 / 9; background: #222; cursor: pointer; overflow: hidden;
}
.s128-yt img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.s128-yt:hover img, .s128-yt:focus-visible img{ transform: scale(1.03); }
.s128-yt:focus-visible{ outline: 3px solid var(--s128-mauve); outline-offset: 3px; }
.s128-yt__play{
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px;
  margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.s128-yt__play::after{
  content: ""; position: absolute; left: 26px; top: 20px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent var(--s128-plum);
}
.s128-film iframe{ display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.s128-film figcaption{ margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--s128-ink-body); }
.s128-film figcaption strong{ display: block; font-family: var(--s128-display); font-weight: 400; font-size: 19px; color: var(--s128-ink); }
@media (max-width: 992px){
  .s128-film-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .s128-films__reel{ grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .s128-films__reel video{ max-width: 300px; margin: 0 auto; }
  .s128-film-grid{ grid-template-columns: 1fr; }
}