:root{
	--bone:#EFECE4; --paper:#F6F4EE; --ink:#12201C; --ink-2:#4A524F; --ink-3:#5F6663; --rule:#D6D1C4;
	--verd:#164A44; --verd-2:#0E322E; --pale:#C4E2D6; --pale-2:#9FC7B8;
	--serif:"Source Serif 4", Georgia, serif; --sans:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
	--m: clamp(20px, 3.4vw, 60px); --g: clamp(16px, 2vw, 32px);
	--out: cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;overflow-x:clip}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga","onum"}
/* the paper: a faint tooth over everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.38;mix-blend-mode:multiply;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .43  0 0 0 0 .38  0 0 0 .16 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
::selection{background:var(--verd);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--verd);outline-offset:4px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:380;letter-spacing:-.02em;line-height:1.02;margin:0;font-variation-settings:"opsz" 60;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.it{font-family:var(--serif);font-style:italic;font-weight:400}

/* nav */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:20px var(--m);background:var(--bone);transition:box-shadow .4s}
.bar.scrolled{box-shadow:0 1px 0 var(--rule)}
.wm{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:24px;letter-spacing:.08em;text-decoration:none;font-weight:480}
.seal{width:26px;height:26px;color:var(--verd)}
.bar nav{display:flex;align-items:center;gap:36px;font-size:15px;font-weight:500}
.bar nav a:not(.btn){text-decoration:none;position:relative}
.bar nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.bar nav a:not(.btn):hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font:600 15px var(--sans);text-decoration:none;transition:background-color .25s,color .25s,transform .16s var(--out)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink:hover{background:var(--verd)}
.btn-line{box-shadow:inset 0 0 0 1px var(--ink)}.btn-line:hover{background:var(--ink);color:var(--paper)}

/* hero: the engraving is printed onto the page, a rosette turns behind it */
.hero{position:relative;padding:clamp(40px,6vw,90px) var(--m) clamp(70px,8vw,120px);align-items:center;min-height:calc(100svh - 76px)}
.hero-copy{grid-column:1/6;position:relative;z-index:2}
.hero h1{font-size:clamp(2.9rem, 1.2rem + 3.6vw, 4.9rem)}
.lede{margin-top:30px;font-size:clamp(1.06rem, .98rem + .3vw, 1.26rem);color:var(--ink-2);max-width:29em}
.actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero-art{grid-column:6/13;position:relative;margin:0 calc(var(--m) * -1) 0 0}
.hero-art .ros{position:absolute;width:104%;left:2%;top:46%;translate:0 -50%;color:var(--verd);opacity:.13;animation:turn 260s linear infinite;pointer-events:none}
.hero-art img{position:relative;width:100%}
.plate-cap{display:flex;gap:14px;align-items:baseline;margin-top:6px;font-size:13.5px;color:var(--ink-2);max-width:40em}
.plate-cap .no{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--verd);white-space:nowrap}
@keyframes turn{to{rotate:360deg}}
.ros svg{display:block;width:100%;height:auto}

/* seams: guilloche bands between movements */
.seam{height:46px;color:var(--verd);opacity:.32;background:currentColor;-webkit-mask:url(/img/band.svg) center/100% 100% no-repeat;mask:url(/img/band.svg) center/100% 100% no-repeat;margin:0 var(--m)}

/* statement */
.statement{padding:clamp(80px,10vw,170px) var(--m)}
.statement p{font-family:var(--serif);font-weight:360;font-size:clamp(1.8rem, 1.1rem + 2.1vw, 3.25rem);line-height:1.14;letter-spacing:-.014em;max-width:22.5em}
.statement p em{font-style:italic;color:var(--verd)}
.statement .links{display:flex;gap:30px;margin-top:44px;font-size:15px;font-weight:600}
.statement .links a{text-decoration:none;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--out)}
.statement .links a:hover{background-size:0 1px;background-position:100% 100%}

/* territories: plates printed across the spread */
.terr{padding:0 var(--m) clamp(60px,8vw,120px)}
.terr-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;padding:clamp(56px,6vw,100px) 0 clamp(20px,3vw,40px)}
.terr-head h2{grid-column:1/8;font-size:clamp(2.3rem, 1.3rem + 2.7vw, 4.2rem)}
.terr-head p{grid-column:9/13;color:var(--ink-2)}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center;padding:clamp(20px,3vw,48px) 0}
.row .art{grid-column:1/9;margin-left:calc(var(--m) * -1);display:flex;justify-content:center}
.row .art img{height:min(80svh,820px);width:auto;max-width:100%;object-fit:contain}
.row .txt{grid-column:9/13}
.row.flip .art{grid-column:5/13;grid-row:1;margin:0 calc(var(--m) * -1) 0 0}
.row.flip .txt{grid-column:1/5;grid-row:1}
.kick{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--verd)}
.kick .it{font-size:15.5px;font-weight:400;color:var(--ink-3)}
.row h3{font-size:clamp(2rem, 1.25rem + 1.7vw, 3.1rem)}
.row .txt>p{margin-top:18px;color:var(--ink-2);font-size:17.5px}
.row .plate-cap{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}

