/* ============================================================
   FtEC shared theme for the pages OUTSIDE the main page.

   The main page is one self-contained document with its own copy
   of these tokens, deliberately: it is the flagship and is not
   worth destabilising. These files carry the same look so that a
   visitor who lands on /contact, /feedback, /mp or /proposal
   thinks they are on the same site, which they are.

   Edit a colour here and on index.html: one block in each.
   ============================================================ */

:root{
  --paper:#F2EFE6; --ink:#14110F;
  --ink-80:rgba(20,17,15,.80); --ink-62:rgba(20,17,15,.62); --ink-40:rgba(20,17,15,.40);
  --rule:rgba(20,17,15,.16); --rule-soft:rgba(20,17,15,.09);
  --accent:#E0361A; --accent-deep:#B8240D; --reg:#1F3FD6;
  /* #E0361A is only 3.9:1 on the paper, so it fails WCAG AA the moment it is
     used as text. Links and other text take --accent-ink (4.9:1); the plain
     accent stays for fills, borders and rules, where contrast is not measured
     against the paper the same way. */
  --accent-ink:#C42E15;
  /* the fill for anything that carries text: #E0361A is 4.2:1 against the
     night ink, which fails AA at button size, so text-bearing fills use this
     one (4.7:1). The plain accent stays for rules, icons and borders. */
  --accent-fill:#E8421F;
  --night:#14110F; --night-soft:#1D1917;
  --bone:#F2EFE6; --bone-62:rgba(242,239,230,.62); --bone-40:rgba(242,239,230,.40);
  --bone-rule:rgba(242,239,230,.16);
  /* links on the night sections need a step more light to clear AA on near-black */
  --accent-lift:color-mix(in srgb, var(--accent) 78%, #fff);

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Newsreader',Georgia,'Times New Roman',serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --fly:1150ms;
  /* the polish run's motion kit: one rhythm and two springs */
  --t-fast:170ms; --t-med:280ms; --t-slow:460ms;
  --spring:cubic-bezier(.2,1.4,.4,1);
  --spring-soft:cubic-bezier(.18,1.3,.32,1);

  --bar-h:66px;
  --maxw:1280px;
  --prose:58ch;
}

*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent}
::selection{background:var(--accent-fill);color:var(--night)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 26%,transparent);
  border:3px solid var(--paper);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}
html,body{margin:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:color var(--t-fast) linear,text-decoration-color var(--t-fast) linear}
a:hover{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}
/* content links thicken their rule a step as the pointer lands */
main a:not(.btn){transition:color var(--t-fast) linear,text-decoration-thickness var(--t-fast) linear,
    text-underline-offset var(--t-fast) linear}
main a:not(.btn):hover{text-decoration-thickness:2px;text-underline-offset:3px}
/* an outside link carries a small climbing arrow, which lifts when hovered */
main a[href^="http"]:not(.btn)::after{content:'';display:inline-block;width:.6em;height:.6em;
  margin-left:.28em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 10.8 5.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.6 4.4h6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 10.8 5.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.6 4.4h6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--t-med) var(--spring)}
main a[href^="http"]:not(.btn):hover::after{transform:translate(.09em,-.09em)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar-h);
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-soft);
  transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
body.has-scrolled .site-head{border-bottom-color:var(--rule);
  box-shadow:0 16px 38px -26px rgba(20,17,15,.34)}
.site-head .in{max-width:var(--maxw);margin:0 auto;padding:0 34px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.mark{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;position:relative}
.mark::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 420ms var(--ease)}
.mark:hover::after,.mark:focus-visible::after{transform:scaleX(1)}
.site-head nav{display:flex;gap:16px;font-family:var(--font-display);font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.site-head nav a{color:var(--ink-62);text-decoration:none;position:relative;
  transition:color var(--t-med) var(--ease)}
.site-head nav a:hover{color:var(--accent)}
.site-head nav a[aria-current="page"]{color:var(--ink)}
.site-head nav a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 400ms var(--ease)}
.site-head nav a:hover::after,.site-head nav a[aria-current="page"]::after{transform:scaleX(1)}

[id]{scroll-margin-top:calc(var(--bar-h) + 28px)}
main{padding:calc(var(--bar-h) + 64px) 0 96px}
/* .wrap sets the side padding as a class, and a class beats an element, so the
   top and bottom have to be stated here too or main.wrap ends up with no
   vertical padding at all and the title sits behind the fixed bar. */
