/* Shared styles for the project pages. Same paper, ink and Inter as the home page. */
:root{
  --paper:#F2F0EA; --ink:#201F1D; --ink-soft:rgba(32,31,29,.62); --line:rgba(32,31,29,.14);
  --green:#008E21; --green-soft:#DDE8DA; --tag:rgba(61,166,90,.77);
  --display:"Space Grotesk","Inter",ui-sans-serif,system-ui,sans-serif;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);padding-inline:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin-inline:auto}

/* nav */
.nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding-block:20px;margin-inline:-16px;padding-inline:clamp(16px,4vw,48px);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav a{text-decoration:none}
.nav .me{font-weight:500;font-size:17px}
.nav .back{display:inline-flex;align-items:center;gap:8px;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:background .25s,color .25s}
.nav .back:hover{background:var(--ink);color:#fff}
.nav a:focus-visible,.btn:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:999px}

/* type */
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.h1{font-size:clamp(46px,8vw,112px);font-weight:700;letter-spacing:-.055em;line-height:.92;margin:0}
.h2{font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:0;text-wrap:balance}
.h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;margin:0}
.lead{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-soft);margin:0;max-width:56ch;text-wrap:pretty}
.muted{color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{font-size:clamp(14px,1.15vw,16px);font-weight:500;padding:7px 16px;border-radius:10px;background:var(--tag)}

/* sections */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec + .sec{border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.card{background:#fff;border-radius:20px;padding:clamp(20px,2.4vw,32px)}
.figure{border-radius:20px;overflow:hidden}
.figure img{width:100%;height:auto}
.cap{font-size:13px;color:var(--ink-soft);margin-top:10px}

/* buttons + footer */
.btn{display:inline-flex;gap:10px;align-items:center;background:var(--ink);color:#fff;border-radius:999px;padding:14px 22px;font-size:15px;font-weight:500;text-decoration:none;transition:gap .3s ease}
.btn:hover{gap:16px}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.next a.big{font-size:clamp(28px,5vw,64px);font-weight:700;letter-spacing:-.05em;text-decoration:none;display:inline-flex;gap:.3em;align-items:center}
.next a.big span{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.next a.big:hover span{transform:translateX(8px)}
.foot{border-top:1px solid var(--line);padding-block:32px 56px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-soft)}

/* reveal on scroll */
.rv{opacity:0;translate:0 26px;transition:opacity .9s ease,translate 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}

@media (max-width:860px){.grid2,.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;translate:none;transition:none}}

html,body,a,button,[role=button]{cursor:url(img/cursor.png) 2 2,auto}
html[data-theme="dark"],html[data-theme="dark"] body,html[data-theme="dark"] a,html[data-theme="dark"] button,html[data-theme="dark"] .ava,html[data-theme="dark"] .orb,html[data-theme="dark"] [role=button]{cursor:url(img/cursor_light.png) 2 2,auto}

h1,h2,h3,.name,.role,nav,.btn,.mail,.c-row a,.kicker,.hook,.h1,.h2,.h3,.next a.big,.eyebrow,.lbl,.head h2{font-family:var(--display)}

/* dark theme */
html[data-theme="dark"]{--paper:#111213;--ink:#ECE9E2;--ink-soft:rgba(236,233,226,.62);--line:rgba(236,233,226,.14);--green-soft:#1d2a1f;color-scheme:dark}
html[data-theme="dark"] .card{background:#1B1C1E}
html[data-theme="dark"] .btn{color:#111213}
html[data-theme="dark"] .nav .back:hover{color:#111213}
html[data-theme="dark"] .tags span{color:#ECE9E2}
html[data-theme="dark"] .chip{color:#201F1D}
html[data-theme="dark"] .pill{color:#111213}

::selection{background:#D2581C;color:#fff}
html[data-theme="dark"] ::selection{background:#FF8F4A;color:#111213}