/* the work: a research index */
.work{padding:clamp(80px,9vw,150px) var(--m);background:var(--paper);position:relative}
.work-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;margin-bottom:clamp(32px,4vw,60px)}
.work-head h2{grid-column:1/7;font-size:clamp(2.3rem, 1.3rem + 2.7vw, 4.2rem)}
.work-head p{grid-column:8/12;color:var(--ink-2)}
.item{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:30px 0;border-top:1px solid var(--rule);align-items:center;position:relative;transition:background-color .4s}
.item:last-child{border-bottom:1px solid var(--rule)}
.item .st{grid-column:1/3}
.item h3{grid-column:3/6;font-size:clamp(1.6rem, 1.2rem + .9vw, 2.2rem)}
.item p{grid-column:6/11;color:var(--ink-2)}
.item .vig{grid-column:11/13;justify-self:end;width:132px;aspect-ratio:1;object-fit:contain;transition:transform .8s var(--out),opacity .4s;opacity:.85}
.item:hover .vig{transform:scale(1.08) rotate(-2deg);opacity:1}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.chip.built::before{background:currentColor}
.chip.review::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.chip.front{color:var(--verd)}.chip.front::before{background:var(--verd);box-shadow:0 0 0 4px color-mix(in srgb,var(--verd) 18%,transparent)}