main.wrap{padding-top:calc(var(--bar-h) + 64px);padding-bottom:96px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px;width:100%}
.narrow{max-width:760px}

h1{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,5.4vw,60px);
  line-height:1.04;letter-spacing:-.03em;margin:0 0 18px;max-width:20ch}
h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.02em;margin:44px 0 10px}
p{margin:0 0 16px}
.lede{font-size:clamp(18px,1.4vw,21px);color:var(--ink-80);max-width:var(--prose)}
.attrib{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-62);margin:10px 0 0}

/* buttons, same shapes as the main page */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:12px;
  letter-spacing:.17em;text-transform:uppercase;padding:19px 30px;cursor:pointer;
  text-decoration:none;border:2px solid var(--ink);color:var(--ink);background:transparent;
  user-select:none;-webkit-user-select:none;
  transition:background 240ms var(--ease),color 240ms var(--ease),border-color 240ms var(--ease),
    transform 240ms var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:90ms}
.btn--solid{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn--solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
/* the arrow: the chain arrow's own head, drawn in after the label on hover.
   Link buttons and submit buttons only; copy buttons take the tick instead. */
a.btn::after,button.btn[type="submit"]::after{content:'';flex:0 0 auto;
  width:0;height:13px;margin-left:0;opacity:0;transform:translateX(-5px);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h12' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 1.6 22.6 8 13 14.4z' fill='black'/%3E%3C/svg%3E") no-repeat left center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h12' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 1.6 22.6 8 13 14.4z' fill='black'/%3E%3C/svg%3E") no-repeat left center/contain;
  transition:width 340ms var(--spring),margin-left 340ms var(--spring),
    opacity 200ms var(--ease),transform 340ms var(--spring)}
a.btn:hover::after,a.btn:focus-visible::after,
button.btn[type="submit"]:hover::after,button.btn[type="submit"]:focus-visible::after{
  width:15px;margin-left:9px;opacity:1;transform:none}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--small{padding:15px 20px;font-size:11px}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* forms */
form{max-width:640px;margin-top:10px}
.field{margin:0 0 22px}
label{display:block;font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-62);margin:0 0 8px;
  transition:color var(--t-fast) linear}
.field:focus-within label{color:var(--accent-deep)}
.field:has(input[aria-invalid="true"]) label,
.field:has(textarea[aria-invalid="true"]) label{color:var(--accent-deep)}
input[type="text"],input[type="email"],textarea,select{
  width:100%;font-family:var(--font-body);font-size:17px;line-height:1.5;color:var(--ink);
  background:transparent;border:1.5px solid var(--ink);border-radius:2px;padding:14px 16px;
  caret-color:var(--accent);
  transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear,
    background-color var(--t-fast) linear;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 5%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
input::placeholder,textarea::placeholder{color:var(--ink-40);opacity:.65;
  transition:opacity var(--t-fast) linear}
input:focus::placeholder,textarea:focus::placeholder{opacity:.3}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
  transition:background-color 9999s ease-out;
}
textarea{min-height:170px;resize:vertical}
.hint{font-size:15px;color:var(--ink-62);margin:8px 0 0}
.err{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-deep);margin:10px 0 0;min-height:16px}
.status{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);margin:16px 0 0;min-height:18px}
/* ============================================================
   FEEDBACK - a shake for a field that needs another look, a
   small rise for the line that says why, a tick for what went
   right, a spinner for work in progress, a tick swap on copy.
   ============================================================ */
@keyframes shakeX{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}
  46%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@keyframes errIn{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes tickIn{from{transform:rotate(-45deg) scale(0)}to{transform:rotate(-45deg) scale(1)}}
@keyframes spinIt{to{transform:rotate(360deg)}}
@keyframes pillPop{0%{transform:scale(.93)}62%{transform:scale(1.045)}100%{transform:scale(1)}}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--accent-deep);
  animation:shakeX 260ms var(--ease-io) both}
.err:not(:empty),.status:not(:empty){animation:errIn 280ms var(--ease) both}
.sent{animation:rvIn 520ms var(--ease) both}
.sent .sent-mark::before{content:'';display:inline-block;width:13px;height:8px;margin-right:10px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg) scale(0);animation:tickIn 400ms var(--spring) 140ms both;
  vertical-align:2px}
