/* ============================================================
   Section Themes — visual catalogue
   ============================================================

   How to use
   ----------
   Add one theme class next to .section (or .hero):

     <section class="section theme-water-abstract">

   Changing theme-water-abstract to theme-plaster (or any other
   theme below) is normally all that is needed to retarget the
   section's background, text contrast, overlay and nav treatment.

   Token defaults live on .section / .hero in css/style.css.
   Only override what the theme needs; order of declarations is
   kept the same in every block for easy scanning.

   Available tokens
   ----------------
     --section-bg-image
     --section-bg-image-mobile   (optional; falls back to desktop)
     --section-bg-colour
     --section-bg-x / --section-bg-y
     --section-bg-x-mobile / --section-bg-y-mobile
     --section-text-colour
     --section-muted-colour
     --section-emphasis-colour   (pull quotes, positioning lines)
     --section-rule-colour       (kintsugi rule)
     --section-overlay-colour    (R G B components)
     --section-overlay-opacity
     --section-nav-theme         (light | dark)

   Focal-point utilities (optional local overrides)
   ------------------------------------------------
     .bg-focus-left | .bg-focus-right | .bg-focus-top | .bg-focus-bottom

   ============================================================ */


/* ==================================================
   PARCHMENT
   Solid default site ground
   Dark text · light nav
   ================================================== */

.theme-parchment {
  --section-bg-image: none;
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0;

  --section-nav-theme: light;
}


/* ==================================================
   PLASTER
   Solid warm plaster
   Dark text · light nav
   ================================================== */

.theme-plaster {
  --section-bg-image: none;
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #2A2D28;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 232 223 208;
  --section-overlay-opacity: 0;

  --section-nav-theme: light;
}


/* ==================================================
   SAGE
   Solid sage green
   Dark text · light nav
   ================================================== */

.theme-sage {
  --section-bg-image: none;
  --section-bg-colour: #D4D9C8;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #2A2D28;
  --section-rule-colour: #463D2F;

  --section-overlay-colour: 212 217 200;
  --section-overlay-opacity: 0;

  --section-nav-theme: light;
}


/* ==================================================
   CHARCOAL
   Solid dark ground
   Light text · dark nav
   ================================================== */

.theme-charcoal {
  --section-bg-image: none;
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0;

  --section-nav-theme: dark;
}


/* ==================================================
   DEEP EARTH
   Solid deep earth
   Light text · dark nav
   ================================================== */

.theme-deep-earth {
  --section-bg-image: none;
  --section-bg-colour: #463D2F;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 70 61 47;
  --section-overlay-opacity: 0;

  --section-nav-theme: dark;
}


/* ==================================================
   LIGHT TEXTURE
   Soft paper / wash (portrait + landscape)
   Dark text · light nav
   ================================================== */

