/*
Theme Name:   Emily Goan
Theme URI:    https://emilygoan.scot
Description:  Child theme for emilygoan.scot. Holds the whole design system in
              one file, plus a real header and footer, replacing the per-page
              <style> blocks and the ten copies of the footer that were
              previously pasted into every page. Built on Kadence.
Author:       Built for Emily Goan
Template:     kadence
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  emilygoan
Tags:         one-column, custom-colors, custom-menu, editor-style
*/

/* ===========================================================================
   CONTENTS
     1. Fonts
     2. Tokens
     3. Legacy token aliases
     4. Base
     5. Site header
     6. Site footer
     7. Page components
     8. Shop components
     9. New components (not yet used on live pages)
   ======================================================================== */


/* ===========================================================================
   1. FONTS
   Self-hosted variable fonts, OFL-1.1, served from this theme so they load
   for every visitor.

   The old site named Playfair Display, Crimson Pro and Cormorant Garamond
   but never loaded any of them. Anyone without those fonts installed locally
   saw Georgia headings over Times body. That failure was invisible to the
   people reviewing the site, because they had the fonts installed.
   ======================================================================== */

@font-face {
  font-family: "Fraunces";
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2-variations"),
       url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2-variations"),
       url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2-variations"),
       url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2-variations"),
       url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}


/* ===========================================================================
   2. TOKENS
   Every rule below refers back to this block. To change a colour across the
   whole site, change it here and nowhere else.
   ======================================================================== */

:root {
  /* Grounds */
  --eg-paper:  #FDF8F0;
  --eg-sand:   #F7EAD4;
  --eg-forest: #1E3A35;

  /* Service colours, from Emily's glazes and the Argyll photographs.
     Ratios are against the ground each is actually used on.               */
  --eg-gorse:    #D9A31B;  /* fiddle lessons   forest on it  5.38:1  AA    */
  --eg-bluebell: #5D5A93;  /* early years      paper  on it  5.94:1  AA    */
  --eg-sea:      #2F7268;  /* workshops        paper  on it  5.60:1  AA    */
  --eg-heather:  #8E5572;  /* ceilidh band     paper  on it  5.38:1  AA    */
  --eg-clay:     #C4622D;  /* pottery -- large fills only,   3.87:1        */

  /* Deep variants. Use these for anything at body-size on a light ground:
     --eg-clay at 3.87:1 fails AA as a button label, --eg-clay-deep passes. */
  --eg-clay-deep:  #A8501F;  /* on paper  5.18:1  AA                       */
  --eg-sea-deep:   #245A52;  /* on paper  7.35:1  AA                       */
  --eg-gorse-deep: #8A6A10;  /* on paper  4.61:1  AA                       */

  /* Pale tints for card grounds */
  --eg-gorse-tint:    #FBF0D6;
  --eg-bluebell-tint: #E9E8F2;
  --eg-sea-tint:      #E4EFEC;
  --eg-heather-tint:  #F4E7EE;
  --eg-clay-tint:     #FAE7DC;

  /* Text and mark */
  --eg-ink:         #1E3A35;  /* on paper  11.0:1  AAA                     */
  --eg-stone:       #6B6A5E;  /* on paper   5.10:1 AA   secondary text     */
  --eg-stone-light: #C9C3B4;  /* on forest  6.98:1 AA   body on dark       */
  --eg-gold:        #D4A017;  /* on forest  5.17:1 AA   mark + Gaelic only */

  --eg-string-1: rgba(107,106,94,.35);
  --eg-string-2: rgba(107,106,94,.55);
  --eg-string-3: rgba(107,106,94,.80);

  --eg-rule:      rgba(30,58,53,.14);
  --eg-rule-firm: rgba(30,58,53,.30);
  --eg-rule-dark: rgba(201,195,180,.22);

  /* Radius, by role rather than one value everywhere */
  --eg-r-sm:   6px;
  --eg-r-md:   14px;
  --eg-r-lg:   24px;
  --eg-r-xl:   36px;
  --eg-r-pill: 999px;

  /* Type. Two families, not three. Deliberately not Playfair Display, which
     is the most over-used display serif in generated web design. Each stack
     names a real fallback that has been looked at.                         */
  --eg-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
                     Palatino, Georgia, serif;
  --eg-font-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --eg-display-settings: "SOFT" 45, "WONK" 0;

  --eg-text-xs:   0.78rem;
  --eg-text-sm:   0.875rem;
  --eg-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --eg-text-lg:   clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);
  --eg-text-xl:   clamp(1.35rem, 1.24rem + 0.55vw, 1.6rem);
  --eg-text-2xl:  clamp(1.65rem, 1.44rem + 1.05vw, 2.25rem);
  --eg-text-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --eg-text-4xl:  clamp(2.6rem, 1.85rem + 3.7vw, 4.75rem);

  --eg-space-1: 0.25rem;
  --eg-space-2: 0.5rem;
  --eg-space-3: 0.75rem;
  --eg-space-4: 1rem;
  --eg-space-5: 1.5rem;
  --eg-space-6: 2rem;
  --eg-space-7: 3rem;
  --eg-space-8: 4rem;

  --eg-section-y: clamp(3.5rem, 7vw, 6rem);
  --eg-section-x: clamp(1.25rem, 5vw, 4rem);

  --eg-measure:       64ch;
  --eg-measure-tight: 46ch;
  --eg-max:           78rem;

  --eg-header-h: 4.5rem;
  --eg-transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --eg-transition: 0ms; }
}