button.btn[aria-busy="true"]::after{width:15px;margin-left:9px;opacity:1;transform:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 1-6.3 2.7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 1-6.3 2.7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:spinIt 700ms linear infinite}
.btn.is-copied::after{content:'';flex:0 0 auto;height:13px;background:currentColor;
  width:15px;margin-left:9px;opacity:1;transform:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5 7.5 13.5 18 2.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5 7.5 13.5 18 2.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/contain;
  transition:width 300ms var(--spring),margin-left 300ms var(--spring),opacity var(--t-fast) linear}
/* a composed message slides up the first time it appears, and the
   audience pills pop on press and settle in with a pulse */
.card:not([hidden]){animation:rvIn 520ms var(--ease) both}
.who button:active{transform:scale(.96)}
.who button[aria-pressed="true"]{animation:pillPop 420ms var(--spring) both}
.who{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.who button{
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 18px;background:transparent;cursor:pointer;
  border:1.5px solid var(--rule);color:var(--ink-62);border-radius:2px;
  transition:border-color 200ms var(--ease),color 200ms var(--ease),background 200ms var(--ease),
    transform var(--t-fast) var(--spring);
}
.who button:hover{border-color:var(--ink-62);color:var(--ink)}
.who button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* the card the composed message lives in */
.card{border:1.5px solid var(--ink);border-radius:2px;padding:22px 24px;margin-top:24px;
  background:color-mix(in srgb,var(--paper) 92%,#fff)}
[data-mp-card]:not([hidden]){animation:rvIn 560ms var(--spring-soft) both}
[data-mp-fallback]:not([hidden]){animation:rvIn 480ms var(--ease) 120ms both}
.card .who-line{font-family:var(--font-display);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-62);margin:0 0 10px}
pre.mail{white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-body);
  font-size:16.5px;line-height:1.6;margin:0;color:var(--ink-80)}

/* the audience chooser. Bubbly on the way in, quiet on the way out. */
.pop{
  position:fixed;right:20px;bottom:74px;z-index:70;max-width:340px;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;
  box-shadow:0 18px 40px rgba(20,17,15,.18);padding:18px 20px;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
  transition:opacity 260ms var(--ease),transform 320ms cubic-bezier(.2,1.4,.4,1),visibility 260ms;
}
.pop.is-open{opacity:1;visibility:visible;transform:none}
.pop h3{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 4px}
.pop p{margin:0 0 12px;font-size:15px;color:var(--ink-62)}
.pop .rows{display:flex;flex-direction:column;gap:8px}
.pop .rows a{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--rule);border-radius:2px;padding:12px 14px;
  transition:border-color 180ms var(--ease),color 180ms var(--ease),background 180ms var(--ease),
    transform 280ms var(--spring);
}
@media (hover:hover){
  .pop .rows a:hover{transform:translateX(3px)}
}
.pop .rows a:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pop .close{position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-40);padding:6px;
  transition:color 200ms var(--ease),transform 320ms var(--spring)}
.pop .close:hover{color:var(--accent);transform:rotate(90deg)}
.contact-fab{
  position:fixed;right:20px;bottom:20px;z-index:65;
  font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 20px;cursor:pointer;border-radius:2px;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  transition:transform 240ms cubic-bezier(.2,1.4,.4,1),background 200ms var(--ease),
    color 200ms var(--ease);
}
.contact-fab:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.contact-fab:active{transform:translateY(1px) scale(.985)}

.foot{padding:52px 0 64px;background:var(--night);color:var(--bone-62);
  border-top:1px solid var(--bone-rule);margin-top:70px}
.foot .in{max-width:var(--maxw);margin:0 auto;padding:0 34px;width:100%;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end}
/* links stay inline (so a tap target never shrinks below the prose rule);
   hover draws an accent rule under the link instead of nudging it */
.foot a{color:var(--bone);text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:color var(--t-med) var(--ease),background-size 300ms var(--ease)}
.foot a:hover{color:var(--accent-lift);background-size:100% 1px}
.foot .addrs{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;line-height:2}
.foot-more{margin:12px 0 0;font-family:var(--font-display);font-size:12px;letter-spacing:.06em}

