/* ==============================================================
   #PeopleMakingHistory · one stylesheet for every page
   Change a colour or a size here and it changes everywhere.

   Four decisions, applied everywhere:
   1  The ground is the warm near-black taken from the mark.
      Parchment appears as paper: a sheet, a card, a page.
   2  Cormorant Garamond carries the argument. DM Sans carries
      the explanation. IBM Plex Mono only carries record marks.
   3  Gold marks a conclusion. Nothing else.
   4  Every section says one thing, with one picture of it.
      Detail waits behind "read", "more" and tap-to-reveal.
   ============================================================== */

:root{
  --ink:#14100B; --ink-2:#1B1610; --ink-3:#251F17; --ink-4:#2F281E;
  --parch:#F3ECDC; --parch-2:#E9DFC9; --parch-3:#D9CDB2;
  --gold:#C79A32; --gold-deep:#8B6914;
  --dim:rgba(243,236,220,.74);
  --faint:rgba(243,236,220,.50);
  --hair:rgba(243,236,220,.14);
  --hair-2:rgba(243,236,220,.28);
  --graphite:#5E5549;

  --bg:var(--ink); --fg:var(--parch); --sec:var(--dim); --mute:var(--faint);
  --rule:var(--hair); --rule-2:var(--hair-2); --acc:var(--gold);
  --panel:var(--ink-2); --hov:var(--ink-3);

  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;

  --e:cubic-bezier(.16,1,.3,1);
  --wrap:1320px;
  --pad:clamp(22px,5.2vw,88px);
  --navh:68px;
  /* the three headline sizes, named so the alignment rules below can use them */
  --h2s:clamp(34px,3.9vw,58px);
  --sts:clamp(28px,3vw,44px);
  --lds:clamp(20px,calc(12px + .85vw),28px);
  /* reading text grows a little on big screens instead of looking lost on them */
  --bds:clamp(16.5px,calc(14.5px + .2vw),18.5px);
  /* the gap between two columns, the same everywhere, so right-hand columns share one line */
  --gut:clamp(30px,5vw,80px);
}

/* paper: anything set on parchment */
.light,.sheet,.spec{
  --bg:var(--parch); --fg:var(--ink); --sec:var(--graphite);
  --mute:rgba(94,85,73,.82); --rule:rgba(20,16,11,.14); --rule-2:rgba(20,16,11,.3);
  --acc:var(--gold-deep); --panel:rgba(20,16,11,.04); --hov:rgba(20,16,11,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 16px)}
body{
  margin:0;background:var(--ink);color:var(--parch);
  font-family:var(--sans);font-size:var(--bds);font-weight:400;line-height:1.62;
  letter-spacing:-.003em;text-wrap:pretty;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--parch);color:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--parch);color:var(--ink);padding:10px 14px;font-size:14px}

#grain{position:fixed;inset:-120px;z-index:9;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- LAYOUT ------------------------------------------- */
section{position:relative;background:var(--bg);color:var(--fg);padding-block:clamp(72px,10vw,150px)}
section.tight{padding-block:clamp(56px,7vw,100px)}
section.sep{border-top:1px solid var(--rule)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.split{display:grid;gap:var(--gut)}
.split>*{min-width:0}
@media(min-width:960px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .split.lean{grid-template-columns:1fr 1fr}
  .split.lead{grid-template-columns:7fr 5fr}
  .split.mid{align-items:center}
  .split.end{align-items:end}
}
.mt-s{margin-top:clamp(20px,2.4vw,30px)} .mt{margin-top:clamp(32px,4vw,56px)} .mt-l{margin-top:clamp(48px,6vw,88px)}

/* A SECTION HEAD: the heading on the left, its short introduction on the right. */
.sh{display:grid;gap:clamp(20px,2.4vw,30px)}
.sh>*{min-width:0}
/* in a two-column head the heading may use its whole half of the page */
@media(min-width:960px){.sh>h2,.split.lean>h2,.split.lean>div>h2{max-width:none}}
@media(min-width:960px){.sh{grid-template-columns:1fr 1fr;column-gap:var(--gut);align-items:start}}

/* ---------- TYPE --------------------------------------------- */
h1,h2,h3,h4,.stmt,.ser{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0}
/* the headline also respects the screen's height, so on a laptop the first screen still holds the opening line and the buttons */
h1{font-size:clamp(50px,min(8.2vw,12.4vh),128px);line-height:.92;letter-spacing:-.022em}
h2{font-size:var(--h2s);line-height:1;letter-spacing:-.018em;max-width:17ch}
h3{font-size:clamp(23px,1.9vw,29px);line-height:1.12;letter-spacing:-.01em}
h4{font-size:clamp(20px,1.5vw,23px);line-height:1.2}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
.lede{font-family:var(--serif);font-weight:500;font-size:var(--lds);line-height:1.38;
  color:var(--sec);max-width:40ch;letter-spacing:-.004em}
.bod{color:var(--sec);max-width:56ch;font-size:var(--bds)}
.bod strong,.lede strong{color:var(--fg);font-weight:600}
.bod a:not([class]),.note a:not([class]){color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--rule-2)}
.bod a:not([class]):hover{text-decoration-color:currentColor}
.gi{color:var(--acc);font-style:italic}
em,i{font-style:italic}
.small{font-size:15px;color:var(--mute);line-height:1.55}

/* The conclusion line. A gold rule above it, because gold marks a
   conclusion. One or two per page. */
.stmt{font-size:var(--sts);line-height:1.08;letter-spacing:-.014em;max-width:22ch;
  padding-top:26px;position:relative}
.stmt::before{content:"";position:absolute;top:0;left:0;width:56px;height:1px;background:var(--acc)}
.stmt.wide{max-width:28ch}

/* ONE ALIGNMENT RULE FOR THE WHOLE SITE.
   Wherever a headline sits on the left and text sits on the right, the first line
   of the right-hand text starts level with the first line of the headline: not with
   the gold rule above it, and not at the bottom. The numbers come from the fonts'
   own measurements (Cormorant cap height .625, DM Sans .70), so the capitals line up
   at every screen width. --ct is where the capitals start inside each kind of text. */
.bod{--ct:.451em}
.lede{--ct:.3835em}
.form{--ct:6.3px}
@media(min-width:960px){
  /* a gold conclusion on the left: skip its rule, then match its first line */
  .split.lean:has(>:first-child>.stmt:first-child)>:last-child>:first-child{margin-top:calc(26px + .2335*var(--sts) - var(--ct,.451em))}
  /* an ordinary heading on the left */
  .split.lean:has(>:first-child>h2:first-child)>:last-child>:first-child,
  .split.lean>h2:first-child+*>:first-child,
  .sh>h2+*{margin-top:calc(.1935*var(--h2s) - var(--ct,.451em))}
}

/* record marks: the only monospace on the site */
.rec{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--mute);
  font-variant-numeric:tabular-nums;text-transform:uppercase}
.recrow{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}

/* status of a programme: a dot and a word, the same everywhere on the site.
   Filled = open, half = on its way, empty = planned. Never gold: a status is not a conclusion. */
.st{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;
  line-height:1.2;color:var(--mute);white-space:nowrap;vertical-align:baseline}
.st::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:1px solid currentColor;box-sizing:border-box}
.st.open{color:var(--fg)}
.st.open::before{background:currentColor}
.st.dev{color:var(--sec)}
.st.dev::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

