/* Landing intro: top bar, a greeting, who I've worked with, and room for a photo.
   Breakpoints: Desktop 1440+ | Laptop 1439-1025 | Tablet 1024-700 | Phone 699 and below. */
.hello{position:relative;overflow:hidden;min-height:min(100svh,920px);padding:clamp(70px,6.2vw,96px) var(--pad) 0;display:flex;flex-direction:column;background:#FDFDFB}
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgimg{position:absolute;inset:-24px;background:center 38%/cover no-repeat;filter:blur(4px) saturate(1.1)}
.veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(253,253,251,.86) 0%,rgba(253,253,251,.66) 48%,rgba(253,253,251,.22) 100%)}

/* top bar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:40;padding:0 var(--pad)}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(12px,1.6vw,22px) 0}
.mark{justify-self:start;display:inline-flex;align-items:center;gap:10px;font:800 clamp(17px,1.5vw,22px)/1 var(--display);letter-spacing:-.03em;text-decoration:none}
.pillnav{position:fixed;z-index:60;left:50%;top:calc(clamp(12px,1.6vw,22px) + clamp(42px,3.4vw,50px)/2);transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:#EEF1FF;box-shadow:0 6px 20px -10px rgba(17,17,17,.25);transition:top .25s}
.pillnav a{display:block;padding:clamp(9px,1vw,13px) clamp(16px,2.2vw,36px);border-radius:999px;font:600 clamp(14px,1.15vw,17px)/1 var(--display);color:#5B6070;text-decoration:none;transition:color .2s,background .2s,box-shadow .2s}
.pillnav a:hover{color:var(--ink)}
.pillnav a.on{color:var(--ink);background:#fff;box-shadow:0 2px 8px -2px rgba(43,75,255,.25)}
.acts{justify-self:end;display:flex;align-items:center;gap:12px}
.li{display:inline-flex;gap:6px;align-items:center;height:clamp(42px,3.4vw,50px);padding:0 clamp(18px,1.8vw,26px);border:2px solid var(--ink);border-radius:14px;background:transparent;font:600 clamp(14px,1.15vw,17px)/1 var(--display);color:var(--ink);text-decoration:none;transition:transform .2s,background .2s,color .2s}
.li span{color:var(--ink);transition:transform .2s}
.li:hover span{transform:translate(2px,-2px)}
.li:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.li:hover span{color:#fff}
.solid{display:inline-flex;align-items:center;height:clamp(42px,3.4vw,50px);padding:0 clamp(20px,2vw,28px);border-radius:14px;background:var(--ink);color:#fff;font:600 clamp(14px,1.15vw,17px)/1 var(--display);text-decoration:none;transition:transform .2s,background .2s}
.solid:hover{background:var(--accent);transform:translateY(-2px)}

/* greeting */
.intro{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;column-gap:clamp(24px,5vw,96px);padding:clamp(40px,5vw,72px) clamp(0px,2vw,32px) clamp(48px,5vw,88px) clamp(0px,5vw,80px)}
.eyebrow{margin:0 0 clamp(14px,1.4vw,22px);font:700 clamp(12px,1vw,14px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#6B7080}
.hello h1{margin:0 0 clamp(16px,1.8vw,26px);font:600 clamp(48px,7vw,112px)/1 var(--display);letter-spacing:-.05em}
.sub{max-width:26em;margin:0 0 clamp(32px,3.6vw,52px);font:500 clamp(17px,1.5vw,23px)/1.45 var(--display);letter-spacing:-.01em;color:#4A4E57;text-wrap:balance}
.wk{display:flex;align-items:center;flex-wrap:wrap;gap:14px clamp(20px,2.4vw,36px);padding-top:clamp(18px,2vw,28px);border-top:1px solid rgba(17,17,17,.12)}
.logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.2vw,34px)}
.logos img{display:block;width:auto;opacity:.85}
.l1{height:clamp(20px,2vw,30px)}
.l2{height:clamp(30px,2.9vw,44px)}
.l3{height:clamp(30px,3vw,45px)}
.l4{height:clamp(20px,1.9vw,28px)}

/* photo */
.stack{position:relative;justify-self:center;width:min(100%,clamp(240px,24vw,380px))}
.hero-photo{position:relative;width:100%;aspect-ratio:4/5;margin:0;border-radius:clamp(20px,2vw,32px);overflow:hidden;transform:rotate(3deg);background:linear-gradient(160deg,#F4F6FF,#C9D3FF);box-shadow:0 24px 48px -20px rgba(17,17,17,.35)}
.hero-photo .mono{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(64px,8vw,140px)/1 var(--display);letter-spacing:-.06em;color:var(--accent);opacity:.55}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:48% 38%}

@media (max-width:1024px){
  .hello{min-height:0}
  .intro{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);padding-left:0}
}
@media (max-width:699px){
  .hello{padding-top:116px}
  .pillnav{left:var(--pad);right:var(--pad);top:calc(12px + 40px + 10px + 22px);width:auto;transform:translateY(-50%);justify-content:space-between}
  .pillnav.stuck{top:34px}
  .acts{gap:8px}.li,.solid{height:40px;padding:0 14px;font-size:14px}
  .pillnav a{flex:1;text-align:center;padding-left:8px;padding-right:8px}
  .intro{grid-template-columns:1fr;row-gap:40px;padding-top:40px;padding-bottom:48px}
  .hello h1{font-size:clamp(34px,10.5vw,52px)}
  /* phone intro: stacked, readable, everything scales with the screen; the photo is capped so it never balloons */
  .veil{background:linear-gradient(180deg,rgba(253,253,251,.9) 0%,rgba(253,253,251,.82) 55%,rgba(253,253,251,.6) 100%)}
  .intro{row-gap:clamp(22px,4vw,36px);padding-top:clamp(25px,3.9vw,27px);padding-bottom:clamp(40px,7vw,64px)}
  .eyebrow{margin-bottom:clamp(10px,2vw,16px);font-size:clamp(12px,2.1vw,15px)}
  .hello h1{margin-bottom:clamp(12px,2.4vw,18px);font-size:clamp(46px,11.6vw,80px)}
  .sub{max-width:24em;margin-bottom:clamp(24px,4.6vw,36px);font-size:clamp(17px,3.3vw,23px)}
  .wk{padding-top:clamp(18px,3.4vw,26px)}
  .logos{flex-wrap:nowrap;justify-content:space-between;gap:10px;max-width:clamp(0px,100%,560px)}
  .l1{height:clamp(16px,4.1vw,26px)}.l2{height:clamp(24px,6.2vw,38px)}.l3{height:clamp(24px,6.2vw,39px)}.l4{height:clamp(14px,3.6vw,23px)}
  .mark{font-size:clamp(17px,3.2vw,22px)}
  .pillnav a{font-size:clamp(14px,2.4vw,17px)}
  .li,.solid{font-size:clamp(14px,2.4vw,17px)}
  .stack{width:100%;max-width:none;justify-self:stretch;margin:0}
  .hero-photo{width:calc(min(100%,510px,max(220px,calc((100svh - 498px)*4/3)))*.88);margin:0 auto 0 1%;aspect-ratio:4/3;transform:rotate(2deg);border-radius:22px}
  .hero-photo img{object-position:30% 22%;transform-origin:48% 20%}
}
@media (max-width:360px){.logos{flex-wrap:wrap;justify-content:flex-start;gap:12px 18px}.mark{font-size:16px;white-space:nowrap}.li span{display:none}.li,.solid{padding:0 12px}}
@media (prefers-reduced-motion:reduce){.solid,.li span{transition:none}}

#contact{scroll-margin-top:45vh}

/* logos: always one row; they shrink with the space available instead of wrapping */
.wk{container-type:inline-size}
.logos{width:100%;flex-wrap:nowrap!important;justify-content:space-between;gap:8px}
.logos li{flex:none}
.l1{height:min(30px,4.7cqw)}.l2{height:min(44px,6.9cqw)}.l3{height:min(45px,7cqw)}.l4{height:min(28px,4.4cqw)}

@media (max-width:699px){.hello{padding-top:104px}.bar{padding:12px 0}}

/* small phones: let the photo bleed 8px past the text margin so it reads larger */
@media (max-width:520px){.hero-photo{width:calc(min(calc(100% + 16px),max(220px,calc((100svh - 498px)*4/3)))*.88);margin:0 0 0 -8px}}

/* logos link down to their project */
.logos a{display:block;line-height:0;border-radius:6px;transition:transform .2s,opacity .2s}
.logos a:hover{transform:translateY(-2px);opacity:.75}
.logos a:focus-visible{outline:2px solid #111;outline-offset:4px}