/* ============================================================
   ACCESS TO AWARENESS — SOPHIE McLEAN
   Shared design system  ·  quiet-luxury minimalism
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#ffffff; --panel:#f2f5f9; --ink:#083e73; --ink-soft:#42618a;
  --olive:#2f6098; --olive-dk:#0c3a6b; --sand:#3a6ea5;
  --line:rgba(8,62,115,0.16); --particle:8,62,115;
  --stay-bg:#eef3f9; --stay-text:#083e73; --stay-muted:rgba(8,62,115,.66);
  --header-bg:rgba(255,255,255,.85);

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --gutter:clamp(1.4rem,5vw,6rem); --maxw:1240px;
}
/* Light only. White/navy is the brand, whatever the operating system prefers. */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.65; overflow-x:hidden; }
img{ max-width:100%; display:block; }

.grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress{ position:fixed; top:0; left:0; height:1px; width:0%; background:var(--olive); z-index:9997; }

.cursor-ring,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-ring{ width:38px; height:38px; border:1px solid color-mix(in srgb,var(--ink) 45%,transparent); transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease); }
.cursor-dot{ width:5px; height:5px; background:var(--ink); }
body.hovering .cursor-ring{ width:64px; height:64px; border-color:var(--olive); }
@media (hover:none),(pointer:coarse){ .cursor-ring,.cursor-dot{ display:none; } }

/* ---- type ---- */
.eyebrow{ font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--olive); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; line-height:1.06; letter-spacing:-.005em; text-wrap:balance; }
.display{ font-size:clamp(3rem,9vw,8.6rem); }
.h-xl{ font-size:clamp(2.8rem,7vw,6rem); }
.h-lg{ font-size:clamp(2.4rem,5.5vw,5rem); }
.h-md{ font-size:clamp(1.9rem,3.4vw,3.1rem); }
.h-sm{ font-size:clamp(1.5rem,2.4vw,2.1rem); }
.lead{ font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,2rem); font-weight:300; line-height:1.4; color:var(--ink); }
.body{ font-size:1.02rem; color:var(--ink-soft); max-width:44ch; }
.italic{ font-style:italic; }

