/* ============================================================
   ReAlliance Foundation · shared shell
   Everything the inner pages have in common: tokens, base type,
   the topbar, the footer, buttons, bands and reveals, plus the
   handful of components the inner pages add.

   The homepage keeps its own inline copy of the tokens and chrome.
   That is deliberate. Its layout depends on measured scroll maths
   (the pinned rail, the sticky deck, the orb) that took a long time
   to get right, and pulling its CSS out from under it to save a
   duplicated token block is not a trade worth making. This file and
   the homepage's :root block must stay in step by hand. If a token
   changes, change it in both.

   No em dashes anywhere.
   ============================================================ */
:root{
  --ivory:#F7F4E9;
  --forest:#1E322B;
  --terra:#C96E47;   /* THE orange. One value, every surface. Never for small text. */
  --terraDeep:#C96E47;
  --terraBright:#C96E47;
  --glass:rgba(0,0,0,.1);
  --glassLit:rgba(0,0,0,.2);
  --terraPale:#F7F2EA;
  --pad:clamp(22px,3.4vw,70px);
  --maxw:1280px;
  --fs-lead:clamp(16px,1.25vw,17.5px);
  --fs-body:clamp(15px,1.1vw,16px);
  --fs-card:clamp(14.5px,1.02vw,15.5px);
  --fs-small:13.5px;
  --fs-label:11.5px;
  --ls-label:.16em;
  --fs-serial:13.5px;
  --fs-cardtitle:clamp(19px,1.7vw,22px);
  --fs-action:15px;
  --fs-action-sm:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--ivory);color:var(--forest);line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* a component that sets its own display beats the UA rule for [hidden], so
   the attribute has to be made to win once, here. */
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--ivory);
  padding:12px 20px;border-radius:0 0 10px 0;z-index:99;font-weight:600;font-size:15px}
.skip:focus{left:0}

h1{font-family:Gloock,Georgia,serif;font-weight:400;font-size:clamp(34px,4.6vw,52px);
  line-height:1.04;letter-spacing:-.014em}
h2{font-family:Gloock,Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,38px);
  line-height:1.08;letter-spacing:-.012em}
h3{font-family:Gloock,Georgia,serif;font-weight:400;font-size:clamp(20px,2vw,25px);line-height:1.16}
h4{font-family:Gloock,Georgia,serif;font-weight:400;font-size:var(--fs-cardtitle);line-height:1.2}
p{font-weight:300;font-size:var(--fs-body);line-height:1.58}
.lead{font-size:var(--fs-lead);line-height:1.52}
.label{font-family:'Nunito Sans',sans-serif;font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:700;line-height:1.3}
.serial{font-family:Gloock,Georgia,serif;font-weight:400;font-size:var(--fs-serial);
  line-height:1;letter-spacing:.02em}
.prose{max-width:36em}
.prose p+p{margin-top:14px}

.band{position:relative;padding-block:clamp(52px,6.4vw,92px)}
.band.tight{padding-block:clamp(40px,4.8vw,68px)}
/* ---------- ONE gradient under the whole page ----------
   The light bands used to carry their own blurred glows, and every glow
   stopped dead at the band's edge, so the page read as a stack of separate
   boxes. Now there is one fixed layer behind everything: three soft bodies
   of colour (two terracotta, one drawn from the forest green) that drift
   slowly as the page scrolls. Light bands are translucent tints over it, so
   the colour rolls through them uninterrupted; dark bands are flat forest,
   so the dark band and the footer meet with no seam.
   NOTE: never put overflow:hidden on .band. It disables position:sticky. */