/* ===========================================================================
   3. LEGACY TOKEN ALIASES
   The pages written before this rebuild use the old variable names in inline
   styles -- style="color:var(--terra)" and the like -- in dozens of places.
   Pointing the old names at the new values re-skins every one of those pages
   without touching their markup, which is what makes a palette change
   possible without a rewrite.

   Two of these are not just renames:

   --slate was #6B7F7C, used as body text on the dark ground at 2.84:1. That
   failed WCAG AA on every dark section of every page. It now points at
   --eg-stone-light (6.98:1), so the whole back catalogue is fixed at once.

   --linen and --warm were #F5F0E6 and #FDF9F2, near enough identical that
   alternating them did nothing. They now map to genuinely distinct grounds.

   Do not use these names in new work.
   ======================================================================== */

:root {
  --ink:   var(--eg-forest);
  --teal:  var(--eg-sea);
  --sea:   var(--eg-sea);
  --gorse: var(--eg-gorse);
  --terra: var(--eg-clay);
  --linen: var(--eg-sand);
  --warm:  var(--eg-paper);
  --slate: var(--eg-stone-light);
}


/* ===========================================================================
   4. BASE
   Scoped to .eg so Kadence's own chrome is untouched, except for the header
   and footer below which are ours.
   ======================================================================== */

/* The old files opened with `.eg*{box-sizing:border-box}` -- a typo for
   `.eg *`, missing the descendant space. It matched nothing, so border-box
   never actually applied anywhere on the site. */
.eg,
.eg *,
.eg *::before,
.eg *::after { box-sizing: border-box; }

.eg {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-base);
  line-height: 1.65;
  color: var(--eg-ink);
  background: var(--eg-paper);
  -webkit-font-smoothing: antialiased;
}

.eg h1, .eg h2, .eg h3, .eg h4,
.eg p, .eg ul, .eg ol, .eg figure, .eg blockquote { margin: 0; padding: 0; }

/* No colour here on purpose. `.eg h1` is (0,1,1) and out-specifies a
   single-class component rule like `.eg-ph-title` at (0,1,0), so setting a
   colour on this selector silently overrode every component that tried to
   set its own -- which is why inner-page hero headings rendered dark ink on
   a dark photograph while the homepage, whose h1 is inline-styled, looked
   right. Headings inherit from `.eg` instead, and components win cleanly. */
.eg h1, .eg h2, .eg h3, .eg h4 {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.eg p { max-width: var(--eg-measure); text-wrap: pretty; }
.eg p + p { margin-top: var(--eg-space-4); }
.eg ul, .eg ol { list-style: none; }
.eg img { display: block; max-width: 100%; height: auto; }
.eg strong { font-weight: 600; }

.eg a {
  color: var(--eg-clay-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(168,80,31,.4);
  transition: color var(--eg-transition), text-decoration-color var(--eg-transition);
}
.eg a:hover { color: var(--eg-ink); text-decoration-color: currentColor; }

/* Visible focus everywhere. The old site had none at all. */
.eg a:focus-visible,
.eg button:focus-visible,
.eg input:focus-visible,
.eg select:focus-visible,
.eg textarea:focus-visible,
.eg-header a:focus-visible,
.eg-header button:focus-visible,
.eg-footer a:focus-visible {
  outline: 2px solid var(--eg-clay);
  outline-offset: 3px;
  border-radius: 2px;
}

.eg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ===========================================================================
   5. SITE HEADER
   Rendered by header.php. Replaces Kadence's header, which was configured to
   show a hamburger toggle at every screen width -- so a desktop visitor had
   no visible navigation at all on a site whose whole job is routing five
   different kinds of enquiry.
   ======================================================================== */

.eg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--eg-forest);
  color: var(--eg-paper);
  padding: var(--eg-space-3) var(--eg-space-5);
  border-radius: 0 0 var(--eg-r-sm) 0;
  text-decoration: none;
  font-weight: 600;
}
.eg-skip:focus { left: 0; }

.eg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--eg-paper);
  border-bottom: 1px solid var(--eg-rule);
  font-family: var(--eg-font-body);
}

/* The admin bar is fixed to the top of the viewport, so a header sticking at
   top:0 parks underneath it and loses its top 32px. Only logged-in users ever
   see this, but it makes the site awkward to work on.

   Below 783px WordPress switches the admin bar to position:absolute, so it
   scrolls away with the page and the offset must go back to zero -- otherwise
   the header floats 46px clear of the top on mobile. */
body.admin-bar .eg-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .eg-header { top: 0; }
}

/* In-page anchors -- the service cards link to #lessons, #early-years and so
   on -- would otherwise land with the target tucked behind the sticky header. */
html { scroll-padding-top: calc(var(--eg-header-h) + 1rem); }
body.admin-bar { scroll-padding-top: calc(var(--eg-header-h) + 32px + 1rem); }

.eg-header-inner {
  max-width: var(--eg-max);
  margin-inline: auto;
  min-height: var(--eg-header-h);
  padding: var(--eg-space-3) var(--eg-section-x);
  display: flex;
  align-items: center;
  gap: var(--eg-space-5);
}

/* Brand: the wave mark from the printed A3 banner and price list, which
   until this rebuild appeared nowhere on the website. */
