@font-face{font-family:FD;font-weight:300;font-display:swap;src:url(/fonts/Funnel-Display-300.woff) format("woff")}
@font-face{font-family:FD;font-weight:600;font-display:swap;src:url(/fonts/Funnel-Display-600.woff) format("woff")}
@font-face{font-family:FD;font-weight:800;font-display:swap;src:url(/fonts/Funnel-Display-800.woff) format("woff")}
@font-face{font-family:FS;font-weight:400;font-display:swap;src:url(/fonts/Funnel-Sans-400.woff) format("woff")}
@font-face{font-family:FS;font-weight:500;font-display:swap;src:url(/fonts/Funnel-Sans-500.woff) format("woff")}
@font-face{font-family:FS;font-weight:600;font-display:swap;src:url(/fonts/Funnel-Sans-600.woff) format("woff")}

:root{
  --paper:#f2eee8; --ink:#1c1916; --olive:#5d6b4c;
  --muted:rgba(28,25,22,.56); --line:rgba(28,25,22,.14);
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 FS,system-ui,-apple-system,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
::selection{background:var(--olive);color:var(--paper)}

/* the mark: "AI" bold olive, the O a plate with one olive dollop, "LI" light */
.wm{font:300 1em/1 FD;letter-spacing:.05em;display:inline-flex;align-items:flex-end;text-decoration:none;color:var(--ink)}
.wm b{font-weight:800;color:var(--olive);letter-spacing:.02em;margin-right:.03em}
.wm i{display:inline-block;width:.735em;height:.735em;margin:0 .05em;position:relative;transform:translateY(-.118em)}
.wm i::before{content:"";position:absolute;inset:0;border-radius:50%;border:.062em solid currentColor}
.wm i::after{content:"";position:absolute;left:50%;top:50%;width:.26em;height:.26em;border-radius:50%;background:var(--olive);transform:translate(-50%,-50%)}

.top{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gut)}
.top .wm{font-size:30px}
.top a.mail{font:500 15px FS;text-decoration:none;color:var(--muted)}
.top a.mail:hover{color:var(--ink)}

.foot{margin-top:auto;padding:28px var(--gut) 36px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font:400 13px/1.5 FS;color:var(--muted)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* home */
.home{position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column}
.hero{padding:clamp(48px,11vh,140px) var(--gut) 0;max-width:1500px;position:relative;z-index:1}
.hero h1{font:600 clamp(52px,9.4vw,152px)/.94 FD;letter-spacing:-.025em;max-width:11ch}
.hero h1 em{font-style:normal;color:var(--olive)}
.hero p.lede{margin-top:clamp(22px,3.4vh,36px);font:400 clamp(18px,1.6vw,22px)/1.45 FS;max-width:34ch;color:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:34px;height:56px;padding:0 28px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 16px FS;text-decoration:none;transition:transform .18s ease,background .18s ease}
.cta:hover{transform:translateY(-2px);background:#2c2723}
.cta:active{transform:scale(.98)}
.cta span{opacity:.6;font-weight:500}
.does{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:860px;margin:clamp(56px,10vh,110px) var(--gut) clamp(56px,9vh,96px);position:relative;z-index:1}
.does li{padding:16px 0;border-top:1px solid var(--line);font:500 17px/1.35 FS;display:flex;gap:14px;align-items:baseline}
.does li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--olive);transform:translateY(-2px)}
/* the plate, very large, half off the page */
.bigplate{position:absolute;right:calc(-1 * clamp(160px,17vw,300px));top:clamp(40px,8vh,90px);width:clamp(420px,46vw,820px);aspect-ratio:1;border-radius:50%;border:clamp(26px,2.9vw,52px) solid var(--ink);opacity:.95;pointer-events:none}
.bigplate::after{content:"";position:absolute;left:50%;top:50%;width:35%;height:35%;border-radius:50%;background:var(--olive);transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:no-preference){
  .bigplate::after{animation:settle 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
  @keyframes settle{from{transform:translate(-50%,-50%) scale(.2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
}
@media (max-width:900px){
  .bigplate{right:-38vw;top:auto;bottom:-30vw;width:88vw;opacity:.9}
  .does{grid-template-columns:1fr;margin-bottom:62vw}
}

/* legal pages */
.doc{padding:clamp(40px,8vh,96px) var(--gut) 80px;max-width:calc(720px + 2 * var(--gut))}
.doc h1{font:600 clamp(40px,6vw,72px)/1 FD;letter-spacing:-.02em}
.doc .meta{margin-top:16px;color:var(--muted);font-size:15px}
.doc h2{font:600 22px/1.25 FD;letter-spacing:-.005em;margin:48px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.doc h3{font:600 17px/1.35 FS;margin:26px 0 6px}
.doc p,.doc li{max-width:66ch}
.doc p+p{margin-top:12px}
.doc ul,.doc ol{margin:10px 0 0 1.2em}
.doc li+li{margin-top:6px}
.doc .card{margin-top:28px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.35)}
.doc .card p{margin:0}
.doc .card p+p{margin-top:6px}
.doc a{text-underline-offset:3px;text-decoration-thickness:1px}
.doc .lang{margin-top:18px;font-size:15px}