/* ============================================================
   ARRIVALS - a short rise as a page opens. CSS only, so it
   works with scripting off, and only for a reader who has not
   asked for less motion. The footer rule draws itself in.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  main h1{animation:rvIn 620ms var(--ease) both}
  main .lede{animation:rvIn 680ms var(--ease) 70ms both}
  .mem-sec{animation:rvIn 680ms var(--ease) both}
  .mem-sec:nth-of-type(2){animation-delay:80ms}
  .mem-sec:nth-of-type(3){animation-delay:160ms}
  .mem-sec:nth-of-type(4){animation-delay:240ms}
  .foot{border-top:0;position:relative}
  .foot::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--bone-rule);transform:scaleX(0);transform-origin:0 50%;
    animation:ruleIn 1100ms var(--ease) 260ms both}
}
@keyframes rvIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Numbered placeholders are notes for the writer, not for a visitor. They are
   hidden by default, so nobody ever reads a writing brief, even if the script
   that loads the writing never runs; the editor's preview shows them. */
.ph{display:none;font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-62);border:1px dashed var(--rule);
  padding:14px 16px;line-height:1.7}
.ph .n{color:var(--accent);margin-right:8px}
html[data-dev="true"] .ph{display:block}

@media (prefers-reduced-motion:reduce){
  .pop,.contact-fab,.btn,.who button{transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* the form trap: off the page, never focusable, never read out */
.hp-trap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* what a visitor sees in place of the form once the message has gone */
.sent{margin:26px 0 0;padding:22px 24px;border:1px solid rgba(12,11,12,.16);background:#fff}
.sent .sent-mark{margin:0 0 10px;font-weight:800;letter-spacing:.01em}
.sent p{margin:0 0 8px;color:var(--ink-62)}
.sent p:last-child{margin-bottom:0}
.sent a{color:var(--accent-ink)}
.finale-sent{margin:18px 0 0;font-size:17px;color:var(--bone)}

@media (max-width:560px){
  /* inside a 66px bar both links have to stay on one line each */
  .site-head nav{gap:14px}
  .site-head nav a{font-size:11px;letter-spacing:.09em}
}

/* Typography: headings balance their lines, paragraphs avoid a widow. */
h1,h2,h3,h4{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}

/* Shown when the writing could not be loaded, or when scripting is off */
.noscript{margin:0;padding:18px 22px;background:var(--paper);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:.01em;
  line-height:1.6;border-bottom:2px solid var(--accent);position:relative;z-index:2}
.noscript a{color:var(--accent)}

/* A numbered slot holds a writing brief until the writing lands. Hidden until
   then, so a visitor with scripting off reads nothing meant for the writer. */
html:not([data-dev="true"]) body:not([data-content-ready]) [data-slot]{visibility:hidden}

/* Keyboard readers should not have to walk the header on every page */
.skip-link{position:absolute;left:-9999px;top:0;z-index:80;background:var(--ink);
  color:var(--paper);padding:14px 20px;font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-fast) linear,transform var(--t-med) var(--spring)}
.skip-link:focus{left:12px;top:12px;color:var(--paper);opacity:1;transform:none}

/* Paper, for a reader who wants to keep it */
@media print{
  .site-head,.skip-link,#gate,.noscript,.actions,.pop,.contact-fab,.foot .addrs{display:none!important}
  body{background:#fff;color:#000}
  main,main.wrap{padding:0!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
  main h1,main .lede,.mem-sec{opacity:1!important;translate:0 0!important;animation:none!important}
  .foot{border-top:1px solid var(--bone-rule)!important}
  .foot::before{display:none!important}
}

/* ---------------------------------------------------------
   THE SPEED READER - the proposal page, one word at a time.
   Dark, and it takes the whole screen, because reading one word at a time
   needs the eye to stop moving. The pivot letter sits on one spot.
   --------------------------------------------------------- */
#rsvp{position:fixed;inset:0;z-index:120;background:#141110;color:#F2EFE6;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:pointer}
#rsvp.is-open{display:flex}
.rsvp-bar{position:absolute;top:0;left:0;right:0;height:5px;background:rgba(242,239,230,.14)}
.rsvp-bar i{display:block;height:100%;width:0;background:#E0361A;
  transition:width 160ms linear}
.rsvp-word{display:flex;justify-content:center;align-items:baseline;width:100%;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(40px,8vw,84px);line-height:1.05;min-height:1.15em}
/* each word lands with a whisper of fade, so the eye reads it settling */
.rsvp-word.is-word{animation:wordIn 170ms var(--ease) both}
@keyframes wordIn{from{opacity:.45}to{opacity:1}}
.rsvp-word .w-b,.rsvp-word .w-a,.rsvp-word .w-p{white-space:pre}
.rsvp-word .w-b{flex:1;text-align:right}
.rsvp-word .w-a{flex:1;text-align:left}
.rsvp-word .w-p{color:#E0361A}
.rsvp-meta{position:absolute;top:20px;left:0;right:0;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(242,239,230,.55)}
.rsvp-tip{margin-top:28px;font-size:13px;color:rgba(242,239,230,.55)}
.rsvp-ctl{position:absolute;bottom:22px;left:0;right:0;display:flex;gap:10px;
  justify-content:center;flex-wrap:wrap;padding:0 16px}
.rsvp-ctl button{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;
  padding:11px 16px;background:none;border:1px solid rgba(242,239,230,.35);color:#F2EFE6;cursor:pointer;
  transition:border-color 200ms var(--ease),color 200ms var(--ease),transform var(--t-fast) var(--spring)}
.rsvp-ctl button:hover{border-color:#E0361A;color:#E0361A}
.rsvp-ctl button:active{transform:scale(.97)}
.rsvp-ctl button:disabled{border-color:transparent;cursor:default;color:rgba(242,239,230,.75)}
@media (max-width:700px){
  .rsvp-word{font-size:clamp(38px,13vw,72px)}
  .rsvp-ctl button{padding:14px 14px;font-size:14px}
}

/* ---------------------------------------------------------
   MEMBERS - the page at /members. Cards for founders and
   members (contactable, so they carry an address), a plain
   list for supporters (never contactable). The lists render
   from /api/members; the two forms post to /api/apply.
   --------------------------------------------------------- */
.mem-sec{margin:64px 0 0}
.mem-sec h2{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.02em;margin:0 0 10px}
.mem-line{color:var(--ink-62);max-width:56ch;margin:0 0 22px}
.mem-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
/* the rows keep their equality: a clean row of three, or a column - never 2+1 */
[data-mem-founders],[data-mem-members]{
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(calc(100vw - 68px),1020px);
  margin-left:calc((100% - min(100vw - 68px,1020px)) / 2)}
[data-mem-founders] .mem-photo,[data-mem-members] .mem-photo{
  width:60px;height:60px;flex:0 0 60px}
[data-mem-founders] .mem-photo svg,[data-mem-members] .mem-photo svg{width:36px;height:36px}
[data-mem-founders] .mem-mail,[data-mem-members] .mem-mail{font-size:13px}
@media (max-width:900px){
  [data-mem-founders],[data-mem-members]{
    grid-template-columns:minmax(0,1fr);width:auto;margin-left:0}}
.mem-cards:empty{display:none}
@media (prefers-reduced-motion:no-preference){
  .mem-cards .mem-card{animation:cardIn 560ms var(--spring-soft) backwards}
  .mem-cards .mem-card:nth-child(2){animation-delay:70ms}
  .mem-cards .mem-card:nth-child(3){animation-delay:140ms}
  .mem-cards .mem-card:nth-child(4){animation-delay:210ms}
  .mem-cards .mem-card:nth-child(5){animation-delay:280ms}
  .mem-cards .mem-card:nth-child(6){animation-delay:350ms}
}
@keyframes cardIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.mem-card{border:1.5px solid var(--ink);border-radius:2px;padding:18px;display:flex;
  gap:16px;align-items:center;background:var(--paper);
  transition:transform 380ms var(--spring),border-color 260ms var(--ease),
    box-shadow 320ms var(--ease)}
@media (hover:hover){
  .mem-card:hover{transform:translateY(-3px);border-color:var(--accent);
    box-shadow:0 20px 44px -30px rgba(20,17,15,.42)}
}
.mem-photo{width:72px;height:72px;flex:0 0 72px;border-radius:50%;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:color-mix(in srgb,var(--ink) 34%,transparent);
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  transition:border-color 260ms var(--ease),color 260ms var(--ease)}
@media (hover:hover){
  .mem-card:hover .mem-photo{border-color:var(--accent);
    color:color-mix(in srgb,var(--accent) 62%,transparent)}
}
.mem-photo svg{width:44px;height:44px}
.mem-photo img{width:100%;height:100%;object-fit:cover}
.mem-body{min-width:0;overflow-wrap:anywhere}
.mem-name{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0}
.mem-role{margin:3px 0 0;color:var(--ink-62);font-size:14px}
.mem-age{display:inline-block;margin-left:8px;padding:1px 9px;border:1px solid var(--accent);
  border-radius:99px;color:var(--accent-deep);font-size:11px;font-weight:600;letter-spacing:.05em;
  transition:background 260ms var(--ease),color 260ms var(--ease)}
@media (hover:hover){
  .mem-age:hover{background:var(--accent-fill);color:var(--night)}
}
.mem-mail{margin:7px 0 0;font-size:14px}
.mem-mail a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) linear}
.mem-mail a:hover{border-bottom-color:var(--accent-deep)}
/* the member form's box shows the whole "what to include" prompt at a glance */
[data-apply-form="member"] textarea{min-height:270px}
.mem-list{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;max-width:760px}
@media (prefers-reduced-motion:no-preference){
  .mem-list li{animation:cardIn 460ms var(--spring-soft) backwards}
  .mem-list li:nth-child(2){animation-delay:55ms}
  .mem-list li:nth-child(3){animation-delay:110ms}
  .mem-list li:nth-child(4){animation-delay:165ms}
  .mem-list li:nth-child(5){animation-delay:220ms}
  .mem-list li:nth-child(6){animation-delay:275ms}
}
@media (max-width:700px){.mem-list{columns:1}}
.mem-list li{break-inside:avoid;margin:0 0 11px;font-size:15.5px}
.mem-who{color:var(--ink-62);transition:color 240ms var(--ease)}
.mem-list li:hover .mem-who{color:var(--ink)}
.mem-join{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:72px}
@media (prefers-reduced-motion:no-preference){
  .mem-join{animation:rvIn 680ms var(--ease) 160ms both}
  .mem-join .mem-form-card:nth-child(2){animation:rvIn 680ms var(--ease) 260ms both}
}
@media (max-width:900px){.mem-join{grid-template-columns:1fr}}
.mem-form-card{border:1.5px solid var(--ink);border-radius:2px;padding:26px 26px 20px;background:var(--paper)}
.mem-form-card h2{font-size:clamp(18px,2vw,22px);margin:0 0 8px}
.mem-form-card .mem-line{margin:0 0 18px}
.mem-note{grid-column:1/-1;color:var(--ink-62);font-size:13.5px;max-width:72ch;margin:0}
.mem-sec .sent{margin:0}

@media (prefers-reduced-motion:no-preference){
  .dash-row{animation:cardIn 480ms var(--spring-soft) backwards}
}

/* A filled slot comes back as a bare element, so the members page styles its
   slots by slot id and by the boxes they sit in; the classes on the
   placeholder markup only dress the brief while it is being written. */
.wrap [data-slot="m02"]{font-size:clamp(18px,1.4vw,21px);color:var(--ink-80);max-width:var(--prose)}
.mem-sec>p[data-slot]{color:var(--ink-62);max-width:56ch;margin:0 0 22px}
.mem-form-card>p[data-slot]{color:var(--ink-62);max-width:56ch;margin:0 0 18px}
.mem-sec.mem-join>[data-slot="m14"]{grid-column:1/-1;color:var(--ink-62);font-size:13.5px;max-width:72ch;margin:0}

/* ============================================================
   THE THANK YOU TAKEOVER - the reply when someone lists their
   support, or asks to join. A whole screen of thanks, then it
   hands the page back. Still frame for reduced motion.
   ============================================================ */
.celebrate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;background:var(--night);color:var(--bone);
  opacity:0;pointer-events:none;transition:opacity 420ms var(--ease)}
/* the same accent wash as the finale, rising from the bottom of the screen */
.celebrate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 120%,
    color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 62%)}
.celebrate.is-on{opacity:1;pointer-events:auto}
.celebrate.is-out{opacity:0}
html.is-celebrating,html.is-celebrating body{overflow:hidden}
.celebrate-in{position:relative;z-index:1;text-align:center;padding:0 26px;
  max-width:min(880px,100%)}
.celebrate-tick{display:inline-block;width:26px;height:15px;margin-bottom:26px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
  transform:rotate(-45deg)}
.celebrate-name{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(30px,7vw,86px);line-height:1.02;margin:0 0 18px;
  color:var(--bone);overflow-wrap:anywhere}
.celebrate-line{font-family:var(--font-body);font-size:clamp(17px,2.2vw,26px);
  line-height:1.5;color:var(--bone-62);margin:0 auto 30px;max-width:52ch}
.celebrate--member .celebrate-tick{border-color:var(--bone)}
.celebrate .celebrate-done{border-color:var(--bone);color:var(--bone)}
.celebrate .celebrate-done:hover{background:var(--bone);color:var(--night)}
.celebrate-drift{position:absolute;top:-8%;width:26px;height:17px;opacity:0;
  background:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .celebrate-tick{animation:tickIn 520ms var(--spring) 240ms both}
  .celebrate-name{animation:rvIn 560ms var(--ease) 160ms both}
  .celebrate-line{animation:rvIn 560ms var(--ease) 320ms both}
  .celebrate-drift{animation:celebrateDrift 9s linear both}
}
@keyframes celebrateDrift{
  0%{transform:translateY(0) rotate(-8deg);opacity:0}
  5%{opacity:.45}
  85%{opacity:.35}
  100%{transform:translateY(118vh) rotate(9deg);opacity:0}
}

/* the second act: the thanks steps aside and the twenty more seconds rise */
.celebrate-in{position:absolute;inset:0;z-index:1;margin:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 26px;max-width:min(880px,100%)}
.celebrate-ask{position:absolute;inset:0;z-index:1;margin:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 26px;
  opacity:0;visibility:hidden;pointer-events:none}
.celebrate.is-ask .celebrate-ask{opacity:1;visibility:visible;pointer-events:auto}
.celebrate.is-ask .celebrate-in{opacity:0;visibility:hidden;pointer-events:none}
.celebrate-ask-q{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,4.6vw,56px);line-height:1.08;margin:0 auto 14px;color:var(--bone);
  max-width:22ch;overflow-wrap:anywhere}