/* worldfold: the green chapter, printed like a note */
.chapter{position:relative;background:var(--verd);color:var(--paper);padding:clamp(90px,10vw,170px) var(--m);overflow:hidden;isolation:isolate}
.chapter .ros{position:absolute;width:min(1300px,110vw);right:-22%;top:50%;translate:0 -50%;color:var(--pale);opacity:.12;animation:turn 320s linear infinite reverse;z-index:-1}
.chapter .edge{position:absolute;left:0;right:0;height:42px;color:var(--pale);opacity:.22;background:currentColor;-webkit-mask:url(/img/band.svg) center/100% 100% no-repeat;mask:url(/img/band.svg) center/100% 100% no-repeat}
.chapter .edge.t{top:22px}.chapter .edge.b{bottom:22px}
.chapter .grid{align-items:center}
.ch-copy{grid-column:1/6}
.ch-copy .kick{color:var(--pale)}
.ch-copy h2{font-size:clamp(3.6rem, 1.4rem + 7vw, 9.2rem);letter-spacing:-.035em;font-weight:340;margin-left:-.04em}
.ch-copy p{margin-top:30px;font-size:clamp(1.1rem, 1rem + .4vw, 1.36rem);max-width:27em;color:#D6E8E1}
.ch-copy .btn{margin-top:38px;background:var(--paper);color:var(--verd)}
.ch-copy .btn:hover{background:var(--pale)}
.ch-art{grid-column:6/13;margin:0 calc(var(--m) * -1) 0 0}
.ch-art .plate-cap{color:var(--pale-2)}.ch-art .plate-cap .no{color:var(--pale)}

/* how we think */
.think{padding:clamp(90px,10vw,160px) var(--m)}
.think-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end}
.think h2{grid-column:1/8;font-size:clamp(2.3rem, 1.3rem + 2.7vw, 4.2rem)}
.think-head img{grid-column:10/13;justify-self:end;width:min(260px,100%);opacity:.9}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--g);margin-top:clamp(40px,5vw,72px)}
.rule{padding:32px 0 34px;border-top:1px solid var(--rule);display:grid;gap:12px;padding-right:8%}
.rule h3{font-size:clamp(1.45rem, 1.15rem + .75vw, 2rem)}
.rule p{color:var(--ink-2);max-width:32em}
.quote{grid-column:1/-1;margin:0;padding:clamp(48px,5vw,80px) 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.quote p{grid-column:1/10;font-family:var(--serif);font-style:italic;font-weight:330;font-size:clamp(1.8rem, 1.1rem + 2vw, 3.1rem);line-height:1.16;letter-spacing:-.01em}
.quote cite{grid-column:1/10;display:block;font:500 14px var(--sans);font-style:normal;color:var(--ink-3);margin-top:20px}

/* join */
.join{background:var(--verd-2);color:var(--paper);padding:clamp(70px,8vw,120px) var(--m)}
.join .grid{align-items:end}
.join h2{grid-column:1/7;font-size:clamp(2.3rem, 1.3rem + 2.7vw, 4.2rem)}
.join div{grid-column:8/13}
.join p{color:#BFD3CC}
.join .btn{margin-top:26px;background:var(--paper);color:var(--verd-2)}
.join .btn:hover{background:var(--pale)}

/* footer: the name, with the cosmos printed through it */
.foot{position:relative;background:var(--ink);color:var(--paper);padding:0 var(--m) 34px;overflow:hidden}
.foot .ros{position:absolute;width:900px;left:50%;top:-38%;translate:-50% 0;color:var(--pale);opacity:.06;animation:turn 400s linear infinite}
.big{position:relative;font-family:var(--serif);font-weight:460;font-size:clamp(6rem, 1rem + 25.5vw, 27rem);line-height:.82;letter-spacing:-.02em;margin:0;padding-top:24px;
	background:url(/img/kepler-verd-1600.webp) center 40%/cover;background-image:image-set(url(/img/kepler-verd-1600.avif) type("image/avif"), url(/img/kepler-verd-1600.webp) type("image/webp"));-webkit-background-clip:text;background-clip:text;color:transparent;
	animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{background-position:center 62%}}
.foot-row{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-top:30px;font-size:13.5px;color:#9AA29E;border-top:1px solid #26302C;padding-top:24px}
.foot-row .a{grid-column:1/5}.foot-row .b{grid-column:5/9}.foot-row .c{grid-column:9/13;text-align:right}
.foot-row a{color:var(--paper);text-decoration:none}.foot-row a:hover{text-decoration:underline}

/* ink-in: things arrive the way ink takes to paper */
.js .rise{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1s var(--out),transform 1.1s var(--out),filter 1s var(--out);transition-delay:var(--d,0ms)}
.js .rise.in{opacity:1;transform:none;filter:none}
.js .print{opacity:0;filter:blur(10px) contrast(.6);transform:scale(1.015);transition:opacity 1.6s var(--out),filter 1.8s var(--out),transform 2.2s var(--out)}
.js .print.in{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){
	.js .rise,.js .print{opacity:1;transform:none;filter:none;transition:none}
	.ros,.big{animation:none}
}

@media (max-width:980px){
	.bar nav a:not(.btn){display:none}
	.hero{min-height:0}
	.row .art img{height:auto;width:100%}
	.hero-copy,.hero-art,.row .art,.row .txt,.row.flip .art,.row.flip .txt,.ch-copy,.ch-art,.join h2,.join div,.terr-head h2,.terr-head p,.work-head h2,.work-head p,.think h2{grid-column:1/-1;grid-row:auto;margin-left:0;margin-right:0}
	.hero-art{margin-top:36px}.row .txt{margin-top:8px}.ch-art{margin-top:40px}
	.terr-head p,.work-head p{margin-top:16px}
	.item{grid-template-columns:1fr auto;gap:10px 16px}
	.item .st,.item h3,.item p{grid-column:1}.item .vig{grid-column:2;grid-row:1/4;width:84px}
	.rules{grid-template-columns:1fr}.think-head img{display:none}
	.quote p,.quote cite{grid-column:1/-1}
	.join div{margin-top:20px}
	.foot-row{display:block}.foot-row>*{display:block;text-align:left !important;margin-top:8px}
}

/* ---------- inner pages ---------- */
.bar nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.item h3 a{text-decoration:none}.item h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.ph{padding:clamp(40px,6vw,90px) var(--m) clamp(60px,7vw,110px);align-items:center;min-height:min(88svh,900px)}
.ph-copy{grid-column:1/6;position:relative;z-index:2}
.ph h1{font-size:clamp(3rem, 1.3rem + 4vw, 5.6rem)}
.ph-art{grid-column:6/13;margin:0 calc(var(--m) * -1) 0 0;display:flex;flex-direction:column;align-items:center}
.ph-art img{height:min(72svh,760px);width:auto;max-width:100%;object-fit:contain}
.ph-art .plate-cap{align-self:flex-start;margin-left:4%}
.mail{margin-top:34px;font-family:var(--serif);font-size:clamp(1.8rem, 1.1rem + 2vw, 3rem);letter-spacing:-.01em}
.mail a{text-decoration:none;background:linear-gradient(var(--verd),var(--verd)) 0 100%/100% 2px no-repeat;padding-bottom:4px;color:var(--verd)}

.sec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:0;padding:clamp(70px,8vw,130px) var(--m);border-top:1px solid var(--rule);align-items:start}
.sec>h2{grid-column:1/6;font-size:clamp(2.1rem, 1.3rem + 2.2vw, 3.7rem);max-width:10em}
.sec .body{grid-column:7/13;display:grid;gap:1.1em;font-size:18px;color:var(--ink-2)}
.sec .body p.lead{font-family:var(--serif);font-weight:360;font-size:clamp(1.4rem, 1.1rem + .8vw, 1.9rem);line-height:1.28;color:var(--ink);letter-spacing:-.006em}
.qs{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--g);margin-top:clamp(40px,5vw,72px)}
.q{padding:30px 8% 34px 0;border-top:1px solid var(--rule)}
.q h3{font-size:clamp(1.5rem, 1.15rem + .95vw, 2.2rem);line-height:1.12}
.q p{margin-top:14px;color:var(--ink-2);max-width:32em}
.ladder{grid-column:7/13;list-style:none;margin:0;padding:0;counter-reset:l}
.ladder li{display:grid;grid-template-columns:3.4rem 1fr;column-gap:16px;padding:24px 0;border-top:1px solid var(--rule);counter-increment:l}
.ladder li::before{content:counter(l, upper-roman);grid-row:1/3;font-family:var(--serif);font-style:italic;color:var(--verd);font-size:1.5rem;line-height:1.15}
.ladder h3{font-size:clamp(1.4rem, 1.15rem + .7vw, 1.9rem)}
.ladder p{grid-column:2;color:var(--ink-2);margin-top:6px}
.legend{grid-column:7/13;display:grid}
.legend>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--rule);align-items:baseline}
.legend strong{font-family:var(--serif);font-weight:420;font-size:1.3rem}
.legend p{color:var(--ink-2)}

