:root{
  --graphite:#1B1E21; --oxide:#C0552B; --bone:#F5F2EC; --slate:#565D63; --zinc:#9BA1A6; --sand:#E4DED2; --ink:#10201C; --white:#FFFFFF;
  --serif:'Playfair Display',Canela,'Tiempos Headline',Georgia,serif;
  --sans:Inter,'Söhne','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --measure:72ch; --ease:cubic-bezier(.2,.9,.25,1);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bone);color:var(--graphite);font-family:var(--sans);font-weight:400;line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;font-size:11px;color:var(--slate)}
.mono b{font-weight:500;color:var(--graphite)}
.ox{color:var(--oxide)}

/* datum + masthead */
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:22px 18px;border-bottom:1px solid var(--zinc);flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.015em;color:var(--graphite);text-decoration:none}
.wordmark small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.13em;color:var(--slate);margin-left:10px;vertical-align:middle;text-transform:uppercase}

/* hero */
.hero{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.hero h1{font-size:clamp(40px,7.2vw,88px);letter-spacing:-.01em;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--oxide)}
.hero .lede{font-weight:300;font-size:clamp(19px,2.1vw,24px);max-width:var(--measure);margin-top:32px;color:var(--graphite)}
.hero .lede strong{font-weight:500}

/* load-bearing rule: dashed light -> solid heavy */
.lbr{display:flex;align-items:center;margin-block:clamp(32px,5vw,56px) 0;height:12px;position:relative}
.lbr .d{flex:0 0 38%;border-top:1px dashed var(--zinc)}
.lbr .s{flex:1;border-top:2px solid var(--graphite)}
.lbr .t{position:absolute;left:38%;top:-2px;width:1px;height:12px;background:var(--oxide)}
.lbr .cap{position:absolute;left:calc(38% + 10px);top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);white-space:nowrap}

/* sections */
section{padding-block:clamp(48px,7vw,96px)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.eyebrow .n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--oxide);font-weight:500}
.eyebrow .l{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.eyebrow::after{content:"";flex:1;border-top:1px solid var(--zinc)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.two h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.01em}
.prose{max-width:var(--measure);display:grid;gap:22px}
.prose p{font-size:17px}
.prose .big{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.3;letter-spacing:-.005em}
.prose .big .ox{font-style:italic}
.sig{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);line-height:2}

/* method: tick scale */
.method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--graphite);margin-top:8px}
.step{padding:26px 22px 8px 0;position:relative}
.step::before{content:"";position:absolute;left:0;top:-2px;width:1px;height:14px;background:var(--graphite)}
.step .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--oxide);font-weight:500;display:block;margin-bottom:14px}
.step h3{font-size:22px;margin-bottom:12px;line-height:1.2}
.step p{font-size:15px;color:var(--slate)}
.dont{margin-top:56px;padding:28px 32px;background:var(--sand);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline}
.dont .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--oxide);font-weight:500}
.dont p{font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.35}

/* dark band */
.band{background:var(--ink);color:var(--bone)}
.band .eyebrow .l{color:var(--zinc)} .band .eyebrow::after{border-color:#2c3f39}
.band h2{font-size:clamp(28px,3.4vw,42px);color:var(--bone);max-width:22ch}
.band p{color:#cfd2cc;max-width:var(--measure)}
.band .def{font-weight:300;font-size:19px;margin-top:20px}
.band .def b{font-weight:500;color:var(--bone)}
.band .fig{margin-top:36px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--zinc)}

/* founders */
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.pair img{width:100%;height:auto;display:block}
.pair h2{font-size:clamp(30px,3.8vw,48px);letter-spacing:-.01em}
.pair .big{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.32;margin-top:24px;max-width:var(--measure)}
.pair .sub{margin-top:18px;color:var(--slate);max-width:var(--measure)}
.bios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);border-top:1px solid var(--zinc);padding-top:clamp(28px,4vw,48px)}
.bio{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:start}
.bio img{width:132px;aspect-ratio:4/5;object-fit:cover;display:block}
.bio h3{font-size:26px;line-height:1.1}
.bio .role{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--oxide);font-weight:500;margin:8px 0 14px;display:block}
.bio p{font-size:15px;color:var(--graphite);margin-bottom:12px}
.bio p:last-child{margin-bottom:0}
.bio .m{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--slate);text-transform:none}
.fig{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-top:10px}