/* ---- reveal ---- */
.reveal-line{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.word{ display:inline-block; transform:translateY(120%); transition:transform 1s var(--ease); }
.in .word{ transform:translateY(0); }
.fade-up{ opacity:0; transform:translateY(28px); transition:opacity 1.1s ease, transform 1.1s var(--ease); }
.fade-up.in{ opacity:1; transform:none; }
.img-mask{ overflow:hidden; }
.img-mask img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
.img-mask.in img{ transform:scale(1); }

/* ---- buttons / links ---- */
.btn{ --c:var(--ink); position:relative; display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans); font-weight:400; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c); text-decoration:none; padding:1.05em 2.1em; border:1px solid var(--c); border-radius:100px; overflow:hidden; background:transparent; transition:color .5s var(--ease); cursor:pointer; z-index:0; }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--c); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease); }
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:scaleY(1); }
.btn--fill{ color:var(--bg); }
.btn--fill::before{ transform:scaleY(1); }
.btn--fill:hover{ color:var(--ink); }
.btn--fill:hover::before{ transform:scaleY(0); }
.link-u{ position:relative; color:var(--ink); text-decoration:none; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400; white-space:nowrap; }
.link-u::after{ content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.link-u:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- header ---- */
header.site{ position:fixed; top:0; left:0; width:100%; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:1.6rem var(--gutter); transition:transform .5s var(--ease),background .5s,padding .5s var(--ease),border-color .5s; border-bottom:1px solid transparent; }
header.site.hidden{ transform:translateY(-100%); }
header.site.scrolled{ background:var(--header-bg); backdrop-filter:blur(14px); padding:1rem var(--gutter); border-bottom:1px solid var(--line); }
.brand{ font-family:var(--serif); font-size:1.28rem; letter-spacing:.02em; color:var(--ink); text-decoration:none; line-height:1; }
.brand sup{ font-size:.5em; vertical-align:super; }
.brand span{ display:block; font-family:var(--sans); font-size:.58rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--olive); margin-top:.4em; }
.nav-right{ display:flex; align-items:center; gap:2rem; }
.nav-links{ display:flex; gap:1.9rem; }
.nav-links a{ font-family:var(--sans); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; opacity:.85; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%; background:var(--olive); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-links a:hover,.nav-links a.active{ opacity:1; }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); transform-origin:left; }
.menu-toggle{ display:flex; align-items:center; gap:.7em; background:none; border:none; font-family:var(--sans); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.menu-toggle .bars{ display:inline-flex; flex-direction:column; gap:4px; width:22px; }
.menu-toggle .bars i{ height:1px; width:100%; background:var(--ink); display:block; }
.lang-switch{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.lang-opt{ background:none; border:none; padding:0; margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink-soft); opacity:.6; cursor:pointer; transition:opacity .3s,color .3s; }
button.lang-opt:hover{ opacity:1; color:var(--ink); }
.lang-opt.is-active{ color:var(--olive-dk); opacity:1; cursor:default; }
.lang-sep{ color:var(--line); }
@media(max-width:1200px){ .nav-links{ display:none; } }

/* ---- overlay menu ---- */
.overlay{ position:fixed; inset:0; z-index:1200; background:#072a4d; color:#eef3f9; display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); clip-path:circle(0% at calc(100% - 5rem) 3rem); pointer-events:none; transition:clip-path .8s var(--ease); }
.overlay.open{ clip-path:circle(150% at calc(100% - 5rem) 3rem); pointer-events:auto; }
.overlay .close{ position:absolute; top:1.6rem; right:var(--gutter); background:none; border:none; color:#eef3f9; font-family:var(--sans); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
.overlay-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:end; max-width:var(--maxw); margin:0 auto; width:100%; }
.overlay nav{ display:flex; flex-direction:column; gap:.1rem; }
.overlay nav a{ font-family:var(--serif); font-size:clamp(1.7rem,3.8vw,2.9rem); font-weight:300; color:#eef3f9; text-decoration:none; line-height:1.24; opacity:.55; transition:opacity .4s,padding-left .4s var(--ease); width:fit-content; }
.overlay nav a:hover,.overlay nav a[aria-current]{ opacity:1; padding-left:.6rem; }
.overlay nav a .n{ font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; vertical-align:top; color:#6fa0d4; margin-right:.7em; }
.overlay-side{ border-left:1px solid rgba(238,243,249,.18); padding-left:2.4rem; }
.overlay-side p{ color:rgba(238,243,249,.6); font-size:.92rem; margin-bottom:1.4rem; max-width:30ch; }
.overlay-side a{ color:#eef3f9; }
@media(max-width:760px){ .overlay-grid{ grid-template-columns:1fr; gap:2rem; } .overlay-side{ border:none; padding-left:0; } }

/* ---- layout ---- */
main{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.wrap-narrow{ max-width:820px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.pad{ padding-top:clamp(6rem,13vw,11rem); padding-bottom:clamp(6rem,13vw,11rem); }
.pad-sm{ padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(4rem,8vw,7rem); }
.center{ text-align:center; }
.panel{ background:var(--panel); }
.ink-section{ background:var(--stay-bg); color:var(--stay-text); }
.ink-section .eyebrow{ color:var(--sand); }
.ink-section h1,.ink-section h2,.ink-section h3{ color:var(--stay-text); }
.ink-section p{ color:var(--stay-muted); }
.sec-head{ margin-bottom:4rem; }
.sec-head .eyebrow{ display:block; margin-bottom:1.4rem; }

/* ---- home hero ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:8rem var(--gutter) 6rem; }
#sphere{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.hero-veil{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 60% 55% at 50% 46%, color-mix(in srgb,var(--bg) 55%,transparent) 0%, transparent 70%); pointer-events:none; }
.hero-inner{ position:relative; z-index:2; max-width:1000px; }
.hero .eyebrow{ margin-bottom:2rem; }
.hero .lead{ margin:2.2rem auto 0; max-width:34ch; color:var(--ink-soft); }
.hero-cta{ margin-top:3rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scrollcue{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.scrollcue span{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }
.scrollcue .l{ width:1px; height:52px; background:linear-gradient(var(--olive),transparent); position:relative; overflow:hidden; }
.scrollcue .l::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--ink); animation:cue 2.4s var(--ease) infinite; }
/* Split hero: the tall staircase beside the words (home page). */
.hero--split{ display:grid; grid-template-columns:1fr minmax(18rem,38%); align-items:stretch; justify-content:stretch; text-align:left; padding:0; }
.hero--split .hero-copy{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; max-width:none; padding:9rem var(--gutter) 7rem; }
.hero--split .hero-copy > *{ max-width:30ch; }
.hero--split .display{ font-size:clamp(2.6rem,5.6vw,5.4rem); }
.hero--split .hero-copy .lead{ margin:2rem 0 0; max-width:38ch; }
.hero--split .hero-cta{ justify-content:flex-start; }
.hero--split .hero-figure{ position:relative; overflow:hidden; background:var(--bg); }
.hero--split .hero-figure img{ position:absolute; top:5.4rem; right:0; bottom:0; left:0; width:100%; height:calc(100% - 5.4rem); object-fit:cover; object-position:50% 50%; display:block; }
.hero--split .scrollcue{ left:var(--gutter); transform:none; align-items:flex-start; }
@media(max-width:860px){
  .hero--split{ grid-template-columns:1fr; grid-template-rows:auto 42svh; min-height:0; }
  .hero--split .hero-copy{ padding:8rem var(--gutter) 3rem; }
  .hero--split .hero-copy > *{ max-width:none; }
  .hero--split .scrollcue{ display:none; }
  .hero--split .hero-figure img{ top:0; height:100%; object-position:50% 66%; }
}
@keyframes cue{ 0%{ top:-50%; } 60%,100%{ top:100%; } }

/* ---- interior page hero ---- */
.page-hero{ padding:clamp(9rem,18vh,13rem) var(--gutter) clamp(3rem,6vw,5rem); text-align:center; position:relative; }
.page-hero .eyebrow{ display:block; margin-bottom:1.6rem; }
.page-hero h1{ margin:0 auto; max-width:16ch; }
.page-hero .sub{ margin:2rem auto 0; max-width:46ch; color:var(--ink-soft); font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.6rem); font-style:italic; line-height:1.4; }
.page-hero .breadcrumb{ display:flex; gap:.6em; justify-content:center; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); margin-bottom:1.6rem; }
.page-hero .breadcrumb a{ color:var(--olive); text-decoration:none; opacity:.75; }
.page-hero .breadcrumb a:hover{ opacity:1; }

/* ---- marquee ---- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:1.7rem 0; white-space:nowrap; }
.marquee-track{ display:inline-block; will-change:transform; animation:scrollx 42s linear infinite; }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,2.3rem); color:var(--ink); padding:0 2.2rem; }
.marquee-track span::after{ content:"·"; color:var(--olive); margin-left:4.4rem; }

/* ---- invite / prose ---- */
.invite{ text-align:center; }
.invite .lead{ max-width:26ch; margin:0 auto; }
.invite-body{ margin:2.6rem auto 0; max-width:52ch; color:var(--ink-soft); font-size:1.08rem; }
.invite-body p{ margin-bottom:1.4rem; }
.whisper{ margin-top:2.6rem; font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--olive-dk); }
.prose p{ color:var(--ink-soft); font-size:1.08rem; margin-bottom:1.5rem; }
.prose p:first-of-type{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); line-height:1.45; }
.prose h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin:3rem 0 1rem; }
.prose .pull{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,2.8vw,2.2rem); color:var(--olive-dk); line-height:1.3; margin:2.4rem 0; text-align:center; }

/* ---- offers list ---- */
.offer{ display:grid; grid-template-columns:auto 1fr auto; gap:2.5rem; align-items:center; padding:2.8rem 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); transition:padding .5s var(--ease); }
.offer:last-child{ border-bottom:1px solid var(--line); }
.offer .num{ font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; color:var(--olive); align-self:flex-start; padding-top:.6rem; }
.offer .mid h3{ font-size:clamp(1.9rem,3.4vw,2.9rem); transition:transform .5s var(--ease); }
.offer .mid p{ color:var(--ink-soft); max-width:52ch; margin-top:.7rem; font-size:1rem; }
.offer .meta{ display:flex; gap:1.4rem; margin-top:1rem; flex-wrap:wrap; }
.offer .meta span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-dk); border:1px solid var(--line); border-radius:100px; padding:.35em 1em; }
.offer .go{ font-family:var(--sans); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:.6em; transition:transform .5s var(--ease),color .5s; color:var(--ink-soft); }
.offer .go svg{ width:26px; transition:transform .5s var(--ease); }
.offer:hover{ padding-left:1.2rem; padding-right:.4rem; }
.offer:hover .mid h3{ transform:translateX(6px); }
.offer:hover .go{ color:var(--olive-dk); }
.offer:hover .go svg{ transform:translateX(8px); }
@media(max-width:760px){ .offer{ grid-template-columns:1fr; gap:.9rem; padding:2.2rem 0; } .offer .num{ padding-top:0; } .offer .go{ margin-top:.6rem; } }