.proj,.chap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:clamp(70px,8vw,130px) var(--m);border-top:1px solid var(--rule);align-items:center}
.proj .art,.chap .art{grid-column:1/7;margin:0 0 0 calc(var(--m) * -1);display:flex;flex-direction:column;align-items:center}
.proj .art img,.chap .art img{height:min(70svh,720px);width:auto;max-width:100%;object-fit:contain}
.proj .txt,.chap .txt{grid-column:8/13;display:grid;gap:16px}
.proj.flip .art,.chap.flip .art{grid-column:7/13;grid-row:1;margin:0 calc(var(--m) * -1) 0 0}
.proj.flip .txt,.chap.flip .txt{grid-column:1/6;grid-row:1}
.proj h2{font-size:clamp(2.8rem, 1.5rem + 3.3vw, 5rem)}
.chap h2{font-size:clamp(2.2rem, 1.3rem + 2.4vw, 3.8rem)}
.proj .txt>p:not(.proj-kind):not(.lesson):not(:first-child){color:var(--ink-2)}
.proj-kind{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink)}
.lesson{margin-top:10px;padding:22px 0 0;border-top:1px solid var(--rule);font-family:var(--serif);font-size:1.35rem;line-height:1.3;color:var(--verd)}
.chapters{list-style:none;margin:0;padding:0}
.chap .txt>p:last-child{color:var(--ink-2);font-size:18px}

/* the Worldfold page opens on green */
.is-green .bar{background:var(--verd);color:var(--paper)}
.is-green .bar.scrolled{box-shadow:0 1px 0 #2B5D56}
.is-green .bar .btn-ink{background:var(--paper);color:var(--verd)}
.is-green .seal{color:var(--pale)}
.wf-hero{min-height:calc(100svh - 76px);display:flex;align-items:center}
.wf-hero>.grid{width:100%}
.wf-hero h1{font-size:clamp(4rem, 1.4rem + 8vw, 10.5rem);letter-spacing:-.04em;font-weight:330;margin-left:-.04em}

@media (max-width:980px){
	.ph{min-height:0}
	.ph-copy,.ph-art,.sec>h2,.sec .body,.ladder,.legend,.proj .art,.proj .txt,.proj.flip .art,.proj.flip .txt,.chap .art,.chap .txt,.chap.flip .art,.chap.flip .txt{grid-column:1/-1;grid-row:auto;margin-left:0;margin-right:0}
	.ph-art{margin-top:36px}.ph-art img,.proj .art img,.chap .art img{height:auto;width:100%}
	.sec .body,.ladder,.legend{margin-top:28px}
	.proj .txt,.chap .txt{margin-top:28px}
	.qs{grid-template-columns:1fr}
	.legend>div{grid-template-columns:1fr;gap:8px}
}

.skip{position:absolute;left:var(--m);top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:14px}
img.seal{display:block}
.credits .legend a{color:var(--verd)}