/* ==========================================================================
   elena-gutierrez.com
   A faithful, dependency-free rebuild of the original Squarespace theme.

   Every number below was recovered from the original theme's compiled CSS
   (see _source-archive/ and the saveweb2zip capture): the palette, the type
   scale and its fluid formulas, the 24-column "fluid engine" grid and the
   section colour themes are reproduced exactly rather than approximated.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Alte Haas Grotesk (Yann Le Coroller). Two weights only — Regular and Bold —
   and no italic, so `em` renders as a browser-synthesised oblique. Supplied as
   TTF; converting to WOFF2 would roughly halve the transfer size. */
@font-face {
  font-family: 'Alte Haas Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alte-haas-grotesk-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Alte Haas Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/alte-haas-grotesk-bold.ttf') format('truetype');
}

/* --- Palette -------------------------------------------------------------
   The five theme colours, verbatim from the original (given there as HSL). */
:root {
  --white-hsl: 47.14, 23.33%, 88.24%;   /* #e8e5da  cream */
  --black-hsl: 15, 13.33%, 11.76%;      /* #221c1a  warm near-black */
  --accent-hsl: 39.68, 52.99%, 45.88%;  /* #b38937  gold */
  --darkAccent-hsl: 50.91, 52.38%, 24.71%;  /* #60561e  olive */
  --lightAccent-hsl: 37.36, 51.46%, 20.2%;  /* #4e3a19  deep brown-gold */
  --inverse-hsl: 0, 0%, 100%;           /* #ffffff */

  --cream: hsl(var(--white-hsl));
  --ink: hsl(var(--black-hsl));
  --gold: hsl(var(--accent-hsl));
  --olive: hsl(var(--darkAccent-hsl));
  --brown: hsl(var(--lightAccent-hsl));

  /* Deeper gold, only for small text where the brand gold would fall below
     WCAG AA. Display type keeps the exact brand --gold. */
  --gold-text: #7d5f24;

  /* Layout — the theme's page geometry */
  --maxPageWidth: 1800px;
  --pagePadding: 3vw;
  --mobilePagePadding: 6vw;
  --grid-gap: 11px;

  /* Type scale. These are the theme's "size values"; the fluid formulas
     below turn them into font sizes exactly as the original did. */
  --v-h1: 6.86;
  --v-h2: 4.31;
  --v-h3: 2.74;
  --v-h4: 1.57;
  --v-lg: 1.47;   /* .large paragraph  */
  --v-md: 1.18;   /* normal paragraph  */
  --v-sm: 1.18;   /* .small paragraph  */
  --v-btn: 1.08;
  --v-marquee: 4;      /* the marquee's own size value */

  --lh-body: 1.84;
  --lh-heading: 1.43;

  /* The header floats over the first section, which reserves room for it. */
  --header-height: 148px;
  --logo-height: 65px;
}
@media (max-width: 991px) { :root { --header-height: 100px; --logo-height: 39px; } }