/* ---- two-column media ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:var(--panel); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-media.tall{ aspect-ratio:3/4; }
.split-media.wide{ aspect-ratio:1/1; }
.split-copy p{ color:var(--ink-soft); margin-bottom:1.3rem; font-size:1.05rem; max-width:46ch; }
.split-copy .eyebrow{ display:block; margin-bottom:1.4rem; }
.about-truth{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); line-height:1.3; }
.stats{ display:flex; gap:2.8rem; margin-top:2.6rem; flex-wrap:wrap; }
.stats .st .n{ font-family:var(--serif); font-size:2.6rem; line-height:1; }
.stats .st .k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-dk); margin-top:.6rem; }
@media(max-width:820px){ .split{ grid-template-columns:1fr; } .split.reverse .split-media{ order:0; } .split-media{ max-width:460px; } }

/* ---- full-bleed image band ---- */
.band{ position:relative; height:clamp(340px,52vh,620px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }
.band .band-quote{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; background:linear-gradient(rgba(20,20,14,.28),rgba(20,20,14,.28)); }
.band .band-quote blockquote{ font-family:var(--serif); font-weight:300; color:#F5F2EA; font-size:clamp(1.8rem,4vw,3.4rem); max-width:20ch; line-height:1.15; }
.band .band-quote .band-attr{ display:block; font-family:var(--sans,inherit); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#F5F2EA; opacity:.75; margin-top:1.2rem; }

/* brighter photos need a deeper scrim so the white quote stays readable */
.band--bright .band-quote{ background:linear-gradient(rgba(20,20,14,.44),rgba(20,20,14,.44)); }

/* pale photos: a light scrim and navy text, so the page stays clean and bright */
.band--light .band-quote{ background:linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.58)); }
.band--light .band-quote blockquote{ color:var(--ink); }
.band--light .band-quote .band-attr{ color:var(--ink); opacity:.7; }


/* ---- quote ---- */
.quote{ text-align:center; }
.quote blockquote{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,5vw,4rem); line-height:1.14; max-width:18ch; margin:0 auto; }
.quote .attr{ margin-top:2.2rem; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--olive-dk); }

/* ---- testimonial (longer, paragraph-length quotes) ---- */
.testimonial{ text-align:center; }
.testimonial blockquote{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.5; color:var(--ink); max-width:52ch; margin:0 auto; }
.testimonial .attr{ margin-top:1.6rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-dk); }

/* ---- books ---- */
.books-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); }
.book{ display:flex; gap:2.2rem; align-items:flex-start; }
.book-cover{ flex:0 0 168px; border-radius:2px; box-shadow:0 24px 50px -24px rgba(0,0,0,.5); overflow:hidden; transition:transform .6s var(--ease); background:var(--panel); }
.book-cover img{ width:100%; height:auto; }
.book:hover .book-cover{ transform:translateY(-8px) rotate(-1.4deg); }
.book-info h3{ font-size:1.7rem; }
.book-info .by{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive); margin:.5rem 0 .9rem; }
.book-info p{ color:var(--ink-soft); font-size:.98rem; margin:0 0 1.2rem; max-width:38ch; }
@media(max-width:520px){ .books-grid{ grid-template-columns:1fr; } .book{ flex-direction:column; } .book-cover{ flex-basis:auto; max-width:200px; } }

