/* ==========================================================================
   Bobbie Pell — site styles
   A light, high-contrast Celtic theme. Dark ink on parchment, with forest
   green and illuminated-manuscript purple as accents.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* surfaces */
  --bg:             #eff4ea;  /* parchment, tinted green */
  --surface:        #fffdf8;  /* card */
  --surface-sunken: #d2e0cc;  /* inset band, clearly green */

  /* The original site green. Several images were cut on this exact colour
     and carry it baked into their background, so it has to stay available
     as a real surface or they sit on a visible rectangle. */
  --green-classic:  #669966;

  /* ink — all of these clear 7:1 on --bg */
  --ink:       #22301f;  /* body copy */
  --ink-soft:  #4b5946;  /* secondary copy */
  --ink-faint: #525c4e;  /* captions, meta */

  /* brand */
  --green:       #2f5d3f;
  --green-deep:  #1b3826;
  --green-pale:  #e4ecdf;
  --purple:      #5e2d8f;
  --purple-deep: #43206a;
  --purple-pale: #f0e9f7;
  --gold:        #74521a;  /* illumination accent */

  --rule: #d9d0bd;

  /* type */
  --font-display: "Uncial Antiqua", "Papyrus", serif;
  --font-head:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* spacing scale */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;  --s9: 6rem;

  --measure: 68ch;   /* comfortable reading width */
  --page:    1120px; /* max content width */

  --radius: 10px;
  --shadow: 0 1px 2px rgba(27, 56, 38, .06), 0 8px 24px rgba(27, 56, 38, .07);
  --shadow-lift: 0 2px 4px rgba(27, 56, 38, .08), 0 16px 40px rgba(27, 56, 38, .12);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--purple);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--purple-deep); }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--purple); color: #fff;
  padding: var(--s3) var(--s4); z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* --------------------------------------------------------------- type */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--green-deep);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s3);
}

/* --------------------------------------------------------------- layout */
.wrap {
  width: min(100% - 2rem, var(--page));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .wrap { width: min(100% - 4rem, var(--page)); }
}

.section      { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.section--sunken {
  background: var(--surface-sunken);
  border-block: 1px solid var(--rule);
}

/* --------------------------------------------------------------- header */
.site-header {
  background: var(--green-deep);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}

.site-header__bar {
  display: flex;
  justify-content: center;
  padding-block: var(--s5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s4);
  text-decoration: none;
  color: #fff;
  text-align: left;
}
.brand:hover { color: #fff; }
.brand__mark { width: 52px; height: 48px; flex: none; opacity: .9; }
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1;
  letter-spacing: .01em;
}
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b9cdbf;
  margin-top: .35rem;
}

/* ------------------------------------------------- nav (button plates)
   Bobbie's six spiral button GIFs, kept as-is. They are pastel, so they
   sit on a light band rather than on the dark green masthead, and they
   scale fluidly instead of forcing a 900px floor. */
.nav-plates-bar {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--rule);
}

.nav-plates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  list-style: none;
  margin: 0 auto;
  padding-block: var(--s4);
  padding-inline: 0;   /* UA default is 40px and silently eats a column */
}
.nav-plates li { flex: 0 1 150px; min-width: 96px; }

.nav-plates a {
  display: block;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;              /* kill inline-image gap */
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.nav-plates img { width: 100%; height: auto; }

.nav-plates a:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.nav-plates a[aria-current="page"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 111, 36, .18);
}

@media (prefers-reduced-motion: reduce) {
  .nav-plates a { transition: none; }
  .nav-plates a:hover { transform: none; }
}

/* --------------------------------------------------------------- nav */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: var(--s2) var(--s4);
  color: #e7efe8;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.nav a[aria-current="page"] {
  background: var(--gold);
  color: #1b1403;
}

/* --------------------------------------------------------------- bands */
.knotband {
  height: 44px;
  background-image: url("../img/ui/knotband-green.png");
  background-repeat: repeat-x;
  background-size: auto 44px;
  background-position: center;
  opacity: .5;
}
.knotband--on-dark {
  background-image: url("../img/ui/knotband-cream.png");
  opacity: .32;
}

/* centred knot ornament that separates sections */
.ornament {
  display: block;
  width: 170px;
  margin: var(--s8) auto;
  opacity: .6;
}

/* --------------------------------------------------------------- hero */
.hero { padding-block: var(--s8) var(--s7); }

.hero__grid {
  display: grid;
  gap: var(--s7);
  align-items: start;
  /* keep portrait and copy visually paired rather than stranded apart */
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 52rem) {
  .hero__grid {
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: var(--s7);
  }
}

.portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.portrait img { width: 100%; }

/* hero title is set in the display face so it reads as a title treatment
   rather than echoing the header wordmark */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  letter-spacing: .01em;
  margin-bottom: var(--s3);
}
.hero__role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s5);
}