.eg-brand {
  display: flex;
  align-items: center;
  gap: var(--eg-space-3);
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.eg-brand:hover { color: inherit; }
.eg-brand .eg-mark { width: 2.75rem; height: auto; flex-shrink: 0; }
.eg-brand-name {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--eg-ink);
  letter-spacing: -0.02em;
}
.eg-brand-name em { font-style: italic; color: var(--eg-clay-deep); }
.eg-brand-tag {
  display: block;
  font-family: var(--eg-font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eg-stone);
  margin-top: 0.25rem;
}

.eg-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.eg-nav a {
  display: inline-block;
  font-size: var(--eg-text-sm);
  font-weight: 500;
  color: var(--eg-ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--eg-transition), border-color var(--eg-transition);
}
.eg-nav a:hover { color: var(--eg-clay-deep); border-bottom-color: var(--eg-clay); }

/* Current page. WordPress adds these classes itself. */
.eg-nav .current-menu-item > a,
.eg-nav .current_page_item > a,
.eg-nav .current-menu-ancestor > a {
  color: var(--eg-clay-deep);
  border-bottom-color: var(--eg-clay);
}

.eg-header-cta { flex-shrink: 0; }
.eg-header .eg-btn { margin: 0; }

/* The nav carries its own CTA for the mobile menu. Above the breakpoint the
   header bar's CTA is the one on show, so this must be hidden or both render
   and the nav copy overlaps the menu. */
.eg-nav-mobile-cta { display: none; }

/* Mobile toggle: hidden until the nav needs to collapse. */
.eg-nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--eg-rule-firm);
  border-radius: var(--eg-r-pill);
  padding: 0.5rem 0.9rem;
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-sm);
  font-weight: 500;
  color: var(--eg-ink);
  cursor: pointer;
}
.eg-nav-toggle-bars {
  display: block;
  position: relative;
  width: 1rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.eg-nav-toggle-bars::before,
.eg-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--eg-transition), opacity var(--eg-transition);
}
.eg-nav-toggle-bars::before { top: -5px; }
.eg-nav-toggle-bars::after  { top:  5px; }

[aria-expanded="true"] .eg-nav-toggle-bars { background: transparent; }
[aria-expanded="true"] .eg-nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .eg-nav-toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .eg-nav-toggle { display: inline-flex; }
  .eg-header-cta { display: none; }

  .eg-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--eg-paper);
    border-bottom: 1px solid var(--eg-rule);
    padding: var(--eg-space-4) var(--eg-section-x) var(--eg-space-6);
  }
  .eg-nav.is-open { display: block; }
  .eg-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .eg-nav li { border-bottom: 1px solid var(--eg-rule); }
  .eg-nav li:last-child { border-bottom: 0; }
  .eg-nav a {
    display: block;
    padding: var(--eg-space-4) 0;
    font-size: var(--eg-text-lg);
    border-bottom: 0;
  }
  .eg-nav a:hover { border-bottom: 0; }
  .eg-nav-mobile-cta { display: block; margin-top: var(--eg-space-5); }
}

/* No JS: show the menu rather than hiding it behind a button that cannot work. */
.no-js .eg-nav { display: block; position: static; padding: 0 0 var(--eg-space-4); }
.no-js .eg-nav-toggle { display: none; }


/* Kadence's own page furniture.
   page.php now renders just the content, but these stay as belt and braces:
   a plugin or a template we have not overridden can still bring back the
   grey title band or the inset white frame, and both fight full-bleed
   sections. */
.entry-hero-container,
.page-hero-section,
.entry-hero,
body.page .entry-header,
body.page .entry-title { display: none !important; }

body.page .content-area,
body.page .content-container,
body.page .site-container,
body.page .entry-content-wrap,
body.page .content-wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.page .site-main,
body.page .entry-content { background: transparent; }
body.page #wrapper, body.page .site { background: var(--eg-paper); }

/* ===========================================================================
   6. SITE FOOTER
   Rendered by footer.php. Previously this markup was pasted into all ten
   pages and had already drifted into three divergent versions.
   ======================================================================== */

.eg-footer {
  background: var(--eg-forest);
  color: var(--eg-stone-light);
  font-family: var(--eg-font-body);
  padding: var(--eg-space-8) var(--eg-section-x) var(--eg-space-5);
}
.eg-footer a {
  color: var(--eg-stone-light);
  text-decoration: none;
  transition: color var(--eg-transition);
}
.eg-footer a:hover { color: var(--eg-paper); text-decoration: underline; }

.eg-footer-inner {
  max-width: var(--eg-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 720px) { .eg-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .eg-footer-inner { grid-template-columns: 1fr; } }

.eg-footer .eg-mark { width: 6.5rem; margin-bottom: var(--eg-space-4); }
.eg-footer-name {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-xl);
  font-weight: 600;
  color: var(--eg-paper);
  margin-bottom: var(--eg-space-2);
}
.eg-footer-name em { font-style: italic; color: var(--eg-gold); }
.eg-footer-tag {
  font-size: var(--eg-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eg-stone-light);
}
.eg-footer-gaelic {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-style: italic;
  font-size: var(--eg-text-sm);
  color: var(--eg-gold);
  margin-top: 0.2rem;
}
.eg-footer-loc { font-size: var(--eg-text-sm); margin-top: var(--eg-space-3); }

.eg-footer h2 {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eg-gold);
  margin-bottom: var(--eg-space-3);
}
.eg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eg-space-2); }
.eg-footer li a { font-size: var(--eg-text-sm); }