/* ---------- BUTTONS AND LINKS -------------------------------- */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,42px);align-items:center}
.btn,.btn2{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:500;
  line-height:1;padding:16px 22px;text-decoration:none;border:1px solid;cursor:pointer;border-radius:2px;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e)}
.btn{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:hover{background:transparent;color:var(--fg)}
.btn2{background:transparent;color:var(--fg);border-color:var(--rule-2)}
.btn2:hover{border-color:var(--fg)}
.btn.sm,.btn2.sm{font-size:14px;padding:12px 16px}
.btn svg,.btn2 svg,.ulink svg{width:11px;height:11px;flex:none}
.btn[disabled]{opacity:.6;cursor:progress}
.ulink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;transition:border-color .3s var(--e)}
.ulink:hover{border-color:var(--fg)}
.ulink .m{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.04em}

/* ---------- NAVIGATION --------------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:40;
  border-bottom:1px solid transparent;transition:border-color .5s var(--e)}
/* The tint and blur live on their own layer. Putting backdrop-filter on .nav itself
   makes it the container for the fixed #mnav panel and squashes the mobile menu. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(20,16,11,.84);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.sk{border-bottom-color:var(--hair)}
/* a browser that cannot blur gets a near-solid bar, so text never reads through it */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav::before,.nav{background:rgba(20,16,11,.97)}
}
.navin{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);min-height:var(--navh);display:flex;align-items:center;gap:22px}
.wm{display:flex;align-items:baseline;gap:.08em;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.012em;
  color:var(--parch);text-decoration:none}
/* the mark is the # of #PeopleMakingHistory: capital height, on the baseline, typed-close */
.wm svg{width:.74em;height:.74em;flex:none}
.wm b{font-weight:600}
.navlinks{display:none;margin-left:auto;gap:clamp(14px,1.7vw,26px)}
.navlinks a{font-size:14.5px;font-weight:500;color:var(--dim);text-decoration:none;padding:6px 0;position:relative;transition:color .3s}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--parch)}
.navlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--parch)}
.navact{display:none;font-size:14px;font-weight:500;color:var(--ink);background:var(--parch);text-decoration:none;
  padding:10px 15px;border:1px solid var(--parch);border-radius:2px;transition:background .3s,color .3s}
.navact:hover{background:transparent;color:var(--parch)}
.navact[aria-current]{background:transparent;color:var(--parch)}
.lang{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--faint)}
.lang a{text-decoration:none;color:var(--faint)}
.lang a[aria-current]{color:var(--parch)}
.lang a[href]:hover{color:var(--parch)}
.lang i{font-style:normal;opacity:.5}
.mtog{margin-left:18px;display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--parch);padding:8px 0}
.mtog i{width:20px;height:8px;position:relative;display:block}
.mtog i::before,.mtog i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--e)}
.mtog i::before{top:0}.mtog i::after{bottom:0}
.nav.on .mtog i::before{transform:translateY(3.25px) rotate(45deg)}
.nav.on .mtog i::after{transform:translateY(-3.25px) rotate(-45deg)}
.mtog .m2,.nav.on .mtog .m1{display:none}
.nav.on .mtog .m2{display:inline}
#mnav{position:fixed;inset:var(--navh) 0 0;background:var(--ink);
  padding:clamp(8px,2vh,24px) var(--pad) calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:flex-start;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--e),transform .4s var(--e),visibility 0s .4s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav.on #mnav{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--e),transform .4s var(--e)}
/* one row per page: a quiet number, the name, a hairline between. Room to breathe, easy to tap. */
.mlist{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;counter-reset:m;border-top:1px solid var(--hair)}
/* rows share the screen height equally, so all eight always fit without scrolling */
.mlist a{counter-increment:m;display:flex;align-items:center;gap:20px;flex:1 1 0;min-height:52px;max-height:84px;
  border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-weight:600;font-size:clamp(26px,min(8.4vw,5.2vh),46px);line-height:1.1;letter-spacing:-.012em;
  color:var(--parch);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .3s var(--e)}
.mlist a::before{content:counter(m,decimal-leading-zero);flex:none;min-width:24px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--faint);transform:translateY(-.1em)}
.mlist a:active{color:var(--gold)}
.mlist a[aria-current]{color:var(--gold);font-style:italic}
.mlist a[aria-current]::before{color:var(--gold)}
.nav.on .mlist a{animation:rise .6s var(--e) both}
.nav.on .mlist a:nth-child(2){animation-delay:.04s}.nav.on .mlist a:nth-child(3){animation-delay:.08s}
.nav.on .mlist a:nth-child(4){animation-delay:.12s}.nav.on .mlist a:nth-child(5){animation-delay:.16s}
.nav.on .mlist a:nth-child(6){animation-delay:.2s}.nav.on .mlist a:nth-child(7){animation-delay:.24s}
.nav.on .mlist a:nth-child(8){animation-delay:.28s}
@media(prefers-reduced-motion:reduce){.nav.on .mlist a{animation:none}}
/* the footer line of the mobile menu is not shown */
.mfoot{display:none}
@media(min-width:1100px){
  .navlinks,.navact{display:flex}
  .mtog,#mnav{display:none}
  .lang{margin-left:0}
}

/* ---------- THE HEAD OF EVERY PAGE --------------------------- */
.head{padding-top:calc(var(--navh) + clamp(28px,min(10vw,8vh),150px));padding-bottom:clamp(28px,min(5vw,6vh),80px);overflow:hidden}
.head .wrap{position:relative;z-index:1}
/* the section right after a page head starts close behind it, so nothing hangs half-hidden at the bottom of the first screen */
.head+section{padding-top:clamp(44px,min(5vw,7vh),80px)}
.head .lede{margin-top:clamp(18px,min(3vw,3.4vh),38px);max-width:50ch}
.head .acts{margin-top:clamp(20px,min(3.4vw,3.6vh),42px)}
.head .kicker{margin-bottom:clamp(14px,min(2.4vw,2.6vh),30px)}
@media(max-width:600px) and (max-height:640px){h1{font-size:44px}}
.head .recrow{margin-bottom:clamp(16px,min(3vw,3vh),40px)}
.weave{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.8s var(--e);pointer-events:none}
.weave.on{opacity:1}
.kicker{max-width:none;letter-spacing:0;line-height:1.3;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(19px,1.6vw,23px);color:var(--sec);margin-bottom:clamp(18px,2.4vw,30px)}

/* THE COVER. On a laptop or larger, the head of each main page fills the first
   screen exactly: headline, intro and buttons, and nothing from the next section
   peeking in underneath. The headline is sized by the script to fit the room it has,
   in either language (see "THE HEADLINE FITS" in pmh.js). Phones keep the flowing layout. */
.hmain{min-width:0}
@media(min-width:900px){
  .head.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:calc(var(--navh) + clamp(24px,5vh,64px));padding-bottom:clamp(32px,7vh,84px)}
  .head.cover>.wrap{width:100%}
  .head.cover+section{padding-top:clamp(72px,9vw,130px)}
  .head.cover+section.tight{padding-top:clamp(64px,7vw,104px)}
}