/* --------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6);
}

.card-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* --------------------------------------------------------------- quotes */
.quote {
  margin: 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--purple);
}
.quote p {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}
.quote figcaption {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
  font-style: normal;
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn--primary {
  background: var(--purple);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover {
  background: var(--purple-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn--ghost {
  border-color: var(--green);
  color: var(--green);
}
.btn--ghost:hover { background: var(--green-pale); color: var(--green-deep); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn--primary:hover { transform: none; }
}

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--green-deep);
  color: #cfdbd1;
  margin-top: var(--s9);
}
.site-footer a { color: #fff; }

.site-footer__inner {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s7);
}
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
}

.footer-nav ul {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  list-style: none; margin: 0; padding: 0;
}
.footer-nav a {
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }

.footer-contact {
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}
.footer-contact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: var(--s2);
}

.colophon {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--s4);
  font-size: 0.8125rem;
  color: #9fb2a5;
}

/* ------------------------------------------------------- image plates
   Adult-Workshop.jpg, Woods-Portrait.jpg and Dragon_rev.jpg were all cut
   on the original #669966. Sitting them in a plate of that same green
   turns the baked-in rectangle into an intentional mount instead of an
   artefact. */
.img-plate {
  background: var(--green-classic);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow);
  line-height: 0;
}
.img-plate img {
  border-radius: 4px;
  margin-inline: auto;
}
.img-plate--tight { padding: 0; overflow: hidden; }

/* a green rule that echoes the old banding without carrying text */
.green-rule {
  height: 6px;
  background: var(--green-classic);
  border: 0;
  border-radius: 3px;
  margin: var(--s7) 0;
  max-width: 180px;
}

/* ------------------------------------------------- image order buttons
   Bobbie's own ORDER NOW plate, kept as artwork rather than replaced. */
.btn-img {
  display: inline-block;
  border: 2px solid var(--green-classic);
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-img img { width: 151px; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn-img { transition: none; }
  .btn-img:hover { transform: none; }
}

/* --------------------------------------------------------------- books */
.book {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 40rem) {
  .book { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); }
}

.book + .book {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--rule);
}

.book__cover {
  max-width: 200px;
}
.book__cover img {
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.book__title { margin-bottom: var(--s2); }

.book__series {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.badge-new {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  vertical-align: .22em;
  margin-left: var(--s2);
}

/* format / price chips */
.price-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s5) 0;
  padding: 0;
}
.price-list li {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  background: var(--green-pale);
  border: 1px solid #c9d8c2;
  border-radius: 999px;
  padding: .3rem .85rem;
}
.price-list__fmt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-list__amt {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--green-deep);
}

/* ------------------------------------------------- read-more accordion
   Full text is always in the markup. JS adds .is-clamped plus a toggle;
   without JS nothing collapses and the whole passage reads normally. */
.clamp {
  --clamp-lines: 5;
  --fade-to: var(--bg);
  position: relative;
}

.clamp.is-clamped {
  max-height: calc(var(--clamp-lines) * 1.65em);
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
}

/* The open state is a class, not a measured pixel value, so the correct
   end state never depends on the animation running or on transitionend
   firing. The cap is a generous finite length (not `none`) purely so the
   change remains animatable; no passage here comes close to it. */
.clamp.is-clamped.is-expanded {
  max-height: 60em;
}

/* soft fade so the cut never lands mid-letter */
.clamp.is-clamped::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3.25rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--fade-to));
  pointer-events: none;
  transition: opacity .2s ease;
}
.clamp.is-expanded::after { opacity: 0; }

/* the fade has to match whatever surface the block is sitting on */
.card .clamp,
.section--sunken .card .clamp { --fade-to: var(--surface); }
.section--sunken .clamp { --fade-to: var(--surface-sunken); }

.clamp__toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: var(--s3);
  padding: var(--s2) 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--purple);
  cursor: pointer;
}
.clamp__toggle:hover { color: var(--purple-deep); }
.clamp__toggle svg {
  width: .72em;
  height: .72em;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.clamp__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .clamp.is-clamped,
  .clamp__toggle svg,
  .clamp.is-clamped::after { transition: none; }
}

.excerpt {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  background: var(--purple-pale);
  border-radius: var(--radius);
  padding: var(--s5);
  margin: 0 0 var(--s4);
  max-width: var(--measure);
}

/* --------------------------------------------------- media / paypal items */
.media-item {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 40rem) {
  .media-item { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); }
}
.media-item img { border-radius: 6px; }

.price-tag {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--s4);
}
.price-tag span {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* PayPal image buttons sit in forms we must not restructure */
.paypal-form { margin: 0; }
.paypal-form input[type="image"] { border: 0; cursor: pointer; }

/* ------------------------------------------------------------- socials */
.social-list {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-list li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s5);
  text-align: center;
}
.social-list img { margin: 0 auto var(--s3); }
.social-list p { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------------- mail signup */
.signup {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 46rem) {
  .signup { grid-template-columns: minmax(0, 1fr) auto; }
}
.signup ul {
  margin: var(--s4) 0 0;
  padding-left: 1.1rem;
}
.signup li { margin-bottom: var(--s2); }

/* --------------------------------------------------------------- forms */
.field { margin-bottom: var(--s5); }
.field > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid #c8bfa9;
  border-radius: 8px;
}
.field input:focus-visible { border-color: var(--purple); }