.eg-social { display: flex; gap: var(--eg-space-2); margin-top: var(--eg-space-4); }
.eg-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--eg-r-pill);
  background: rgba(253,248,240,.1);
  transition: background var(--eg-transition), color var(--eg-transition);
}
.eg-social a:hover { background: var(--eg-gold); color: var(--eg-forest); text-decoration: none; }
.eg-social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.eg-footer-bar {
  max-width: var(--eg-max);
  margin: var(--eg-space-7) auto 0;
  padding-top: var(--eg-space-4);
  border-top: 1px solid var(--eg-rule-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--eg-space-3);
  font-size: var(--eg-text-xs);
}
.eg-footer-bar nav { display: flex; flex-wrap: wrap; gap: var(--eg-space-4); }


/* ===========================================================================
   7. PAGE COMPONENTS
   The class set the existing pages already use, restyled against the new
   tokens. Emily's pages keep their current structure; only colour and type
   change.
   ======================================================================== */

/* --- Page hero ---------------------------------------------------------- */
.eg-ph {
  position: relative;
  width: 100%;
  min-height: 42vh;
  background: var(--eg-forest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(3rem,7vw,5rem) var(--eg-section-x) clamp(4rem,8vw,6rem);
  text-align: center;
}
/* The photo now runs at .55 rather than .28. It was dropped so far behind the
   gradient that the picture did no work. */
.eg-ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: .55; }
.eg-ph-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30,58,53,.72) 0%, rgba(30,58,53,.45) 45%, rgba(30,58,53,.85) 100%);
}
.eg-ph-inner { position: relative; z-index: 10; max-width: 46rem; }
.eg-ph-label {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eg-gold);
  margin-bottom: var(--eg-space-3);
}
.eg-ph-title {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-4xl);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--eg-paper);
  margin-bottom: var(--eg-space-3);
}
.eg-ph-title em { font-style: italic; color: var(--eg-gold); display: block; }
.eg-ph-sub {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-lg);
  color: var(--eg-stone-light);
  margin: var(--eg-space-4) auto 0;
  max-width: 34rem;
  line-height: 1.55;
}
.eg-ph-rule { width: 2.25rem; height: 2px; background: var(--eg-gold); margin: var(--eg-space-4) auto; border: 0; }

/* The decorative animated string waves are retired: they ran forever on every
   page, behind content, and duplicated the logo's own motif. The mark itself
   now appears in the header and footer instead. */
.eg-ph-wave,
.eg-ph-wave-g,
.eg-ph-wave-d,
.eg-ph-wave-a { display: none !important; }

/* Hero pills. This class was referenced on the live homepage but never
   actually defined in any stylesheet, so the links rendered unstyled. */
.eg-hero-pill {
  display: inline-block;
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-sm);
  font-weight: 500;
  color: var(--eg-forest);
  background: var(--eg-paper);
  border-radius: var(--eg-r-pill);
  padding: 0.55em 1.2em;
  text-decoration: none;
  transition: background var(--eg-transition), color var(--eg-transition);
}
.eg-hero-pill:hover { background: var(--eg-gorse); color: var(--eg-forest); text-decoration: none; }

/* --- Sections ----------------------------------------------------------- */
.eg-sec { padding: var(--eg-section-y) var(--eg-section-x); }
.eg-sec > * { max-width: var(--eg-max); margin-inline: auto; }

.eg-linen { background: var(--eg-sand); }
.eg-warm  { background: var(--eg-paper); }
.eg-dark  { background: var(--eg-forest); color: var(--eg-stone-light); }
.eg-teal  { background: var(--eg-sea); color: var(--eg-paper); }

.eg-dark h1, .eg-dark h2, .eg-dark h3, .eg-dark .eg-h2,
.eg-teal h1, .eg-teal h2, .eg-teal h3, .eg-teal .eg-h2 { color: var(--eg-paper); }
.eg-dark .eg-body, .eg-dark p { color: var(--eg-stone-light); }
.eg-teal .eg-body, .eg-teal p { color: rgba(253,248,240,.92); }
.eg-dark a, .eg-teal a { color: var(--eg-gold); text-decoration-color: rgba(212,160,23,.45); }
.eg-dark a:hover, .eg-teal a:hover { color: var(--eg-paper); }

/* --- Type --------------------------------------------------------------- */
.eg-label {
  display: inline-block;
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-forest);
  background: var(--eg-gorse);
  padding: 0.35em 0.9em;
  border-radius: var(--eg-r-pill);
  margin-bottom: var(--eg-space-4);
}
.eg-label-g { background: var(--eg-gold); color: var(--eg-forest); }
.eg-dark .eg-label, .eg-teal .eg-label { background: var(--eg-gold); color: var(--eg-forest); }

.eg-h2 {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-3xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--eg-space-4);
  color: var(--eg-ink);
}
/* The old rule coloured the italic word in every heading terracotta. Dropping
   the colour change was one of the clearest ways to stop the pages reading as
   template output; the italic alone carries the emphasis. */
.eg-h2 em { font-style: italic; }

.eg-body {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-base);
  line-height: 1.7;
  color: var(--eg-stone);
  max-width: var(--eg-measure);
}
.eg-body + .eg-body { margin-top: var(--eg-space-4); }

/* --- Two column --------------------------------------------------------- */
.eg-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* A two-column grid given a single child leaves half the section empty --
   which is exactly what the homepage "Upcoming" block was doing. */
.eg-two:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 768px) { .eg-two { grid-template-columns: 1fr; } }
.eg-flip > :first-child { order: 2; }
.eg-flip > :last-child  { order: 1; }
@media (max-width: 768px) { .eg-flip > * { order: unset; } }

.eg-photo { border-radius: var(--eg-r-lg); overflow: hidden; }
.eg-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.eg-photo-wide img { aspect-ratio: 16/10; }