/* the one orchestrated entrance */
.js .head h1,.js .head .lede,.js .head .acts,.js .head .recrow,.js .head .kicker,.js .head .hx{opacity:0;transform:translateY(16px)}
.ent .head h1,.ent .head .lede,.ent .head .acts,.ent .head .recrow,.ent .head .kicker,.ent .head .hx{opacity:1;transform:none;
  transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
.ent .head .kicker,.ent .head .recrow{transition-delay:.05s}
.ent .head h1{transition-delay:.12s}
.ent .head .lede{transition-delay:.32s}
.ent .head .acts,.ent .head .hx{transition-delay:.48s}

/* ---------- THE SCROLL ---------------------------------------
   A preview that unrolls in place. The sheet grows between two
   rods; the lower rod travels down as the text is revealed.
   ------------------------------------------------------------- */
.unroll{display:grid;grid-template-rows:0 0fr 0;transition:grid-template-rows .95s var(--e);margin-top:clamp(26px,3vw,40px)}
.unroll.open{grid-template-rows:14px 1fr 14px}
.unroll>.unin{overflow:hidden;min-height:0}
.rod{display:block;height:14px;margin-inline:-6px;border-radius:7px;opacity:0;transition:opacity .4s var(--e);
  background:linear-gradient(180deg,#cdbf9f 0%,#efe5cf 38%,#e2d6bb 62%,#b9aa88 100%);box-shadow:0 4px 10px rgba(0,0,0,.45);position:relative;z-index:2}
.unroll.open .rod{opacity:1}
.sheet{background:var(--parch);color:var(--ink);padding:clamp(40px,6vw,92px) clamp(22px,6vw,80px) clamp(36px,5vw,70px)}
.sheet .artbody{margin-inline:auto}
.sheet .shfoot{max-width:38rem;margin:clamp(36px,4vw,56px) auto 0;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.sheet .shhead{max-width:38rem;margin:0 auto clamp(26px,3vw,40px)}
.unroll-btn[aria-expanded="true"] .u1,.unroll-btn .u2{display:none}
.unroll-btn[aria-expanded="true"] .u2{display:inline}
.unroll-btn .m{font-family:var(--mono);font-size:11px;opacity:.7;letter-spacing:.04em}

/* ---------- READING (essays, the origin, previews) ----------- */
.artbody{max-width:38rem}
.artbody p{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.55vw,22px);line-height:1.6;color:var(--fg);margin-bottom:1.05em}
.artbody p.open{font-size:clamp(23px,2.2vw,28px);line-height:1.42}
.artbody h2{font-size:clamp(27px,2.6vw,36px);line-height:1.1;max-width:none;margin:clamp(40px,4.4vw,60px) 0 .55em}
.artbody strong{font-weight:700}
.artbody ul{margin:0 0 1.2em;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.artbody ul li{font-family:var(--serif);font-weight:500;font-size:clamp(19.5px,1.5vw,21px);line-height:1.55;padding-left:26px;position:relative}
.artbody ul li::before{content:"";position:absolute;left:0;top:.8em;width:13px;height:1px;background:var(--fg)}
.artbody ul li b{font-weight:700}
.artbody .pq{font-family:var(--serif);font-weight:600;font-size:clamp(27px,2.8vw,38px);line-height:1.14;letter-spacing:-.012em;
  margin:clamp(36px,4vw,56px) 0;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--fg);max-width:24ch}
.artbody .cls{font-family:var(--serif);font-weight:600;font-size:clamp(28px,2.9vw,40px);line-height:1.12;letter-spacing:-.012em;
  margin:clamp(44px,5vw,70px) 0 0;padding-top:24px;position:relative;max-width:24ch}
.artbody .cls::before{content:"";position:absolute;top:0;left:0;width:56px;height:1px;background:var(--acc)}
.artfoot{border-top:1px solid var(--rule);margin-top:clamp(44px,5vw,70px);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.artfoot .ulink u{text-decoration:none;font-family:var(--mono);font-size:11px;color:var(--mute)}
.ulink u{text-decoration:none;font-family:var(--mono);font-size:11px;color:var(--mute)}

/* the essay page itself: a parchment page with the record marks in the margin */
.artwrap{display:grid;gap:clamp(26px,3vw,40px);justify-content:center}
@media(min-width:1100px){.artwrap{grid-template-columns:11rem minmax(0,38rem) 13rem;gap:clamp(40px,4vw,72px);align-items:start}}
.artrail{display:flex;flex-wrap:wrap;gap:6px 16px}
@media(min-width:1100px){.artrail{position:sticky;top:calc(var(--navh) + 40px);flex-direction:column;gap:8px}}
.artrail .rl{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.artrail .prog{display:none}
@media(min-width:1100px){.artrail .prog{display:block;height:1px;background:var(--rule);margin-top:14px;width:100%;position:relative;overflow:hidden}
  .artrail .prog i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0)}}
.artnote{font-size:14.5px;color:var(--sec);line-height:1.55}
@media(min-width:1100px){.artnote{position:sticky;top:calc(var(--navh) + 40px);border-left:1px solid var(--rule);padding-left:20px}}
.artnote p{margin-bottom:12px}

/* ---------- FORMS -------------------------------------------- */
.form{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}
.form .two{display:grid;gap:clamp(22px,2.6vw,30px)}
@media(min-width:640px){.form .two{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600;color:var(--fg)}
.field .hint{font-size:14px;color:var(--mute);line-height:1.5;margin:0;max-width:52ch}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:16px;color:var(--fg);background:var(--panel);
  border:1px solid var(--rule);border-radius:2px;padding:13px 14px;width:100%;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F3ECDC' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.light .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314100B' stroke-width='1.3'/%3E%3C/svg%3E")}
.field select option{color:#14100B;background:#F3ECDC}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg)}
.field input::placeholder{color:var(--mute)}
.formfoot{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.formfoot .rec{text-transform:none;letter-spacing:.01em;font-family:var(--sans);font-size:14px;font-weight:400}
.msg{font-size:15px;color:var(--sec);border-left:1px solid var(--fg);padding:4px 0 4px 16px;margin:0}
.msg strong{color:var(--fg)}
.msg a{color:var(--fg)}
.form.letter{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.form.letter .field{flex:1 1 240px}
.form.letter .msg{flex-basis:100%}

/* ---------- FOOTER ------------------------------------------- */
footer{background:var(--ink);color:var(--parch);border-top:1px solid var(--hair);padding:clamp(64px,8vw,110px) 0 34px}
.fletter{display:grid;gap:clamp(24px,3vw,40px);padding-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--hair)}
@media(min-width:960px){.fletter{grid-template-columns:6fr 5fr;align-items:end}}
.fletter h2{font-size:clamp(30px,3.4vw,48px);max-width:18ch}
.fletter p.small{margin-top:14px;max-width:44ch}
/* The footer email box is switched off: the Fellowship page already has its own sign-up, and no letter is being sent yet.
   To bring it back, delete the next two lines. */
footer .fletter{display:none}
footer .fg{padding-top:0}
.fg{display:grid;gap:40px;padding-top:clamp(48px,6vw,80px)}
/* brand on the left, Connect against the right edge, lined up with the language switch */
@media(min-width:760px){.fg{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gut);align-items:start}
  .fg>div:last-child{justify-self:end;min-width:min(100%,19rem)}}
footer ul a .xa{width:.5em;height:.5em;margin-left:.3em;vertical-align:.08em;display:inline-block}

/* THE CLOSE OF EVERY PAGE: #PeopleMakingHistory writes itself.
   The mark is four bars woven: the gold bar passes under the top bar and over the bottom one.
   When the reader reaches the footer, the mark weaves itself at a large size, then settles
   into its place as the hashtag in front of the name, and the name arrives beside it. */
.fwm{display:flex;align-items:baseline;gap:.08em;margin:0;font-family:var(--sans);font-weight:600;
  font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:-.014em;color:var(--parch);--big:3.2}
.fwm b{font-weight:600;display:inline-block}
.fmark{display:block;width:.74em;height:.74em;flex:none;color:var(--parch)}
.fmark svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:0 100%}
.fmark rect{fill:currentColor;transform-box:fill-box}
.fmark .b4,.fmark .b5{fill:var(--gold)}
.fbrand .fline{margin-top:clamp(18px,2vw,26px)}
.js .fwm .fmark svg{transform:scale(var(--big))}
.js .fwm b{opacity:0;transform:translateX(-.3em)}
.js .fmark .b1{transform:scaleX(0);transform-origin:0 50%}
.js .fmark .b3{transform:scaleX(0);transform-origin:100% 50%}
.js .fmark .b2{transform:scaleY(0);transform-origin:50% 0}
.js .fmark .b4,.js .fmark .b5{transform:scaleY(0);transform-origin:50% 100%}
.js .fwm.woven .fmark rect{transform:none}
.js .fwm.woven .b1{transition:transform 1s var(--e)}
.js .fwm.woven .b3{transition:transform 1s var(--e) .16s}
.js .fwm.woven .b2{transition:transform 1.05s var(--e) .4s}
.js .fwm.woven .b5{transition:transform .75s cubic-bezier(.55,0,.2,1) .85s}
.js .fwm.woven .b4{transition:transform .5s var(--e) 1.5s}
.js .fwm.woven .fmark svg{transform:none;transition:transform 1.1s var(--e) 2.15s}
.js .fwm.woven b{opacity:1;transform:none;transition:opacity .9s ease 2.6s,transform 1.1s var(--e) 2.5s}
.js .fwm.woven .b4,.js .fwm.woven .b5{animation:glint 1.4s ease-in-out 3.3s both}
@keyframes glint{0%,100%{fill:var(--gold)}45%{fill:#EBCB7A}}
@media(max-width:600px){.fwm{--big:2.6}}
@media(prefers-reduced-motion:reduce){.js .fmark rect,.js .fwm .fmark svg{transform:none!important}.js .fwm b{opacity:1!important;transform:none!important}}
/* the copyright line carries the mark as its hashtag as well */
.fbm{display:inline-flex;align-items:baseline;gap:.08em}
.fbm svg{width:.74em;height:.74em;flex:none}
.fb .fbm .vh{position:absolute}
/* the moving lines that open each page also close it, behind the footer */
footer{position:relative;overflow:hidden}
footer>.wrap{position:relative;z-index:1}
.fg .fline{font-family:var(--serif);font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.32;color:var(--fg);max-width:30ch;margin-top:22px}
.fh{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--faint);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer ul a{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.3;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
footer ul a:hover{color:var(--parch);border-bottom-color:var(--hair-2)}
footer ul{gap:12px}
.fh{padding-top:6px}
.place{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px}
.place span{font-size:13.5px;color:var(--faint)}
.fb{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--hair)}
.fb span{font-size:13px;color:var(--faint)}
.fb .flang{margin-left:auto;display:flex;align-items:center;gap:8px}
.fb .flang:empty{display:none}
.fb .flang a{color:var(--faint);text-decoration:none;transition:color .3s}
.fb .flang a[aria-current]{color:var(--parch)}
.fb .flang a[href]:hover{color:var(--parch)}
.fb .flang i{font-style:normal;opacity:.5}

/* ---------- THE NEXT PAGE (when the menu is folded away) ----- */
/* On a phone the page names hide behind "Menu", so every page ends by offering the next
   one, in menu order. Wide screens show the names in the bar and do not need it. */
.nextp{display:none}
@media(max-width:1099px){
  .nextp{display:block;background:var(--ink);border-top:1px solid var(--hair)}
  .nextp a{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,5vw,40px) var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;
    color:var(--parch);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .nextp .np-t{display:block;font-size:13.5px;font-weight:500;color:var(--faint);margin-bottom:6px}
  .nextp .np-n{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(32px,8.6vw,48px);line-height:1.02;letter-spacing:-.014em;transition:color .3s var(--e)}
  .nextp .np-a{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--hair-2);display:grid;place-items:center;transition:background .3s var(--e),color .3s var(--e),border-color .3s}
  .nextp .np-a svg{width:15px;height:15px}
  .nextp a:active .np-n{color:var(--gold)}
  .nextp a:active .np-a{background:var(--parch);color:var(--ink);border-color:var(--parch)}
}

/* ---------- THE RAIL ---------------------------------------- */
.rail{position:fixed;top:0;right:0;bottom:0;width:2px;z-index:30;pointer-events:none}
.rail i{position:absolute;inset:0;background:var(--hair-2);transform-origin:top;transform:scaleY(0)}

/* ==============================================================
   COMPONENTS
   Each content type has its own picture. No two pages share the
   same device for the same job.
   ============================================================== */

/* generic: panels driven by tabs. Without JavaScript every panel
   shows, so nothing is ever hidden from somebody who needs it. */
.js [data-tabs] [role=tabpanel]:not(.on){display:none}
[role=tab]{cursor:pointer}

/* ---------- HOME: the roles ---------------------------------- */
.roles{font-family:var(--serif);font-weight:600;font-size:clamp(44px,6.4vw,96px);line-height:1;letter-spacing:-.025em;margin:0}
.roll{display:inline-block;height:1.22em;overflow:hidden;vertical-align:bottom}
.roll>span{display:flex;flex-direction:column;transition:transform .9s var(--e)}
.roll>span>span{display:block;height:1.22em;line-height:1.22em;white-space:nowrap}
.noroll .roll{height:auto}
.roles-after{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.2;color:var(--sec);margin-top:clamp(16px,2vw,26px);max-width:24ch}
@media(prefers-reduced-motion:reduce){
  .roles{font-size:clamp(34px,4.6vw,64px);line-height:1.12}
  .roll{height:auto}.roll>span{display:block}.roll>span>span{display:inline;height:auto}
  .roll>span>span+span::before{content:" "}
}
.who .fig{margin:0}
.who .fig img{width:100%;filter:grayscale(1) contrast(1.04)}
.who .fig figcaption{margin-top:12px}

/* ---------- HOME: the five steps, on one thread -------------- */
.thread{position:relative;margin-top:clamp(40px,5vw,72px)}
.thread [role=tablist]{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.thread [role=tablist]::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--rule-2)}
.thread .fill{position:absolute;left:0;top:27px;height:1px;background:var(--gold);width:0;transition:width .7s var(--e);z-index:1}
.thread [role=tab]{background:none;border:0;padding:0 8px 0 0;text-align:left;display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.thread [role=tab] .rec{display:block;height:14px}
.thread [role=tab] .dot{width:13px;height:13px;border-radius:50%;background:var(--ink);border:1px solid var(--rule-2);transition:all .4s var(--e)}
.thread [role=tab] .tl{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,36px);line-height:1;color:var(--mute);transition:color .3s}
.thread [role=tab]:hover .tl{color:var(--sec)}
.thread [role=tab][aria-selected=true] .tl{color:var(--fg)}
.thread [role=tab][aria-selected=true] .dot{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
.thread [role=tab].past .dot{background:var(--parch);border-color:var(--parch)}
.thread .tps{margin-top:clamp(30px,3.6vw,52px);min-height:7.2em}
.thread [role=tabpanel] p{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.5vw,36px);line-height:1.22;max-width:30ch;color:var(--fg);margin:0}
.thread [role=tabpanel] .small{font-family:var(--sans);margin-top:14px;max-width:56ch}
.js .thread [role=tabpanel].on p{animation:rise .6s var(--e)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:719px){
  .thread [role=tablist]{grid-template-columns:1fr;gap:0}
  .thread [role=tablist]::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .thread .fill{display:none}
  .thread [role=tab]{flex-direction:row;align-items:center;gap:16px;padding:12px 0}
  .thread [role=tab] .rec{order:3;margin-left:auto;height:auto}
  .thread .tps{min-height:0}
}

/* ---------- HOME: three ways in ------------------------------ */
.ways{margin-top:clamp(36px,4.4vw,60px);border-top:1px solid var(--rule)}
.way{display:grid;gap:8px 40px;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--fg);position:relative;align-items:center}
@media(min-width:860px){.way{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto}}
.way .wt{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.6vw,54px);line-height:1;letter-spacing:-.018em;transition:transform .6s var(--e)}
.way .wd{color:var(--sec);max-width:44ch;font-size:var(--bds)}
.way .wa{width:52px;height:52px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;transition:all .5s var(--e)}
.way .wa svg{width:14px;height:14px}
.way:hover .wt{transform:translateX(10px)}
.way:hover .wa{background:var(--parch);color:var(--ink);border-color:var(--parch)}
.way .st{margin-left:12px;vertical-align:.6em}
@media(max-width:859px){.way .wa{display:none}}

/* ---------- JOURNAL: strands and entries --------------------- */
.jtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.6vw,48px)}
.jtabs button{background:none;border:1px solid var(--rule-2);border-radius:999px;padding:10px 16px;font-size:14.5px;font-weight:500;
  color:var(--sec);display:inline-flex;align-items:baseline;gap:8px;cursor:pointer;transition:all .3s var(--e)}
