/* =============================================
   ESD Hub — Bradford College
   Custom Styles (supplements Tailwind CSS CDN)
   ============================================= */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
  /* Patchwork palette (Sept 2026): "think global, start local". ESD is a quilt:
     calico cloth ground, warm-white cards, forest-green base (SDG 13), the 17
     SDG colours as fabric patches, rust for the one main action. Var names kept
     from earlier eras to avoid churn across inline styles. No teal. */
  --brand-green:    #2F6236;  /* deep forest: headings, links, strong accents */
  --brand-green-mid:#3F7E44;  /* SDG 13 forest: completed states, tile, loader */
  --brand-gold:     #FCC30B;  /* SDG 7 yellow: small highlights only (never text) */
  --brand-dark:     #1F3B2A;  /* forest ink: footer, inner-page hero base */
  --brand-rust:     #B5341A;  /* rust: primary CTA buttons, white text */
  --brand-rust-dark:#7E2603;  /* deep rust: CTA hover */
  --brand-white:    #FBF8F2;  /* warm white: cards rest on the cloth in this */
  --brand-off-white:#F6F0E4;  /* paper: alternate section bands */
  --brand-grey:     #EFE8DA;
  --cloth:          #EFE8DA;  /* calico ground */
  --ink:            #2A2118;
  --focus:          #1F3B2A;
  --text-primary:   #2A2118;
  --text-muted:     #5E5345;
  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'Source Sans 3', system-ui, sans-serif;
  --radius-sm:      0;
  --radius-md:      0;
  --radius-lg:      0;
  /* ThreadWorks ink-tinted shadow ladder */
  --shadow-sm:      0 1px 2px rgba(42,33,24,.10), 0 4px 14px rgba(42,33,24,.08);
  --shadow-md:      0 2px 4px rgba(42,33,24,.14), 0 12px 28px rgba(42,33,24,.18);
  --shadow-lg:      0 20px 50px rgba(42,33,24,.22);
  --transition:     all 0.22s cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Fluid sizing (Oct 2026): one site from a laptop to a TV ----
     Every size on the site is in rem, so the root size below scales the lot.
     It is 16px up to a 1440 x 900 screen, then grows with the screen's width
     AND height (whichever is smaller), up to 28px on a 4K TV. */
  --root-size:      clamp(16px, min(8.8px + 0.5vw, 7.4px + 0.95vh), 28px);
  --gutter:         clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);   /* page side margins */
  --space-section:  clamp(3.5rem, 2.5rem + 3vw, 5rem);         /* between bands */
  --container:      84rem;                                      /* widest layout */
  --container-narrow: 50rem;
  --measure:        70ch;                                       /* longest comfortable line */
  --nav-h:          4.5rem;
  /* the 17-colour quilt binding, as a hard-stop strip */
  --binding: linear-gradient(90deg,
    #E5243B 0 5.88%, #DDA63A 0 11.76%, #4C9F38 0 17.65%, #C5192D 0 23.53%,
    #FF3A21 0 29.41%, #26BDE2 0 35.29%, #FCC30B 0 41.18%, #A21942 0 47.06%,
    #FD6925 0 52.94%, #DD1367 0 58.82%, #FD9D24 0 64.71%, #BF8B2E 0 70.59%,
    #3F7E44 0 76.47%, #0A97D9 0 82.35%, #56C02B 0 88.24%, #00689D 0 94.12%,
    #19486A 0 100%);

  /* SDG Colours */
  --sdg-1:  #E5243B; --sdg-2:  #DDA63A; --sdg-3:  #4C9F38; --sdg-4:  #C5192D;
  --sdg-5:  #FF3A21; --sdg-6:  #26BDE2; --sdg-7:  #FCC30B; --sdg-8:  #A21942;
  --sdg-9:  #FD6925; --sdg-10: #DD1367; --sdg-11: #FD9D24; --sdg-12: #BF8B2E;
  --sdg-13: #3F7E44; --sdg-14: #0A97D9; --sdg-15: #56C02B; --sdg-16: #00689D;
  --sdg-17: #19486A;
}

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

html { scroll-behavior: smooth; font-size: var(--root-size); }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--text-primary);
  /* the ThreadWorks linen weave, dyed calico */
  background-color: var(--cloth);
  background-image:
    linear-gradient(90deg, rgba(42,33,24,.06) 0 1px, rgba(255,255,255,.14) 1px 2px, transparent 2px),
    linear-gradient(180deg, transparent 0 3px, rgba(42,33,24,.06) 3px 4px, rgba(255,255,255,.14) 4px 5px, transparent 5px);
  background-size: 6px 6px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

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

a { color: inherit; text-decoration: none; }

/* Unify in-content hyperlinks (including links added via the editor) so they
   match the site's link style instead of looking like plain text */
#main-content a:not(.btn):not(.lightbox-trigger) { color: var(--brand-green); font-weight: 600; }
#main-content a:not(.btn):not(.lightbox-trigger):hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Skip Link (Accessibility) ---- */
.skip-link {
  position: absolute;
  top: -2.5rem;
  left: 0;
  background: var(--brand-dark);
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: 600;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ---- Navigation ---- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--brand-white);
  box-shadow: 0 1px 2px rgba(42,33,24,.10), 0 4px 14px rgba(42,33,24,.06);
}
/* the quilt binding under the nav */
.site-nav::after {
  content: '';
  display: block;
  height: 0.375rem;
  background: var(--binding);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: 1.5rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0; /* 20%: matches the tile's own corner radius */
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

/* ThreadWorks family: Common Thread under the wordmark (Full thread on a light header) */
.nav-logo-text .hub-name {
  position: relative;
  align-self: flex-start; /* shrink to the wordmark, not the whole column */
  margin-bottom: 0.5rem;     /* reserve room for the thread */
}
.nav-thread {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  width: 100%;            /* = the wordmark width, never wider */
  height: 0.4375rem;
  display: block;
  overflow: visible;
}
.esd-cap { color: var(--brand-green-mid); } /* initial-cap accent, tool colour */

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo-text .hub-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--ink);
}

.nav-logo-text .college-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #4a4136;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-links a:hover { color: var(--ink); border-bottom-color: rgba(181,52,26,.35); }
.nav-links a.active { color: var(--ink); border-bottom: 2px dashed var(--brand-rust); }
.nav-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.nav-group { position: relative; }
.nav-group-btn {
  display: block;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #4a4136;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--ink); border-bottom-color: rgba(181,52,26,.35); }
.nav-group-btn.active { color: var(--ink); border-bottom: 2px dashed var(--brand-rust); }
.nav-group-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-sub {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 12rem;
  list-style: none;
  background: var(--brand-white);
  box-shadow: var(--shadow-md);
  border-top: 3px solid var(--brand-green-mid);
  padding: 0.375rem 0;
  z-index: 110;
}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.open .nav-sub { display: block; }
.nav-sub a { padding: 0.625rem 1rem; border-bottom: 0; }
.nav-sub a:hover { background: var(--brand-off-white); }
.nav-mobile .nav-mobile-sub { padding-left: 1.25rem; font-weight: 500; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 0.3125rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.625rem;
  border-radius: 0;
  transition: var(--transition);
}

.nav-hamburger:hover { background: rgba(42,33,24,.06); }

.nav-hamburger span {
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--transition);
  display: block;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: 4.875rem;
  left: 0;
  right: 0;
  background: var(--brand-white);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 1.5rem 1.25rem;
  z-index: 99;
}

.nav-mobile.open { display: block; }

.nav-mobile a {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #4a4136;
  border-bottom: 1px dashed rgba(42,33,24,.18);
}

.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { color: var(--brand-rust); }

/* ---- Page Wrapper ---- */
.page-wrapper {
  padding-top: 4.875rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ---- Section Utilities ---- */
.section {
  padding: var(--space-section) var(--gutter);
}

.section-sm { padding: calc(var(--space-section) * .6) var(--gutter); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  width: 100%;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: 1rem;
}

.section-label::before {
  /* three tiny fabric patches */
  content: '';
  width: 2rem;
  height: 0.5625rem;
  background: linear-gradient(90deg, #E5243B 0 30%, transparent 0 35%, #0A97D9 0 65%, transparent 0 70%, #56C02B 0);
  flex-shrink: 0;
}

/* ---- Hero (home): light calico; the patchwork globe + Bradford patch ---- */
.hero {
  padding: clamp(2.5rem, 1rem + 4vh, 4.5rem) var(--gutter) clamp(2.5rem, 1rem + 3.5vh, 4rem);
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.hero-media { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; }
.hero-media-label {
  order: 2;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
  text-align: center;
}
.hero-art { order: 1; width: 100%; max-width: 33.75rem; }
.hero-art { position: relative; }
.hero-art img { position: relative; z-index: 1; width: 100%; height: auto; }
/* drop shadow for the ball only: a circle measured to the ball in the image
   (left 18.7%, right 99.6%, top 0.2% of the image) sits just inside it, so the
   Bradford tag hangs in front with no shadow of its own */
.hero-art::before {
  content: '';
  position: absolute;
  left: 19.4%;
  top: 0.9%;
  width: 79.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 22px 34px -8px rgba(42,33,24,.34), 0 8px 14px rgba(42,33,24,.14);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { max-width: 26.25rem; }
}

/* "How this hub works" — fixed columns so cards never leave one stranded */
.hub-steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) { .hub-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .hub-steps { grid-template-columns: 1fr; } }

/* Home eyebrow: plain small caps (the page's one swing tag is "Think global, start local") */
.hero-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-green);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

/* Inner-page heroes ("Step 4 of 4"): the eyebrow is that page's one kraft swing tag */
main > section:first-child:not(.hero) .hero-eyebrow,
.tw-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.625rem;
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: 0 4px 0 32px;
  border-image-source: url('../assets/images/kraft-tag-h.webp');
  border-image-slice: 0 4 0 90 fill;
  border-image-width: 0 4px 0 32px;
  border-image-repeat: stretch;
  padding: 0 1rem 0 0.25rem;
  color: #2a2118 !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: none;
  filter: drop-shadow(0 2px 2px rgba(42,33,24,.14)) drop-shadow(0 6px 10px rgba(42,33,24,.1));
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.hero .tw-tag { margin-bottom: 1.125rem; font-size: 1rem; min-height: 2.875rem; }

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--brand-dark);
  max-width: 45rem;
  margin-bottom: 1.375rem;
  line-height: 1.04;
}