/* --- Cards -------------------------------------------------------------- */
.eg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--eg-space-5);
  margin-top: var(--eg-space-6);
}
.eg-card {
  display: flex;
  flex-direction: column;
  background: var(--eg-sand);
  border-radius: var(--eg-r-lg);
  overflow: hidden;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border-color var(--eg-transition);
}
.eg-card:hover { border-color: var(--eg-forest); text-decoration: none; }
.eg-dark .eg-card, .eg-teal .eg-card { background: rgba(253,248,240,.08); }
.eg-card-img { aspect-ratio: 3/2; overflow: hidden; }
.eg-card-img img { width: 100%; height: 100%; object-fit: cover; }
.eg-card-body { padding: var(--eg-space-5); display: flex; flex-direction: column; gap: var(--eg-space-2); flex: 1; }
.eg-card-tag {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-clay-deep);
}
.eg-dark .eg-card-tag, .eg-teal .eg-card-tag { color: var(--eg-gold); }
.eg-card-title {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--eg-ink);
}
.eg-dark .eg-card-title, .eg-teal .eg-card-title { color: var(--eg-paper); }
.eg-card-desc { font-size: var(--eg-text-sm); color: var(--eg-stone); line-height: 1.6; flex: 1; }
.eg-dark .eg-card-desc, .eg-teal .eg-card-desc { color: var(--eg-stone-light); }
.eg-card-link {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-sm);
  font-weight: 600;
  color: var(--eg-clay-deep);
  margin-top: var(--eg-space-2);
}
.eg-dark .eg-card-link, .eg-teal .eg-card-link { color: var(--eg-gold); }

/* --- Info boxes --------------------------------------------------------- */
.eg-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--eg-space-4);
  margin-top: var(--eg-space-6);
}
.eg-box, .eg-box-dk {
  border-radius: var(--eg-r-lg);
  padding: var(--eg-space-5);
}
.eg-box    { background: var(--eg-sand); }
.eg-box-dk { background: rgba(253,248,240,.08); }
.eg-box h3, .eg-box-dk h3 {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-lg);
  font-weight: 600;
  margin-bottom: var(--eg-space-2);
  color: var(--eg-ink);
}
.eg-box-dk h3 { color: var(--eg-paper); }
.eg-box p, .eg-box li { font-size: var(--eg-text-sm); line-height: 1.65; color: var(--eg-stone); }
.eg-box-dk p, .eg-box-dk li { font-size: var(--eg-text-sm); line-height: 1.65; color: var(--eg-stone-light); }
.eg-box ul, .eg-box-dk ul { margin-top: var(--eg-space-2); }
.eg-box ul li, .eg-box-dk ul li { padding: var(--eg-space-2) 0; border-bottom: 1px solid var(--eg-rule); }
.eg-box-dk ul li { border-bottom-color: var(--eg-rule-dark); }
.eg-box ul li:last-child, .eg-box-dk ul li:last-child { border-bottom: 0; }

/* --- Buttons ------------------------------------------------------------ */
.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-sm);
  font-weight: 600;
  padding: 0.8em 1.7em;
  border-radius: var(--eg-r-pill);
  background: var(--eg-clay-deep);
  color: var(--eg-paper);
  border: 2px solid var(--eg-clay-deep);
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--eg-space-4);
  transition: background var(--eg-transition), border-color var(--eg-transition), color var(--eg-transition);
}
.eg-btn:hover { background: var(--eg-forest); border-color: var(--eg-forest); color: var(--eg-paper); text-decoration: none; }

/* `.eg a` is (0,1,1) and out-specifies a bare `.eg-btn` at (0,1,0), so button
   labels were inheriting the link colour -- terracotta text on a terracotta
   fill. Matching the anchor explicitly settles it. */
.eg a.eg-btn { color: var(--eg-paper); text-decoration: none; }
.eg a.eg-btn:hover { color: var(--eg-paper); }
.eg a.eg-btn-ghost { color: var(--eg-forest); }
.eg a.eg-btn-ghost:hover { color: var(--eg-paper); }
.eg-dark a.eg-btn-ghost, .eg-teal a.eg-btn-ghost { color: var(--eg-paper); }
.eg-dark a.eg-btn-ghost:hover, .eg-teal a.eg-btn-ghost:hover { color: var(--eg-forest); }
.eg-btn-terra { background: var(--eg-clay-deep); border-color: var(--eg-clay-deep); }
.eg-btn-ghost { background: transparent; color: var(--eg-forest); border-color: var(--eg-forest); }
.eg-btn-ghost:hover { background: var(--eg-forest); color: var(--eg-paper); }
.eg-dark .eg-btn-ghost, .eg-teal .eg-btn-ghost { color: var(--eg-paper); border-color: var(--eg-paper); }
.eg-dark .eg-btn-ghost:hover, .eg-teal .eg-btn-ghost:hover { background: var(--eg-paper); color: var(--eg-forest); }