.celebrate-ask-line{font-family:var(--font-body);font-size:clamp(16px,2vw,22px);
  color:var(--bone-62);margin:0 auto 28px}
.celebrate-ask-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.celebrate-ask .btn{padding:18px 28px;font-size:14px}
.celebrate-mp{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--night);
  text-decoration:none}
.celebrate-mp:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone)}
.celebrate-no{border-color:var(--bone-40);color:var(--bone-62)}
.celebrate-no:hover{border-color:var(--bone);color:var(--bone-62)}
@media (prefers-reduced-motion:no-preference){
  .celebrate-in,.celebrate-ask{transition:opacity 340ms var(--ease),visibility 340ms var(--ease)}
  .celebrate.is-ask .celebrate-ask-q{animation:rvIn 520ms var(--ease) 60ms backwards}
  .celebrate.is-ask .celebrate-ask-line{animation:rvIn 520ms var(--ease) 180ms backwards}
  .celebrate.is-ask .celebrate-ask-row{animation:rvIn 520ms var(--ease) 300ms backwards}
}

/* ============================================================
   WHEN SCRIPTING IS OFF, OR THE SCRIPT DIED
   The writing is in the HTML (baked at deploy time); the forms
   and the floating pieces rest, so a reader never meets a dead
   control.
   ============================================================ */
html:not(.js) .fab,
html:not(.js) .contact-fab,
html:not(.js) .pop,
html:not(.js) [data-mail-form],
html:not(.js) [data-apply-form],
html:not(.js) [data-mp-form],
html:not(.js) [data-mp-card]{display:none!important}
html:not(.js) [data-mp-fallback]{display:block!important}
.nojs-links{display:none}
html:not(.js) .nojs-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin:30px 0 0}
html:not(.js) .nojs-links a{font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent-deep) 45%,transparent)}
html:not(.js) .nojs-links a:hover{border-bottom-color:var(--accent-deep)}

/* the one support form, on the members page: the note and the quiet opt-out */
.mem-form-card .fin-note{font-size:13px;line-height:1.55;color:var(--ink-62);margin:2px 0 0;max-width:52ch}
.mem-form-card .fin-check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-62);margin:4px 0 0;cursor:pointer}
.mem-form-card .fin-check input{width:auto;margin:3px 0 0;accent-color:var(--accent)}