.jtabs button:hover{color:var(--fg);border-color:var(--fg)}
.jtabs button[aria-pressed=true]{background:var(--parch);color:var(--ink);border-color:var(--parch)}
.jtabs .ct{font-family:var(--mono);font-size:11px;opacity:.75}
.entries{border-top:1px solid var(--rule)}
.entry{padding:clamp(30px,3.6vw,48px) 0;border-bottom:1px solid var(--rule)}
.entry .emeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px}
.entry .emeta .rec:first-child{color:var(--fg)}
.entry{--ehs:clamp(28px,2.9vw,42px)}
.entry h3{font-size:var(--ehs);line-height:1.02;letter-spacing:-.016em;max-width:22ch}
.entry h3 a{text-decoration:none}
.entry h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule-2)}
.entry>p{color:var(--sec);max-width:56ch;margin-top:14px;font-size:var(--bds)}
.entry .eacts{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:22px}
/* the first piece listed leads: a larger headline, and its summary set as a standfirst */
.entries>article.entry:first-of-type{--ehs:clamp(34px,3.9vw,58px)}
.entries>article.entry:first-of-type h3{line-height:.98;max-width:18ch}
.entries>article.entry:first-of-type>p{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.4;max-width:36ch}
/* side by side: the headline and its buttons together on the left, the summary on the
   right, starting level with the headline. No empty space under the title. */