/* --- Forms -------------------------------------------------------------- */
.eg-form { display: flex; flex-direction: column; gap: var(--eg-space-4); max-width: 34rem; margin-top: var(--eg-space-6); }
.eg-form label { font-size: var(--eg-text-sm); font-weight: 600; }
.eg-form input, .eg-form select, .eg-form textarea {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-base);
  color: var(--eg-ink);
  background: var(--eg-paper);
  padding: 0.75em 1em;
  border: 2px solid var(--eg-rule);
  border-radius: var(--eg-r-md);
  transition: border-color var(--eg-transition);
}
.eg-form input:focus, .eg-form select:focus, .eg-form textarea:focus { border-color: var(--eg-sea); }
.eg-form textarea { min-height: 8rem; resize: vertical; }
.eg-form-note, .eg-nl-note { font-size: var(--eg-text-xs); color: var(--eg-stone); }
.eg-dark .eg-form-note, .eg-teal .eg-form-note,
.eg-dark .eg-nl-note, .eg-teal .eg-nl-note { color: var(--eg-stone-light); }
.eg-brevo { max-width: 34rem; margin-top: var(--eg-space-5); }

/* --- Quote -------------------------------------------------------------- */
.eg-quote {
  border-left: 3px solid var(--eg-gorse);
  padding: var(--eg-space-2) 0 var(--eg-space-2) var(--eg-space-5);
  margin: var(--eg-space-5) 0;
}
.eg-quote p {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-2xl);
  font-style: italic;
  line-height: 1.35;
  color: var(--eg-ink);
  max-width: 28ch;
}
.eg-dark .eg-quote p, .eg-teal .eg-quote p { color: var(--eg-paper); }

/* --- Upcoming ------------------------------------------------------------
   Cards rather than a list. Each carries a service colour from the redesign
   palette, so the section is scannable by colour before it is read, and the
   left rule ties the card to its tag without needing a filled background.  */
.eg-upcoming {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: var(--eg-space-4);
  margin-top: var(--eg-space-7);
}
.eg-upcoming li {
  background: var(--eg-paper);
  border-radius: var(--eg-r-lg);
  border-left: 5px solid var(--eg-up-colour, var(--eg-gorse));
  padding: var(--eg-space-5) var(--eg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--eg-space-2);
}
.eg-linen .eg-upcoming li { background: var(--eg-paper); }
.eg-warm  .eg-upcoming li { background: var(--eg-sand); }

/* One colour per service, matching the tags used elsewhere. */
.eg-up-lessons   { --eg-up-colour: var(--eg-gorse);     --eg-up-ink: var(--eg-forest); }
.eg-up-early     { --eg-up-colour: var(--eg-bluebell);  --eg-up-ink: var(--eg-paper); }
.eg-up-workshops { --eg-up-colour: var(--eg-sea);       --eg-up-ink: var(--eg-paper); }
.eg-up-ceilidh   { --eg-up-colour: var(--eg-heather);   --eg-up-ink: var(--eg-paper); }
.eg-up-pottery   { --eg-up-colour: var(--eg-clay-deep); --eg-up-ink: var(--eg-paper); }

.eg-up-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eg-space-3);
  flex-wrap: wrap;
}
.eg-up-tag {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--eg-up-colour, var(--eg-gorse));
  color: var(--eg-up-ink, var(--eg-forest));
  padding: 0.3em 0.85em;
  border-radius: var(--eg-r-pill);
  white-space: nowrap;
}
.eg-up-date {
  font-size: var(--eg-text-sm);
  color: var(--eg-stone);
  text-align: right;
}

/* Bigger, so the thing itself reads before the detail does. */
.eg-up-title {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--eg-ink);
  margin-top: var(--eg-space-2);
}
.eg-up-when {
  font-size: var(--eg-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--eg-up-colour, var(--eg-clay-deep));
}
.eg-up-note { font-size: var(--eg-text-sm); color: var(--eg-stone); line-height: 1.6; }

/* Times get their own pills in tabular figures, so a parent scanning for
   "is it 2.15 or 3.10?" finds it without reading a sentence. */
.eg-up-times { display: flex; flex-wrap: wrap; gap: var(--eg-space-2); margin-top: var(--eg-space-1); }
.eg-up-times span {
  font-size: var(--eg-text-sm);
  font-variant-numeric: tabular-nums;
  background: var(--eg-paper);
  border: 1px solid var(--eg-rule);
  border-radius: var(--eg-r-sm);
  padding: 0.3em 0.7em;
  white-space: nowrap;
}
.eg-warm .eg-up-times span { background: var(--eg-paper); }

.eg-up-link {
  font-size: var(--eg-text-sm);
  font-weight: 600;
  margin-top: auto;
  padding-top: var(--eg-space-3);
  align-self: flex-start;
}

/* Retained for any page still using the old inner wrapper. */
.eg-up-body { font-size: var(--eg-text-sm); line-height: 1.6; color: var(--eg-stone); }

/* --- Stockists ---------------------------------------------------------- */
.eg-stockists { display: flex; gap: var(--eg-space-4); flex-wrap: wrap; margin-top: var(--eg-space-5); }
.eg-stockist {
  background: var(--eg-sand);
  border-radius: var(--eg-r-md);
  padding: var(--eg-space-4) var(--eg-space-5);
  min-width: 12rem;
}
.eg-stockist h4 {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-lg);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.eg-stockist p { font-size: var(--eg-text-sm); color: var(--eg-stone); }

/* --- Info strip --------------------------------------------------------- */
.eg-info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--eg-space-4);
  margin-top: var(--eg-space-5);
}
.eg-info-item { background: var(--eg-sand); border-radius: var(--eg-r-md); padding: var(--eg-space-5); }
.eg-info-title {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-clay-deep);
  margin-bottom: var(--eg-space-2);
}
.eg-info-text { font-size: var(--eg-text-sm); color: var(--eg-stone); line-height: 1.6; }


/* ===========================================================================
   8. SHOP COMPONENTS
   ======================================================================== */

