/* EDGE — Eric Shafer · v3 · minimal
   Display: Archivo 900 (hero only) · Text: Geist · Never Inter. */
:root{
  --bg:#fff; --ink:#0a0a0b; --mute:#6b6b6b; --line:#e8e8e8;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,2.2vw,32px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;font-size:13px}
.skip:focus{top:12px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
section[id],footer[id]{scroll-margin-top:72px}
.muted{color:var(--mute)}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);color:#fff;mix-blend-mode:difference}
.logo{display:block}
/* lowercase edge (Poppins SemiBold outlines), both e's cut by the frame as in the reference */
.logo svg{height:30px;width:auto;display:block}
.bar nav{display:flex;gap:clamp(12px,2.4vw,32px);font-size:14px}
@media (max-width:420px){.bar nav{font-size:13px}}
.bar nav a{padding:6px 0}
.bar nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* hero */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
#inkHero{position:absolute;inset:0;width:100%;height:100%}
.fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;font-size:13.4vw;line-height:1;white-space:nowrap}
.ink-on .fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-l,.hero-r{position:absolute;bottom:20px;font-size:14px;line-height:1.35}
.hero-l{left:var(--gut)}
.hero-r{right:var(--gut);text-align:right}

/* sections */
.label{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.02em;color:var(--mute);margin-bottom:28px}
.intro{padding-top:clamp(120px,16vw,220px);padding-bottom:clamp(120px,16vw,220px)}
.lead{font-weight:500;font-size:clamp(28px,3.6vw,52px);line-height:1.12;letter-spacing:-.035em;max-width:22ch}
.aside{margin-top:28px;color:var(--mute);max-width:40ch}
.companies,.podcast,.about{padding-bottom:clamp(110px,14vw,200px)}

/* companies list */
.co-list{border-top:1px solid var(--line)}
.co-list li>*{display:grid;grid-template-columns:48px minmax(0,1.4fr) minmax(0,1fr) 200px;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.co-list .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.co-list .name{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.025em}
.co-list .what{color:var(--mute);font-size:15px}
.co-list .go{font-size:14px;text-align:right}
.co-list a:hover,.co-list .row:hover{padding-left:14px}
@media (max-width:760px){
  .co-list li>*{grid-template-columns:32px 1fr;row-gap:2px}
  .co-list .what,.co-list .go{grid-column:2;text-align:left}
}

/* screenshot that follows the cursor over the list */
.peek{position:fixed;left:0;top:0;z-index:40;width:min(30vw,420px);aspect-ratio:16/10;pointer-events:none;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .3s,transform .5s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
@media (hover:none){.peek{display:none}}

/* podcast */
.pod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;border-top:1px solid var(--line);padding-top:28px}
.pod-title{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;font-size:clamp(56px,9vw,150px);line-height:.85}
.pod-body{display:grid;gap:12px;max-width:44ch}
.link{margin-top:8px;text-decoration:underline;text-underline-offset:4px;justify-self:start}
@media (max-width:760px){.pod{grid-template-columns:1fr}}

/* about */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);padding-top:28px}
.about-grid>p{font-size:clamp(18px,1.5vw,22px);line-height:1.45;letter-spacing:-.012em;max-width:48ch}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts div:first-child{padding-top:0}
.facts dt{color:var(--mute);font-size:14px}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}

/* contact */
.contact{padding-bottom:28px}
.email{display:inline-block;font-weight:500;font-size:clamp(28px,5.4vw,84px);letter-spacing:-.045em;line-height:1;border-bottom:2px solid currentColor;padding-bottom:6px;margin-bottom:clamp(90px,12vw,170px);overflow-wrap:anywhere}
.email:hover{border-bottom-color:transparent}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;border-top:1px solid var(--line);padding-top:18px}
.social{display:flex;gap:24px}
.social a:hover{text-decoration:underline;text-underline-offset:4px}
.foot p{color:var(--mute)}

/* quiet entrance */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .peek,.co-list li>*{transition:none}
}