@media(min-width:960px){
  .entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut)}
  .entry .emeta{grid-column:1/-1;grid-row:1}
  .entry h3{grid-column:1;grid-row:2}
  .entry .eacts{grid-column:1;grid-row:3;align-self:start;margin-top:26px}
  .entry>p{grid-column:2;grid-row:2/span 2;margin-top:calc(.2035*var(--ehs) - .451em)}
  .entries>article.entry:first-of-type>p{margin-top:calc(.1835*var(--ehs) - .3935em)}
  .entry .unroll{grid-column:1/-1;grid-row:4}
}
.jempty{padding:clamp(34px,4vw,56px) 0;border-bottom:1px solid var(--rule);display:grid;gap:14px}
.jempty h3{font-size:clamp(30px,3.4vw,50px)}
.jempty p{color:var(--sec);max-width:56ch;margin:0}
.note{margin-top:clamp(36px,4vw,56px);max-width:60ch;color:var(--sec);font-size:16px;padding-left:18px;border-left:1px solid var(--rule-2)}
.note b{color:var(--fg);font-weight:600}

/* ---------- PEOPLE: the register ----------------------------- */
.reg{margin-top:clamp(30px,3.6vw,48px)}
.reg-h,.reg-row{display:grid;grid-template-columns:4.5rem minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,1fr) 7.5rem;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.reg-h{padding:0 0 12px}
.reg-h span{font-size:12.5px;font-weight:600;color:var(--mute)}
.reg-row{text-decoration:none;color:var(--fg)}
.reg-row .rn{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.1}
.reg-row span{color:var(--sec)}
a.reg-row:hover .rn{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.reg-row.pending .rn{display:flex;align-items:center;gap:14px;color:var(--mute);font-style:italic;font-weight:500}
.reg-row.pending>:nth-child(3){grid-column:3/-1}
.reg-row.pending .bar{flex:1;height:1px;border-top:1px dashed var(--rule-2)}
.reg-row.pending .rec{color:var(--fg)}
/* while nothing is published, a few empty numbered lines follow the first one, fading
   out: an open ledger waiting to be filled. The site adds them by itself, and they
   disappear the day the "pending" row is replaced by the first real record. */
.reg-row.ghost{padding:14px 0;border-bottom:0}
.reg-row.ghost .rec{color:var(--faint)}
.reg-row.ghost .bar{grid-column:2/-1;align-self:center;height:0;border-top:1px dashed var(--rule-2)}
@media(max-width:759px){
  .reg-h{display:none}
  .reg-row{grid-template-columns:3.6rem 1fr;gap:4px 14px}
  .reg-row>:nth-child(n+3){grid-column:2;font-size:14.5px}
  .reg-row.pending .rn{display:block;font-size:22px}
  .reg-row.pending .bar{display:none}
  .reg-row.pending>:nth-child(3){grid-column:2}
  .reg-row.ghost .bar{grid-column:2}
}

/* ---------- PEOPLE: the specimen record ---------------------- */
.specbox{display:grid;gap:clamp(28px,4vw,64px);margin-top:clamp(36px,4.4vw,64px)}
@media(min-width:960px){.specbox{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);align-items:center}}
.spec{background:var(--parch);color:var(--ink);padding:clamp(26px,3.4vw,44px);position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.spec::after{content:"";position:absolute;inset:10px;border:1px solid rgba(20,16,11,.12);pointer-events:none}
.spec .spechead{display:flex;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.spec .specname{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.2vw,44px);line-height:1;margin:22px 0 8px;color:var(--ink)}
.spec .specone{font-family:var(--serif);font-weight:500;font-style:italic;font-size:19px;color:var(--sec);margin:0 0 18px;max-width:34ch}
.spec [role=tablist]{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.spec [role=tab]{background:none;border:0;border-bottom:1px solid var(--rule);padding:11px 0;text-align:left;display:flex;align-items:center;gap:14px;
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.6vw,22px);color:rgba(20,16,11,.55);position:relative;transition:color .25s,padding .35s var(--e)}
.spec [role=tab]::after{content:"";flex:1;height:1px;margin-left:8px;background:repeating-linear-gradient(90deg,rgba(20,16,11,.22) 0 3px,transparent 3px 7px)}
.spec [role=tab]:hover,.spec [role=tab][aria-selected=true]{color:var(--ink)}
.spec [role=tab][aria-selected=true]{padding-left:14px}
.spec [role=tab][aria-selected=true]::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--gold-deep)}
.spec .specprov{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px}
.specnote [role=tabpanel] h3{font-size:clamp(30px,3.2vw,46px)}
.specnote [role=tabpanel] p{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.3;color:var(--sec);max-width:28ch;margin-top:16px}
.js .specnote [role=tabpanel].on{animation:rise .5s var(--e)}
.specnote .small{margin-top:28px;max-width:46ch}