/* ---- card grid (events, interviews) ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(1.6rem,3vw,2.4rem); }
.card{ display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--bg); transition:transform .5s var(--ease),border-color .5s; }
.card:hover{ transform:translateY(-6px); border-color:var(--olive); }
.card .card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--panel); }
.cards--square .card-media{ aspect-ratio:1/1; }
.card .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-media img{ transform:scale(1.05); }
.card .card-body{ padding:1.5rem 1.5rem 1.8rem; }
.card .k{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); }
.card h3{ font-size:1.4rem; margin:.7rem 0 .5rem; line-height:1.15; }
.card p{ color:var(--ink-soft); font-size:.92rem; }

/* ---- events list ---- */
.event{ display:grid; grid-template-columns:auto 1fr auto; gap:2.2rem; align-items:center; padding:2.2rem 0; border-top:1px solid var(--line); }
.event:last-child{ border-bottom:1px solid var(--line); }
.event .when{ font-family:var(--serif); font-size:1.3rem; color:var(--olive-dk); min-width:8ch; }
.event .what h3{ font-size:1.5rem; }
.event .what p{ color:var(--ink-soft); font-size:.95rem; margin-top:.3rem; }
@media(max-width:680px){ .event{ grid-template-columns:1fr; gap:.6rem; } }

/* ---- stay / newsletter ---- */
.form{ display:flex; gap:.8rem; max-width:460px; margin:2.6rem auto 0; flex-wrap:wrap; justify-content:center; }
.form input{ flex:1 1 240px; background:transparent; border:none; border-bottom:1px solid color-mix(in srgb,var(--stay-text) 35%,transparent); color:var(--stay-text); font-family:var(--sans); font-size:1rem; padding:.9rem .4rem; outline:none; transition:border-color .4s; }
.form input::placeholder{ color:color-mix(in srgb,var(--stay-text) 40%,transparent); }
.form input:focus{ border-color:var(--olive); }
.form button{ background:var(--stay-text); color:var(--stay-bg); border:none; border-radius:100px; padding:.95em 2rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .4s,color .4s; }
.form button:hover{ background:var(--olive); color:#fff; }
.form-note{ margin-top:1rem; font-size:.8rem; color:var(--sand); min-height:1.2em; letter-spacing:.05em; }
.substack-embed{ display:flex; justify-content:center; margin:2.6rem auto 0; max-width:480px; }
.substack-embed iframe{ width:100%; max-width:480px; }
.sub-line{ margin-top:1.8rem; font-size:.82rem; }
.sub-line a{ color:var(--sand); }

/* ---- contact / booking ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.note-card{ border:1px solid var(--line); border-radius:3px; padding:2.2rem; }
.note-card h3{ font-size:1.5rem; margin-bottom:.8rem; }
.note-card p{ color:var(--ink-soft); font-size:.98rem; margin-bottom:1rem; }
.who-list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; margin:1.6rem 0; }
.who-list li{ display:flex; gap:1rem; align-items:flex-start; color:var(--ink-soft); }
.who-list li::before{ content:""; flex:0 0 8px; height:8px; margin-top:.55em; border-radius:50%; background:var(--olive); }
@media(max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---- price tiers ---- */
.price-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem; max-width:56rem; }
.price-tiers .tier{ border:1px solid var(--line); border-radius:3px; padding:1.7rem 1.4rem; text-align:center; transition:border-color .4s var(--ease); display:flex; flex-direction:column; }
.price-tiers .tier.is-suggested{ border-color:var(--olive); position:relative; }
.price-tiers .tier-badge{ position:absolute; top:-.7em; left:50%; transform:translateX(-50%); background:var(--bg); padding:0 .8em; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olive-dk); white-space:nowrap; }
.price-tiers .amount{ display:block; font-family:var(--serif); font-size:2.1rem; color:var(--ink); line-height:1; }
.price-tiers .label{ display:block; margin-top:.6rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-dk); }
.price-tiers p{ margin-top:.9rem; font-size:.86rem; color:var(--ink-soft); line-height:1.5; flex:1 0 auto; }
.price-tiers .tier-btn{ align-self:center; margin-top:1.4rem; font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:1px solid var(--ink); border-radius:100px; padding:.75em 1.7em; cursor:pointer; transition:background .4s var(--ease),color .4s,border-color .4s; }
.price-tiers .tier-btn:hover{ background:var(--ink); color:var(--bg); }
.price-tiers .tier.is-suggested .tier-btn{ background:var(--olive-dk); border-color:var(--olive-dk); color:#fff; }
.price-tiers .tier.is-suggested .tier-btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
@media(max-width:760px){ .price-tiers{ grid-template-columns:1fr; } }

/* ---- final cta ---- */
.final{ text-align:center; }
.final h2{ max-width:16ch; margin:0 auto; }
.final p{ color:var(--ink-soft); margin:1.8rem auto 2.6rem; max-width:42ch; }
.final .humour{ margin-top:3.5rem; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--olive-dk); }
.micro{ font-size:.82rem; color:var(--olive); letter-spacing:.02em; margin-top:1.2rem; }

/* ---- footer ---- */
footer.site{ background:var(--panel); border-top:1px solid var(--line); padding:clamp(4rem,8vw,7rem) var(--gutter) 2.4rem; }
.foot-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.foot-brand .foot-mark{ display:block; width:76px; height:76px; border-radius:50%; margin:0 0 1.5rem; }
.foot-brand .brand{ font-size:1.5rem; }
.foot-brand p{ color:var(--ink-soft); font-size:.92rem; margin-top:1.4rem; max-width:30ch; }
.foot-col h4{ font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive-dk); margin-bottom:1.3rem; }
.foot-col a{ display:block; color:var(--ink); text-decoration:none; font-size:.95rem; margin-bottom:.7rem; opacity:.82; transition:opacity .3s, padding-left .3s var(--ease); width:fit-content; }
.foot-col a:hover{ opacity:1; padding-left:.4rem; }
.foot-bottom{ max-width:var(--maxw); margin:3.5rem auto 0; padding-top:1.8rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.76rem; color:var(--ink-soft); letter-spacing:.04em; }
@media(max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }

/* ---- theme toggle ---- */

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .word{ transform:none !important; } .fade-up{ opacity:1 !important; transform:none !important; }
  .img-mask img{ transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- accessibility (design pass 2026-09-08) ---- */
/* Visible keyboard focus, in the brand blue — mouse users are unaffected. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--olive); outline-offset:3px; border-radius:2px;
}
/* On the dark overlay menu the ring needs to be light to be seen. */
.overlay a:focus-visible, .overlay button:focus-visible{ outline-color:#eef3f9; }

/* Skip-to-content link, hidden until focused by keyboard. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:#fff; padding:.75rem 1.2rem;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; }
.skip-link:focus{ left:0; }

/* ---- The Call of the Soul: 21 lessons ---- */
.cots-list{ display:flex; flex-direction:column; gap:clamp(3rem,6vw,5rem); }
.cots-day{ border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem); scroll-margin-top:120px; }
.cots-head{ display:flex; align-items:baseline; gap:1.1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.cots-num{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); white-space:nowrap; }
.cots-head h3{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; margin:0; }
.cots-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:2px; overflow:hidden; background:var(--panel); margin-bottom:1.8rem; }
.cots-video img{ width:100%; height:100%; object-fit:cover; }
.cots-play{ position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.cots-play span{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.85); border:1px solid rgba(8,62,115,.18); box-shadow:0 10px 30px -12px rgba(8,62,115,.45); transition:transform .4s var(--ease); padding-left:4px; }
.cots-play:hover span{ transform:scale(1.08); }
.cots-day p{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 1.2rem; }
.cots-audio{ margin-top:1.8rem; display:flex; flex-direction:column; gap:1rem; }
.cots-track{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:.9rem 1.1rem; }
.cots-track-label{ font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-dk); min-width:9ch; }
.cots-track audio{ flex:1 1 260px; min-width:0; height:36px; }
@media(max-width:520px){ .cots-track{ flex-direction:column; align-items:stretch; gap:.6rem; } .cots-track audio{ width:100%; } }
.cots-map{ margin:2rem 0 0; }
.cots-map img{ width:100%; height:auto; border-radius:3px; border:1px solid var(--line); display:block; }
.cots-map figcaption{ margin-top:.8rem; font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive-dk); text-align:center; }
.cots-day ul{ margin:0 0 1.4rem; padding-left:1.2rem; }
.cots-day li{ color:var(--ink-soft); font-size:1.02rem; margin-bottom:.6rem; }
.cots-day li strong{ color:var(--ink); font-weight:500; }