/* Fluid type — mobile branch (short viewports scale off height, as before) */
@media (max-width: 767px) {
  :root {
    --fs-h1: calc((var(--v-h1) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-h2: calc((var(--v-h2) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-h3: calc((var(--v-h3) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-h4: calc((var(--v-h4) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-lg: calc((var(--v-lg) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-md: calc((var(--v-md) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-sm: calc((var(--v-sm) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-btn: calc((var(--v-btn) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
    --fs-marquee: calc((var(--v-marquee) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
  }
}
/* Fluid type — desktop branch: grow with the viewport, clamped at 1800px */
@media (min-width: 768px) {
  :root {
    --fs-h1: min(calc((var(--v-h1) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-h1) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-h1) * 1rem)));
    --fs-h2: min(calc((var(--v-h2) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-h2) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-h2) * 1rem)));
    --fs-h3: min(calc((var(--v-h3) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-h3) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-h3) * 1rem)));
    --fs-h4: min(calc((var(--v-h4) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-h4) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-h4) * 1rem)));
    --fs-lg: min(calc((var(--v-lg) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-lg) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-lg) * 1rem)));
    --fs-md: min(calc((var(--v-md) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-md) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-md) * 1rem)));
    --fs-sm: min(calc((var(--v-sm) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-sm) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-sm) * 1rem)));
    --fs-btn: min(calc((var(--v-btn) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-btn) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-btn) * 1rem)));
    --fs-marquee: min(calc((var(--v-marquee) - 1) * 1.2vw + 1rem),
                 max(calc((var(--v-marquee) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--v-marquee) * 1rem)));
  }
}

/* --- Section colour themes ----------------------------------------------
   Each page section carries data-theme. The theme does not set one text
   colour: it sets a different colour per heading level and per paragraph
   size, which is how the original gets a cream h1 over olive h2s on gold.
   Values below are the theme's own token table, verbatim.

   Squarespace maps h1→ExtraLarge, h2→Large, h3→Medium, h4→Small. */

/* "bright" is the theme's default (it is defined on :root, and a section
   with no theme of its own gets it) — the gold ground of the home hero. */
[data-theme="bright"] {
  --bg: hsl(var(--accent-hsl));
  --h1-color: hsl(var(--white-hsl));
  --h2-color: hsl(var(--darkAccent-hsl));
  --h3-color: hsl(var(--lightAccent-hsl));
  --h4-color: hsl(var(--darkAccent-hsl));
  --p-lg: hsl(var(--darkAccent-hsl));
  --p-md: hsl(var(--darkAccent-hsl));
  --p-sm: hsl(var(--lightAccent-hsl));
  --link: hsl(var(--darkAccent-hsl));
  --rule: hsl(var(--darkAccent-hsl));
  --btn-primary-bg: hsl(var(--darkAccent-hsl));
  /* the theme set both of these in near-black, which is 2.28:1 on the olive
     ground; white is 7.38:1 and is what every other theme already uses */
  --btn-primary-fg: #fff;
  --btn-secondary-bg: hsl(var(--darkAccent-hsl));
  --btn-secondary-fg: #fff;
  --marquee-color: #fff;
  --header-fg: hsl(var(--black-hsl));
  --header-solid-bg: hsl(var(--white-hsl));
}
[data-theme="white"] {
  --bg: hsl(var(--white-hsl));
  --h1-color: hsl(var(--black-hsl));
  --h2-color: hsl(var(--black-hsl));
  --h3-color: hsl(var(--black-hsl));
  --h4-color: hsl(var(--black-hsl));
  --p-lg: hsl(var(--black-hsl));
  --p-md: hsl(var(--black-hsl));
  --p-sm: hsl(var(--black-hsl));
  /* the theme links these in brand gold, which is 2.54:1 on cream — the
     deeper gold keeps the same hue and passes AA */
  --link: var(--gold-text);
  --rule: hsl(var(--black-hsl));
  --btn-primary-bg: hsl(var(--black-hsl));
  --btn-primary-fg: #fff;
  --btn-secondary-bg: hsl(var(--darkAccent-hsl));
  --btn-secondary-fg: #fff;   /* 7.38:1 on olive, where the theme's near-black was 2.28:1 */
  --marquee-color: hsl(var(--black-hsl));
  --header-fg: hsl(var(--black-hsl));
  --header-solid-bg: hsl(var(--white-hsl));
}
[data-theme="bright-inverse"] {
  --bg: #fff;
  --h1-color: hsl(var(--accent-hsl));
  --h2-color: hsl(var(--accent-hsl));
  --h3-color: hsl(var(--accent-hsl));
  --h4-color: hsl(var(--accent-hsl));
  /* body copy here is small; brand gold is 3.4:1 on white, so it uses the
     deeper gold. Headings and rules keep the exact brand gold. */
  --p-lg: var(--gold-text);
  --p-md: var(--gold-text);
  --p-sm: var(--gold-text);
  --link: var(--gold-text);
  --rule: hsl(var(--accent-hsl));
  --btn-primary-bg: hsl(var(--accent-hsl));
  --btn-primary-fg: #fff;
  --btn-secondary-bg: hsl(var(--accent-hsl));
  --btn-secondary-fg: #fff;
  --marquee-color: hsl(var(--accent-hsl));
  --header-fg: hsl(var(--accent-hsl));
  --header-solid-bg: #fff;
}
[data-theme="dark"] {
  --bg: hsl(var(--darkAccent-hsl));
  --h1-color: hsl(var(--white-hsl));
  --h2-color: hsl(var(--white-hsl));
  --h3-color: hsl(var(--white-hsl));
  --h4-color: hsl(var(--white-hsl));
  --p-lg: hsl(var(--white-hsl));
  --p-md: hsl(var(--white-hsl));
  --p-sm: hsl(var(--white-hsl));
  --link: hsl(var(--white-hsl));
  --rule: hsl(var(--white-hsl));
  --btn-primary-bg: hsl(var(--accent-hsl));
  --btn-primary-fg: #fff;
  --btn-secondary-bg: hsl(var(--accent-hsl));
  --btn-secondary-fg: #fff;
  --marquee-color: hsl(var(--white-hsl));
  --header-fg: hsl(var(--white-hsl));
  --header-solid-bg: hsl(var(--darkAccent-hsl));
}
[data-theme="black-bold"] {
  --bg: hsl(var(--black-hsl));
  --h1-color: hsl(var(--darkAccent-hsl));
  --h2-color: hsl(var(--darkAccent-hsl));
  --h3-color: hsl(var(--darkAccent-hsl));
  --h4-color: hsl(var(--darkAccent-hsl));
  --p-lg: hsl(var(--darkAccent-hsl));
  --p-md: hsl(var(--darkAccent-hsl));
  --p-sm: hsl(var(--darkAccent-hsl));
  --link: hsl(var(--white-hsl));
  --rule: hsl(var(--darkAccent-hsl));
  --btn-primary-bg: hsl(var(--accent-hsl));
  --btn-primary-fg: #fff;
  --btn-secondary-bg: hsl(var(--accent-hsl));
  --btn-secondary-fg: #fff;
  --marquee-color: hsl(var(--accent-hsl));
  --header-fg: hsl(var(--white-hsl));
  --header-solid-bg: hsl(var(--black-hsl));
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* The theme's base font size. Every size above is a multiple of it. */
  font-size: 12px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: 'Alte Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { border: 0; }

h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
/* Line heights tighten as the size grows — the theme's own formula. */
h1 { font-size: calc(var(--fs-h1) * var(--fs-scale, 1)); line-height: 1.0948; color: var(--h1-color, var(--ink)); }
h2 { font-size: calc(var(--fs-h2) * var(--fs-scale, 1)); line-height: 1.2407; color: var(--h2-color, var(--ink)); }
h3 { font-size: calc(var(--fs-h3) * var(--fs-scale, 1)); line-height: 1.3305; color: var(--h3-color, var(--ink)); }
h4 { font-size: calc(var(--fs-h4) * var(--fs-scale, 1)); line-height: 1.3974; color: var(--h4-color, var(--ink)); }

/* Any heading can be nudged off the scale with an inline --fs-scale, e.g.
   style="--fs-scale:.8" for 80% of its normal size. Line heights are unitless
   so they follow automatically. */

/* Size-only helpers: keep one <h1> per page for structure while matching the
   original's visual hierarchy, where these headings were h2 / h3. */
.as-h2 { font-size: calc(var(--fs-h2) * var(--fs-scale, 1)); line-height: 1.2407; color: var(--h2-color, var(--ink)); }
.as-h3 { font-size: calc(var(--fs-h3) * var(--fs-scale, 1)); line-height: 1.3305; color: var(--h3-color, var(--ink)); }

p { margin: 1rem 0; font-size: var(--fs-md); color: var(--p-md, var(--ink)); }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
.rte-large { font-size: var(--fs-lg); color: var(--p-lg, var(--ink)); }
.rte-small { font-size: var(--fs-sm); color: var(--p-sm, var(--ink)); }

ul, ol { margin: 1rem 0; padding-left: 1.4em; font-size: var(--fs-md); color: var(--p-md, var(--ink)); }
li { margin: .25em 0; }
li p { margin: 0; }

a { color: var(--link, var(--ink)); text-decoration: underline; text-underline-offset: .18em; }
a:hover { opacity: .7; }

hr { border: 0; height: 1px; background: var(--rule, currentColor); margin: 0; width: 100%; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Page sections ------------------------------------------------------- */
.section {
  position: relative;
  background: var(--bg, var(--cream));
  color: var(--p-md, var(--ink));
  overflow: clip;
}

/* --- Fluid engine grid ---------------------------------------------------
   The original laid every block onto an 8-column grid on mobile and a
   24-column grid from 768px up, with 11px gaps, gutters of 6vw / 3vw and a
   row height of 2.15% of the container width. Blocks declare their own
   placement with --m (mobile) and --d (desktop) grid-area values.
   The row height itself is --row-ratio (desktop) and --row-min (mobile),
   both defaulting to the theme's own figures. A section overrides them only
   to change its vertical rhythm deliberately; /courses does, so the whole
   offer reads in fewer screens. */
.fe {
  --grid-gutter: calc(var(--mobilePagePadding) - var(--grid-gap));
  --cell-max-width: calc((var(--maxPageWidth) - (var(--grid-gap) * 7)) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m, 1), minmax(var(--row-min, 24px), auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--pagePadding) - var(--grid-gap));
    --cell-max-width: calc((var(--maxPageWidth) - (var(--grid-gap) * 23)) / 24);
    --container-width: min(var(--maxPageWidth), calc(100vw - var(--pagePadding) * 2));
    grid-template-rows: repeat(var(--rows-d, 1), minmax(calc(var(--container-width) * var(--row-ratio, 0.0215)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

/* Between 768px and 1200px the 24-column placement leaves the densest
   sections (the pricing cards) too narrow for their own text, and blocks
   whose row spans overlap start colliding. Sections marked with this class
   fall back to the 8-column stacked placement until there is room. */
@media (max-width: 1199px) {
  .fe--stack-tablet {
    --grid-gutter: calc(var(--mobilePagePadding) - var(--grid-gap));
    --cell-max-width: calc((var(--maxPageWidth) - (var(--grid-gap) * 7)) / 8);
    grid-template-rows: repeat(var(--rows-m, 1), minmax(var(--row-min, 24px), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(8, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
  .fe--stack-tablet .fe-block { grid-area: var(--m); z-index: var(--zm, 1); }
}

.fe-block {
  grid-area: var(--m);
  z-index: var(--zm, 1);
  display: flex;
  flex-direction: column;
  justify-content: var(--jc, center);
  min-width: 0;
}
@media (min-width: 768px) {
  .fe-block { grid-area: var(--d); z-index: var(--zd, 1); }
}
.fe-block > * { width: 100%; }

/* Image blocks fill their whole grid area, cropping to it. The image is taken
   out of flow so it never inflates the row it sits in — the grid rows alone
   decide how big it is, exactly as the original did. */
.fe-img { position: relative; }
.fe-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.fe-img--contain img { object-fit: contain; }

/* Fixed-ratio image block. Normally an image block fills its grid area, so its
   height follows whatever else shares those rows — which makes two blocks of
   equal column span end up different heights once a neighbouring paragraph
   wraps. align-self:start plus an aspect-ratio takes the height off the rows
   and derives it from the width instead, so equal spans stay equal at every
   viewport. */
.fe-img--ratio {
  align-self: start;
  aspect-ratio: var(--ar, 3 / 4);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
  text-decoration: none;
  border: 0;
  border-radius: 999px;          /* every button on the site is a pill */
  padding: 1.1em 1.837em;
  cursor: pointer;
  transition: opacity .2s ease;
  text-align: center;
}
.btn:hover { opacity: .82; }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  padding-left: 3.8em;
  padding-right: 3.8em;
}
.btn-wrap { display: flex; justify-content: var(--btn-align, center); }

/* --- Marquee ------------------------------------------------------------
   The hero headline scrolls horizontally, as it did on the old site. */
.marquee {
  --marquee-gap: 0.5em;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  /* the block's 3% padding is reset to initial on the original, so the
     headline sits flush against the top of the hero */
  font-size: var(--fs-marquee);
  color: var(--marquee-color, var(--ink));
}
.marquee__track {
  display: flex;
  flex: none;
  min-width: 100%;
  animation: marquee-scroll 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: running; }
.marquee h1, .marquee .marquee__item {
  font-size: inherit;
  line-height: 1.4;
  margin: 0 var(--marquee-gap) 0 0;
  white-space: nowrap;
  flex: none;
  font-weight: 400;
}
@keyframes marquee-scroll { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { justify-content: center; }
}

/* --- Text that scales to fill its block --------------------------------- */
.scaled-text { display: block; width: 100%; }
.scaled-text > * { display: block; margin: 0; white-space: nowrap; }
.display-lines { margin: 0; }
.display-lines .scaled-text > span { line-height: 1.0948; }

/* The one text block the theme gives a background: the gold "Most Popular"
   badge on /courses. It stretches to its grid area like a shape does. */
.badge {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--accent-hsl));
  padding: 6%;
}

/* Embedded video. The 16:9 box drives its own height, so the row span on the
   block only needs to be roughly right — auto rows take up the slack. */
.fe-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: hsl(var(--black-hsl));
}
.fe-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* PayPal acceptance badge. The logo is PayPal's own vector asset, kept on a
   white plate — their brand guidance is for light backgrounds, and the blues
   sit poorly on the gold section otherwise. "Now accepting" is real text, so
   nothing here is a rasterised composite. */
.paypal-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .8em;
  background: #fff;
  padding: .8em 1.3em;
  width: auto;
}
.paypal-badge span {
  font-size: var(--fs-sm);
  color: hsl(var(--black-hsl));
  white-space: nowrap;
}
.paypal-badge img { display: block; width: auto; height: 2em; }

/* Contact page mark + email. Kept in one block: with the image letterboxed by
   object-fit and the email placed by grid row, the visual gap drifted from
   110px to 162px across viewports. width:100%/height:auto means the image's
   rendered bottom IS the artwork's bottom, so the margin below it is exact. */
.contact-mark img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}
.contact-mail p {
  margin: 0;
  text-align: center;
}

/* --- Shape blocks (the pricing cards on /courses) ------------------------ */
.fe-shape {
  flex: 1 1 auto;
  align-self: stretch;
  background: var(--cream);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 3px hsla(var(--black-hsl), .35);
}

/* --- Header -------------------------------------------------------------
   Transparent, fixed, full width: logo left, nav centre-right, social right. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: calc((var(--header-height) - var(--logo-height)) / 2) var(--pagePadding);
  background: transparent;
  color: var(--header-fg, var(--ink));
  transition: background-color .3s ease, transform .3s ease;
}
.site-header__inner {
  position: relative;
  max-width: var(--maxPageWidth);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2vw;
}
.site-header__logo { display: inline-block; flex: none; max-height: var(--logo-height); line-height: 0; position: relative; z-index: 101; }
.site-header__logo img { width: auto; max-height: var(--logo-height); }
.site-header__logo .logo--light { display: none; }
body.nav-open .site-header__logo .logo--light { display: block; }
body.nav-open .site-header__logo .logo--dark { display: none; }
body.nav-open .nav-toggle { color: #fff; position: relative; z-index: 101; }
/* Centred on the page, not on the space left over between the logo and the
   social icon — an auto margin here would compete with the one on .__social
   and land the nav ~100px left of centre. Taking it out of flow keeps it
   aligned with the hero image below it, as on the original. */
.site-header__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-header__nav ul {
  display: flex;
  gap: 2.2vw;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.site-header__nav a {
  text-decoration: none;
  color: var(--header-fg, var(--ink));
  padding: .1em 0;
}
.site-header__nav a:hover { opacity: .6; }
.site-header__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
.site-header__social { display: flex; align-items: center; margin-left: auto; }
.site-header__social a { color: var(--header-fg, var(--ink)); display: inline-flex; }
/* Outline glyph: stroked, not filled. A filled Instagram path needs an
   inner counter on the frame or nonzero fill-rule renders it as a solid
   square. Stroking sidesteps that and matches the official mark. */
.site-header__social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.site-header__social svg .ig-dot { fill: currentColor; stroke: none; }

/* "Scroll back": the header slides away as you scroll down and returns, with
   a solid background, as soon as you scroll up — as the original did. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-solid { background: var(--header-solid-bg, var(--cream)); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: .4rem;
  cursor: pointer;
  color: var(--header-fg, var(--ink));
}
.nav-toggle .bar {
  display: block;
  width: 26px;
  height: 1px;                     /* the theme's hairline burger */
  background: currentColor;
  margin: 7px 0;
  transition: transform .25s ease, opacity .25s ease;
}
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu overlay — gold ground, white links, as on the old site */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--gold);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
body.nav-open .menu-overlay { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
.menu-overlay a {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-h3);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .site-header__nav, .site-header__social { display: none; }
  .nav-toggle { display: block; }
  .site-header { padding-left: var(--mobilePagePadding); padding-right: var(--mobilePagePadding); }
}
@media (min-width: 992px) { .menu-overlay { display: none; } }

/* The first section on every page reserves room for the floating header. */
main > .section:first-child { padding-top: var(--header-height); }

/* Rich-text colour helpers, as the theme named them */
.c-white  { color: hsl(var(--white-hsl)); }
.c-black  { color: hsl(var(--black-hsl)); }
.c-accent { color: hsl(var(--accent-hsl)); }

/* --- Gallery (arte) ------------------------------------------------------ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4vw 2.4vw;
  padding: 0 var(--pagePadding) 6vw;
  max-width: var(--maxPageWidth);
  margin: 0 auto;
}
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .gallery-grid { grid-template-columns: 1fr; padding-inline: var(--mobilePagePadding); } }

.gallery-item { margin: 0; }
.gallery-item__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;          /* the theme's "three-four-vertical" ratio */
}
.gallery-item__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item figcaption {
  margin-top: .9rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.gallery-item__price { display: block; margin-top: .2rem; color: var(--gold-text); }

.gallery-heading {
  max-width: var(--maxPageWidth);
  margin: 0 auto;
  padding: 0 var(--pagePadding) 2vw;
}
@media (max-width: 599px) { .gallery-heading { padding-inline: var(--mobilePagePadding); } }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  background: hsla(var(--black-hsl), .94);
  padding: 4vw;
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox figcaption {
  color: var(--cream);
  text-align: center;
  margin-top: 1.2rem;
  font-size: var(--fs-sm);
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .5rem 1rem;
}
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav--prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: .5rem; top: 50%; transform: translateY(-50%); }

/* --- Forms --------------------------------------------------------------- */
.form-field { margin-bottom: 1.6rem; }
.form-field label,
.form-field .form-legend {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: .5rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--ink);
  background: #fafafa;             /* form-field-style-solid */
  border: 1px solid #000;          /* form-field-border-all */
  border-radius: 0;                /* form-field-shape-square */
  padding: 10px;
}
.form-field .sublabel {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: .4rem;
}
.form-field .optional-note { font-weight: 400; opacity: .85; }

/* The form's submit button takes the theme's tertiary button colours, which
   is why it is gold here rather than the near-black of a primary button. */
.btn--submit {
  background: hsl(var(--accent-hsl));
  color: #fff;
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.form-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 599px) { .form-name-row { grid-template-columns: 1fr; } }

/* --- Small helpers ------------------------------------------------------- */
.center { text-align: center; }
.tac { text-align: center; }
.tal { text-align: left; }
.stack > * + * { margin-top: 1rem; }

/* --- The reading (/courses) ---------------------------------------------
   This page replaced a grid of bordered, shadowed pricing cards with a single
   flowing column, so it uses no .fe-shape and adds no box of its own. These
   four helpers are everything it needed beyond the existing system. */

/* Small uppercase label above a heading. The header nav is the only other
   letter-spaced uppercase type on the site; this matches its size. */
.eyebrow {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--p-sm, var(--ink));
  margin: 0 0 .9rem;
}

/* Body copy set back from the heading above it. Deliberately not a new
   colour — the section's own --p token still decides the hue. */
.muted { opacity: .78; }

/* The reading's primary CTA. Its shape now comes from .btn like every other
   button; what this still carries is the brand-gold ground with ink type
   (4.8:1, where the theme's white-on-gold would be 3.4:1) and its own width. */
.btn--pill {
  background: hsl(var(--accent-hsl));
  color: hsl(var(--black-hsl));
  padding-left: 2.6em;
  padding-right: 2.6em;
}

/* The secondary CTA: a plain underlined link, sized like a button so the two
   read as a pair without the second one becoming a second button. */
.cta-link { font-size: var(--fs-btn); }

/* The three panels of the gold band on courses.html share one image well, so
   no column differs in shape from the others: same 7/4 ratio, same corner, no
   border and no shadow. The well is the only bounded shape in the band. */
.session-well {
  align-self: start;
  aspect-ratio: 7 / 4;
  border-radius: 12px;
  overflow: hidden;
  /* Set in from the panel's own columns, so the three visuals sit lighter in
     the band than the text they head. One width for all three is what keeps
     the columns identical — change it here, never per panel. The width has to
     be explicit: the two photograph wells hold nothing but an absolutely
     positioned image, so an auto width plus auto margins would shrink them to
     nothing instead of centring them. */
  width: 75%;
  margin-inline: auto;
}
/* The PayPal column has a badge rather than a photograph. Giving it the same
   well on white — the badge's own ground — keeps its silhouette identical to
   the two photographs instead of leaving a small pill floating in the band. */
.session-well--badge { background: #fff; }

/* The list under "What we can look at". Six things you might bring, one per
   line, so the offer scans at a glance. A hairline between lines and nothing
   else: the page still owns no bordered shape. */
.look-list {
  list-style: none;
  margin: .4rem auto;
  padding: 0;
  max-width: 40rem;
  font-size: var(--fs-md);
  color: var(--p-md, var(--ink));
}
.look-list li { padding: .72rem 0; line-height: 1.35; }
.look-list li + li { border-top: 1px solid var(--rule, currentColor); }

/* The one plain statement of what a reading works from and what you keep,
   set between the price copy and the buttons. The hairline above it is what
   separates it from the paragraph, so it reads as fact rather than more copy. */
.included-line {
  max-width: 38rem;
  margin: 0 auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule, currentColor);
  font-size: var(--fs-sm);
  color: var(--p-sm, var(--ink));
}

/* The footer's two link columns. They are centred as a pair on their own
   text: FOLLOW ME is much the wider list, so two equal grid blocks left the
   ink off-centre even though the blocks themselves were symmetrical. Below
   768px the two stack and stay left-aligned, as they always did. */
.footer-cols { display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 768px) {
  .footer-cols {
    flex-direction: row;
    justify-content: center;
    gap: clamp(3rem, 8vw, 11rem);
  }
}