/* ---------- PEOPLE + NOMINATE: a short path ------------------- */
.path{display:grid;margin-top:clamp(34px,4vw,56px);counter-reset:p}
@media(min-width:860px){.path{grid-template-columns:repeat(4,1fr)}}
.path li{list-style:none;position:relative;padding:22px 26px 22px 0}
.path li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-2)}
.path li::after{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--parch)}
.path .rec{display:block;margin:6px 0 12px}
.path h3{font-size:clamp(23px,2vw,28px)}
.path p{color:var(--sec);font-size:16px;margin-top:10px;max-width:30ch}
@media(max-width:859px){.path li{padding:0 0 26px 30px}.path li::before{left:4px;right:auto;top:6px;bottom:-6px;width:1px;height:auto}.path li:last-child::before{display:none}.path li::after{top:2px}.path .rec{margin-top:0}}
.path{padding:0}
@media(hover:hover) and (pointer:fine){
  .path li{transition:opacity .5s var(--e)}
  .path li::before{transition:background .5s var(--e)}
  .path li::after{transition:background .5s var(--e),transform .5s var(--e)}
  .path:hover li{opacity:.32}
  .path li:hover{opacity:1}
  .path li:hover::before,.path li:has(~ li:hover)::before{background:var(--parch)}
  .path li:hover::after{background:var(--gold);transform:scale(1.4)}
}

/* ---------- PEOPLE: what a record is not --------------------- */
.nots{list-style:none;padding:0;margin:clamp(34px,4vw,56px) 0 0;display:grid;gap:clamp(26px,3vw,40px) var(--gut)}
@media(min-width:860px){.nots{grid-template-columns:1fr 1fr}}
.nots li{display:flex;flex-direction:column;gap:8px}
.nots .x{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.2vw,46px);line-height:1;letter-spacing:-.016em;position:relative;align-self:flex-start;color:var(--sec)}
.nots .x::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:2px;background:var(--parch);transform-origin:left;transform:scaleX(1)}
.js .nots .x::after{transform:scaleX(0);transition:transform .9s var(--e)}
.js .nots.in .x::after{transform:scaleX(1)}
.js .nots.in li:nth-child(2) .x::after{transition-delay:.12s}
.js .nots.in li:nth-child(3) .x::after{transition-delay:.24s}
.js .nots.in li:nth-child(4) .x::after{transition-delay:.36s}
.js .nots.in li:nth-child(5) .x::after{transition-delay:.48s}
.js .nots.in li:nth-child(6) .x::after{transition-delay:.6s}
.nots p{color:var(--sec);max-width:40ch;margin:0;font-size:var(--bds)}

/* ---------- FELLOWSHIP: the staircase ------------------------ */
.stairs{display:grid;gap:clamp(30px,4vw,64px);margin-top:clamp(36px,4.4vw,64px)}
@media(min-width:960px){.stairs{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}}
.stairs [role=tablist]{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;height:clamp(250px,30vw,380px)}
.stairs [role=tab]{background:var(--ink-3);border:0;border-top:1px solid var(--rule-2);height:calc(var(--h) * 20%);padding:14px 12px;
  text-align:left;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;transition:background .4s var(--e),height .6s var(--e)}
.stairs [role=tab] .rec{font-size:11px}
.stairs [role=tab] .sn{font-family:var(--serif);font-weight:600;font-size:clamp(14px,1.45vw,21px);line-height:1;color:var(--sec)}
@media(max-width:640px){.stairs [role=tab] .sn{display:none}.stairs [role=tab] .rec{font-size:13px}}
.stairs [role=tab]:hover{background:var(--ink-4)}
.stairs [role=tab][aria-selected=true]{background:var(--parch)}
.stairs [role=tab][aria-selected=true] .sn{color:var(--ink)}
.stairs [role=tab][aria-selected=true] .rec{color:rgba(20,16,11,.6)}
.stairs [role=tabpanel] h3{font-size:clamp(34px,3.6vw,52px)}
.stairs [role=tabpanel] p{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.8vw,25px);line-height:1.34;color:var(--sec);margin-top:14px;max-width:30ch}
.js .stairs [role=tabpanel].on{animation:rise .5s var(--e)}
.stairs-floor{display:flex;justify-content:space-between;margin-top:12px;grid-column:1}

/* ---------- FELLOWSHIP: the scorecard ------------------------ */
.score{display:grid;gap:clamp(30px,4vw,64px);margin-top:clamp(36px,4.4vw,64px)}
@media(min-width:960px){.score{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);align-items:center}}
.radar{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-inline:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.radar svg{position:absolute;inset:11%;width:78%;height:78%;overflow:visible}
.radar .ring{fill:none;stroke:var(--hair)}
.radar .ax{stroke:var(--hair);transition:stroke .3s}
.radar .entry-s{fill:none;stroke:var(--faint);stroke-dasharray:3 4;stroke-width:1.2}
.radar .end-s{fill:rgba(243,236,220,.09);stroke:var(--parch);stroke-width:1.4}
.radar .vx{fill:var(--ink);stroke:var(--hair-2);transition:all .3s}
.radar [role=tablist] button{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:6px 8px;
  font-family:var(--serif);font-weight:600;font-size:clamp(16px,1.6vw,22px);line-height:1.05;color:var(--mute);text-align:center;max-width:9em;transition:color .3s}
.radar [role=tablist] button:hover{color:var(--sec)}
.radar [role=tablist] button[aria-selected=true]{color:var(--fg)}
.score[data-active="0"] .ax0,.score[data-active="1"] .ax1,.score[data-active="2"] .ax2,.score[data-active="3"] .ax3,.score[data-active="4"] .ax4,.score[data-active="5"] .ax5{stroke:var(--gold)}
.score[data-active="0"] .vx0,.score[data-active="1"] .vx1,.score[data-active="2"] .vx2,.score[data-active="3"] .vx3,.score[data-active="4"] .vx4,.score[data-active="5"] .vx5{fill:var(--gold);stroke:var(--gold)}
.radar-key{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:6px;font-size:13.5px;color:var(--mute)}
.radar-key i{display:inline-block;width:22px;height:0;border-top:1.4px solid var(--parch);vertical-align:middle;margin-right:8px}
.radar-key i.d{border-top:1.4px dashed var(--faint)}
.scorep [role=tabpanel] h3{font-size:clamp(34px,3.6vw,52px)}
.scorep [role=tabpanel] p{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.8vw,25px);line-height:1.34;color:var(--sec);margin-top:14px;max-width:30ch}
.js .scorep [role=tabpanel].on{animation:rise .5s var(--e)}