/* ---- question accordion (Speaking) ---- */
.qa-list{ max-width:860px; margin:0 auto; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa > summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:baseline; gap:1.3rem;
  padding:1.75rem 3rem 1.75rem 0;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary:focus-visible{ outline:2px solid var(--olive); outline-offset:4px; }
.qa-k{
  flex:0 0 8.5rem; font-family:var(--sans); font-weight:400; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--olive);
}
.qa-q{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.25rem,2.2vw,1.62rem); line-height:1.2;
  letter-spacing:-.005em; color:var(--ink);
  transition:color .4s var(--ease);
}
.qa > summary:hover .qa-q{ color:var(--olive-dk); }
.qa > summary::after{
  content:""; position:absolute; right:.5rem; top:2.05rem;
  width:9px; height:9px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:rotate(45deg); transition:transform .45s var(--ease);
}
.qa[open] > summary::after{ transform:rotate(-135deg); }
.qa-a{ padding:0 3rem 2rem 9.8rem; }
.qa-a p{ margin:0 0 1.05em; max-width:62ch; color:var(--ink-soft); font-size:1.02rem; line-height:1.75; }
.qa-a p:last-child{ margin-bottom:0; }
.qa-a h4{ margin:1.8rem 0 .7rem; font-family:var(--serif); font-weight:400; font-size:1.18rem; line-height:1.25; color:var(--ink); }
.qa-a > h4:first-child{ margin-top:0; }
.qa[open] .qa-a{ animation:qaIn .45s var(--ease) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
@media(max-width:700px){
  .qa > summary{ flex-direction:column; align-items:flex-start; gap:.55rem; padding:1.5rem 2.4rem 1.5rem 0; }
  .qa-k{ flex:0 0 auto; }
  .qa-a{ padding:0 1rem 1.6rem 0; }
  .qa > summary::after{ top:1.75rem; right:.2rem; }
}
@media(prefers-reduced-motion:reduce){
  .qa[open] .qa-a{ animation:none; }
  .qa > summary::after, .qa-q{ transition:none; }
}

/* ---- the one-time subscribe invitation ---- */
.a2a-sub{ position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center; padding:var(--gutter); }
.a2a-sub[hidden]{ display:none; }
.a2a-sub-backdrop{ position:absolute; inset:0; background:rgba(8,62,115,.42); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s var(--ease); }
.a2a-sub.is-open .a2a-sub-backdrop{ opacity:1; }
.a2a-sub-card{
  position:relative; z-index:1; width:min(30rem,100%); max-height:88svh; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.8rem,4vw,2.8rem); text-align:center;
  box-shadow:0 30px 80px rgba(8,62,115,.16);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.a2a-sub.is-open .a2a-sub-card{ opacity:1; transform:none; }
.a2a-sub-card:focus{ outline:none; }
.a2a-sub-x{
  position:absolute; top:.6rem; right:.9rem; background:none; border:0; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--ink-soft); padding:.2em .3em;
  transition:color .3s var(--ease);
}
.a2a-sub-x:hover{ color:var(--ink); }
.a2a-sub-eyebrow{
  font-family:var(--sans); font-size:.62rem; font-weight:400; letter-spacing:.34em;
  text-transform:uppercase; color:var(--olive); margin:0 0 1.1rem;
}
.a2a-sub-title{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,4vw,2.2rem);
  line-height:1.1; letter-spacing:-.005em; color:var(--ink); margin:0;
}
.a2a-sub-lead{
  font-family:var(--sans); font-size:.95rem; line-height:1.7; color:var(--ink-soft);
  margin:1.1rem auto 0; max-width:34ch;
}
.a2a-sub-embed{ margin:1.6rem 0 .4rem; }
.a2a-sub-embed iframe{ width:100%; height:150px; border:1px solid var(--line); border-radius:3px; background:#fff; display:block; }
.a2a-sub-no{
  background:none; border:0; cursor:pointer; padding:.4em;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s var(--ease);
}
.a2a-sub-no:hover{ color:var(--ink); }
@media(max-width:560px){
  .a2a-sub-card{ padding:1.6rem 1.2rem 1.2rem; }
  .a2a-sub-lead{ font-size:.9rem; }
}
@media(prefers-reduced-motion:reduce){
  .a2a-sub-backdrop, .a2a-sub-card{ transition:none; }
  .a2a-sub-card{ transform:none; }
}

/* ---- "that's 5pm where you are" ---- */
.a2a-localtime{
  display:block; margin-top:.5rem;
  font-family:var(--sans); font-style:italic; font-size:.86rem;
  line-height:1.5; color:var(--olive);
}

/* ---- WordPress's admin toolbar sits above everything when signed in ----
   The header and progress bar are fixed to the top, so without this they
   hide underneath it. Only affects signed-in people; visitors never see it. */
body.admin-bar header.site{ top:32px; }
body.admin-bar .progress{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar header.site{ top:46px; }
  body.admin-bar .progress{ top:46px; }
}

/* ---- how a visitor joins a group ---- */
.a2a-join-note{
  margin:0 0 2rem; padding:1rem 1.3rem;
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  font-family:var(--sans); font-size:.92rem; line-height:1.65; color:var(--ink-soft);
}
.a2a-join-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ---- the "Scroll" cue: removed, September 2026 ----
   A page obviously scrolls; the prompt said nothing. Hidden rather than
   deleted because the markup lives in the home page content. */
.scrollcue{ display:none; }

/* ---- the three reasons to book a call (contact page) ---- */
.note-card ol.reasons{ margin:0 0 1.2rem; padding-left:1.4rem; }
.note-card ol.reasons li{ color:var(--ink-soft); font-size:.98rem; line-height:1.7; margin-bottom:.75rem; }
.note-card ol.reasons li:last-child{ margin-bottom:0; }
.note-card ol.reasons li::marker{ color:var(--olive); }

/* ---- contents list beside the lessons (Call of the Soul) ---- */
.a2a-portal-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.4rem; }
.a2a-toc-head{ font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--olive); margin:0 0 .9rem; }
.a2a-toc-list{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.a2a-toc-list li{ margin:0; }
.a2a-toc-list a{ display:flex; gap:.7rem; align-items:baseline; padding:.5rem 0 .5rem 1rem; margin-left:-1px; border-left:1px solid transparent; text-decoration:none; color:var(--ink-soft); font-family:var(--sans); font-size:.86rem; line-height:1.45; transition:color .3s var(--ease), border-color .3s var(--ease); }
.a2a-toc-list a:hover{ color:var(--ink); }
.a2a-toc-list a.is-here{ color:var(--ink); border-left-color:var(--olive); }
.a2a-toc-n{ flex:0 0 auto; font-size:.7rem; letter-spacing:.1em; color:var(--olive); }
.a2a-resume{ margin:0 0 1rem; font-family:var(--sans); font-size:.8rem; }
.a2a-resume a{ color:var(--olive-dk); }
.cots-day{ scroll-margin-top:7rem; }
@media(min-width:960px){
  .a2a-portal-grid{ grid-template-columns:15rem minmax(0,1fr); gap:3.4rem; align-items:start; }
  .a2a-toc{ position:sticky; top:7rem; max-height:calc(100svh - 9rem); overflow:auto; }
}

@media(min-width:960px){ .a2a-wide{ max-width:1120px; } }

/* ---- the way back into your course, from any page ---- */
.nav-portal{
  font-family:var(--sans); font-weight:400; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap;
  border:1px solid var(--line); border-radius:100px; padding:.6em 1.15em; line-height:1;
  transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.nav-portal:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
@media(max-width:520px){
  .nav-portal{ font-size:.62rem; padding:.55em .85em; letter-spacing:.1em; }
  .nav-right{ gap:.9rem; }
}

/* ---- testimonial ribbon ---- */
.treel{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.treel::-webkit-scrollbar{ display:none; }
.treel-track{ display:flex; gap:1.6rem; width:max-content; animation:treel 90s linear infinite; }
.treel:hover .treel-track,
.treel:focus-within .treel-track{ animation-play-state:paused; }
@keyframes treel{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.tcard{ flex:0 0 clamp(17rem,27vw,22rem); margin:0; padding:1.9rem 1.8rem;
        border:1px solid var(--line); border-radius:2px; background:var(--panel);
        display:flex; flex-direction:column; gap:1.1rem; }
.tcard blockquote{ margin:0; font-family:var(--serif); font-size:1.02rem; line-height:1.62;
                   color:var(--ink); white-space:normal; }
.tcard figcaption{ margin-top:auto; font-size:.74rem; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--olive-dk); }
.tcard figcaption span{ display:block; margin-top:.3rem; letter-spacing:.04em;
                        text-transform:none; opacity:.72; }

/* With motion switched off the track must still be readable, so it becomes
   an ordinary horizontal scroller the reader moves themselves. */
@media (prefers-reduced-motion:reduce){
  .treel-track{ animation:none !important; width:auto; }
  .treel{ scroll-snap-type:x mandatory; }
  .tcard{ scroll-snap-align:start; }
}

/* A testimonial of several paragraphs: the centred display size is too heavy to
   read at length, so it steps down and sets ranged left inside the same column. */
.testimonial--long blockquote{ font-size:clamp(1rem,1.35vw,1.14rem); line-height:1.68;
                               text-align:left; max-width:58ch; }
.testimonial--long blockquote p{ margin:0; }
.testimonial--long blockquote p + p{ margin-top:1.05rem; }

/* ---- session dates: the ten Saturdays of a live course ---- */
.session-dates{ list-style:none; margin:0; padding:0;
                display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2.6rem; }
.session-dates li{ display:flex; gap:1rem; align-items:baseline; font-size:1.02rem;
                   padding:.78rem 0; border-bottom:1px solid var(--line); }
.session-dates li .n{ font-family:var(--serif); font-size:.92rem; color:var(--olive-dk); }
.dates-note{ margin-top:1.8rem; font-size:.74rem; letter-spacing:.16em;
             text-transform:uppercase; color:var(--olive-dk); }
@media (max-width:640px){ .session-dates{ grid-template-columns:1fr; } }

/* the benefits list sets its own bullets, so drop the browser indent */
.who-list{ padding:0; }

/* ---- a group's Zoom and recording links, as buttons ----
   BuddyPress strips a class attribute from a group description, so these are
   matched on the address instead. Same pill as the other BuddyPress buttons. */
#buddypress .group-description a[href*="zoom.us"],
#buddypress .group-description a[href*="youtube.com"],
#buddypress .group-description a[href*="youtu.be"],
#buddypress #item-header-content a[href*="zoom.us"],
#buddypress #item-header-content a[href*="youtube.com"],
#buddypress #item-header-content a[href*="youtu.be"]{
	display:inline-flex; align-items:center; justify-content:center;
	font-family:var(--sans); font-weight:400; font-size:.75rem;
	letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
	color:var(--bg); background:var(--ink); border:1px solid var(--ink);
	border-radius:100px; padding:.95em 2em; margin:.4rem .6rem .4rem 0;
	transition:background .45s var(--ease), color .45s var(--ease);
}
#buddypress .group-description a[href*="zoom.us"]:hover,
#buddypress .group-description a[href*="youtube.com"]:hover,
#buddypress .group-description a[href*="youtu.be"]:hover,
#buddypress #item-header-content a[href*="zoom.us"]:hover,
#buddypress #item-header-content a[href*="youtube.com"]:hover,
#buddypress #item-header-content a[href*="youtu.be"]:hover{
	background:transparent; color:var(--ink);
}

/* ---- "keep this on your phone": shown only on a phone, only once ---- */
.a2a-a2hs{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:9000;
           background:var(--bg); border:1px solid var(--line); border-radius:4px;
           padding:1.35rem 1.5rem 1.45rem; box-shadow:0 18px 50px -22px rgba(8,62,115,.45);
           opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.a2a-a2hs.is-in{ opacity:1; transform:none; }
.a2a-a2hs-t{ margin:0 0 .5rem; font-family:var(--serif); font-size:1.12rem; color:var(--ink); }
.a2a-a2hs-b{ margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
.a2a-a2hs-b strong{ color:var(--ink); font-weight:500; }
.a2a-a2hs-go{ margin-top:1.1rem; display:inline-flex; align-items:center; justify-content:center;
              font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
              color:var(--bg); background:var(--ink); border:1px solid var(--ink); border-radius:100px;
              padding:.9em 1.9em; cursor:pointer; }
.a2a-a2hs-x{ position:absolute; top:.5rem; right:.6rem; width:2rem; height:2rem; line-height:1;
             font-size:1.3rem; color:var(--ink-soft); background:none; border:0; cursor:pointer; }
@media (min-width:821px){ .a2a-a2hs{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .a2a-a2hs{ transition:none; } }

/* ---- groups on the course dashboard ---- */
.a2a-groups{ margin-top:1rem; }
.a2a-group-row{ padding:1.4rem 0; border-top:1px solid var(--line); }
.a2a-group-row h2{ margin:0 0 .9rem; }
.a2a-group-row p{ margin:0; }

/* ============================================================
   GROUPS — the teacher's own posts, and a quiet stream
   Added 2026-10-09.
   ============================================================ */

/* Sophie's own posts are tinted #d7dbe4 - the colour of the wall in her
   staircase photograph, sampled from the image rather than chosen, so that in
   the Live group the banner and her posts are visibly the same thing. Used in
   every group for consistency. Everyone else's posts stay white.

   In every group, and anywhere else an activity list is shown. The extra
   class alone outranks the Customizer block, which is emitted later in the
   <head> and paints every activity item var(--bg) - four parts against its
   three. See the a2a-buddypress-css-in-customizer note. */
#buddypress .activity-list .activity-item.a2a-from-teacher {
	background: #d7dbe4;
	border-color: rgba( 8, 62, 115, .22 );
}

/* "So-and-so joined the group" says nothing anyone needs. New ones are no
   longer recorded at all (inc/group-tidy.php); these hide the ones already
   written, in every group, without deleting them. */
#buddypress .activity-list .activity-item.joined_group,
#buddypress .activity-list .activity-item.created_group,
#buddypress .activity-list .activity-item.new_member {
	display: none;
}

/* ============================================================
   THE WAY BACK, AND THE SECOND DOOR
   Added 2026-10-10.
   ============================================================ */

/* Two doors, one shape.

   "Create an account" and "Sign in" are the same pill, so neither reads as
   the lesser option - and the same once signed in, where "My courses" and
   "Sign out" match each other. */
.nav-portal + .nav-portal{ margin-left:.45rem; }

/* On a phone the header cannot hold the logo, the language switch, the Menu
   button AND two pills; it squashes, and only the first one fits. So the
   pills step aside below 900px and the Menu panel carries them instead,
   where there is room for both at full size. */
@media (max-width:900px){
	.site .nav-portal{ display:none; }
}

/* ...which is where they become buttons, side by side. */
.overlay-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.7rem 0 1.9rem; }
.overlay-cta .nav-portal{ display:inline-block; margin-left:0; font-size:.68rem; padding:.75em 1.2em; }

/* The panel is dark, and the pill's own border is a 16%-opacity navy that
   vanishes against it - the buttons read as bare text. Light them instead. */
.overlay .overlay-cta .nav-portal{ border-color:rgba(255,255,255,.4); color:#fff; }
.overlay .overlay-cta .nav-portal:hover{ background:#fff; border-color:#fff; color:var(--ink); }



/* The Go back link. Sits in the page's own gutter rather than floating, so it
   never covers anything - the add-to-home card already taught us what a fixed
   element does to a form. Hidden by the `hidden` attribute until the script
   finds a same-site page to return to. */
/* The link sits in the flow, carrying the clearance that the first section
   used to carry, and that section gives the same amount back.

   Two earlier attempts and what each got wrong:
     - In flow with no clearance, it landed UNDER header.site (position:fixed,
       z-index:1000): it overlapped the menu, and the header swallowed the
       click, so on a desktop the link did nothing.
     - Taken out of flow and placed in the first section's top padding, it
       cleared the header but collided with the page text wherever that
       padding is smaller - the portal and the sign-up form both start higher
       than the rest of the site, and at narrower widths every page does.

   So: real space in the document, no overlap possible, and no extra height
   added overall, because the section below drops its own top padding to
   match. The two shapes are all the site has - .page-hero on the ordinary
   pages, .pad on the BuddyPress ones. */
.a2a-back-wrap{
	position:relative; z-index:5;
	max-width:var(--maxw); margin:0 auto;
	padding:clamp(7rem,15vh,10rem) var(--gutter) 0;
}
.a2a-back-wrap + .page-hero{ padding-top:clamp(1.6rem,3vw,2.6rem); }
.a2a-back-wrap + .pad{ padding-top:clamp(1.6rem,3vw,2.6rem); }

.a2a-back{
	display:inline-block; font-family:var(--sans); font-size:.7rem; letter-spacing:.14em;
	text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
	border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.a2a-back:hover{ color:var(--ink); border-bottom-color:currentColor; }
.a2a-back[hidden]{ display:none; }

/* ============================================================
   POSTING A FILE TO A GROUP   (inc/group-attach.php)
   Added 2026-10-15.
   ============================================================ */

.a2a-attach{
	border:1px solid var(--line); border-radius:3px; background:var(--bg);
	padding:clamp(1.1rem,2.5vw,1.5rem); margin:0 0 1.8rem;
}
.a2a-attach textarea{
	width:100%; box-sizing:border-box; background:transparent;
	border:1px solid var(--line); border-radius:3px; color:var(--ink);
	font-family:var(--sans); font-weight:300; font-size:1rem; line-height:1.6;
	padding:.8rem .9rem; resize:vertical; outline:none; transition:border-color .4s var(--ease);
}
.a2a-attach textarea:focus{ border-color:var(--olive); }

.a2a-attach-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:.9rem; }

/* The real file input is hidden and the label is the button, because browsers
   will not let the native one be styled. */
.a2a-attach-file input[type=file]{ position:absolute; left:-9999px; }
.a2a-attach-file span{
	display:inline-block; cursor:pointer;
	font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--ink); border:1px solid var(--line); border-radius:100px; padding:.6em 1.15em;
	transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.a2a-attach-file span:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.a2a-attach-file input[type=file]:focus-visible + span{ border-color:var(--olive); }

.a2a-attach-name{ font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); }

.a2a-attach-go{
	margin-left:auto; cursor:pointer;
	font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--bg); background:var(--ink); border:1px solid var(--ink); border-radius:100px;
	padding:.65em 1.5em; transition:background .45s var(--ease), border-color .45s var(--ease);
}
.a2a-attach-go:hover{ background:var(--olive-dk); border-color:var(--olive-dk); }

.a2a-attach-hint{ margin:.9rem 0 0; font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); }
.a2a-attach-note{
	margin:0 0 .9rem; padding:.7rem .9rem; border-radius:3px;
	background:var(--stay-bg); color:var(--ink); font-family:var(--sans); font-size:.9rem;
}

/* What the post then looks like.

   BuddyPress strips `class` from activity content, so neither the picture nor
   the file link can carry one - they are matched by what they are and by
   where they point. Same reason the Zoom links in a group description are
   matched on their href. */
#buddypress .activity-inner img,
#buddypress .activity-content img{
	max-width:100%; height:auto; border-radius:3px; margin-top:.9rem; display:block;
}
#buddypress .activity-inner a[href*="/wp-content/uploads/"]{
	display:inline-block; margin-top:.9rem;
	font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
	color:var(--ink); text-decoration:none;
	border:1px solid var(--line); border-radius:100px; padding:.6em 1.2em;
	transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
#buddypress .activity-inner a[href*="/wp-content/uploads/"]:hover{
	border-color:var(--ink); background:var(--ink); color:var(--bg);
}

/* Editing a post (inc/group-attach.php). The Edit link sits beside
   BuddyPress's own Delete, so it borrows that button's quiet treatment. */
.a2a-edit-link{ margin-right:.4rem; }
.a2a-attach-editing{ border-color:rgba(8,62,115,.3); }
.a2a-attach-cancel{
	font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent;
}
.a2a-attach-cancel:hover{ color:var(--ink); border-bottom-color:currentColor; }