.eg-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--eg-space-4);
  margin-top: var(--eg-space-6);
}
.eg-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 15rem;
  border-radius: var(--eg-r-lg);
  overflow: hidden;
  text-decoration: none;
}
.eg-cat-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 400ms ease; }
.eg-cat:hover .eg-cat-bg { transform: scale(1.04); }
.eg-cat-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,58,53,.92) 0%, rgba(30,58,53,.15) 70%); }
.eg-cat-body { position: relative; z-index: 2; padding: var(--eg-space-5); }
.eg-cat-tag {
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-gold);
}
.eg-cat-title {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-size: var(--eg-text-xl);
  font-weight: 600;
  color: var(--eg-paper);
  line-height: 1.2;
  margin: 0.25rem 0;
}
.eg-cat-hint { font-size: var(--eg-text-sm); color: var(--eg-stone-light); }


/* ===========================================================================
   9. NEW COMPONENTS
   The redesigned homepage layer -- task cards, schedule, masthead. Not used
   by the current pages; kept here so the Block Patterns in /patterns work
   when a page is migrated. Safe to delete if the redesign is abandoned.
   ======================================================================== */

.eg-masthead {
  background: var(--eg-sand);
  border-radius: var(--eg-r-xl);
  margin: var(--eg-space-4) var(--eg-section-x) var(--eg-space-6);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .eg-masthead { grid-template-columns: 1fr; border-radius: var(--eg-r-lg); } }
.eg-masthead-name { font-size: var(--eg-text-4xl); font-weight: 500; line-height: 0.94; letter-spacing: -0.03em; margin: var(--eg-space-5) 0 var(--eg-space-3); }
.eg-masthead-name em { font-style: italic; color: var(--eg-clay-deep); }
.eg-masthead-tagline { font-size: var(--eg-text-sm); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eg-sea-deep); }
.eg-masthead-photo { margin: 0; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--eg-r-lg); }
.eg-masthead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
@media (max-width: 820px) { .eg-masthead-photo { aspect-ratio: 3/2; order: -1; } }
.eg-masthead-cta { display: flex; flex-wrap: wrap; gap: var(--eg-space-3); margin-top: var(--eg-space-5); }

.eg-gaelic {
  font-family: var(--eg-font-display);
  font-variation-settings: var(--eg-display-settings);
  font-style: italic;
  font-size: var(--eg-text-sm);
  letter-spacing: 0.06em;
  color: var(--eg-gorse-deep);
}
.eg-lede { font-size: var(--eg-text-lg); line-height: 1.55; color: var(--eg-stone); max-width: var(--eg-measure-tight); margin-top: var(--eg-space-4); }
.eg-eyebrow {
  display: inline-block;
  font-family: var(--eg-font-body);
  font-size: var(--eg-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-forest);
  background: var(--eg-gorse);
  padding: 0.35em 0.9em;
  border-radius: var(--eg-r-pill);
  margin-bottom: var(--eg-space-4);
}
.eg-eyebrow-sea      { background: var(--eg-sea);       color: var(--eg-paper); }
.eg-eyebrow-clay     { background: var(--eg-clay-deep); color: var(--eg-paper); }
.eg-eyebrow-bluebell { background: var(--eg-bluebell);  color: var(--eg-paper); }
.eg-dark .eg-eyebrow { background: var(--eg-gold); color: var(--eg-forest); }

.eg-paper { background: var(--eg-paper); }
.eg-sand  { background: var(--eg-sand); }
.eg-block { border-radius: var(--eg-r-xl); margin: 0 var(--eg-section-x) var(--eg-space-6); padding: var(--eg-section-y) clamp(1.5rem,4vw,3.5rem); }
.eg-block > * { max-width: calc(var(--eg-max) - 6rem); margin-inline: auto; }
@media (max-width: 640px) { .eg-block { border-radius: var(--eg-r-lg); } }

/* Task cards, 3 over 2 with the second row centred. */
.eg-tasks { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--eg-space-4); margin-top: var(--eg-space-6); }
.eg-task { grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: var(--eg-space-3);
           padding: clamp(1.5rem,2.5vw,2rem); border-radius: var(--eg-r-lg); text-decoration: none;
           color: var(--eg-forest); border: 2px solid transparent; transition: border-color var(--eg-transition); }
.eg-task:nth-child(4) { grid-column: 2 / span 2; }
.eg-task:nth-child(5) { grid-column: 4 / span 2; }
.eg-task:hover, .eg-task:focus-within { border-color: var(--eg-forest); }
.eg-task .eg-task-go::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 1000px) {
  .eg-tasks { grid-template-columns: repeat(4, 1fr); }
  .eg-task, .eg-task:nth-child(4) { grid-column: span 2; }
  .eg-task:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
  .eg-tasks { grid-template-columns: 1fr; }
  .eg-task, .eg-task:nth-child(4), .eg-task:nth-child(5) { grid-column: auto; }
}

.eg-task-lessons   { background: var(--eg-gorse-tint);    --eg-strand: var(--eg-gorse);     --eg-strand-ink: var(--eg-forest); }
.eg-task-early     { background: var(--eg-bluebell-tint); --eg-strand: var(--eg-bluebell);  --eg-strand-ink: var(--eg-paper); }
.eg-task-workshops { background: var(--eg-sea-tint);      --eg-strand: var(--eg-sea);       --eg-strand-ink: var(--eg-paper); }
.eg-task-ceilidh   { background: var(--eg-heather-tint);  --eg-strand: var(--eg-heather);   --eg-strand-ink: var(--eg-paper); }
.eg-task-pottery   { background: var(--eg-clay-tint);     --eg-strand: var(--eg-clay-deep); --eg-strand-ink: var(--eg-paper); }