/* ---------- FELLOWSHIP: community backing -------------------- */
.backing{display:grid;gap:clamp(30px,4vw,64px);margin-top:clamp(36px,4.4vw,64px)}
@media(min-width:960px){.backing{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);align-items:center}}
.cbs{width:100%;height:auto;overflow:visible}
.cbs .ln{stroke:var(--hair-2);stroke-width:1}
.cbs .ln.far{stroke-dasharray:2 5}
.cbs .nd{fill:var(--ink);stroke:var(--parch);stroke-width:1.2}
.cbs .nd.far{stroke:var(--faint)}
.cbs .you{fill:var(--parch)}
.cbs text{font-family:var(--serif);font-weight:600;fill:var(--parch);font-size:21px}
.cbs text.far{fill:var(--faint);font-size:17px}
.cbs text.yt{fill:var(--ink);font-size:22px}
.cbs text.cap{font-family:var(--sans);font-weight:400;font-size:13px;fill:var(--faint)}

/* a plain disclosure, for detail that most readers do not need */
.more{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;
  font-size:15.5px;font-weight:600;color:var(--fg)}
.more>summary::-webkit-details-marker{display:none}
.more>summary .pm{width:14px;height:14px;position:relative;flex:none}
.more>summary .pm::before,.more>summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--e)}
.more>summary .pm::after{transform:rotate(90deg)}
.more[open]>summary .pm::after{transform:rotate(0)}
.more .morein{padding:0 0 22px}
.more dl{margin:0;display:grid;gap:16px}
.more dt{font-weight:600;color:var(--fg);font-size:15px}
.more dd{margin:4px 0 0;color:var(--sec);font-size:15px;max-width:60ch}
.more .morein p{color:var(--sec);font-size:16px;max-width:60ch}

/* ---------- FELLOWSHIP: what it gives, a two-column ledger ---- */
.gives{list-style:none;padding:0;margin:clamp(34px,4vw,56px) 0 0;display:grid;gap:0 var(--gut)}
@media(min-width:860px){.gives{grid-template-columns:1fr 1fr}}
.gives li{padding:20px 0;border-top:1px solid var(--rule);display:grid;gap:6px}
.gives h3{font-size:clamp(22px,1.9vw,27px)}
.gives p{color:var(--sec);margin:0;font-size:var(--bds);max-width:44ch}

/* ---------- ROADMAP: the timeline ---------------------------- */
/* Five stages, read from top to bottom, because the order matters: each stage depends
   on the one before it. Each row holds the stage, what it means, and the programmes
   that belong to it with their status. Gold marks where the work is now. */
.tl{list-style:none;padding:0;margin:clamp(40px,4.4vw,64px) 0 0;position:relative}
.tl>li{position:relative;padding:0 0 36px 34px;display:grid;gap:10px;align-content:start}
.tl>li::before{content:"";position:absolute;left:6px;top:14px;bottom:0;border-left:1px dashed var(--hair-2)}
.tl>li.now::before{border-left:2px solid var(--gold);left:5px}
.tl>li:last-child::before{display:none}
.tl>li::after{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:1px solid var(--hair-2);box-sizing:border-box}
.tl>li.now::after{background:var(--gold);border-color:var(--gold)}
.tl .here{font-size:13px;font-weight:600;color:var(--gold)}
.tl .phh{display:flex;align-items:baseline;gap:14px;margin:0}
.tl h3{font-size:clamp(24px,1.9vw,30px);line-height:1.1}
.tl .ph-p{color:var(--sec);font-size:var(--bds);line-height:1.55;max-width:46ch;margin:0}
.tl .parts{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column}
.tl .parts>li+li{border-top:1px solid var(--rule)}
.tl .parts summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:10px 0;
  font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.6vw,23px);line-height:1.15;transition:color .3s var(--e)}
.tl .parts summary::-webkit-details-marker{display:none}
.tl .parts summary .st{margin-left:auto}
/* a small plus: each programme opens */
.tl .parts summary::after{content:"";flex:none;align-self:center;width:11px;height:11px;opacity:.6;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
.tl .parts details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat}
.tl .parts details p{margin:0 0 6px;font-size:16px;line-height:1.55;color:var(--sec);max-width:44ch}
.tl .parts details .ulink{margin:6px 0 16px;font-size:14px}
.tl .parts-st{margin:0;padding:8px 0}
@media(min-width:860px){
  .tl>li{grid-template-columns:minmax(10.5rem,14rem) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    column-gap:clamp(24px,4vw,64px);row-gap:8px;padding:30px 0 34px 48px;
    background:linear-gradient(var(--rule),var(--rule)) 48px 0/calc(100% - 48px) 1px no-repeat}
  .tl>li::before{top:0;bottom:0}
  .tl>li:first-child::before{top:40px}
  .tl>li:last-child::before{display:block;bottom:auto;height:40px}
  .tl>li::after{top:34px}
  .tl .phh{grid-column:1;grid-row:1}
  .tl .here{grid-column:1;grid-row:2;align-self:start}
  .tl .ph-p{grid-column:2;grid-row:1/span 2}
  .tl .parts,.tl .parts-st{grid-column:3;grid-row:1/span 2;align-self:start;margin-top:0}
  .tl .parts>li:first-child summary{padding-top:0}
  .tl .parts-st{padding-top:6px}
}
/* the Archive runs underneath all five stages, so it closes the list with a solid band */
.archline{margin-top:4px;position:relative;padding:26px 0 0;display:grid;gap:10px}
.archline::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--parch) 0,var(--parch) 18%,rgba(243,236,220,.35) 100%)}
.archline .ah{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.archline h3{font-size:clamp(24px,1.9vw,30px);line-height:1.1}
.archline p{color:var(--sec);margin:0;max-width:46ch;font-size:var(--bds);line-height:1.55}
@media(min-width:860px){
  .archline{grid-template-columns:minmax(10.5rem,14rem) minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);padding:30px 0 0 48px}
  .archline .ah{display:contents}
  .archline h3{grid-column:1;grid-row:1}
  .archline p{grid-column:2;grid-row:1}
  .archline .st{grid-column:3;grid-row:1;align-self:start;margin-top:6px;justify-self:start}
}

/* ---------- ABOUT: the manifesto ----------------------------- */
.mani [role=tablist]{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.14;letter-spacing:-.016em;max-width:30ch}
.mani [role=tab]{background:none;border:0;padding:0;text-align:left;display:inline;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--mute);transition:color .3s;
  font:inherit;letter-spacing:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.16em;text-decoration-thickness:1px}
.mani [role=tab]:hover{color:var(--sec)}
.mani [role=tab][aria-selected=true]{color:var(--fg);text-decoration-color:var(--rule-2)}
.mani .manip{margin-top:clamp(28px,3.4vw,44px);min-height:6em;max-width:56ch}
.mani [role=tabpanel] p{color:var(--sec);font-size:calc(var(--bds) + 1px);margin:0}
.mani [role=tabpanel] .rec{display:block;margin-bottom:10px}
.js .mani [role=tabpanel].on{animation:rise .5s var(--e)}
.no-js-list .mani [role=tab]{display:block}
html:not(.js) .mani [role=tab]{display:block;color:var(--fg)}