.hero h1 em {
  font-style: normal;
  color: var(--brand-rust);
}

.hero-desc {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: #3d3428;
  max-width: 33.75rem;
  margin-bottom: 2.25rem;
  line-height: 1.65;
}

/* Inner-page heroes: a forest-green quilted block with the binding along its hem */
main > section:first-child:not(.hero) {
  position: relative;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-green) 100%) !important;
}
main > section:first-child:not(.hero)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.5rem;
  background: var(--binding);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* stitched buttons: a running stitch just inside the edge */
.btn-primary, .btn-dark { box-shadow: var(--shadow-sm); }
.btn-primary::after, .btn-dark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(255,255,255,.55);
  border-radius: 0;
  pointer-events: none;
}

.btn-primary {
  background: var(--brand-rust);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-rust-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1.5px dashed rgba(255,255,255,0.6);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}
.hero .btn-secondary { color: var(--brand-dark); border-color: var(--brand-dark); background: var(--brand-white); }
.hero .btn-secondary:hover { background: #fff; }

.btn-dark {
  background: var(--brand-dark);
  color: var(--brand-white);
}

.btn-dark:hover {
  background: var(--brand-green);
  transform: translateY(-2px);
}

.btn-outline {
  background: var(--brand-white);
  color: var(--brand-green);
  border: 1.5px dashed var(--brand-green);
}

.btn-outline:hover {
  background: var(--brand-green);
  color: var(--brand-white);
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.0625rem;
}

/* ---- Cards ---- */
.card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(42,33,24,.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ---- SDG Badge ---- */
.sdg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.0), inset 0 -2px 3px rgba(0,0,0,.12);
  font-size: 0.6875rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}

/* ---- SDG Strip ---- */
.sdg-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* ---- Progress Bar ---- */
.progress-track {
  width: 100%;
  height: 0.5rem;
  background: rgba(42,33,24,.10);
  border-radius: 100px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--brand-green-mid);
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* Leave room under the fixed nav + sticky step bar when jumping to a section,
   so content (e.g. the intro video) isn't tucked under the sticky bar. */
#journey-content { scroll-margin-top: 10.9375rem; padding-top: 2rem; }
.section-content { scroll-margin-top: 10.9375rem; }

/* ---- Journey Progress Steps ---- */
.journey-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 1rem 0;
  scrollbar-width: none;
}

.journey-steps::-webkit-scrollbar { display: none; }

/* Steps are clickable — give hover/focus feedback */
.journey-step { transition: transform 0.15s ease; }
.journey-step:hover { transform: translateY(-2px); }
.journey-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0; }

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 5rem;
  cursor: pointer;
  position: relative;
}

/* the running stitch joining the quilt squares */
.journey-step:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -50%;
  top: 1.3125rem;
  width: 100%;
  height: 0;
  border-top: 2px dashed rgba(42,33,24,.25);
  z-index: 0;
}

.journey-step.completed:not(:first-child)::before,
.journey-step.active:not(:first-child)::before {
  border-top-color: var(--brand-green-mid);
}