.theme-light-texture {
  --section-bg-image: url("../../images/backgrounds/light%20texture%20background%20landscape.png");
  --section-bg-image-mobile: url("../../images/backgrounds/light%20texture%20background.png");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LIGHT TEXTURE 2
   Alternate light texture field
   Dark text · light nav
   ================================================== */

.theme-light-texture-2 {
  --section-bg-image: url("../../images/backgrounds/light%20texture%20background%20landscape2.png");
  --section-bg-image-mobile: url("../../images/backgrounds/light%20texture%20background2.png");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LIGHT TEXTURE 3
   Alternate light texture field
   Dark text · light nav
   ================================================== */

.theme-light-texture-3 {
  --section-bg-image: url("../../images/backgrounds/light%20texture%20background%20landscape3.png");
  --section-bg-image-mobile: url("../../images/backgrounds/light%20texture%20background3.png");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LONG TEXTURE
   Quiet paper for longer reading passages
   Dark text · light nav
   ================================================== */

.theme-long-texture {
  --section-bg-image: url("../../images/backgrounds/long%20texture%201.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 0%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 0%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LONG TEXTURE 4
   Alternate quiet paper for longer reading passages
   Dark text · light nav
   ================================================== */

.theme-long-texture-4 {
  --section-bg-image: url("../../images/backgrounds/long%20texture%204.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 0%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 0%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LONG TEXTURE 2
   Alternate quiet paper for longer reading passages
   Dark text · light nav
   ================================================== */

.theme-long-texture-2 {
  --section-bg-image: url("../../images/backgrounds/long%20texture2.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 0%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 0%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   LONG TEXTURE 3
   Alternate quiet paper for longer reading passages
   Dark text · light nav
   ================================================== */

.theme-long-texture-3 {
  --section-bg-image: url("../../images/backgrounds/long%20texture3.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 0%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 0%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   ABSTRACT LIGHT
   Open field with corner detail
   Dark text · light nav
   ================================================== */

.theme-abstract-light {
  --section-bg-image: url("../../images/backgrounds/abstract%20light.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 100%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 100%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   ABSTRACT MID
   Mid-tone abstract field
   Dark text · light nav
   ================================================== */

.theme-abstract-mid {
  --section-bg-image: url("../../images/backgrounds/abstract%20mid%20background.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   ABSTRACT DARK
   Dark abstract accent
   Light text · dark nav
   ================================================== */

.theme-abstract-dark {
  --section-bg-image: url("../../images/backgrounds/abstract%20dark.png");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.42;

  --section-nav-theme: dark;
}


/* ==================================================
   WATER ABSTRACT
   Five Element water wash (subtle)
   Dark text · light nav
   ================================================== */

.theme-water-abstract {
  --section-bg-image: url("../../images/backgrounds/water-abstract-landscape.png");
  --section-bg-image-mobile: url("../../images/backgrounds/water-abstract.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   WATER ABSTRACT — BOLD
   Stronger water wash for shorter statements
   Dark text · light nav
   ================================================== */

.theme-water-abstract-bold {
  --section-bg-image: url("../../images/backgrounds/water-abstract-landscape-bold.png");
  --section-bg-image-mobile: url("../../images/backgrounds/water-abstract-bold.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.12;

  --section-nav-theme: light;
}


/* ==================================================
   WOOD ABSTRACT
   Five Element wood wash (subtle)
   Dark text · light nav
   ================================================== */

.theme-wood-abstract {
  --section-bg-image: url("../../images/backgrounds/wood-abstract-landscape.png");
  --section-bg-image-mobile: url("../../images/backgrounds/wood-abstract.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   WOOD ABSTRACT — BOLD
   Stronger wood wash (portrait asset; dense text OK)
   Dark text · light nav
   ================================================== */

.theme-wood-abstract-bold {
  --section-bg-image: url("../../images/backgrounds/wood-abstract-bold.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  /* Matches prior about-page treatment: bold asset + soft wash */
  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   FIRE ABSTRACT
   Five Element fire wash (subtle)
   Dark text · light nav
   ================================================== */

.theme-fire-abstract {
  --section-bg-image: url("../../images/backgrounds/fire-abstract-landscape.png");
  --section-bg-image-mobile: url("../../images/backgrounds/fire-abstract.png");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.22;

  --section-nav-theme: light;
}


/* ==================================================
   FIRE ABSTRACT — BOLD
   Stronger fire wash; desktop uses non-bold landscape
   to match existing homepage CTA treatment
   Dark text · light nav
   ================================================== */

.theme-fire-abstract-bold {
  --section-bg-image: url("../../images/backgrounds/fire-abstract-landscape.png");
  --section-bg-image-mobile: url("../../images/backgrounds/fire-abstract-bold.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.12;

  --section-nav-theme: light;
}


/* ==================================================
   FIRE ABSTRACT — BOLD LANDSCAPE
   Bold fire on both breakpoints (journey / feature beats)
   Dark text · light nav
   ================================================== */

.theme-fire-abstract-bold-landscape {
  --section-bg-image: url("../../images/backgrounds/fire-abstract-landscape-bold.png");
  --section-bg-image-mobile: url("../../images/backgrounds/fire-abstract-bold.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.12;

  --section-nav-theme: light;
}


/* ==================================================
   EARTH
   Earthen photographic wash
   Dark text · light nav
   ================================================== */

.theme-earth {
  --section-bg-image: url("../../images/backgrounds/earth.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.58;

  --section-nav-theme: light;
}


/* ==================================================
   BOWL
   Photographic bowl on charcoal
   Light text · dark nav
   ================================================== */

.theme-bowl {
  --section-bg-image: url("../../images/backgrounds/bowl.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.5;

  --section-nav-theme: dark;
}


/* ==================================================
   WATER (photographic)
   Dark photographic water — use sparingly
   Light text · dark nav
   ================================================== */

.theme-water {
  --section-bg-image: url("../../images/backgrounds/water.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.5;

  --section-nav-theme: dark;
}


/* ==================================================
   WOOD (photographic)
   Dark photographic wood — use sparingly
   Light text · dark nav
   ================================================== */

.theme-wood {
  --section-bg-image: url("../../images/backgrounds/wood.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.5;

  --section-nav-theme: dark;
}


/* ==================================================
   FIRE (photographic)
   Dark photographic fire — use sparingly
   Light text · dark nav
   ================================================== */

.theme-fire {
  --section-bg-image: url("../../images/backgrounds/fire.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.5;

  --section-nav-theme: dark;
}


/* ==================================================
   PLASTER — IMAGE
   Plaster texture image with plaster wash
   Dark text · light nav
   ================================================== */

.theme-plaster-image {
  --section-bg-image: url("../../images/backgrounds/plaster.webp");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #2A2D28;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 232 223 208;
  --section-overlay-opacity: 0.42;

  --section-nav-theme: light;
}


/* ==================================================
   VERDIGRIS
   Cool verdigris texture
   Dark text · light nav
   ================================================== */

.theme-verdigris {
  --section-bg-image: url("../../images/backgrounds/verdigris.webp");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 232 223 208;
  --section-overlay-opacity: 0.55;

  --section-nav-theme: light;
}


/* ==================================================
   KINTSUGI
   Kintsugi bowl texture
   Dark text · light nav
   ================================================== */

.theme-kintsugi {
  --section-bg-image: url("../../images/backgrounds/kintsugi%20bowl.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.68;

  --section-nav-theme: light;
}


/* ==================================================
   KINTSUGI LIGHT
   Soft kintsugi wash (very light)
   Dark text · light nav
   ================================================== */

.theme-kintsugi-light {
  --section-bg-image: url("../../images/backgrounds/kingsugi%20light.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.88;

  --section-nav-theme: light;
}


/* ==================================================
   MOUNTAINS
   Ink mountains
   Dark text · light nav
   ================================================== */

.theme-mountains {
  --section-bg-image: url("../../images/backgrounds/mountains%20ink.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.18;

  --section-nav-theme: light;
}


/* ==================================================
   EARTH 2
   Alternate earthen photographic wash
   Dark text · light nav
   ================================================== */

.theme-earth-2 {
  --section-bg-image: url("../../images/backgrounds/earth%202.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.58;

  --section-nav-theme: light;
}


/* ==================================================
   FACE
   Soft photographic figure study
   Dark text · light nav
   ================================================== */

.theme-face {
  --section-bg-image: url("../../images/backgrounds/face.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 40%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 40%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.62;

  --section-nav-theme: light;
}


/* ==================================================
   LAKE
   Photographic lake — use sparingly
   Light text · dark nav
   ================================================== */

.theme-lake {
  --section-bg-image: url("../../images/backgrounds/lake.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.45;

  --section-nav-theme: dark;
}


/* ==================================================
   PLASTER VERTICAL
   Tall plaster texture
   Dark text · light nav
   ================================================== */

.theme-plaster-vertical {
  --section-bg-image: url("../../images/backgrounds/plaster%20vertical.webp");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #2A2D28;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 232 223 208;
  --section-overlay-opacity: 0.42;

  --section-nav-theme: light;
}


/* ==================================================
   KINTSUGI CRACK
   Vertical kintsugi crack
   Dark text · light nav
   ================================================== */

.theme-kintsugi-crack {
  --section-bg-image: url("../../images/backgrounds/kintsugi%20crack%20vertical.webp");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.58;

  --section-nav-theme: light;
}


/* ==================================================
   KINTSUGI DARK
   Dark kintsugi field
   Light text · dark nav
   ================================================== */

.theme-kintsugi-dark {
  --section-bg-image: url("../../images/backgrounds/kintsugi%20dark.webp");
  --section-bg-colour: #2A2D28;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #FBF7F1;
  --section-muted-colour: rgba(248, 242, 234, 0.5);
  --section-emphasis-colour: #FBF7F1;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 42 45 40;
  --section-overlay-opacity: 0.42;

  --section-nav-theme: dark;
}


/* ==================================================
   COUCH
   Treatment-room textiles and plaster
   Dark text · light nav
   ================================================== */

.theme-couch {
  --section-bg-image: url("../../images/backgrounds/couch.png");
  --section-bg-colour: #E8DFD0;

  --section-bg-x: 35%;
  --section-bg-y: 40%;
  --section-bg-x-mobile: 35%;
  --section-bg-y-mobile: 40%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.48;

  --section-nav-theme: light;
}


/* ==================================================
   WOOD ABSTRACT BOLD LANDSCAPE
   Bold wood wash, landscape crop
   Dark text · light nav
   ================================================== */

.theme-wood-abstract-bold-landscape {
  --section-bg-image: url("../../images/backgrounds/wood-abstract-landscape-bold.png");
  --section-bg-image-mobile: url("../../images/backgrounds/wood-abstract-bold.png");
  --section-bg-colour: #FBF7F1;

  --section-bg-x: 50%;
  --section-bg-y: 50%;
  --section-bg-x-mobile: 50%;
  --section-bg-y-mobile: 50%;

  --section-text-colour: #2A2D28;
  --section-muted-colour: #5D5751;
  --section-emphasis-colour: #463D2F;
  --section-rule-colour: #CCAF67;

  --section-overlay-colour: 251 247 241;
  --section-overlay-opacity: 0.12;

  --section-nav-theme: light;
}


/* ==================================================
   Focal-point utilities
   Override desktop + mobile focus together
   ================================================== */

.bg-focus-left {
  --section-bg-x: 0%;
  --section-bg-x-mobile: 0%;
}

.bg-focus-right {
  --section-bg-x: 100%;
  --section-bg-x-mobile: 100%;
}

.bg-focus-top {
  --section-bg-y: 0%;
  --section-bg-y-mobile: 0%;
}

.bg-focus-bottom {
  --section-bg-y: 100%;
  --section-bg-y-mobile: 100%;
}