/* ---------- ABOUT: founders ---------------------------------- */
.founders{display:grid;gap:clamp(36px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
/* side by side, the two founders share rows: name, line, description, "More about" and link each sit level */
@media(min-width:860px){
  .founders{grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:0}
  .founder{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
  .founder .fmore{align-self:start}
}
.founder .recrow{margin-bottom:12px}
.founder h3{font-size:clamp(32px,3.2vw,46px)}
.founder .fl{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.8vw,24px);line-height:1.35;color:var(--fg);margin-top:14px;max-width:32ch}
.founder .bod{margin-top:14px}
.founder .more{margin-top:20px}
.founder .fmore .ulink{margin-top:18px}
.ffig{margin:0}
.ffig img{width:100%;filter:grayscale(1) contrast(1.03)}

/* ---------- ABOUT: commitments ------------------------------- */
.binds{list-style:none;padding:0;margin:clamp(34px,4vw,56px) 0 0;display:grid;gap:clamp(24px,3vw,36px)}
@media(min-width:960px){.binds{grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px)}}
.binds li{padding-top:20px;border-top:1px solid var(--rule-2)}
.binds h3{font-size:clamp(25px,2.2vw,32px)}
.binds p{color:var(--sec);margin-top:10px;font-size:var(--bds);max-width:38ch}

/* ---------- PARTNER: who you are ----------------------------- */
.aud{margin-top:clamp(34px,4vw,56px)}
.aud [role=tablist]{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.aud [role=tab]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 18px 14px 0;margin-right:22px;
  font-family:var(--serif);font-weight:600;font-size:clamp(21px,2vw,28px);color:var(--mute);text-align:left;transition:color .3s,border-color .3s}
.aud [role=tab]:hover{color:var(--sec)}
.aud [role=tab][aria-selected=true]{color:var(--fg);border-bottom-color:var(--parch)}
.aud [role=tabpanel]{padding-top:clamp(28px,3.4vw,44px);display:grid;gap:24px 60px}
@media(min-width:960px){.aud [role=tabpanel]{grid-template-columns:1.2fr .8fr}}
.aud [role=tabpanel] .ap{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.25;max-width:30ch;margin:0}
.aud .fit .fh2{font-size:13.5px;font-weight:600;color:var(--mute);margin:0 0 10px}
.aud .fit ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:6px}
.aud .fit ul a{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.aud .fit ul a:hover{border-color:var(--fg)}
.js .aud [role=tabpanel].on{animation:rise .5s var(--e)}

/* the five fundable things */
.fund{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--rule)}
.fund details{border-bottom:1px solid var(--rule)}
.fund summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:20px 0}
.fund summary::-webkit-details-marker{display:none}
.fund summary .t{font-family:var(--serif);font-weight:600;font-size:clamp(25px,2.6vw,38px);line-height:1}
.fund summary .pm{width:16px;height:16px;position:relative}
.fund summary .pm::before,.fund summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--e)}
.fund summary .pm::after{transform:rotate(90deg)}
.fund details[open] summary .pm::after{transform:rotate(0)}
.fund .fin{padding:0 0 26px 0;color:var(--sec);max-width:62ch}
.fund details:target summary .t,.fund details.flash summary .t{color:var(--gold)}

/* what a partner receives, and does not */
.yn{display:grid;gap:clamp(30px,4vw,60px) var(--gut);margin-top:clamp(34px,4vw,56px)}
@media(min-width:860px){.yn{grid-template-columns:1fr 1fr}}
.yn h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:14px}
.yn ul{list-style:none;padding:0;margin:0}
.yn li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--rule);color:var(--sec);font-size:var(--bds)}
.yn li b{color:var(--fg);font-weight:600}
.yn .mk{width:20px;height:20px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;margin-top:2px}
.yn .mk svg{width:10px;height:10px}

/* ---------- NOMINATE: the form first ------------------------- */
.nomhead{padding-bottom:clamp(60px,8vw,110px)}
.nomhead .grid{display:grid;gap:clamp(36px,5vw,80px)}
@media(min-width:1000px){.nomhead .grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.nomhead h1{font-size:clamp(48px,6.4vw,100px)}
.nomhead .formcard{background:var(--ink-2);border:1px solid var(--hair);padding:clamp(24px,3vw,40px);position:relative;z-index:1}
.crit{display:grid;gap:22px;margin-top:clamp(30px,3.6vw,48px)}
@media(min-width:560px){.crit{grid-template-columns:1fr 1fr}}
.crit h2{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--fg);margin:0 0 10px}
.crit ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.crit li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:15px;color:var(--sec);line-height:1.45}
.crit li b{color:var(--fg);font-weight:600}
.crit .mk{width:16px;height:16px;display:grid;place-items:center;margin-top:2px;color:var(--fg)}
.crit .mk svg{width:10px;height:10px}

/* ---------- 404 ---------------------------------------------- */
.lost{margin-top:clamp(40px,5vw,64px)}

/* ---------- THE RECORD TEMPLATE ------------------------------ */
.rhead{display:grid;gap:clamp(28px,3.4vw,48px)}
@media(min-width:900px){.rhead{grid-template-columns:1.05fr .95fr;align-items:end}}
.rname{font-size:clamp(46px,6.6vw,100px);line-height:.94;letter-spacing:-.02em}
.rone{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.9vw,26px);line-height:1.38;color:var(--sec);max-width:36ch;margin-top:22px}
.plate{aspect-ratio:4/3;background:var(--ink-2);border:1px solid var(--hair);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,36px)}
.plate .pt{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(21px,2vw,27px);line-height:1.3;color:var(--dim);max-width:24ch;margin:0}
.plate .pb{display:flex;flex-wrap:wrap;gap:6px 18px}
.fig{margin:0}
.fig img{width:100%}
.rsec{border-top:1px solid var(--rule);padding-block:clamp(28px,3.4vw,46px)}
.rsec .q{font-family:var(--serif);font-weight:600;font-size:clamp(23px,2vw,29px);line-height:1.12;color:var(--fg);margin:0 0 14px;max-width:16ch}
.rsec .a{max-width:38rem}
.rsec .a p{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.55vw,22px);line-height:1.6;color:var(--fg)}
@media(min-width:900px){.rsec{display:grid;grid-template-columns:16rem 1fr;gap:0 clamp(30px,4vw,60px);align-items:start}.rsec .q{margin:0}}
.prov{display:grid;margin:clamp(44px,5vw,70px) 0 0;border-top:1px solid var(--rule)}
@media(min-width:680px){.prov{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.prov{grid-template-columns:repeat(4,1fr)}}
.prov div{padding:18px 18px 18px 0;display:flex;flex-direction:column;gap:6px}
.prov dt{font-size:13px;font-weight:600;color:var(--mute)}
.prov dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--fg);line-height:1.55}

/* ---------- REVEALS (used twice on the whole site) ----------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .head h1,.js .head .lede,.js .head .acts,.js .head .recrow,.js .head .kicker,.js .head .hx{opacity:1;transform:none}
  .js .nots .x::after{transform:scaleX(1)}
}

/* SEAMLESS PAGES. Moving from one page to another, the menu bar stays exactly where it is
   while the page beneath dissolves into the next, so the site reads as one continuous
   object. Browsers that do not support this simply load the page as before. The menu bar
   is held still only on wide screens, where the phone menu panel cannot be caught in it. */
@view-transition{navigation:auto}
@media(min-width:1100px){
  /* Naming the bar for page transitions also cuts its blur layer off from the page behind
     it, which let text read through the bar. On wide screens (where the phone menu panel
     is hidden, so it cannot be boxed in) the tint and blur therefore sit on the bar itself. */
  .nav{view-transition-name:pmh-nav;background:rgba(20,16,11,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .nav::before{display:none}
}
::view-transition-old(root){animation:pmh-out .34s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pmh-in .7s var(--e) .1s both}
@keyframes pmh-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes pmh-in{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

@media print{
  .nav,.rail,#grain,.weave,footer .fletter{display:none!important}
  body,section{background:#fff!important;color:#000!important}
}