/* invitation */
.invite{border-top:2px solid var(--graphite)}
.invite h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.01em;max-width:20ch}
.invite .prose{margin-top:28px}
.contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px;max-width:760px}
.card{border:1px solid var(--zinc);padding:20px 22px;display:grid;gap:6px}
.card .who{font-family:var(--serif);font-size:20px}
.card .em{font-family:var(--mono);font-size:13px;color:var(--graphite);user-select:all;word-break:break-all}
.card button{justify-self:start;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;background:none;border:1px solid var(--graphite);color:var(--graphite);padding:8px 12px;cursor:pointer;transition:all 220ms var(--ease)}
.card button:hover,.card button:focus-visible{background:var(--graphite);color:var(--bone);outline:none}
.card button.done{border-color:var(--oxide);color:var(--oxide)}

/* footer */
footer{border-top:1px solid var(--zinc);padding-block:28px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
footer .tag{font-family:var(--serif);font-style:italic;font-size:22px}
footer .tag span{color:var(--oxide)}

@media (max-width:820px){
  .two,.pair,.bios,.method,.contacts{grid-template-columns:1fr}
  .method{border-top:none}
  .step{border-top:2px solid var(--graphite);padding-top:18px}
  .dont{grid-template-columns:1fr;gap:10px}
  .bio{grid-template-columns:110px 1fr}
  .lbr .cap{display:none}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

.mast .kick{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--oxide);margin-bottom:26px}
.hero h1{max-width:16ch;font-size:clamp(40px,6.8vw,84px)}
.hero .lede{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.25;margin-top:30px;max-width:24ch}
.hero .lede .ox{font-style:italic}
.heroimg{margin-top:clamp(36px,5vw,64px)}
.heroimg img{width:100%;height:auto;display:block;max-height:760px;object-fit:cover;object-position:50% 0%}
.alt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--zinc);border:1px solid var(--zinc);margin-top:36px}
.alt>div{background:var(--bone);padding:26px 22px}
.alt .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--oxide);font-weight:500;margin-bottom:12px;display:block}
.alt h3{font-size:21px;line-height:1.22;margin-bottom:10px}
.alt p{font-size:14.5px;color:var(--slate)}
.pull{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);line-height:1.3;border-left:3px solid var(--oxide);padding-left:22px;margin-top:34px;max-width:30ch}
.note{margin-top:36px;padding:24px 28px;background:var(--sand);max-width:var(--measure)}
.note p{font-size:15px}
.note .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:8px}
.bio{grid-template-columns:150px minmax(0,1fr)}
.bio img{width:150px}
.bio .views{border-left:2px solid var(--oxide);padding-left:14px;color:var(--slate)}
.wide{max-width:var(--measure)}
.wide p{margin-bottom:18px;font-size:17px}
.wide p:last-child{margin-bottom:0}
@media (max-width:820px){.alt{grid-template-columns:1fr}.bio{grid-template-columns:110px 1fr}.bio img{width:110px}}

/* ---- site nav ---- */
.nav{position:sticky;top:0;z-index:20;background:var(--bone);border-bottom:1px solid var(--zinc)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.nav .brand{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.015em;text-decoration:none;color:var(--graphite);white-space:nowrap}
.nav .brand small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.13em;color:var(--slate);margin-left:8px;text-transform:uppercase}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--slate)}
.nav a:hover,.nav a[aria-current]{color:var(--oxide)}
@media (max-width:820px){.nav ul{gap:14px}.nav ul li:nth-child(n+4){display:none}}
/* ---- home ---- */
.btn{display:inline-block;margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);text-decoration:none;border:1px solid var(--graphite);padding:13px 20px;transition:all 220ms var(--ease)}
.btn:hover{background:var(--graphite);color:var(--bone)}
.band .btn{color:var(--bone);border-color:var(--bone)} .band .btn:hover{background:var(--bone);color:var(--ink)}
.home-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,72px)}
.home-hero img{width:100%;height:auto;display:block}
@media (max-width:820px){.home-hero{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:36px;border-top:2px solid var(--graphite)}
.kv>div{padding-top:22px;position:relative}
.kv>div::before{content:"";position:absolute;left:0;top:-2px;width:1px;height:14px;background:var(--graphite)}
.kv .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--oxide);font-weight:500;display:block;margin-bottom:10px}
.kv h3{font-size:22px;line-height:1.2;margin-bottom:10px}
.kv p{font-size:15px;color:var(--slate)}
@media (max-width:820px){.kv{grid-template-columns:1fr;border-top:none}.kv>div{border-top:2px solid var(--graphite)}}
footer .ky{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);line-height:2}
footer .ky b{color:var(--graphite);font-weight:500}