/* About page */
.ab-hero .lede{max-width:56ch}

/* The name, word by word */
.name{padding-top:clamp(90px,10vw,140px)}
.name-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;margin-top:40px;font:700 clamp(3.4rem,11vw,10.5rem)/.92 var(--sans);letter-spacing:-.055em}
.name-words button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer;opacity:.22;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.name-words button.on,.name-words button:hover,.name-words button:focus-visible{opacity:1}
.name-words button.on{transform:translateY(-.04em)}
.name-words .nd{width:.26em;height:.26em;border-radius:50%;background:var(--orange);align-self:flex-end;margin:0 0 .1em -.18em;opacity:.35}
.name-words .nd.on,.name-words .nd:hover,.name-words .nd:focus-visible{opacity:1;transform:scale(1.15)}
.name-meaning{position:relative;min-height:150px;margin-top:40px;border-top:1px solid var(--rule);padding-top:28px;display:grid;grid-template-columns:200px 1fr;gap:40px}
.name-meaning .k{font-size:.95rem;color:var(--mute)}
.name-meaning .v{font:400 italic clamp(1.5rem,2.6vw,2.2rem)/1.25 var(--serif);max-width:34ch}
.name-meaning .v.swap{animation:meaning .5s var(--ease)}
@keyframes meaning{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.name-hint{font-size:.88rem;color:var(--mute);margin-top:18px}

/* Photo band, carrying the belief in Franz's words */
.band{height:clamp(320px,62vh,640px);overflow:hidden;position:relative}
.band .img{position:absolute;inset:-12% 0;background:center/cover;will-change:transform}
.band .credit{position:absolute;right:20px;bottom:14px;z-index:2;font-size:.72rem;color:rgba(255,255,255,.8);margin:0}
.band.belief{height:auto;min-height:clamp(520px,82vh,760px);padding:0;display:flex;align-items:flex-end;color:#fff;background:var(--night)}
.band.belief::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,16,32,.62) 0%,rgba(11,16,32,.38) 40%,rgba(11,16,32,0) 72%),linear-gradient(180deg,rgba(11,16,32,.12) 0%,rgba(11,16,32,.3) 36%,rgba(11,16,32,.8) 76%,rgba(11,16,32,.96) 100%)}
.belief-in{position:relative;z-index:2;width:var(--wrap);margin-inline:auto;padding:140px 0 clamp(64px,7vw,104px)}
.belief .eyebrow{color:rgba(255,255,255,.86)}
.belief-q{margin:0}
.belief-q p{font:400 italic clamp(1.9rem,3.8vw,3.4rem)/1.1 var(--serif);letter-spacing:-.018em;max-width:25ch;text-wrap:balance;text-shadow:0 2px 24px rgba(11,16,32,.35)}
.belief-q .hl{background:linear-gradient(var(--orange),var(--orange)) 0 92%/100% .07em no-repeat;padding-bottom:.04em}
.belief-by{margin-top:26px;font-size:.98rem;color:rgba(255,255,255,.82)}
.belief-by b{color:#fff;font-weight:600}

/* Rules: panels that open on hover, focus or tap */
.rules-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end}
.rules-head .lede{margin-top:0}
.rules-hint{color:var(--mute)}
.prin{list-style:none;padding:0;display:flex;gap:12px;margin-top:56px;min-height:440px}
.pp{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:28px 26px;border-radius:24px;background:var(--salt);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--rule);transition:flex .7s var(--ease),background .4s,color .4s,box-shadow .4s}
.pp.open{flex:2.6;background:var(--ink);color:#F2F4F1;box-shadow:none}
.pp-in{display:block;margin-top:40px}
.pp .n{display:block;font-size:.8rem;font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:10px;transition:color .4s}
.pp.open .n{color:#A9B8B3}
.pp .t{display:block;font-size:clamp(1.45rem,2.1vw,1.95rem);font-weight:600;letter-spacing:-.035em;line-height:1.06}
.pp .t em{color:var(--orange)}
.pp .b{display:block;max-width:44ch;opacity:0;transform:translateY(10px);max-height:0;overflow:hidden;margin-top:0;transition:opacity .4s,transform .5s var(--ease),max-height .6s var(--ease),margin .6s var(--ease)}
.pp.open .b{opacity:1;transform:none;max-height:340px;margin-top:16px}
.pp .say{display:block;font-size:1rem;line-height:1.55;color:#C9D3CE}
.pp .eg{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(242,244,241,.18);font:400 italic 1.12rem/1.35 var(--serif);color:#fff}
.pp .eg small{display:block;font:500 .74rem/1.2 var(--sans);font-style:normal;color:#A9B8B3;margin-bottom:4px}
.pp .ic{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute);flex:none;transition:background .3s,box-shadow .3s}
.pp.open .ic{background:var(--orange);box-shadow:none}
@media (hover:hover){.pp:not(.open):hover{box-shadow:inset 0 0 0 1px var(--ink)}}

/* Founder */
.fd{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}
.fd .portrait{position:sticky;top:120px}
.fd h2{max-width:14ch}
.fd p.mute{margin-top:18px;max-width:58ch;font-size:1.08rem}
.fd-method{list-style:none;padding:0;margin-top:34px;border-top:1px solid var(--rule);counter-reset:fdm}
.fd-method li{counter-increment:fdm;display:grid;grid-template-columns:28px 150px 1fr;gap:4px 12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.fd-method li::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);align-self:center}
.fd-method li:first-child::before{background:var(--orange);box-shadow:none}
.fd-method b{font-weight:600}
.fd-method span{color:var(--mute)}
.fd-shape{margin-top:18px}
.fd .links{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}

/* Registered and accountable */
.reg{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.reg-card{position:relative;background:var(--paper);border-radius:22px;padding:36px 38px 30px;box-shadow:0 30px 60px rgba(18,36,32,.1),inset 0 0 0 1px var(--rule)}
.reg-card .top{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.reg-card .top img{height:40px;width:auto}
.reg-card .top span{font-size:.85rem;color:var(--mute)}
.reg-card dl{margin:6px 0 0}
.reg-card .row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule)}
.reg-card .row:last-child{border-bottom:0}
.reg-card dt{font-size:.88rem;color:var(--mute)}
.reg-card dd{margin:0;font-weight:500}
.stamp{position:absolute;right:-26px;bottom:-34px;width:118px;height:118px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;text-align:center;font:600 .7rem/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 30px rgba(242,84,45,.35);transform:rotate(-12deg)}
.stamp span{display:block;padding:0 14px}
.stamp-ready .stamp{transform:rotate(-40deg) scale(2.2);opacity:0}
.stamp-ready.stamped .stamp{transform:rotate(-12deg) scale(1);opacity:1;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .2s}

.reg-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px}

/* Start */
.start-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}

@media (max-width:1020px){
  .name-meaning{grid-template-columns:1fr;gap:10px}
  .rules-head{grid-template-columns:1fr}
  .rules-hint{display:none}
  .prin{flex-direction:column;min-height:0;margin-top:40px}
  .pp,.pp.open{flex:none;cursor:default;background:var(--salt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);padding:24px 22px}
  .pp-in{margin-top:16px}
  .pp .b,.pp.open .b{opacity:1;transform:none;max-height:none;margin-top:12px}
  .pp .n,.pp.open .n{color:var(--mute)}
  .pp .say{color:var(--mute)}
  .pp .eg{color:var(--ink);border-top-color:var(--rule)}
  .pp .eg small{color:var(--mute)}
  .pp .ic{background:var(--orange);box-shadow:none}
  .fd,.reg,.start-grid{grid-template-columns:1fr;gap:44px}
  .fd .portrait{position:relative;top:0;max-width:300px}
  .reg-card .row{grid-template-columns:1fr;gap:4px}
  .stamp{right:10px;bottom:-40px;width:96px;height:96px;font-size:.6rem}
}
@media (max-width:620px){
  .belief-in{padding-top:120px}
  .fd-method li{grid-template-columns:22px 1fr}
  .fd-method span{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .stamp-ready .stamp{transform:rotate(-12deg);opacity:1}
  html:not(.force-motion) .band .img{transform:none!important}
  html:not(.force-motion) .pp,html:not(.force-motion) .pp .b,html:not(.force-motion) .name-words button{transition:none}
}