.pagelight{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pagelight i{position:absolute;display:block;border-radius:50%;filter:blur(90px);
  will-change:transform}
/* --k is how fast each body drifts against the scroll, set in the markup and
   read by shell.js; a body with a larger k sits nearer the reader */
.pagelight i{width:var(--s);height:var(--s)}
.pagelight .l1{--s:max(60vw,62vh);right:-16vw;top:-24vh;background:#EBCDBB;opacity:.6}
.pagelight .l2{--s:max(52vw,56vh);left:-18vw;top:34vh;background:#F0DFD0;opacity:.72}
.pagelight .l3{--s:max(56vw,60vh);right:-12vw;top:112vh;background:#E9D3C3;opacity:.5}
.pagelight .l4{--s:max(44vw,48vh);left:4vw;top:186vh;background:#EEDACB;opacity:.62}
.pagelight .l5{--s:max(50vw,54vh);right:-10vw;top:262vh;background:#EACFBE;opacity:.48}
/* z-index:-1 puts the layer above the canvas background and below every
   in-flow block without giving header or main a stacking context, which
   would trap the fixed mobile nav (inside the header) under main. */
.band>.wrap{position:relative;z-index:2}
/* the glow layers the pages used to carry are gone; the rule stays so an
   old page that still has one shows nothing rather than a second glow */
.glowlayer{display:none}
.ivory{background:transparent}
/* the tints fade in and out over their first and last hundred pixels, so a
   light band is a soft zone in the same surface rather than a box with an
   edge. The dark bands keep their edge: that is what makes them bands. */
.pale{background:linear-gradient(180deg,rgba(201,110,71,0) 0,rgba(201,110,71,.06) 110px,
  rgba(201,110,71,.06) calc(100% - 110px),rgba(201,110,71,0) 100%)}
.sage{background:linear-gradient(180deg,rgba(30,50,43,0) 0,rgba(30,50,43,.07) 110px,
  rgba(30,50,43,.07) calc(100% - 110px),rgba(30,50,43,0) 100%)}
.dark{background:var(--forest);color:var(--ivory)}
.dark h2,.dark h3,.dark h4{color:var(--ivory)}
/* the green bands carry their own light: a lifted forest, never orange. The
   glow sits well inside the band and is flat forest at every edge, so two
   dark surfaces meeting (a band and the footer) show no seam. */
.dark.lit::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 72% 34%,rgba(120,150,130,.24),rgba(120,150,130,0) 70%),
             radial-gradient(ellipse 42% 36% at 22% 66%,rgba(96,128,110,.2),rgba(96,128,110,0) 70%)}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;border-radius:999px;padding:15px 30px;
  font-family:inherit;font-size:var(--fs-action);font-weight:600;line-height:1;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,color .28s,border-color .28s,box-shadow .28s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--terraBright);outline-offset:3px}
.b1s{background:var(--forest);color:var(--ivory)}
.b1s:hover{box-shadow:0 12px 28px rgba(30,50,43,.3)}
.b2s{border-color:var(--forest);color:var(--forest)}
.b2s:hover{background:var(--forest);color:var(--ivory)}
.dark .b1s{background:var(--terraBright);color:var(--forest)}
.dark .b2s{border-color:rgba(247,244,233,.55);color:var(--ivory)}
.dark .b2s:hover{background:var(--ivory);color:var(--forest);border-color:var(--ivory)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.alink{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:var(--fs-action);
  border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:gap .3s;color:var(--forest)}
.alink:hover{gap:.9em}
.dark .alink{color:var(--ivory)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:26px;padding-inline:var(--pad);max-width:var(--maxw);margin:0 auto;width:100%}
.logo{display:inline-flex;flex-direction:column;align-items:center;
  gap:clamp(5px,.6vw,8px);line-height:1;white-space:nowrap;border-radius:14px;
  padding:clamp(12px,1.15vw,16px) clamp(20px,1.9vw,28px);
  background:rgba(247,244,233,.34);border:1px solid rgba(30,50,43,.2);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.logo .wm{font-family:'Nunito Sans',sans-serif;font-weight:400;
  font-size:clamp(15px,1.5vw,21px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--forest);text-indent:.34em}
.logo .fdn{font-size:clamp(7.5px,.7vw,9.5px);letter-spacing:.46em;text-transform:uppercase;
  font-weight:600;color:var(--forest);opacity:.66;text-indent:.46em}
nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);font-size:var(--fs-action);
  border:1.4px solid rgba(247,244,233,.85);background:rgba(247,244,233,.32);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border-radius:999px;padding:11px 12px 11px 26px;white-space:nowrap}
nav a{position:relative;padding-block:2px}
nav a:not(.join)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
nav a:not(.join):hover::after{transform:scaleX(1)}
/* the page you are on keeps its underline drawn */
nav a[aria-current="page"]::after{transform:scaleX(1)}
nav .join{border:1.4px solid var(--forest);border-radius:999px;padding:8px 18px;font-weight:600;
  font-size:var(--fs-action-sm);margin-left:5px;transition:background .28s,color .28s}
nav .join:hover{background:var(--forest);color:var(--ivory)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px;z-index:22}
.navtoggle span{display:block;width:24px;height:1.8px;background:var(--forest);margin:5px 0;
  transition:transform .3s,opacity .3s}
.navtoggle.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ============================================================
   PAGE HERO
   Shorter than the homepage hero, because on an inner page the
   reader has already chosen. Eyebrow, title, one paragraph.
   ============================================================ */
.phero{position:relative;padding-bottom:clamp(72px,6vw,96px)}
.pheroinner{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;width:100%;
  padding-inline:var(--pad);padding-top:clamp(22px,3.6vw,48px);
  display:grid;gap:clamp(30px,4vw,64px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.phero.solo .pheroinner{grid-template-columns:minmax(0,1fr);max-width:min(var(--maxw),1100px)}
.crumb{display:inline-flex;align-items:center;gap:9px;color:var(--forest);opacity:.72;
  margin-bottom:clamp(12px,1.4vw,16px)}
.crumb a{border-bottom:1px solid transparent;transition:border-color .25s}
.crumb a:hover{border-color:currentColor}
.crumb .sep{opacity:.5}
.phero h1{font-size:clamp(30px,3.6vw,46px);max-width:14em}
.phero .lead{max-width:32em;margin-top:clamp(14px,1.6vw,20px);font-weight:300}
.pheroart{display:flex;justify-content:center;align-items:center;margin-top:clamp(16px,4vw,64px)}

/* ============================================================
   IMAGE CIRCLES
   ============================================================ */
.circ{position:relative;border-radius:50%;overflow:hidden;flex:none;aspect-ratio:1;
  box-shadow:0 22px 54px rgba(90,46,28,.2)}
.circ img{width:100%;height:100%;object-fit:cover}
.circ::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(201,110,71,.45)}
.circwrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.circwrap .ring{position:absolute;border-radius:50%;border:1px solid rgba(201,110,71,.3);
  width:128%;aspect-ratio:1;pointer-events:none}
.circwrap .ring.r2{width:158%;border-color:rgba(201,110,71,.18)}
/* the one size a page-hero circle comes in. Sized in CSS, not inline, so the
   phone can shrink it and keep the outer ring on the screen. */
.circ.lg{width:min(34vw,300px)}
.pheroart .ring{width:122%}
.pheroart .ring.r2{width:146%}
/* a dot rides each ring: the orbit is a full-size box turning about the
   centre, and the dot sits on its top edge */
.pheroart .orbit{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;
  animation:spin 28s linear infinite}
.pheroart .orbit.o1{width:122%}
.pheroart .orbit.o2{width:146%;animation-duration:44s;animation-direction:reverse}
.pheroart .orbit::before{content:"";position:absolute;left:50%;top:0.5px;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--terra)}
.pheroart .orbit.o2::before{width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}
.dark .circ::after{border-color:rgba(201,110,71,.5)}
.dark .circwrap .ring{border-color:rgba(201,110,71,.3)}
.dark .circwrap .ring.r2{border-color:rgba(201,110,71,.16)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--forest);color:var(--ivory);padding-block:clamp(38px,4.4vw,54px)}
.ftop{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
footer .logo{background:rgba(247,244,233,.1);border:1px solid rgba(247,244,233,.22)}
footer .logo .wm,footer .logo .fdn{color:var(--ivory)}
.fmail{font-size:var(--fs-lead);font-weight:300;border-bottom:1px solid rgba(247,244,233,.45);
  padding-bottom:2px;transition:border-color .25s}
.fmail:hover{border-color:var(--terraBright)}
.fnav{margin-top:clamp(26px,3vw,36px);display:flex;flex-wrap:wrap;gap:14px 30px;
  font-size:var(--fs-action);font-weight:300}
.fnav a{opacity:.86;border-bottom:1px solid transparent;transition:border-color .25s,opacity .25s}
.fnav a:hover{opacity:1;border-color:var(--terraBright)}
.fbot{margin-top:clamp(24px,3vw,34px);padding-top:20px;
  border-top:1px solid rgba(247,244,233,.2);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:var(--fs-small);font-weight:300;opacity:.82}
.fbot .lk{display:flex;gap:22px;flex-wrap:wrap}
.fbot a{border-bottom:1px solid transparent;transition:border-color .25s}
.fbot .soon{opacity:.55;cursor:default}
.fbot a:hover{border-color:var(--terraBright)}
.aidisc{margin-top:14px;font-size:var(--fs-small);font-weight:300;opacity:.6;max-width:52em}

/* ============================================================
   REVEALS
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 760ms cubic-bezier(.2,.7,.2,1),transform 760ms cubic-bezier(.2,.75,.2,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:90ms}
.rv[data-d="2"]{transition-delay:180ms}
.rv[data-d="3"]{transition-delay:270ms}
.rv[data-d="4"]{transition-delay:360ms}

/* ---------- layouts that use the whole width ----------
   A heading on the left and the reading column on the right, so a text
   section is not a stripe down one side of an empty page. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:start}
.split h2{max-width:12em}
.split .side{display:flex;flex-direction:column;gap:18px}
.split .prose{max-width:40em}
.centre{text-align:center;margin-inline:auto}
.centre .lead,.centre p,.centre h2{margin-inline:auto}
.centre .btns{justify-content:center}
/* Six items and a button do not fit beside the logo below about 1120px, so
   the menu folds into the toggle earlier than the rest of the layout does. */
@media (max-width:1120px){
  nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:8px;
    border-radius:0;border:0;padding:40px;background:rgba(248,238,231,.98);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:19px;z-index:21;
    opacity:0;pointer-events:none;transform:translateY(-10px);
    transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
  nav.open{opacity:1;pointer-events:auto;transform:none}
  nav a{padding-block:11px}
  nav .join{margin:14px 0 0;font-size:15.5px;padding:12px 28px}
  .navtoggle{display:block}
}
@media (max-width:940px){.split{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */

/* --- the label index, same component as the homepage --- */
.idx{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2vw,22px)}
.ix{display:inline-flex;align-items:baseline;gap:8px;border-radius:999px;
  border:1px solid rgba(247,244,233,.26);background:rgba(0,0,0,.12);
  color:var(--ivory);font-family:inherit;font-size:13.5px;font-weight:600;
  line-height:1;padding:9px 16px;cursor:pointer;white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.ix .ixn{font-family:Gloock,Georgia,serif;font-size:11.5px;font-weight:400;color:var(--terraBright)}
.ix.on{background:var(--ivory);border-color:var(--ivory);color:var(--forest)}
.ix.on .ixn{color:var(--terra)}
.idx.light .ix{border-color:#E7DACE;background:rgba(255,255,255,.72);color:var(--forest)}
.idx.light .ix .ixn{color:var(--terraDeep)}
.idx.light .ix.on{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.idx.light .ix.on .ixn{color:var(--terra)}

/* --- the expanding entry: seven of them on the agenda page, six on how it works.
   details/summary so it works with no JS and reads correctly to a screen reader.
   The panel animates on grid-template-rows, which is the only way to get a
   transition out of a height the content decides. --- */
.ent{border-top:1px solid rgba(30,50,43,.16);scroll-margin-top:24px}
.ent:last-of-type{border-bottom:1px solid rgba(30,50,43,.16)}
.dark .ent{border-color:rgba(247,244,233,.2)}
.ent>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
  gap:clamp(14px,1.8vw,24px);padding-block:clamp(16px,1.9vw,22px)}
.ent>summary::-webkit-details-marker{display:none}
.ent>summary:focus-visible{outline:2px solid var(--terraBright);outline-offset:4px;border-radius:8px}
/* the number column and the body indent share one width in pixels, not in
   em: the number and the body run at different font sizes, so an em width on
   each put the body text a few pixels off the title. */
.ent{--numw:clamp(38px,3vw,46px)}
.ent .en{font-family:Gloock,Georgia,serif;font-weight:400;
  font-size:clamp(18px,1.7vw,22px);line-height:1;color:var(--terraDeep);
  padding-top:.18em;font-variant-numeric:tabular-nums;min-width:var(--numw)}
.dark .ent .en{color:var(--terraBright)}
.ent .etitle{display:block;min-width:0}
.ent .eh{display:block;font-family:Gloock,Georgia,serif;font-weight:400;
  font-size:clamp(19px,1.7vw,22px);line-height:1.18;letter-spacing:-.008em}
.ent .esub{display:block;margin-top:6px;font-size:var(--fs-card);font-weight:300;
  line-height:1.5;opacity:.8;max-width:44em}
.ent .plus{position:relative;width:24px;height:24px;flex:none;margin-top:.2em;
  border-radius:50%;color:var(--terra);border:1.4px solid var(--terra);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.dark .ent .plus{color:var(--terraBright);border-color:var(--terraBright)}
.ent .plus::before,.ent .plus::after{content:"";position:absolute;left:50%;top:50%;
  background:currentColor;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ent .plus::before{width:11px;height:1.4px;transform:translate(-50%,-50%)}
.ent .plus::after{width:1.4px;height:11px;transform:translate(-50%,-50%)}
.ent.ex .plus{transform:rotate(180deg);border-color:var(--terraDeep)}
.dark .ent.ex .plus{border-color:var(--terraBright)}
.ent.ex .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.ent .epanel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 520ms cubic-bezier(.2,.8,.2,1)}
.ent.ex .epanel{grid-template-rows:1fr}
/* no-JS fallback: a details the browser opened with no script simply shows */
.no-js .ent[open] .epanel{grid-template-rows:1fr}
.ent .epanel>div{overflow:hidden;min-height:0}
.ent .ebody{padding-left:calc(var(--numw) + clamp(14px,1.8vw,24px));
  padding-bottom:clamp(18px,2.2vw,28px);max-width:46em}
.ent .ebody h4{margin-bottom:6px;color:var(--forest);font-size:var(--fs-lead)}
.dark .ent .ebody h4{color:var(--ivory)}
.ent .ebody h4+p{margin-top:0}
.ent .ebody p+h4{margin-top:clamp(14px,1.6vw,20px)}
.ent .ebody p+p{margin-top:10px}
.ent .ebody p{font-size:var(--fs-card);line-height:1.55}

/* --- plain card grid --- */
.cards{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,2.8vw,36px)}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* copy on the left, a photograph in a circle on the right */
.split.pic{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.picside{display:flex;justify-content:center;align-items:center}
.picside .ring{width:118%}
.picside .ring.r2{width:136%}
.circ.md{width:min(26vw,300px)}
.card{background:rgba(255,255,255,.72);border:1px solid #EAD9CB;border-radius:18px;
  padding:clamp(20px,2vw,26px)}
.dark .card{background:var(--glass);border-color:rgba(247,244,233,.18)}
.card .n{font-family:Gloock,Georgia,serif;font-weight:400;font-size:clamp(19px,1.7vw,22px);
  line-height:1;color:var(--terraDeep);margin-bottom:12px}
.dark .card .n{color:var(--terraBright)}
.card h3,.card h4{margin-bottom:7px}
.card p{font-size:var(--fs-card);opacity:.88;line-height:1.5}

/* --- the people grid --- */
.people{display:grid;gap:clamp(12px,1.3vw,16px);margin-top:clamp(24px,2.8vw,36px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{background:rgba(255,255,255,.72);border:1px solid #EAD9CB;border-radius:16px;
  padding:clamp(16px,1.6vw,20px);display:flex;flex-direction:column;gap:5px}
.pcard b{font-family:Gloock,Georgia,serif;font-weight:400;font-size:17.5px;line-height:1.2}
.pcard span{font-size:13.5px;font-weight:300;line-height:1.45;opacity:.82}
.pcard .li{margin-top:auto;padding-top:12px;font-size:13px;font-weight:600;
  color:var(--forest);display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  border-bottom:1.4px solid transparent;transition:border-color .25s}
.pcard .li:hover{border-color:currentColor}
.pcard .li svg{width:14px;height:14px;flex:none}

/* --- the team: portrait beside the bio, two to a row --- */
.team{display:grid;gap:clamp(18px,2.4vw,32px) clamp(24px,3vw,48px);margin-top:clamp(24px,2.8vw,36px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.tm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,1.8vw,24px);align-items:start}
.tm .av{width:clamp(88px,8.5vw,120px);aspect-ratio:1;border-radius:50%;
  position:relative;overflow:hidden;background:linear-gradient(150deg,#EFE2D6,#E3CCBB);
  display:flex;align-items:center;justify-content:center}
.tm .av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(201,110,71,.7)}
/* portraits arrive from different photographers; one black and white treatment
   makes them a set */
.tm .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.tm .av .ini{font-family:Gloock,Georgia,serif;font-size:clamp(22px,2.2vw,30px);color:var(--terra);opacity:.6;letter-spacing:.04em}
.tm b{display:flex;align-items:center;gap:8px;font-family:Gloock,Georgia,serif;font-weight:400;font-size:var(--fs-cardtitle);line-height:1.2}
.tm .tli{position:static;padding:4px;opacity:.5;color:var(--forest);border-radius:6px}
.tm .tli:hover{opacity:1}
.tm .tli svg{width:15px;height:15px;display:block}
.tm .role{display:block;margin-top:3px;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:700;opacity:.62}
.tm p{margin-top:10px;font-size:var(--fs-card);line-height:1.55;opacity:.88}
@media (max-width:940px){.team{grid-template-columns:1fr}}
@media (max-width:480px){.tm{grid-template-columns:1fr}.tm .av{width:88px}}

/* --- a quote with a name on it --- */
.quote{border-left:2px solid var(--terraBright);padding-left:clamp(20px,2.4vw,32px);
  max-width:38em}
.quote q{display:block;font-family:Gloock,Georgia,serif;font-weight:400;quotes:none;
  font-size:clamp(19px,1.8vw,23px);line-height:1.3}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:var(--fs-card);
  font-weight:300;opacity:.8}
.quote cite b{font-weight:600;opacity:1}

/* --- key/value strip --- */
.kv{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(24px,2.8vw,36px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.kv .k{font-family:Gloock,Georgia,serif;font-weight:400;line-height:1;
  font-size:clamp(28px,3vw,40px);color:var(--terraDeep)}
.dark .kv .k{color:var(--terraBright)}
.kv .d{display:block;margin-top:9px;font-size:var(--fs-card);font-weight:300;
  line-height:1.55;opacity:.84;max-width:16em}

/* --- callout --- */
.callout{margin-top:clamp(24px,2.8vw,36px);border-radius:18px;
  padding:clamp(20px,2.4vw,30px);background:rgba(255,255,255,.7);
  border:1px solid #EBD8CA;max-width:52em}
.dark .callout{background:var(--glass);border-color:rgba(247,244,233,.2)}
.callout p{font-size:var(--fs-lead)}
.callout p+p{margin-top:10px}

/* --- the next page strip at the foot of every inner page --- */
.nextstrip{display:grid;gap:clamp(12px,1.4vw,16px);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(14px,1.6vw,20px)}
#next h2{font-size:clamp(20px,2vw,25px)}
.nx{border:1px solid var(--forest);background:var(--forest);color:var(--ivory);border-radius:16px;
  padding:clamp(16px,1.8vw,22px);display:block;
  transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.nx:hover{border-color:var(--terra);box-shadow:0 14px 30px rgba(30,50,43,.22);transform:translateY(-3px)}
.nx .label{color:var(--terra);font-size:12.5px;display:block;margin-bottom:8px}
.nx b{color:var(--ivory)}
.nx b{display:block;font-family:Gloock,Georgia,serif;font-weight:400;
  font-size:19px;line-height:1.2}
.nx span{display:block;margin-top:5px;font-size:14px;font-weight:300;opacity:.82}

/* ============================================================
   THE TIMELINE (the homepage spine, made reusable)
   A line fills as the reader scrolls; each entry lights when the fill
   reaches its own dot, so the line and the entries can never disagree.
   Dark by default; .spine.light for a light band.
   ============================================================ */
.spine{--linex:clamp(10px,1.4vw,22px);--sgap:clamp(26px,3vw,46px);
  position:relative;margin-top:clamp(26px,3.2vw,44px);padding-block:10px;
  padding-left:calc(var(--linex) + var(--sgap))}
.spineTrack{position:absolute;left:var(--linex);top:0;bottom:0;width:2px;
  background:rgba(247,244,233,.16);border-radius:2px}
.spineFill{position:absolute;left:var(--linex);top:0;width:2px;height:0;
  border-radius:2px;background:linear-gradient(180deg,var(--terra),var(--terraBright))}
.spineDot{position:absolute;left:var(--linex);top:0;width:18px;height:18px;margin-left:-8px;
  margin-top:-9px;border-radius:50%;background:var(--terraBright);
  box-shadow:0 0 0 8px rgba(201,110,71,.15);opacity:0;transition:opacity .5s ease}
.spine.in .spineDot{opacity:1}
.sit{position:relative;width:100%;padding-block:clamp(6px,.8vw,10px)}
.sit .dot{position:absolute;left:calc(-4.5px - var(--sgap));top:calc(clamp(6px,.8vw,10px) + 22px);
  width:11px;height:11px;border-radius:50%;background:var(--terraBright);opacity:0;transform:scale(.4);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.sit.lit .dot{opacity:1;transform:none}
.sit .sc{background:var(--glass);border:1px solid rgba(247,244,233,.2);
  border-radius:16px;padding:clamp(16px,1.8vw,24px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.4vw,18px);align-items:start;
  opacity:0;transform:translate3d(-26px,10px,0);
  transition:opacity 620ms cubic-bezier(.2,.7,.2,1),transform 760ms cubic-bezier(.2,.75,.15,1),
    border-color .6s ease,background .6s ease}
.sit.lit .sc{opacity:1;transform:none;background:var(--glassLit);border-color:rgba(201,110,71,.45)}
.sit .sn{font-family:Gloock,Georgia,serif;font-size:clamp(18px,1.7vw,22px);font-weight:400;
  line-height:1;color:var(--terraBright);min-width:1.5em;padding-top:.12em}
.sit .sn.when{font-family:'Nunito Sans',sans-serif;color:var(--ivory);opacity:.8;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:700;min-width:12.5em;padding-top:.45em;line-height:1.3}
.sit b{display:block;font-family:Gloock,Georgia,serif;font-weight:400;
  font-size:var(--fs-cardtitle);line-height:1.2;margin-bottom:5px;color:var(--ivory)}
.sit span.st{display:block;font-size:var(--fs-card);font-weight:300;line-height:1.5;opacity:.84;max-width:46em}
/* on a light band */
.spine.light .spineTrack{background:rgba(30,50,43,.14)}
.spine.light .spineFill{background:linear-gradient(180deg,var(--terraDeep),var(--terra))}
.spine.light .spineDot,.spine.light .sit .dot{background:var(--terraDeep);box-shadow:0 0 0 8px rgba(201,110,71,.12)}
.spine.light .sit .sc{background:rgba(255,255,255,.55);border-color:#EAD9CB}
.spine.light .sit.lit .sc{background:rgba(255,255,255,.8);border-color:rgba(201,110,71,.4)}
.spine.light .sit .sn{color:var(--terraDeep)}
.spine.light .sit b{color:var(--forest)}

/* ============================================================
   THE RAIL (the homepage 7-Agenda rail, made reusable)
   Labels on top, cards sliding sideways as the page scrolls. The wrapper
   is tall and the inner block is sticky; shell.js sets the wrapper height
   from the track's width. On a phone or under reduced motion it is a
   swipe rail and the labels scroll it.
   ============================================================ */
.hrailwrap{position:relative}
.hrailpin{position:sticky;top:0;overflow:hidden;padding-block:clamp(40px,5vw,64px)}
.hrailview{position:relative;margin-top:clamp(20px,2.4vw,32px);
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.htrack{display:flex;gap:clamp(12px,1.4vw,18px);will-change:transform;align-items:stretch}
.hcard{flex:0 0 clamp(290px,25vw,360px);background:var(--glass);border:1px solid rgba(247,244,233,.18);
  border-radius:18px;padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:8px;
  transition:background .4s ease,border-color .4s ease}
.hcard.on{background:var(--glassLit);border-color:rgba(201,110,71,.55)}
.hcard .n{font-family:Gloock,Georgia,serif;font-size:clamp(18px,1.7vw,22px);line-height:1;color:var(--terraBright)}
.hcard h3{font-size:var(--fs-cardtitle);margin-top:4px}
.hcard p{font-size:var(--fs-card);opacity:.86;line-height:1.5}
.hcard .more{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:var(--ivory);opacity:.9}
.hprog{position:relative;height:2px;background:rgba(247,244,233,.16);border-radius:2px;
  margin-top:clamp(18px,2vw,26px)}
.hprog i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;background:var(--terraBright)}
/* light variant, for a rail on the ivory surface */
.hrailwrap.light{color:var(--forest)}
.hrailwrap.light .hcard{background:rgba(255,255,255,.72);border-color:#EAD9CB}
.hrailwrap.light .hcard.on{background:rgba(255,255,255,.95);border-color:rgba(201,110,71,.5)}
.hrailwrap.light .hcard .n{color:var(--terraDeep)}
.hrailwrap.light .hprog{background:rgba(30,50,43,.14)}
.hrailwrap.light .hprog i{background:var(--terraDeep)}
.hrailwrap.light h2,.hrailwrap.light h3{color:var(--forest)}
/* heading and a picture side by side above the rail */
.railhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
.railcirc .circ{width:clamp(120px,15vh,190px)}
.railcirc{margin-right:clamp(30px,4vw,64px)}
@media (max-width:940px){.railhead{grid-template-columns:1fr}.railcirc{display:none}}
@media (max-width:940px){
  .hrailwrap{height:auto!important}
  .hrailpin{position:static;top:auto!important;overflow:visible;padding-block:clamp(40px,4.8vw,68px)}
  .hrailview{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
  .hrailview::-webkit-scrollbar{display:none}
  .htrack{transform:none!important}
  .hcard{flex:0 0 80vw;max-width:340px;scroll-snap-align:center}
}
@media (prefers-reduced-motion: reduce){
  .hrailwrap{height:auto!important}
  .hrailpin{position:static;top:auto!important}
  .htrack{flex-wrap:wrap;transform:none!important}
  .hcard{flex:1 1 280px}
  .hprog{display:none}
  .sit .sc,.sit .dot,.spineDot{opacity:1!important;transform:none!important}
  .pheroart .ring,.pheroart .orbit{animation:none!important}
}

/* --- the newsletter box, shared with the homepage --- */
.newsbox{position:relative;overflow:hidden;border-radius:26px;
  padding:clamp(30px,3.2vw,42px);background:var(--forest);color:var(--ivory)}
.newsbox h3{margin-bottom:10px;color:var(--ivory)}
.newsbox .sub{font-size:var(--fs-card);color:var(--ivory);opacity:.78;margin-bottom:22px}
.newsbox .touchbtn{background:var(--terraBright);color:var(--forest);font-weight:700;justify-content:center;width:100%;word-break:break-word}
/* a clay band: the terracotta as a ground, light enough for forest type */
.band.clay{background:linear-gradient(180deg,#EDD3C3,#E8CBB9)}
.band.clay .alink{color:var(--forest)}
/* line endings: no single words left alone on the last line, headings balanced */
p,.lead,.prose p,.card p,.sit span.st{text-wrap:pretty}
h1,h2,h3,.bigfrag,.frag{text-wrap:balance}
/* the team paragraph beside the card, as on the homepage */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(32px,4.6vw,80px);align-items:start}
/* the card on its own, set wide: copy left, button right */
.newsbox.wide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:center}
.newsbox.wide .sub{margin-bottom:0}
.newsbox.wide .touchbtn{width:auto;padding-inline:34px}
@media (max-width:940px){.who{grid-template-columns:1fr;gap:28px}.newsbox.wide{grid-template-columns:1fr;gap:20px}.newsbox.wide .touchbtn{width:100%}}
.newsbox .touchbtn:hover{box-shadow:0 14px 30px rgba(201,110,71,.34)}
.newsform{background:none;padding:0}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:7px}
.field input{width:100%;font-family:inherit;font-size:16px;font-weight:300;color:var(--ivory);
  background:rgba(247,244,233,.08);border:1px solid rgba(247,244,233,.24);
  border-radius:12px;padding:13px 16px;transition:border-color .25s,background .25s}
.field input::placeholder{color:rgba(247,244,233,.45)}
.field input:focus{outline:0;border-color:var(--terraBright);background:rgba(247,244,233,.14)}
.newsform .btn{width:100%;justify-content:center;margin-top:10px;
  background:var(--terraBright);color:var(--forest)}
.newsform .btn:hover{box-shadow:0 14px 30px rgba(201,110,71,.34)}
.formnote{margin-top:14px;font-size:var(--fs-small);opacity:.72}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards.c3,.cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  /* between the phone layout and a full desktop the two-column hero is tight;
     a smaller circle keeps the outer ring inside the window */
  .circ.lg{width:min(27vw,300px)}
}
@media (max-width:940px){
  /* the terracotta weather reads on a phone too */
  .pagelight .l1{--s:max(120vw,70vh);opacity:.8}
  .pagelight .l2{--s:max(110vw,64vh);opacity:.9}
  .pagelight .l3{--s:max(120vw,70vh);opacity:.72}
  .pagelight .l4{--s:max(100vw,58vh);opacity:.82}
  .pagelight .l5{--s:max(110vw,62vh);opacity:.7}
  .pheroinner{grid-template-columns:1fr;gap:30px}
  /* the outer ring and its orbit reach 23% beyond the photograph, so the art
     needs that much clear air above and below or it runs into the copy */
  .pheroart{justify-content:center;margin-top:clamp(30px,10vw,52px)}
  .split.pic{grid-template-columns:minmax(0,1fr);gap:18px}
  .picside{margin-top:clamp(28px,9vw,44px);margin-bottom:clamp(10px,4vw,20px)}
  .phero{padding-bottom:clamp(56px,14vw,72px)}
}
@media (max-width:760px){
  /* a grid of cards is a swipe gallery on a phone, one gesture for the lot */
  .cards.gal{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 10px;
    grid-template-columns:none!important}
  .cards.gal::-webkit-scrollbar{display:none}
  .cards.gal>*{flex:0 0 78vw;max-width:320px;scroll-snap-align:center}
  .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr}
  .circ.md{width:min(52vw,260px)}
  .nextstrip{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--fs-lead:16px;--fs-card:15px;--fs-cardtitle:20px;--pad:20px}
  /* the timeline label goes above its text on a phone; side by side, a date
     label plus a long word was wider than the screen */
  .sit .sc{grid-template-columns:minmax(0,1fr);gap:6px}
  .sit .sn{min-width:0}
  .sit .sn.when{min-width:0;padding-top:0}
  h1{font-size:32px}
  h2{font-size:26px}
  h3{font-size:20px}
  .band{padding-block:54px}
  .band.tight{padding-block:44px}
  .phero h1{font-size:30px}
  .circ.lg{width:min(48vw,290px)}
  .people{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .quote q{font-size:20px}
  .newsbox{padding:26px 22px}
  /* the entry number moves above the title, so a long title is not squeezed
     into a third of a 390px screen */
  .ent>summary{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding-block:20px}
  .ent .en{grid-column:1;grid-row:1;font-size:18px;padding-top:0;margin-bottom:6px}
  .ent .etitle{grid-column:1;grid-row:2}
  .ent .plus{grid-column:2;grid-row:1/span 2;align-self:center;margin-top:0}
  .ent .ebody{padding-left:0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mesh .b>i{animation:none!important}
  .rv{opacity:1!important;transform:none!important}
  .ent .epanel{transition:none}
  *{transition:none!important;animation:none!important}
}