.field--inline .datefield {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.field--inline input { width: 4.5rem; text-align: center; }
.field--inline .small-meta {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.required-note { font-size: 0.875rem; color: var(--ink-faint); }
.asterisk { color: var(--purple); font-weight: 700; }

button.button,
input.button[type="submit"] {
  display: inline-block;
  padding: var(--s3) var(--s6);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--purple);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.button:hover,
input.button[type="submit"]:hover { background: var(--purple-deep); }

/* --------------------------------------------------- lists of credits */
.credit-list {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}
.credit-list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  max-width: var(--measure);
}
.credit-list li:last-child { border-bottom: 0; }
.credit-list .where {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: .15rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}
.tag-list li {
  background: var(--purple-pale);
  border: 1px solid #ded0ee;
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--purple-deep);
}

/* ------------------------------------------------------------ schedule */
.schedule {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.9375rem;
}
.schedule caption {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green-deep);
  text-align: left;
  padding-bottom: var(--s3);
}
.schedule th[scope="row"] {
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  padding: .45rem var(--s4) .45rem 0;
  vertical-align: top;
  width: 1%;
}
.schedule td { padding: .45rem 0; vertical-align: top; }
.schedule tbody + tbody th[scope="col"],
.schedule .day {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple);
  padding-top: var(--s5);
  text-align: left;
}
.schedule tr + tr td,
.schedule tr + tr th[scope="row"] { border-top: 1px solid var(--rule); }
.schedule .day-row td { border-top: 0; }

/* --------------------------------------------------------------- utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* centring also has to re-centre the measure-capped box, or the text
   centres inside a box still flush to the left edge */
.center { text-align: center; }
p.center,
.center > p,
.center > .lede { margin-inline: auto; }
.stack > * + * { margin-top: var(--s4); }

/* Bobbie's own lettering, keyed off the old green field so it sits on the
   parchment directly. alt text carries the name for screen readers. */
.hero__wordmark {
  margin-bottom: var(--s3);
  line-height: 0;
}
.hero__wordmark img {
  width: min(100%, 420px);
  height: auto;
}

/* ------------------------------------------------- full-strength green
   The original #669966 as a real content band. Body copy never sits on it
   directly: it carries near-white cards, so text contrast stays high while
   the green reads at full strength. Headings on the band are large, which
   is the only size at which white over this green is legible. */
.section--green {
  background: var(--green-classic);
  border-block: 1px solid #4d7a4d;
}
/* Only the large heading is light: white measures 3.33:1 on this green,
   which clears the large-text bar but not the 4.5:1 needed below ~24px.
   Everything smaller uses #12240f, which measures 4.91:1. */
.section--green h2 { color: #ffffff; }

/* Everything on the band itself goes dark. These are descendant selectors,
   not child ones: copy on this page sits several levels deep inside grids. */
.section--green,
.section--green h3,
.section--green p,
.section--green li,
.section--green .lede,
.section--green .eyebrow,
.section--green figcaption,
.section--green .quote p { color: #12240f; }

/* Cards sit on near-white, so they revert to the normal palette. */
.section--green .card { color: var(--ink); }
.section--green .card p,
.section--green .card li { color: var(--ink); }
.section--green .card .lede,
.section--green .card .quote p { color: var(--ink-soft); }
.section--green .card figcaption { color: var(--ink-faint); }
.section--green .card .eyebrow { color: var(--gold); }

/* An outlined button cannot reach 4.5:1 against this green at label size,
   so on the band it becomes a filled one and the label sits on white. */
.section--green .btn--ghost {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--green-deep);
}
.section--green .btn--ghost:hover { background: #fff; color: var(--purple-deep); }
.section--green .card h2,
.section--green .card h3 { color: var(--green-deep); }
.section--green a:not(.btn):not(.btn-img) { color: #12240f; }
.section--green .card a:not(.btn):not(.btn-img) { color: var(--purple); }

/* The supplied lessonface_white.png is cropped mid-word and reads only
   "Lesson", so the name is set as text instead. */
.social-wordmark {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  margin-bottom: var(--s3);
}
.social-wordmark:hover { color: var(--purple-deep); text-decoration: underline; }

/* ------------------------------------------------------------ photo row
   Two photographs shown together, matched on height and centred on each
   other so their differing aspect ratios still read as a pair. */
.photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s5);
  margin: var(--s6) 0;
}
.photo-row .img-plate { flex: 0 1 auto; }
.photo-row img {
  height: 300px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 40rem) {
  /* stacked on a phone, height-matching no longer helps */
  .photo-row { justify-content: center; }
  .photo-row .img-plate { flex: 1 1 100%; max-width: 320px; }
  .photo-row img { height: auto; width: 100%; }
}