/* each section is a quilt square: unsewn (dashed) until you reach it */
.step-dot {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  background: rgba(251,248,242,.85);
  border: 2px dashed rgba(42,33,24,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #5E5345;
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.journey-step.completed .step-dot,
.journey-step.active .step-dot {
  border: 0;
  color: #fff;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.07) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.14);
}
.journey-step.completed .step-dot::after,
.journey-step.active .step-dot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(255,255,255,.6);
  border-radius: 2px;
}
.journey-step:nth-child(1) .step-dot { --patch: #C5192D; }
.journey-step:nth-child(2) .step-dot { --patch: #3F7E44; }
.journey-step:nth-child(3) .step-dot { --patch: #A21942; }
.journey-step:nth-child(4) .step-dot { --patch: #00689D; }
.journey-step:nth-child(5) .step-dot { --patch: #19486A; }
.journey-step:nth-child(6) .step-dot { --patch: #B5341A; }
.journey-step.completed .step-dot,
.journey-step.active .step-dot { background-color: var(--patch, var(--brand-green-mid)); }
.journey-step.active .step-dot { box-shadow: 0 0 0 3px var(--brand-white), 0 0 0 5px var(--patch, var(--brand-green-mid)); }

.step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5E5345;
  text-align: center;
  max-width: 6rem;
  line-height: 1.3;
}

.journey-step.completed .step-label,
.journey-step.active .step-label {
  color: var(--brand-dark);
}

/* ---- Section Content (Journey) ---- */
.section-content {
  display: none;
}

.section-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Callout Boxes ---- */
.callout {
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  border: 1.5px dashed;
  margin: 1.5rem 0;
}

.callout-green {
  background: rgba(63, 126, 68, 0.08);
  border-color: rgba(63, 126, 68, 0.55);
}

.callout-gold {
  background: rgba(252, 195, 11, 0.12);
  border-color: rgba(191, 139, 46, 0.6);
}

.callout-blue {
  background: rgba(10, 151, 217, 0.08);
  border-color: rgba(10, 151, 217, 0.55);
}

.callout-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

/* ---- Activity Card ---- */
.activity-card {
  background: var(--brand-off-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  border: 2px dashed #c5d4c5;
  margin: 1.5rem 0;
  position: relative;
}

.activity-card::before {
  /* a small fabric patch pinned to the corner */
  content: '';
  position: absolute;
  top: -0.625rem;
  left: 1.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #FD6925;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 3px #FD6925, inset 0 0 0 4.5px rgba(255,255,255,.6);
}

/* ---- Quiz / Assessment ---- */
.question-card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  border: 1px solid rgba(42,33,24,.08);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.question-number {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.question-text {
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 2px solid #e8ece8;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.option-item:hover {
  border-color: var(--brand-green-mid);
  background: rgba(63, 126, 68, 0.04);
}

.option-item.selected {
  border-color: var(--brand-green);
  background: rgba(26, 77, 46, 0.06);
}

.option-item input[type="radio"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--brand-green);
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

.option-label {
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}

/* ---- Results ---- */
.result-tier {
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  margin: 2rem 0;
}

.tier-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* ---- Radar Chart ---- */
#radarCanvas {
  max-width: 25rem;
  width: 100%;
  margin: 0 auto;
  display: block;
}

/* ---- Case Study Cards ---- */
.cs-card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(42,33,24,.08);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.cs-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cs-card-header {
  height: 0.5rem;
}

.cs-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cs-dept {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.cs-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.cs-summary {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

.cs-quote {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--brand-green);
  border-left: 3px solid var(--brand-gold);
  padding-left: 0.75rem;
  margin: 1rem 0;
  line-height: 1.5;
}

/* ---- Filter Chips ---- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.chip {
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1.5px dashed rgba(42,33,24,.3);
  background: var(--brand-white);
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-primary);
}

.chip:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.chip.active {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}

/* ---- Resource Hub ---- */
.resource-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--brand-white);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(42,33,24,.08);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.resource-card:hover {
  border-color: var(--brand-green-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.resource-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.resource-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

.badge-external { background: #e8f0fe; color: #1a73e8; }
.badge-download { background: #e6f4ea; color: #1e8e3e; }
.badge-tool     { background: #fef3e2; color: #b06000; }

/* ---- Impact Dashboard ---- */
.sdg-wheel-container {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

#sdgWheel {
  width: 100%;
  height: auto;
}

.stat-card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(42,33,24,.08);
  box-shadow: var(--shadow-sm);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-green);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Carousel ---- */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  min-width: 100%;
  padding: 2.5rem;
  background: var(--brand-white);
  border: 1px solid rgba(42,33,24,.08);
  border-radius: var(--radius-md);
}

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.carousel-dot.active {
  background: var(--brand-green);
  width: 1.5rem;
  border-radius: 4px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--brand-white);
  color: var(--text-muted);
  padding: 4rem var(--gutter) 2rem;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0.375rem;
  background: var(--binding);
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 18.75rem;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col a {
  font-size: 0.9375rem;
  color: #4a4136;
  transition: var(--transition);
}

.footer-col a:hover { color: var(--brand-rust); text-decoration: underline; }

.footer-bottom {
  border-top: 1px dashed rgba(42,33,24,.2);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.footer-bottom a { color: #4a4136; transition: var(--transition); }
.footer-bottom a:hover { color: var(--brand-rust); }

/* ThreadWorks family: footer strip + Front Door link */
.footer-threadworks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px dashed rgba(42,33,24,.2);
  padding-top: 1.5rem;
  margin-bottom: 1.25rem;
}
.footer-strip { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.footer-strip a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer-strip a:hover { color: var(--brand-rust); }
.front-door { font-size: 0.875rem; font-weight: 700; color: var(--brand-green); white-space: nowrap; transition: var(--transition); }
.front-door:hover { color: var(--brand-rust); text-decoration: underline; }

/* ---- Animations ---- */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.pulse {
  position: relative;
  display: inline-block;
}

.pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--brand-green-mid);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.float { animation: float 3s ease-in-out infinite; }

/* ---- Utility Classes ---- */
.text-green   { color: var(--brand-green); }
.text-gold    { color: var(--brand-gold); }
.text-muted   { color: var(--text-muted); }
.text-white   { color: var(--brand-white); }
.bg-dark      { background: var(--brand-dark); }
.bg-green     { background: var(--brand-green); }
.bg-off-white { background: var(--brand-off-white); }
.bg-grey      { background: var(--brand-grey); }

.rounded-full { border-radius: 9999px; }
.shadow-md    { box-shadow: var(--shadow-md); }

.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;
}

/* ---- Grid Utilities ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ---- Video Embed ---- */
.video-embed { margin: 1.75rem 0; }
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--brand-dark);
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-placeholder {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius-md);
  background: #1a2e22;
  border: 2px dashed rgba(255,255,255,0.15);
  overflow: hidden;
}
.video-placeholder-inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: rgba(255,255,255,0.5);
}
.video-placeholder-inner .play-icon {
  width: 3.5rem; height: 3.5rem;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 1.25rem;
}
.video-caption { font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: 0.625rem; }

/* ---- Split Pill Card (about vs for ESD) ---- */
.split-pill-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(42,33,24,.08);
  margin-bottom: 1.5rem;
}
.split-pill-card .split-side { padding: 1.5rem 1.75rem; }
.split-pill-card .split-side:first-child { background: #e6f9f0; border-right: 1px solid #e8ece8; }
.split-pill-card .split-side:last-child { background: #fef8e2; }
.split-pill-card .split-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 0.625rem;
}

/* ---- Lightbox ---- */
.lightbox-trigger { cursor: zoom-in; display: block; }
.lightbox-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.87);
  z-index: 1100;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; border-radius: 0; box-shadow: 0 16px 64px rgba(0,0,0,0.6); }
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: white; border: none; border-radius: 50%;
  width: 2.5rem; height: 2.5rem; font-size: 1.25rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ---- SDG Expand Toggle ---- */
.sdg-grid .sdg-hidden { display: none; }
.sdg-grid.expanded .sdg-hidden { display: block; }
.sdg-show-all-btn {
  background: none;
  border: 1.5px dashed var(--brand-green);
  color: var(--brand-green);
  border-radius: 4px;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.625rem;
  font-family: inherit;
  transition: all 0.15s;
}
.sdg-show-all-btn:hover { background: var(--brand-green); color: white; }

/* ---- Inner Tabs (Step 4) ---- */
.inner-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.inner-tab-btn {
  padding: 0.5625rem 1.25rem;
  min-height: 2.75rem;
  border-radius: 4px;
  border: 1.5px dashed rgba(42,33,24,.3);
  background: var(--brand-white);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.inner-tab-btn:hover { border-color: #FD6925; color: #FD6925; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(253,105,37,0.18); }
.inner-tab-btn.active { background: #FD6925; border-color: #FD6925; color: white; box-shadow: 0 3px 10px rgba(253,105,37,0.28); }
.inner-tab-btn.active:hover { color: white; transform: none; }
.inner-tab-content { display: none; }
.inner-tab-content.active { display: block; }

/* ---- Core Principles Accordion ---- */
.principles-accordion { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
.principle-item { border: 1px solid rgba(42,33,24,.08); border-radius: 0; overflow: hidden; }
.principle-toggle {
  width: 100%; text-align: left;
  padding: 1rem 1.25rem;
  background: var(--brand-off-white);
  border: none; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-primary);
}
.principle-toggle:hover { background: #E7EFE3; }
.principle-toggle .p-icon { transition: transform 0.2s; display: inline-block; font-style: normal; }
.principle-toggle[aria-expanded="true"] .p-icon { transform: rotate(45deg); }
.principle-body { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.principle-body.open { max-height: 75rem; padding: 1rem 1.25rem 1.25rem; }

/* Fixed 4-up card grid — never strand a card on its own row */
.grid-4up { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .grid-4up { grid-template-columns: 1fr; } }

/* ---- Reflection Privacy Note ---- */
.reflection-privacy {
  font-size: 0.75rem; color: var(--text-muted);
  margin-top: 0.375rem; font-style: italic;
}

/* ---- SDG Modal ---- */
.sdg-detail-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1050;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.sdg-detail-modal.open { display: flex; }
.sdg-detail-panel {
  background: var(--brand-white); border-radius: 0;
  max-width: 30rem; width: 100%;
  padding: 2rem;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.sdg-detail-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  font-size: 1.25rem; cursor: pointer; color: var(--text-muted);
}
.sdg-badge-interactive {
  cursor: pointer;
  border-radius: 0;
  padding: 0.75rem 0.5rem;
  text-align: center;
  color: white;
  transition: transform 0.15s, box-shadow 0.15s;
  border: none;
  font-family: inherit;
}
.sdg-badge-interactive:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ---- Print Styles (for Impact Dashboard) ---- */
@media print {
  .site-nav, .site-footer, .no-print { display: none !important; }
  .page-wrapper { padding-top: 0; }
  body { background: white; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section { padding: 3.5rem 1.25rem; }
  .hero { padding: 4.5rem 1.25rem 3.5rem; }
  .result-tier { padding: 1.75rem; }
  .carousel-slide { padding: 1.5rem; }
  .split-pill-card { grid-template-columns: 1fr; }
  .split-pill-card .split-side:first-child { border-right: none; border-bottom: 1px solid #e8ece8; }
  .inner-tabs { gap: 0.375rem; }
  .inner-tab-btn { padding: 0.4375rem 1rem; font-size: 0.8125rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
}

/* ---- Patchwork pieces (Sept 2026) ---- */
/* a sewn fabric patch: weave texture + a running stitch inside the edge */
.patch {
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.07) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.14);
}
.patch::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(255,255,255,.62);
  border-radius: 2px;
  pointer-events: none;
}

/* Weaving Loader (ThreadWorks kit v4, page/inline size): every wait draws the thread */
.tw-loader { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding: 1.5rem 0; }
.tw-loader svg { width: 12.5rem; height: 1.25rem; overflow: visible; }
.tw-loader .tw-track { stroke: rgba(42,33,24,.12); }
.tw-loader .tw-thread { stroke: var(--brand-green-mid); stroke-dasharray: 600; stroke-dashoffset: 600; animation: tw-weave 2.2s ease-in-out infinite alternate; }
.tw-loader p { font-weight: 600; color: var(--brand-dark); margin: 0; }
@keyframes tw-weave { to { stroke-dashoffset: 0; } }

/* Reduced-motion contract (kit v4, Tier 1): nothing moves; the loader thread is drawn and still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tw-loader .tw-thread { stroke-dashoffset: 0; }
}


/* ---- Square quilt cards (Sept 2026) ----
   Every card is a square patch like an SDG tile, with a running stitch just
   inside its edge. The thread colour cycles through the 17 SDG colours; a card
   that sets --thread inline (its old accent colour) keeps that. */
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card) {
  position: relative;
  border-radius: 0 !important;
}
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card)::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px dashed var(--thread, #3F7E44);
  pointer-events: none;
  z-index: 1;
}
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+1) { --thread: #E5243B; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+2) { --thread: #DDA63A; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+3) { --thread: #4C9F38; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+4) { --thread: #C5192D; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+5) { --thread: #FF3A21; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+6) { --thread: #26BDE2; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+7) { --thread: #FCC30B; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+8) { --thread: #A21942; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+9) { --thread: #FD6925; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+10) { --thread: #DD1367; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+11) { --thread: #FD9D24; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+12) { --thread: #BF8B2E; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+13) { --thread: #3F7E44; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+14) { --thread: #0A97D9; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+15) { --thread: #56C02B; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+16) { --thread: #00689D; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card):nth-child(17n+17) { --thread: #19486A; }
/* square everything that used to be a soft rounded panel */
.btn, .chip, .inner-tab-btn, .sdg-show-all-btn, .option-item, .principle-item, .callout,
.activity-card, .video-wrapper, .video-placeholder, .carousel, .carousel-slide, .split-pill-card,
.result-tier, .sdg-detail-panel, .lightbox-overlay img, .resource-icon, .sdg-badge-interactive { border-radius: 0 !important; }

/* ---- Family motion (kit v4): Rise, stagger, deliberate beat ---- */
@keyframes tw-rise {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
main > section { animation: tw-rise 350ms cubic-bezier(0.22, 1, 0.36, 1) both; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card) { animation: tw-rise 350ms cubic-bezier(0.22, 1, 0.36, 1) both; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card):nth-child(2) { animation-delay: 40ms; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card):nth-child(3) { animation-delay: 80ms; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card):nth-child(4) { animation-delay: 120ms; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card):nth-child(5) { animation-delay: 160ms; }
:is(.card, .quilt-card, .cs-card, .resource-card, .stat-card):nth-child(n+6) { animation-delay: 200ms; }

/* weave transition: a short, deliberate beat on doorway buttons */
.weave-transition {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  background: rgba(239, 232, 218, 0.85);
  animation: tw-rise 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.weave-transition__card {
  background: var(--brand-white); padding: 1.75rem 2.5rem 1.5rem; min-width: 18.75rem;
  box-shadow: var(--shadow-lg); position: relative;
}
.weave-transition__card::after {
  content: ''; position: absolute; inset: 6px; border: 1.5px dashed var(--brand-green-mid); pointer-events: none;
}
.weave-transition .tw-loader { padding: 0; }
.weave-transition .tw-loader svg { width: 15rem; }

/* ---- Centred layout: heroes, section headings and button rows ---- */
.hero-text { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-text > div[style*="display:flex"] { justify-content: center; }
.hero .hero-desc { margin-left: auto; margin-right: auto; }
main > section:first-child:not(.hero) :is(.container, .container-narrow) { text-align: center; }
main > section:first-child:not(.hero) :is(h1, p, .progress-track) { margin-left: auto !important; margin-right: auto !important; }
main > section:first-child:not(.hero) [style*="display:flex"]:not([style*="justify-content"]) { justify-content: center !important; }
/* a section's heading block: label, heading and the intro line under it */
.section-label { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.section-label + :is(h2, h3),
.section-label + :is(h2, h3) + p { text-align: center; margin-left: auto !important; margin-right: auto !important; }
/* Learning Journey section headings: the colour bar is now a small patch, stacked and centred */
.section-content > [data-cms-fixed] { flex-direction: column; text-align: center; gap: 0.625rem !important; margin-bottom: 1.25rem !important; }
.section-content > [data-cms-fixed] .patch::after { inset: 4px; }
.section-content > [data-cms-fixed] + p { text-align: center; }

/* ---- Centred body text and card contents (Clark, Sept 2026) ----
   Page bodies and everything inside cards are centred; the header and
   footer keep their normal alignment for ease of use. */
main { text-align: center; }
main :is(p, h1, h2, h3, h4, blockquote, .callout, .video-caption)[style*="max-width"] { margin-left: auto !important; margin-right: auto !important; }
main li { list-style-position: inside; }
main :is(.card, .quilt-card, .cs-card, .stat-card) { text-align: center; }
/* cards laid out as a row (marker + text + arrow) stack and centre instead */
main .resource-card { flex-direction: column; align-items: center; text-align: center; }
main .quilt-card[style*="display:flex"] { flex-direction: column; align-items: center; }
/* the home step-number patches sit centred on the card's top edge */
main .card > .patch[style*="position:absolute"] { left: 50% !important; transform: translateX(-50%); }
/* rows of buttons and tags centre with the text */
main [style*="display:flex"][style*="gap"]:not(.nav-inner):not(.quilt-card):not([data-cms-fixed]) { justify-content: center; }
/* things that must stay left to be usable */
main :is(input, textarea, select, .option-item, .option-label, table) { text-align: left; }
main :is(.reflection-toggle-btn, .principle-toggle) { text-align: center; justify-content: center !important; gap: 0.75rem; }

/* ==========================================================================
   Learning Journey as a quilt: "sashing & cornerstones" (A1, Sept 2026)
   Each section is a 24-column quilt. Blocks (.qb) are separated by calico
   sashing (the grid gap); a small cornerstone sits where the sashing
   crosses at each block's top-left corner. Reading text is left-aligned
   and larger here, overriding the site-wide centring.
   ========================================================================== */
#journey-content > .container-narrow { max-width: 81rem; }
.section-content.active {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2.75rem;
  padding-top: 1.25rem;
  text-align: center;
}
.section-content .qb { grid-column: span var(--span, 24); position: relative; text-align: center; min-width: 0; }
.section-content .qb > :first-child { margin-top: 0 !important; }
.section-content .qb > :last-child { margin-bottom: 0 !important; }

/* cornerstones */
.section-content .qb::before {
  content: '';
  position: absolute;
  left: -2rem; top: -2rem;
  width: 1.25rem; height: 1.25rem;
  background: var(--cs, #FCC30B);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.15);
}
.section-content .qb:nth-child(6n+1) { --cs: #FCC30B; }
.section-content .qb:nth-child(6n+2) { --cs: #DD1367; }
.section-content .qb:nth-child(6n+3) { --cs: #0A97D9; }
.section-content .qb:nth-child(6n+4) { --cs: #FD6925; }
.section-content .qb:nth-child(6n+5) { --cs: #4C9F38; }
.section-content .qb:nth-child(6n+6) { --cs: #19486A; }

/* the stitch inside every sewn block */
.section-content :is(.qb-title, .qb-card, .qb-tint, .qb-patch, .qb-sun)::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed var(--stitch, var(--t));
  pointer-events: none;
}
.section-content :is(.qb-card, .qb-tint) {
  background: var(--brand-white);
  padding: 2.75rem 2.75rem 2.5rem;
  box-shadow: var(--shadow-sm);
}
.section-content .qb-tint { background: #E9EFE2; }
.section-content :is(.qb-title, .qb-patch, .qb-sun) {
  padding: 2.75rem;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.12);
  --stitch: rgba(255,255,255,.6);
}
.section-content .qb-title { background-color: var(--sec); color: #fff; min-height: 18.75rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section-content .qb-patch { background-color: var(--t); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section-content .qb-sun { background-color: #FCC30B; color: var(--ink); --stitch: rgba(42,33,24,.35); display: flex; flex-direction: column; justify-content: center; }
.section-content .qb-open { background: none; }

/* section title block: label + big heading in the section colour */
.section-content .qb-title [data-cms-fixed] { flex-direction: column !important; align-items: center !important; text-align: center; gap: 0.5rem !important; margin: 0 !important; }
.section-content .qb-title [data-cms-fixed] > .patch { display: none; }
.section-content .qb-title [data-cms-fixed] > div > div { color: rgba(255,255,255,.88) !important; font-size: 0.9375rem !important; letter-spacing: .1em !important; }
.section-content .qb-title h2 { color: #fff; font-size: clamp(2.6rem, 4.6vw, 4.4rem) !important; line-height: 1 !important; letter-spacing: -0.02em; }
.section-content .qb-title p { color: rgba(255,255,255,.9) !important; margin: 0.875rem 0 0 !important; }
.section-content .qb-patch :is(h2, h3, h4, p, li, .callout-title) { color: #fff !important; }
.section-content .qb-patch h3 { font-size: clamp(2rem, 3vw, 2.7rem) !important; line-height: 1.05 !important; margin: 0 !important; }
.section-content .qb-sun .callout-title { color: var(--ink) !important; }
.section-content .qb-sun p { font-family: var(--font-display); font-size: 1.4375rem !important; line-height: 1.4 !important; }

/* things that used to be boxes are now the block itself */
.section-content .qb > :is(.callout, .activity-card, .principle-item, .principles-accordion) { margin: 0; border: 0; background: transparent; padding: 0; }
.section-content .qb > .activity-card::before { display: none; }
.section-content .qb > .principle-item .principle-toggle { background: transparent; padding-left: 0; padding-right: 0; font-size: 1.375rem; font-family: var(--font-display); }
.section-content .qb > .principle-item .principle-body { padding-left: 0; padding-right: 0; }

/* bigger reading text, left-aligned */
.section-content :is(p, li) { font-size: 1.1875rem !important; line-height: 1.65 !important; }
.section-content :is(p, li)[style*="font-size:0.75rem"],
.section-content :is(p, li)[style*="font-size:0.8125rem"],
.section-content .reflection-privacy { font-size: 0.9375rem !important; }
.section-content .qb h3 { font-size: 1.875rem !important; line-height: 1.15; }
.section-content .qb h4 { font-size: 1.5625rem !important; line-height: 1.2; }
.section-content .quilt-card[style*="display:flex"] { flex-direction: column; align-items: center; }
.section-content [style*="display:flex"][style*="gap"] { justify-content: center; }

/* small patches in the sashing bands */
.section-content .qd { display: flex; align-items: center; gap: 1.375rem; min-height: 2.75rem; }
.section-content .qd::before { display: none; }
.section-content .qd-bit {
  display: block; flex-shrink: 0;
  width: calc(var(--s) * 2.5rem); height: calc(var(--s) * 2.5rem);
  background-color: var(--c);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.12);
  position: relative;
}
.section-content .qd-bit::after { content: ''; position: absolute; inset: 5px; border: 1.2px dashed rgba(255,255,255,.6); }
.section-content .qd-empty { background: rgba(251,248,242,.45); box-shadow: none; border: 2px dashed rgba(42,33,24,.28); }
.section-content .qd-empty::after { display: none; }

@media (max-width: 900px) {
  .section-content.active { gap: 1.5rem; }
  .section-content .qb { grid-column: 1 / -1; }
  .section-content .qb::before, .section-content .qd { display: none; }
  .section-content :is(.qb-card, .qb-tint, .qb-title, .qb-patch, .qb-sun) { padding: 1.75rem 1.5rem; }
  .section-content .qb-title { min-height: 0; }
}
/* cards inside the Learning Journey quilt read left-aligned too */
.section-content :is(.card, .quilt-card, .cs-card, .stat-card) { text-align: center; }
main > section:first-child:not(.hero) div[style*="max-width"] { margin-left: auto; margin-right: auto; }
.section-content.active { padding-left: 1rem; padding-right: 1rem; }
/* every box centres its text (Clark, Sept 2026); only typing areas stay left */
main :is(.card, .quilt-card, .cs-card, .resource-card, .stat-card, .question-card, .callout, .activity-card, .principle-body, .inner-tab-content) { text-align: center; }
main :is(.card, .quilt-card, .qb) :is(ul, ol) { padding-left: 0; list-style-position: inside; }
main :is(textarea, input, select) { text-align: left; }
.section-content .qb > .principle-item .principle-toggle { justify-content: center; gap: 0.75rem; }
/* number patches sit above the card's running stitch */
main :is(.card, .quilt-card) > .patch[style*="position:absolute"] { z-index: 2; }

/* ==========================================================================
   Any screen (Oct 2026): laptop, TV, 4K monitor, iPad and phone.
   Sizes come from the fluid tokens in :root; these rules cap reading width,
   keep the home hero on one screen and stop grids running off the edge.
   ========================================================================== */
/* pages that load Tailwind get its fixed-step .container (max 1536px); keep ours */
html .container { max-width: var(--container); }

/* reading columns: no line longer than about 70 characters, centred */
main :is(p, li, blockquote) { max-width: var(--measure); }
main :is(p, blockquote):not(:is([style*="display:flex"], [style*="display:grid"], [style*="display: flex"]) > *) { margin-left: auto !important; margin-right: auto !important; }
main :is(input, textarea, select, table, .option-item) p { max-width: none; }

/* home hero: the quilted globe shrinks on short screens so the whole hero
   (heading, buttons and art) fits the first screen of a laptop or TV */
.hero h1 { font-size: clamp(2.2rem, min(5vw, 8vh), 4rem); }
@media (min-width: 861px) and (orientation: landscape) {
  .hero-art { max-width: min(33.75rem, calc(100vh - var(--nav-h) - 13rem)); }
}
@media (min-width: 861px) and (max-height: 800px) {
  .hero .tw-tag { margin-bottom: 0.75rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero-desc { margin-bottom: 1.5rem; }
}

/* Learning Journey quilt: the sashing (gap between blocks) narrows with the
   screen so 24 columns never push the page wider than the screen */
.section-content.active { --sash: clamp(1rem, 3.2vw, 2.75rem); gap: var(--sash); }
.section-content .qb::before { left: calc(var(--sash) / -2 - 0.625rem); top: calc(var(--sash) / -2 - 0.625rem); }
@media (max-width: 900px) {
  .section-content.active { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* dialogs never taller than the screen */
.sdg-detail-panel { max-height: calc(100vh - 3rem); overflow-y: auto; }

/* tablets and phones: two- and three-column rows set in the page stack */
@media (max-width: 768px) {
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}
/* phones: long button labels wrap instead of running off the screen */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .btn { white-space: normal; max-width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   Phones and small tablets (Oct 2026)
   One definition of "phone": up to 900px wide, or a phone turned sideways
   (short and touch). Everything below sits inside that query, so laptops,
   desktops and TVs are untouched. Phone-only helpers are hidden elsewhere.
   ========================================================================== */
.phone-group-toggle, .phone-group-note, .reflection-hint, .cs-pdf-note, .cs-hint-phone,
.cs-lb-zoom, .cs-text-list, .phone-chart-note, .phone-dept-list { display: none; }

/* ---- Navigation, footer, tap targets, form fields (all pages) ---- */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; justify-content: center; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  .nav-mobile { max-height: calc(100dvh - 4.875rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
  .nav-mobile a { min-height: 2.75rem; }

  /* only the header stays fixed: no second sticky bar under it */
  main div[style*="position:sticky"] { position: static !important; }
  #journey-content, .section-content { scroll-margin-top: 5.5rem; }

  /* fields at 16px so iPhones do not zoom in when you tap them */
  main :is(textarea, input, select) { font-size: 1rem !important; }
  main textarea { resize: none !important; }
  .btn, .chip, .inner-tab-btn, .sdg-show-all-btn, .principle-toggle, .reflection-toggle-btn { min-height: 2.75rem; }
  .chip { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .footer-col ul { gap: 0.5rem; }
  .footer-col a, .site-footer .front-door, .site-footer .footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
  main a[href*="forms.office.com/e/kT3W"] { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* no text under 12px (the pages were using 10 and 11px labels) */
  main [style*="font-size:0.625rem"], main [style*="font-size:0.6875rem"] { font-size: 0.75rem !important; }
  .resource-type-badge, .sdg-badge, .journey-step, main .section-label-pill { font-size: 0.75rem; }

  /* open accordions are never clipped on a narrow screen */
  .principle-body.open { max-height: none; }

  /* dialogs and pictures use the visible height, not the tall browser height */
  .sdg-detail-panel { max-height: calc(100dvh - 3rem); }
  .lightbox-overlay img { max-height: 85dvh !important; }

  /* the embedded game is drag and drop: phones use the full-screen link instead */
  .quilt-card:has(> iframe[src*="eco-build-games"]) { display: none; }
  p:has(> a[href*="eco-build-games"])::before { content: "This activity opens on its own page on a phone. It can be easier on a laptop or tablet."; display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; }
}

/* ---- Phone landscape: header scrolls away, home hero keeps two columns ---- */
@media screen and (max-width: 900px) and (max-height: 500px), screen and (max-height: 500px) and (pointer: coarse) {
  .site-nav { position: static; }
  .page-wrapper { padding-top: 0; }
  .nav-mobile { position: absolute; max-height: none; }
  #journey-content, .section-content { scroll-margin-top: 1rem; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 1.5rem; }
  .hero-art { max-width: min(33.75rem, calc(100dvh - 7rem)); }
  .hero { padding: 1.25rem var(--gutter) 1.5rem; }
  .hero .tw-tag, .hero-eyebrow { margin-bottom: 0.5rem; }
  .hero h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
  .hero-desc { margin-bottom: 1rem; }
}

/* ---- Learning Journey ---- */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  main div[style*="overflow-x:auto"]:has(> .container > .journey-steps) { overflow: visible !important; }
  /* Reflection Wall dialog: scrolls inside itself, close button stays in reach */
  #wall-modal { overflow-y: auto !important; align-items: flex-start !important; padding: 0.75rem !important; overscroll-behavior: contain; }
  #wall-modal > div { margin: auto; padding: 1.25rem !important; }
  #wall-modal-close { position: sticky !important; top: 0.25rem; float: right; width: 2.75rem !important; height: 2.75rem !important; margin: -0.5rem -0.5rem 0.25rem 0.5rem; z-index: 2; }
  #wall-modal .btn { min-height: 2.75rem; }

  /* a short line under the Share button saying what it is waiting for */
  .reflection-hint { display: block; font-size: 0.875rem; color: var(--text-muted); margin: 0.5rem 0 0; font-style: italic; text-align: left; }
  .reflection-hint:empty { display: none; }

  /* the SDG picker: a compact grid of three */
  #sdg-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #sdg-picker-grid .sdg-pick-tile { min-height: 3.75rem; }

  /* Teaching and Planning: blocks that open and close */
  .phone-group-note { display: block; font-size: 0.9375rem; color: var(--text-muted); text-align: center; grid-column: 1 / -1; margin: 0; }
  .phone-group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    grid-column: 1 / -1; width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
    background: var(--brand-white); border: 1.5px dashed var(--brand-green); color: var(--ink);
    font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; text-align: left; cursor: pointer;
  }
  .phone-group-toggle .p-icon { transition: transform 0.2s; font-style: normal; flex-shrink: 0; }
  .phone-group-toggle[aria-expanded="true"] { background: var(--brand-off-white); }
  .phone-group-toggle[aria-expanded="true"] .p-icon { transform: rotate(45deg); }
  [data-phone-collapsed] { display: none !important; }
}
@media screen and (max-width: 480px) {
  /* the five steps wrap into rows instead of scrolling sideways */
  main .journey-steps { flex-wrap: wrap; justify-content: center; gap: 0.75rem 0; overflow: visible; }
  main .journey-step { flex: 1 1 33%; min-width: 0; }
  main .journey-step:not(:first-child)::before { display: none; }
  main .journey-step .step-label { max-width: 100%; }
  /* wider reading column: less padding stacked on padding */
  #journey-content.section { padding-left: 0.75rem; padding-right: 0.75rem; }
  .section-content.active { padding-left: 0; padding-right: 0; }
  .section-content :is(.qb-card, .qb-tint, .qb-title, .qb-patch, .qb-sun) { padding: 1.25rem 1rem; }
  /* SDG ranking rows: name above the bar so it can be read */
  #sdg-view > div > div { display: grid !important; grid-template-columns: 4rem 1fr auto; gap: 0.25rem 0.625rem; }
  #sdg-view > div > div > div:nth-child(4) { grid-column: 2 / -1; grid-row: 1; width: auto !important; white-space: normal !important; }
  #sdg-view > div > div > div:nth-child(1) { grid-row: 1; }
  #sdg-view > div > div > div:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
  #sdg-view > div > div > div:nth-child(3) { grid-column: 3; grid-row: 2; }
}

/* ---- Case studies: a list you can read, not a sideways strip ---- */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  html body .cs-scroll-track { display: none; }
  .cs-hint-desk { display: none; }
  .cs-hint-phone { display: inline; }
  .cs-pdf-note { display: block; background: var(--brand-white); border: 1.5px dashed var(--brand-green); padding: 1rem; margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.5; text-align: center; }
  .cs-pdf-note a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: underline; }
  /* viewer: scrolls and zooms, controls sit at the bottom */
  html body #cs-lightbox { overflow: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; justify-content: flex-start; padding: 3.75rem 0.5rem 5rem; }
  html body #cs-lightbox img { max-width: none; max-height: none; width: 100%; flex-shrink: 0; margin: 0 auto; }
  html body #cs-lightbox.zoom-2 img { width: 200%; }
  html body #cs-lightbox.zoom-3 img { width: 300%; }
  html body #cs-lb-prev, html body #cs-lb-next { top: auto; bottom: 0.75rem; transform: none; width: 2.75rem; height: 2.75rem; }
  html body #cs-lb-prev { left: 0.75rem; }
  html body #cs-lb-next { right: 0.75rem; }
  html body #cs-lb-counter { bottom: 1.375rem; }
  /* the 12 case studies as plain text, typed out from the page images */
  .cs-text-list { display: block; }
  .cs-text-list article { background: var(--brand-white); border: 1px solid #e8ece8; padding: 1.25rem 1rem; margin-bottom: 1rem; text-align: left; }
  .cs-text-list h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.375rem; }
  .cs-text-list h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-green); margin: 0.875rem 0 0.25rem; }
  .cs-text-list p { font-size: 1.0625rem; line-height: 1.6; margin: 0 0 0.75rem; max-width: none; text-align: left; }
  .cs-text-list .cs-meta { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 0.375rem; }
  .cs-text-list button { min-height: 2.75rem; padding: 0 1rem; margin-top: 0.5rem; background: var(--brand-white); border: 1.5px dashed var(--brand-green); color: var(--brand-green); font-weight: 700; font-size: 1rem; font-family: inherit; cursor: pointer; }
  .cs-lb-zoom { display: flex; position: fixed; top: 1rem; left: 1rem; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: rgba(255,255,255,0.9); color: #111; border: none; font-weight: 700; font-size: 1rem; cursor: pointer; }
}

/* ---- Impact: testimonials as a plain list ---- */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  .carousel { overflow: visible; }
  .carousel-track { flex-direction: column; transform: none !important; gap: 1rem; }
  .carousel-slide { min-width: 0; }
  #carousel-prev, #carousel-next, #carousel-dots, div:has(> #carousel-dots) { display: none !important; }
}

/* ---- Reflection wall charts ---- */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  #sdg-view-toggle .chip[data-view="bubble"] { display: none; }
  .phone-chart-note { display: block; font-size: 0.875rem; color: var(--text-muted); margin: 0 0 1rem; }
  .phone-dept-list { display: block; list-style: none; margin: 0; padding: 0; }
  .phone-dept-list li { background: var(--brand-white); border: 1px solid #e8ece8; padding: 0.75rem 1rem; margin-bottom: 0.5rem; text-align: left; }
  .phone-dept-list strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; }
  .phone-dept-list span { display: inline-block; font-size: 0.875rem; font-weight: 700; color: #fff; padding: 0.25rem 0.5rem; margin: 0 0.25rem 0.25rem 0; }
}

/* ---- Phone look (Oct 2026): calm flat backgrounds, nothing decorative behind text ----
   Reverse by deleting this whole block. Phones only; desktop is untouched. */
@media screen and (max-width: 900px), screen and (max-height: 500px) and (pointer: coarse) {
  /* the linen weave behind every page becomes a flat calico colour */
  body { background-image: none; }
  /* inner-page headers: flat forest green, no hatching (the colour binding along the hem stays) */
  main > section:first-child:not(.hero) { background-image: none !important; background-color: var(--brand-dark) !important; }
  /* home hero: no shadow halo behind the globe */
  .hero-art::before { display: none; }
  /* Learning Journey blocks: flat colour, no hatching, no inset shadow, no stitch box crowding the text */
  .section-content :is(.qb-title, .qb-patch, .qb-sun) { background-image: none; box-shadow: none; }
  .section-content :is(.qb-card, .qb-tint) { box-shadow: none; border-top: 3px solid var(--t, var(--brand-green)); }
  .section-content :is(.qb-card, .qb-tint)::after { display: none; }
  .journey-step.completed .step-dot, .journey-step.active .step-dot { background-image: none; box-shadow: none; }
  /* long reading text is left-aligned, not centred */
  .section-content .qb :is(p, li) { text-align: left; }
  /* cards inside cards: only the outer stitch */
  :is(.quilt-card, .card, .qb-card, .qb-tint) :is(.quilt-card, .resource-card, .card)::after { display: none; }
  /* cards: flat, a light shadow only */
  :is(.card, .quilt-card, .cs-card, .resource-card, .stat-card) { box-shadow: 0 1px 3px rgba(42,33,24,.12) !important; }
  /* SDG picker tiles: dark readable text (the SDG colour as text was 1.5:1 for yellow); picked = white with a heavy dark edge and a tick; no zoom that overlaps neighbours */
  #sdg-picker-grid .sdg-pick-tile { color: var(--ink) !important; transform: none !important; box-shadow: none !important; }
  #sdg-picker-grid .sdg-pick-tile[aria-pressed="true"] { background: #fff !important; border: 4px solid var(--ink) !important; }
  #sdg-picker-grid .sdg-pick-tile[aria-pressed="true"]::before { content: "\2713  Picked"; display: block; font-size: 0.75rem; font-weight: 800; }
  /* gradient bands set inline on the pages: flat colour */
  main section[style*="linear-gradient(135deg,#19486A"] { background: #19486A !important; }
  main .quilt-card[style*="linear-gradient"] { background: var(--brand-green) !important; }
  #wall-modal { backdrop-filter: none !important; }
}

/* Phone landscape: the menu uses two columns so the whole list is on screen */
@media screen and (max-width: 900px) and (max-height: 500px), screen and (max-height: 500px) and (pointer: coarse) {
  .nav-mobile.open { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .nav-mobile a:nth-last-child(2) { border-bottom: none; }
}


/* ---- The Sustainability Space: home doors, AoC band, Champions band ---- */
.doors { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: stretch; }
.door { background: white; padding: 2.25rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 0.875rem; }
.door-main { box-shadow: var(--shadow-sm); border-top: 4px solid var(--brand-green-mid); }
.door-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-rust); }
.door h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: var(--brand-green); }
.door p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; }
.door-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.aoc-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.aoc-points p { font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,0.82); border-top: 2px dashed rgba(255,255,255,0.35); padding-top: 0.75rem; }
.champ-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
@media (max-width: 52rem) {
  .doors { grid-template-columns: 1fr; }
  .aoc-points { grid-template-columns: 1fr; gap: 1rem; }
  .door { padding: 1.5rem; }
}

/* ---- Sustainability pages: Our Progress, Get Involved, Reading ---- */
.prog-grid, .involve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.25rem; }
.prog-card { background: white; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); display: block; }
.prog-card h3 { font-family: var(--font-display); font-size: 1.0625rem; color: var(--brand-green); margin-bottom: 0.5rem; }
.prog-card p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; }
.prog-link { text-decoration: none; transition: var(--transition); }
.prog-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.involve-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.tick-list, .cap-list { list-style: none; display: grid; gap: 0.625rem; }
.tick-list li, .cap-list li { position: relative; padding-left: 1.75rem; line-height: 1.6; font-size: 0.9375rem; }
.tick-list li::before, .cap-list li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.75rem; height: 0.75rem; background: var(--brand-green-mid); }
.cap-list li { color: rgba(255,255,255,0.88); }
.cap-list li::before { background: var(--brand-gold); }
.link-list { list-style: none; display: grid; gap: 0.625rem; }
.link-list a { color: var(--brand-green); font-weight: 600; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 0.25em; }
.read-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.read-item { display: block; background: white; padding: 1rem 1.125rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-decoration: none; border-left: 4px solid var(--brand-green-mid); transition: var(--transition); }
.read-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.read-item b { display: block; font-family: var(--font-display); color: var(--ink); font-size: 0.9375rem; line-height: 1.35; margin-bottom: 0.25rem; }
.read-item span { font-size: 0.8125rem; color: var(--text-muted); }
@media (max-width: 52rem) { .involve-split { grid-template-columns: 1fr; gap: 1.5rem; } }

.door, .prog-card { text-align: left; }


/* ---- Journey: Activity Bank, subject tags, flip cards, expandable subject prompts ---- */
/* (Activity Bank items now open one at a time; see "Activity Bank (Learning Journey 4)") */
.ab-subject { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--brand-off-white); border-left: 4px solid #FD6925; text-align: left; }
.ab-subject span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-rust); }
.ab-subject strong { display: block; font-family: var(--font-display); font-size: 1.125rem; }
.ab-subject p { margin: 0.25rem 0 0; color: var(--text-muted); }
.ab-figure { margin: 1.25rem 0 0; }
.ab-figure img { width: 100%; border: 1px solid #e8ece8; display: block; }
.ab-figure figcaption { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.5rem; }
.flip-card { cursor: pointer; perspective: 1000px; padding: 0 !important; background: none !important; display: block !important; text-align: left; }
.flip-inner { display: grid; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 1.25rem; background: var(--brand-off-white); }
.flip-back { transform: rotateY(180deg); display: flex; align-items: center; }
.flip-hint { display: block; margin-top: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-rust); }
.flip-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .flip-card.flipped .flip-inner { transform: none; }
  .flip-card.flipped .flip-front { display: none; }
  .flip-card.flipped .flip-back { transform: none; }
}
details.subj { align-self: start; }
details.subj > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
details.subj > summary::-webkit-details-marker { display: none; }
details.subj > summary::after { content: "+"; font-size: 1.25rem; color: var(--brand-rust); }
details.subj[open] > summary::after { content: "\2212"; }
details.subj[open] > summary { margin-bottom: 0.5rem; }
.subj-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }

/* Six nav items plus the Sustainability menu need the room: switch to the menu button below 1180px */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

.flip-front > div:first-child { font-size: 1.0625rem !important; }

/* ---- Green Gown Awards badges (Nov 2026) ---- */
.awards-strip .container { text-align: center; }
.awards-strip h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 1.75rem; }
.award-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); max-width: 60rem; margin: 0 auto; }
.award { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.award img { width: clamp(120px, 14vw, 180px); height: auto; filter: drop-shadow(0 8px 12px rgba(42,33,24,.18)); }
.award figcaption { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.95rem; line-height: 1.45; color: var(--text-muted); }
.award figcaption strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.card-badge { display: block; width: 96px; height: auto; margin: 0 auto 0.75rem; position: relative; z-index: 2; filter: drop-shadow(0 4px 8px rgba(42,33,24,.16)); }
.borro-link { margin-top: 0.75rem; position: relative; z-index: 2; }
@media (max-width: 640px) { .award-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Log-cabin quilt (Nov 2026, "Patchwork depth" #4)
   Every top-level section of a page is a log-cabin block: rounds of fabric
   strips (added by main.js, decorative, aria-hidden) sewn round a plain centre
   in pinwheel order, light fabrics top/left, dark fabrics right/bottom.
   No background shows between sections. h1/h2 are embroidered in satin stitch.
   ========================================================================== */
.lc-host {
  --sw: 24px;
  --fw: calc(var(--rounds, 2) * var(--sw));
  position: relative;
  background-color: #F7F1E6;
  padding-left: calc(var(--fw) + 1.5rem) !important;
  padding-right: calc(var(--fw) + 1.5rem) !important;
  padding-top: calc(var(--fw) + 3.25rem) !important;
  padding-bottom: calc(var(--fw) + 3.25rem) !important;
  box-shadow: inset 0 0 0 1px rgba(42,33,24,.10);
}
.lc-host::after { display: none !important; } /* the old binding hem is replaced by the strips */
.lc-host > .lc-strips { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lc-host > :not(.lc-strips) { position: relative; z-index: 2; }
/* the centre's own running stitch, just inside the strips */
.lc-host > .lc-strips::after {
  content: ''; position: absolute; inset: calc(var(--fw) + 10px);
  border: 1.5px dashed var(--lc-stitch, rgba(42,33,24,.2));
}
.lc-dark { --lc-stitch: rgba(255,255,255,.35); }

.lc-s {
  position: absolute;
  --a: calc(var(--k) * var(--sw));
  background-color: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 7px rgba(0,0,0,.14), 0 0 0 1px rgba(42,33,24,.14);
}
.lc-s::after { content: ''; position: absolute; inset: 6px; border: 1.3px dashed rgba(255,255,255,.6); }
.lc-s.lt::after { border-color: rgba(42,33,24,.28); }
.lc-t { left: var(--a); top: var(--a); right: calc(var(--a) + var(--sw)); height: var(--sw); }
.lc-r { top: var(--a); right: var(--a); bottom: calc(var(--a) + var(--sw)); width: var(--sw); }
.lc-b { right: var(--a); bottom: var(--a); left: calc(var(--a) + var(--sw)); height: var(--sw); }
.lc-l { bottom: var(--a); left: var(--a); top: calc(var(--a) + var(--sw)); width: var(--sw); }
/* fabrics */
.fx-felt { background-image: radial-gradient(rgba(255,255,255,.14) .8px, transparent 1.4px), radial-gradient(rgba(0,0,0,.10) .8px, transparent 1.4px), radial-gradient(rgba(255,255,255,.08) 1px, transparent 2px); background-size: 5px 5px, 7px 7px, 11px 11px; background-position: 0 0, 2px 3px, 5px 1px; }
.fx-twill { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px), repeating-linear-gradient(135deg, transparent 0 2px, rgba(0,0,0,.10) 2px 3px, transparent 3px 4px); }
.fx-cord { background-image: repeating-linear-gradient(var(--dir, 90deg), rgba(255,255,255,.16) 0 3px, rgba(0,0,0,.14) 3px 5px, transparent 5px 8px); }
.fx-ging { background-image: linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%), linear-gradient(rgba(255,255,255,.5) 50%, transparent 50%); background-size: 14px 14px; }
.fx-herr { background-image: repeating-linear-gradient(60deg, rgba(255,255,255,.22) 0 2px, transparent 2px 8px), repeating-linear-gradient(-60deg, rgba(0,0,0,.08) 0 2px, transparent 2px 8px); }
.fx-dots { background-image: radial-gradient(rgba(255,255,255,.75) 2px, transparent 2.5px), radial-gradient(rgba(255,255,255,.75) 2px, transparent 2.5px); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.fx-tick { background-image: repeating-linear-gradient(var(--dir, 0deg), rgba(255,255,255,.55) 0 2px, transparent 2px 7px, rgba(42,33,24,.10) 7px 8px, transparent 8px 12px); }
.fx-linen { background-image: linear-gradient(90deg, rgba(42,33,24,.06) 0 1px, rgba(255,255,255,.16) 1px 2px, transparent 2px), linear-gradient(180deg, transparent 0 3px, rgba(42,33,24,.06) 3px 4px, rgba(255,255,255,.16) 4px 5px, transparent 5px); background-size: 6px 6px; }
.lc-r.fx-cord, .lc-l.fx-cord, .lc-t.fx-tick, .lc-b.fx-tick { --dir: 0deg; }
.lc-t.fx-cord, .lc-b.fx-cord, .lc-r.fx-tick, .lc-l.fx-tick { --dir: 90deg; }

/* embroidered headings: satin stitch, raised. padding keeps descenders (the p in Space) inside the painted box */
.emb {
  background: repeating-linear-gradient(110deg, var(--th, #1F3B2A) 0 1.6px, var(--th2, #3a5c43) 1.6px 3.2px);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 -1px 0 rgba(0,0,0,.22)) drop-shadow(0 2px 2px rgba(42,33,24,.18));
  padding-bottom: 0.16em;
  margin-bottom: -0.04em;
}
.emb.on-dark { --th: #FFFFFF; --th2: #E3ECE4; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 -1px 0 rgba(255,255,255,.25)); }
.emb :is(em, span[style*="color"]) {
  background: repeating-linear-gradient(110deg, var(--emc, #B5341A) 0 1.6px, var(--emc2, #d0573c) 1.6px 3.2px);
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
.emb.on-dark :is(em, span[style*="color"]) { --emc: #FCC30B; --emc2: #ffe07a; }

@media (max-width: 900px) { .lc-host { --sw: 14px; } }
@media (max-width: 600px) { .lc-s:not([data-k="0"]) { display: none; } .lc-host { --sw: 10px; --rounds: 1 !important; padding-left: calc(var(--fw) + 1rem) !important; padding-right: calc(var(--fw) + 1rem) !important; } .lc-s::after { inset: 3px; } }
@media print { .lc-strips { display: none; } .lc-host { padding: 1rem !important; } .emb { color: #1F3B2A !important; -webkit-text-fill-color: currentColor; background: none; filter: none; } }

/* ---- Slimmer home page (Nov 2026): badges in the hero, two-tab doors ---- */
.hero-badges { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.75rem; text-decoration: none; color: var(--text-muted); }
.hero-badges img { width: 3.75rem; height: auto; filter: drop-shadow(0 4px 6px rgba(42,33,24,.18)); transition: transform .22s cubic-bezier(0.22,1,0.36,1); }
.hero-badges:hover img { transform: translateY(-2px); }
.hero-badges span { display: flex; flex-direction: column; text-align: left; font-size: 0.85rem; line-height: 1.35; margin-left: 0.4rem; }
.hero-badges strong { font-family: var(--font-display); color: var(--ink); font-size: 0.95rem; }

.door-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 54rem; margin: 0 auto; }
.door-tabs [role="tab"] {
  position: relative; display: flex; flex-direction: column; gap: 0.2rem; align-items: center;
  padding: 1rem 1.25rem 1.1rem; border: 0; cursor: pointer; font: inherit;
  background: rgba(251,248,242,.55); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px rgba(42,33,24,.12);
}
.door-tabs [role="tab"]::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed transparent; pointer-events: none; }
.door-tabs [role="tab"][aria-selected="true"] { background: var(--brand-white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42,33,24,.12), inset 0 -4px 0 var(--thread); }
.door-tabs [role="tab"][aria-selected="true"]::after { border-color: var(--thread); }
.door-tabs [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.door-tab-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-rust); }
.door-tab-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); }

.door-panel { position: relative; max-width: 72rem; margin: 0 auto; padding: 2.5rem; background: var(--brand-white); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: start; text-align: left; animation: tw-rise 350ms cubic-bezier(0.22,1,0.36,1) both; }
.door-panel[hidden] { display: none; }
.door-panel::after { content: ''; position: absolute; inset: 8px; border: 1.5px dashed rgba(42,33,24,.18); pointer-events: none; }
.door-intro { display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }
.door-intro h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--brand-green); }
.door-intro p { font-size: 1rem; line-height: 1.7; color: var(--text-muted); }
.door-intro .door-sub { font-size: 0.95rem; }
.door-steps { list-style: none !important; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.door-steps li { display: flex; gap: 0.9rem; align-items: flex-start; text-align: left; list-style: none; }
.door-steps .step-n { flex-shrink: 0; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; background-color: var(--n); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px); position: relative; box-shadow: inset 0 -2px 4px rgba(0,0,0,.15); }
.door-steps .step-n::after { content: ''; position: absolute; inset: 3px; border: 1.2px dashed rgba(255,255,255,.6); }
.door-steps h4 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 0.25rem; }
.door-steps h4 a { color: var(--ink); }
.door-steps p { font-size: 0.875rem !important; line-height: 1.55; color: var(--text-muted); }
.door-more { grid-column: 1 / -1; border-top: 1.5px dashed rgba(42,33,24,.2); padding-top: 1rem; text-align: left; }
.door-more summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand-green); list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.door-more summary::-webkit-details-marker { display: none; }
.door-more summary::before { content: '+'; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; background: var(--brand-green-mid); color: #fff; font-weight: 700; }
.door-more[open] summary::before { content: '−'; }
.door-more-body { padding-top: 1rem; display: grid; gap: 1.25rem; animation: tw-rise 300ms cubic-bezier(0.22,1,0.36,1) both; }
.door-quote { font-size: 1rem; line-height: 1.7; color: var(--text-muted); font-style: italic; max-width: 52rem; }
.door-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.door-pillars > div { position: relative; padding: 1.25rem 1.25rem 1.1rem; background: #F7F1E6; text-align: left; }
.door-pillars > div::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed var(--thread); pointer-events: none; }
.door-pillars h4 { font-family: var(--font-display); color: var(--brand-green); margin-bottom: 0.3rem; }
.door-pillars p { font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); }
.door-champ { position: relative; padding: 1.75rem; background: #F7F1E6; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; text-align: left; }
.door-champ::after { content: ''; position: absolute; inset: 6px; border: 1.5px dashed #0A97D9; pointer-events: none; }
.door-champ .section-label { margin: 0 !important; }
.door-champ h4 { font-family: var(--font-display); font-size: 1.35rem; color: var(--brand-green); }
.door-champ p { font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); }

/* the closing quote band, slimmer */
.home-close > div { min-height: 0 !important; }
.home-close > div > div:first-child { padding: 2rem 2.5rem !important; }
.home-close > div > div:last-child { padding: 1.5rem !important; }

@media (max-width: 900px) {
  .door-panel { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; }
  /* the four steps become a swipe row on phones: people scroll it themselves */
  .door-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; padding-bottom: 0.5rem !important; scrollbar-width: thin; }
  .door-steps li { flex: 0 0 78%; scroll-snap-align: start; background: #F7F1E6; padding: 1rem; }
  .door-pillars { grid-template-columns: 1fr; }
  .home-close > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .door-tabs [role="tab"] { padding: 0.75rem 0.5rem; }
  .door-tab-tag { display: none; }
  .hero-badges img { width: 3rem; }
}
/* phones: a compact footer (two columns of links) and a smaller hero ball */
@media (max-width: 600px) {
  .site-footer { padding: 2.5rem 1rem 1.5rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem 0.75rem !important; margin-bottom: 1.5rem !important; }
  .footer-col h4 { font-size: 0.8rem; margin-bottom: 0.6rem; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { margin-top: 0.5rem; font-size: 0.9rem; }
  .footer-col ul { gap: 0.4rem; }
  .footer-col a { font-size: 0.82rem; line-height: 1.3; display: inline-block; }
  .footer-threadworks, .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .hero-art { max-width: 15rem !important; margin: 0 auto; }
  .hero-media { gap: 0.5rem; }
}

/* Retire the small decorative squares from the earlier patchwork; the log-cabin frames carry the look now */
.section-content .qb::before { display: none !important; }      /* journey cornerstones */
.section-label::before { display: none !important; }            /* three mini squares before labels */
.activity-card::before { display: none !important; }            /* corner patch on activity boxes */
.journey-steps { align-items: flex-start; }                     /* steps line up when a label wraps */
main i.patch:is([style*="width:0.75rem"], [style*="width:1.75rem"], [style*="width:2rem"]) { display: none !important; } /* small marker squares on Next Steps */

/* ==========================================================================
   Activity Bank (Learning Journey 4), Nov 2026
   Closed: one card. Open: a shelf of activity patches to choose from.
   Chosen: the activity opens below in three steps, one at a time.
   ========================================================================== */
.ab-detail[hidden], .ab-shelf[hidden], .ab-panel[hidden] { display: none !important; }
.ab-shelf { margin-top: 2rem; padding-top: 1.75rem; border-top: 1.5px dashed rgba(42,33,24,.2); animation: tw-rise 320ms cubic-bezier(0.22,1,0.36,1) both; }
.section-content .ab-shelf-label { font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-rust); margin: 0 auto 1rem !important; max-width: none; text-align: center; }
.ab-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; }
.ab-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.75rem 1.25rem 1.4rem; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: center;
  background: #F7F1E6; box-shadow: inset 0 6px 0 var(--t), var(--shadow-sm);
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms ease;
}
.ab-pick::after { content: ''; position: absolute; inset: 12px 6px 6px; border: 1.5px dashed var(--t); opacity: .55; pointer-events: none; }
.ab-pick:hover { transform: translateY(-3px); box-shadow: inset 0 6px 0 var(--t), var(--shadow-md); }
.ab-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ab-pick[aria-expanded="true"] { background: var(--t); color: #fff; box-shadow: inset 0 6px 0 rgba(0,0,0,.18), var(--shadow-md); }
.ab-pick[aria-expanded="true"]::after { border-color: rgba(255,255,255,.7); opacity: 1; }
.ab-pick-n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-rust); }
.ab-pick-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.ab-pick-what { font-size: 1rem; line-height: 1.5; color: var(--text-muted); max-width: 22rem; }
.ab-pick-tag { font-size: 0.8125rem; font-weight: 600; padding: 0.2rem 0.6rem; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(42,33,24,.12); }
.ab-pick-go { margin-top: auto; padding-top: 0.4rem; font-weight: 700; font-size: 0.9375rem; color: var(--brand-green); }
.ab-pick[aria-expanded="true"] :is(.ab-pick-n, .ab-pick-what, .ab-pick-go) { color: rgba(255,255,255,.92); }
.ab-pick[aria-expanded="true"] .ab-pick-tag { background: rgba(255,255,255,.18); box-shadow: none; }
.ab-pick[aria-expanded="true"] .ab-pick-go::after { content: ' (open below)'; font-weight: 400; }
.ab-pick-share { background: var(--brand-white); }
.ab-pick-share::after { border-style: dotted; }

.section-content .ab-detail { animation: tw-rise 320ms cubic-bezier(0.22,1,0.36,1) both; scroll-margin-top: calc(var(--nav-h) + 6rem); }
.ab-head { max-width: 46rem; margin: 0 auto 1.75rem; }
.ab-kicker { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--t); padding: 0.3rem 0.8rem; margin-bottom: 0.75rem; }
.section-content .ab-head h4 { font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important; margin: 0 0 0.6rem; outline: none; }
.section-content .ab-lede { font-size: 1.25rem !important; line-height: 1.55 !important; color: var(--text-muted); margin: 0; }

/* the three steps, as stitched fabric labels */
.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; margin: 0 auto 1.75rem; }
.ab-steps [role="tab"] {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 0.75rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem;
  background: rgba(239,232,218,.7); color: var(--text-muted); box-shadow: inset 0 0 0 1px rgba(42,33,24,.12);
}
.ab-steps [role="tab"] b { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; font-family: var(--font-display); background: rgba(42,33,24,.12); color: var(--ink); flex-shrink: 0; }
.ab-steps [role="tab"][aria-selected="true"] { background: var(--t); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.ab-steps [role="tab"][aria-selected="true"] b { background: rgba(255,255,255,.95); color: var(--t); }
.ab-steps [role="tab"][aria-selected="true"]::after { content: ''; position: absolute; inset: 4px; border: 1.2px dashed rgba(255,255,255,.65); pointer-events: none; }
.ab-steps [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }

.ab-panel { animation: tw-rise 260ms cubic-bezier(0.22,1,0.36,1) both; }
.ab-howto { counter-reset: abstep; list-style: none !important; padding: 0 !important; margin: 1rem auto 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; max-width: 64rem; }
.ab-howto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-howto > li { counter-increment: abstep; position: relative; list-style: none; padding: 2.5rem 1.5rem 1.5rem; background: #F7F1E6; text-align: center; }
.ab-howto > li::before {
  content: counter(abstep); position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%);
  width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; background-color: var(--t);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15); z-index: 1;
}
.ab-howto > li::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed rgba(42,33,24,.2); pointer-events: none; }
.section-content .ab-howto p { margin: 0 0 0.5rem !important; }
.ab-howto ul { margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.section-content .ab-howto ul li { font-size: 1.0625rem !important; font-style: italic; color: var(--text-muted); }
.ab-next { display: flex; margin: 0 auto; }

.section-content .ab-subject { max-width: 46rem; margin: 0 auto 1.5rem; text-align: center; border-left: 0; border-top: 4px solid var(--t); }
.ab-play { max-width: 64rem; margin: 0 auto 1.75rem; padding: 1.75rem; background: #F7F1E6; position: relative; }
.ab-play::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed var(--t); opacity: .6; pointer-events: none; }
.section-content .ab-play-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem !important; margin: 0 0 0.35rem !important; }
.section-content .ab-play-what { color: var(--text-muted); max-width: 40rem; margin: 0 auto 1.25rem !important; }
.ab-play-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; position: relative; z-index: 1; }
.ab-play-frame { display: block; width: 100%; height: min(42rem, 80vh); border: 0; margin-top: 1.25rem; background: #fff; position: relative; z-index: 1; }
.ab-example { max-width: 46rem; margin: 0 auto; }
.ab-example ul { margin: 0 0 1.25rem; display: grid; gap: 0.3rem; }
.section-content .ab-detail .ab-figure { max-width: 46rem; margin: 1.5rem auto 1.75rem; }
.ab-skills { display: block; width: 100%; max-width: 46rem; margin: 0 auto; border: 1px solid #e8ece8; }
.section-content .ab-credit { font-size: 0.9375rem !important; font-style: italic; color: var(--text-muted); margin: 1.75rem auto 0 !important; max-width: none; text-align: center; }
.ab-back { display: block; margin: 1.5rem auto 0; padding: 0.4rem 0.8rem; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--brand-green); text-decoration: underline; text-underline-offset: 3px; }
.ab-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Share an activity */
.ab-form { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; text-align: left; }
.ab-form[hidden] { display: none; }
.ab-form label { font-weight: 700; font-size: 1rem; margin: 1rem 0 0.35rem; }
.ab-form label span { font-weight: 400; color: var(--text-muted); font-size: 0.875rem; margin-left: 0.35rem; }
.ab-form input, .ab-form textarea { width: 100%; border: 2px solid #ddd5c6; border-radius: 0; padding: 0.7rem 0.8rem; font: inherit; font-size: 1rem; background: #fff; }
.ab-form input:focus, .ab-form textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand-green-mid); }
.section-content .ab-form-hint { font-size: 0.9375rem !important; color: var(--text-muted); margin: 0 0 0.4rem !important; text-align: left; }
.ab-form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ab-form-two > div { display: flex; flex-direction: column; }
.ab-form .btn { margin-top: 1.5rem; align-self: center; }
.section-content .ab-form-status { min-height: 1.5rem; margin: 0.75rem 0 0 !important; text-align: center; font-size: 1rem !important; }
.ab-form-status.is-error { color: #A01919; }
.ab-form-status a { color: inherit; font-weight: 700; }
.ab-share-done { max-width: 40rem; margin: 0 auto; padding: 1.75rem; background: #E9EFE2; position: relative; }
.ab-share-done::after { content: ''; position: absolute; inset: 5px; border: 1.3px dashed var(--brand-green-mid); pointer-events: none; }
.section-content .ab-share-done-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem !important; color: var(--brand-green); margin: 0 0 0.5rem !important; }
.section-content .ab-shared-text { max-width: 46rem; margin: 0 auto; white-space: pre-line; }

@media (max-width: 900px) {
  .ab-howto, .ab-howto-3 { grid-template-columns: 1fr; gap: 1.75rem; }
  .ab-steps [role="tab"] { flex-direction: column; gap: 0.3rem; font-size: 0.875rem; padding: 0.7rem 0.4rem; }
  .ab-form-two { grid-template-columns: 1fr; }
  .ab-pick[aria-expanded="true"] .ab-pick-go::after { content: ''; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-shelf, .section-content .ab-detail, .ab-panel { animation: none; }
  .ab-pick { transition: none; }
  .ab-pick:hover { transform: none; }
}

/* Reflection wall: reflections the Sustainability Lead has highlighted */
.reflection-card.is-highlighted { background: #FFFBEA; box-shadow: inset 0 0 0 2px #FCC30B, var(--shadow-sm); }
.highlight-pill { display: inline-block; margin: 0.35rem 0 0; padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; background: #FCC30B; color: var(--ink); }

/* the activity head and credit stay centred on phones too */
.section-content .ab-detail :is(.ab-lede, .ab-credit, .ab-head h4) { text-align: center !important; }