.eg-task-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--eg-r-pill);
  background: var(--eg-strand, var(--eg-gorse));
  color: var(--eg-strand-ink, var(--eg-forest));
  flex-shrink: 0;
}
/* The icon is a CSS mask, so pattern markup holds no SVG and the icon takes
   its colour from the badge -- it cannot fall out of step with the palette. */
.eg-task-badge::before {
  content: ""; width: 1.5rem; height: 1.5rem; background: currentColor;
  -webkit-mask: var(--eg-icon) center / contain no-repeat;
          mask: var(--eg-icon) center / contain no-repeat;
}
.eg-task-badge svg { width: 1.5rem; height: 1.5rem; }
.eg-task-badge:has(svg)::before { display: none; }

.eg-task-title { font-family: var(--eg-font-display); font-variation-settings: var(--eg-display-settings); font-size: var(--eg-text-xl); font-weight: 600; line-height: 1.15; }
.eg-task-desc  { font-size: var(--eg-text-sm); color: var(--eg-stone); line-height: 1.55; flex: 1; }
.eg-task-go    { font-size: var(--eg-text-sm); font-weight: 600; color: var(--eg-forest); display: inline-flex; align-items: center; gap: 0.4em; transition: gap var(--eg-transition); }
.eg-task:hover .eg-task-go { gap: 0.75em; }

/* Schedule */
.eg-schedule { display: flex; flex-direction: column; gap: var(--eg-space-4); margin-top: var(--eg-space-6); }
.eg-event {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  background: var(--eg-paper);
  border-radius: var(--eg-r-md);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 680px) { .eg-event { grid-template-columns: 1fr; gap: var(--eg-space-3); } }
.eg-tag { display: inline-block; font-size: var(--eg-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3em 0.85em; border-radius: var(--eg-r-pill); margin-bottom: var(--eg-space-3); }
.eg-tag-lessons   { background: var(--eg-gorse);     color: var(--eg-forest); }
.eg-tag-early     { background: var(--eg-bluebell);  color: var(--eg-paper); }
.eg-tag-workshops { background: var(--eg-sea);       color: var(--eg-paper); }
.eg-tag-ceilidh   { background: var(--eg-heather);   color: var(--eg-paper); }
.eg-tag-pottery   { background: var(--eg-clay-deep); color: var(--eg-paper); }
.eg-event-when  { font-size: var(--eg-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; color: var(--eg-forest); }
.eg-event-where { display: block; font-weight: 400; color: var(--eg-stone); margin-top: 0.2rem; }
.eg-event-what  { font-size: var(--eg-text-lg); font-weight: 600; line-height: 1.3; }
.eg-event-times { display: flex; flex-wrap: wrap; gap: var(--eg-space-2); margin-top: var(--eg-space-3); }
.eg-event-times span { font-size: var(--eg-text-sm); font-variant-numeric: tabular-nums; background: var(--eg-sand); border-radius: var(--eg-r-sm); padding: 0.25em 0.7em; white-space: nowrap; }
.eg-event-detail { font-size: var(--eg-text-sm); color: var(--eg-stone); margin-top: var(--eg-space-3); line-height: 1.55; }

/* Pillars */
.eg-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--eg-space-5); margin-top: var(--eg-space-6); }
.eg-pillar { display: flex; flex-direction: column; border-radius: var(--eg-r-lg); overflow: hidden; background: var(--eg-sand); }
.eg-pillar-teach { background: var(--eg-gorse-tint); }
.eg-pillar-play  { background: var(--eg-sea-tint); }
.eg-pillar-make  { background: var(--eg-clay-tint); }
.eg-pillar img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.eg-pillar-body { padding: var(--eg-space-5); display: flex; flex-direction: column; gap: var(--eg-space-2); flex: 1; }
.eg-pillar-body p { font-size: var(--eg-text-sm); color: var(--eg-stone); line-height: 1.6; flex: 1; }

/* Split, figures */
.eg-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) { .eg-split { grid-template-columns: 1fr; } }
.eg-figure { margin: 0; }
.eg-figure img { width: 100%; border-radius: var(--eg-r-lg); }
.eg-figure-round img { border-radius: var(--eg-r-pill); aspect-ratio: 1; object-fit: cover; }
.eg-quote-cite { display: block; font-family: var(--eg-font-body); font-style: normal; font-size: var(--eg-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--eg-stone); margin-top: var(--eg-space-4); }
.eg-dark .eg-quote-cite { color: var(--eg-stone-light); }

/* Task-card icons, one per service. Generated as URL-encoded SVG so the
   picture lives in the design system rather than in page markup. */
.eg-task-lessons { --eg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l10-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/svg%3E"); }
.eg-task-early { --eg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.eg-task-workshops { --eg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 20a5 5 0 0 1 5.5-4.9'/%3E%3C/svg%3E"); }
.eg-task-ceilidh { --eg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Ccircle cx='9' cy='17' r='3'/%3E%3Cpath d='M12 6l7-2'/%3E%3Cpath d='M12 10l7-2'/%3E%3C/svg%3E"); }
.eg-task-pottery { --eg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l-1 3.5a6 6 0 0 1 3 5.2V18a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3v-6.3a6 6 0 0 1 3-5.2Z'/%3E%3C/svg%3E"); }