:root{
  --cream:#f7f1e7;
  --ink:#171717;
  --yellow:#f7c948;
  --taxi:#f5b700;
  --blue:#4f7cff;
  --sky:#8fd3ff;
  --red:#e85d4a;
  --green:#5fa36a;
  --pink:#ff8fb1;
  --brick:#b94c3f;
  --purple:#7a66d9;
  --line:#202020;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--yellow);color:#111}

/* NAV */
header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 4vw;
  border-bottom:2px solid var(--line);
  background:rgba(247,241,231,.94);
  backdrop-filter:blur(10px);
}
.logo{
  font-weight:900;
  font-size:22px;
  letter-spacing:-.04em;
}
.logo span{color:var(--red)}
nav{display:flex;gap:10px;flex-wrap:wrap}
nav a{
  border:2px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#fff;
  box-shadow:3px 3px 0 var(--line);
  transition:.2s ease;
}
nav a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}
nav a:nth-child(2){background:var(--yellow)}
nav a:nth-child(3){background:var(--sky)}
nav a:nth-child(4){background:var(--pink)}

/* HERO */
.hero{
  min-height:92vh;
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  padding:70px 4vw 45px;
  border-bottom:2px solid var(--line);
  overflow:hidden;
}
.hero-left{position:relative;z-index:2}
.kicker{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:8px 12px;
  border:2px solid var(--line);
  box-shadow:4px 4px 0 var(--line);
  transform:rotate(-2deg);
  font-weight:800;
  font-size:12px;
  margin-bottom:28px;
}
.hero h1{
  font-size:clamp(4.6rem,10vw,9.4rem);
  line-height:.82;
  letter-spacing:-.085em;
  font-weight:900;
  max-width:820px;
}
.hero h1 .line2{
  display:inline-block;
  color:var(--blue);
  transform:rotate(-2deg);
}
.hero h1 .line3{
  display:inline-block;
  color:var(--red);
  transform:rotate(1.5deg);
}
.hero-copy{
  margin-top:38px;
  max-width:590px;
  font-size:18px;
  line-height:1.6;
}
.hero-copy strong{
  background:linear-gradient(transparent 55%,var(--yellow) 55%);
}
.hero-cta{
  margin-top:30px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.cta{
  padding:13px 17px;
  border:2px solid var(--line);
  font-weight:800;
  box-shadow:4px 4px 0 var(--line);
  transition:.2s ease;
}
.cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.cta.primary{background:var(--yellow)}
.cta.secondary{background:#fff}

/* right-side NYC collage */
.collage{
  position:relative;
  min-height:560px;
}
.card{
  position:absolute;
  border:2px solid var(--line);
  box-shadow:7px 7px 0 var(--line);
  background:#fff;
}
.poster{
  right:4%;
  top:5%;
  width:58%;
  min-height:260px;
  background:var(--red);
  color:#fff;
  padding:26px;
  transform:rotate(4deg);
}
.poster small{
  display:block;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  margin-bottom:45px;
}
.poster h3{
  font-size:42px;
  line-height:.93;
  letter-spacing:-.06em;
  max-width:220px;
}
.poster p{
  margin-top:18px;
  font-family:monospace;
  font-size:10px;
}
.bodega{
  left:2%;
  top:28%;
  width:52%;
  height:230px;
  background:#fff8dc;
  transform:rotate(-5deg);
  overflow:hidden;
}
.awning{
  height:52px;
  border-bottom:2px solid var(--line);
  background:repeating-linear-gradient(
    90deg,
    var(--green) 0 28px,
    #fff 28px 56px
  );
}
.store{
  padding:22px;
}
.store h4{
  font-size:27px;
  line-height:.95;
  letter-spacing:-.05em;
}
.store p{
  margin-top:10px;
  font-size:11px;
  font-family:monospace;
}
.window{
  margin-top:18px;
  height:70px;
  background:var(--sky);
  border:2px solid var(--line);
  position:relative;
}
.window:after{
  content:"OPEN";
  position:absolute;
  right:8px;
  top:8px;
  background:var(--pink);
  border:2px solid var(--line);
  padding:5px 8px;
  font-size:10px;
  font-weight:900;
  transform:rotate(3deg);
}
.city-receipt{
  right:13%;
  bottom:7%;
  width:52%;
  height:150px;
  background:var(--yellow);
  transform:rotate(-6deg);
  padding:18px;
}
.city-receipt .receipt-rule{
  height:15px;
  background:var(--blue);
  border:2px solid var(--line);
  margin-bottom:20px;
}
.city-receipt h4{
  font-size:30px;
  letter-spacing:-.04em;
}
.city-receipt p{font-family:monospace;font-size:10px;margin-top:10px}
.sticker{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  border-radius:50%;
  border:2px solid var(--line);
  background:var(--pink);
  font-weight:900;
  text-align:center;
  font-size:12px;
  line-height:1.05;
  box-shadow:5px 5px 0 var(--line);
  right:0;
  top:45%;
  transform:rotate(11deg);
}
.taxi{
  position:absolute;
  left:12%;
  bottom:0;
  width:140px;
  height:55px;
  background:var(--taxi);
  border:2px solid var(--line);
  border-radius:16px 22px 8px 8px;
  box-shadow:4px 4px 0 var(--line);
}
.taxi:before{
  content:"";
  position:absolute;
  left:34px;
  top:-26px;
  width:62px;
  height:28px;
  border:2px solid var(--line);
  border-bottom:0;
  background:var(--sky);
  border-radius:15px 15px 0 0;
}
.taxi:after{
  content:"NYC";
  position:absolute;
  left:54px;
  top:16px;
  font-weight:900;
  font-size:12px;
}
.wheel,.wheel2{
  position:absolute;
  bottom:-12px;
  width:24px;height:24px;border-radius:50%;
  background:var(--ink);border:2px solid var(--line)
}
.wheel{left:18px}.wheel2{right:18px}

/* sections */
.section{
  padding:105px 4vw;
  border-bottom:2px solid var(--line);
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:60px;
}
.section-tag{
  font-family:monospace;
  font-size:11px;
  letter-spacing:.12em;
}
.section h2{
  font-size:clamp(3rem,6vw,6.2rem);
  line-height:.9;
  letter-spacing:-.065em;
  max-width:830px;
}
.section h2 em{
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--blue);
}

/* ABOUT */
.about{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:start;
}
.about-copy{
  font-size:21px;
  line-height:1.65;
}
.about-copy p+p{margin-top:24px}
.about-notes{
  display:grid;
  gap:14px;
}
.note{
  border:2px solid var(--line);
  padding:18px;
  box-shadow:4px 4px 0 var(--line);
  background:#fff;
  transform:rotate(-1deg);
}
.note:nth-child(2){background:var(--sky);transform:rotate(1.2deg)}
.note:nth-child(3){background:var(--yellow);transform:rotate(-.8deg)}
.note span{
  font-family:monospace;
  font-size:9px;
  letter-spacing:.11em;
}
.note p{margin-top:6px;font-size:15px;font-weight:700}

/* RECENTS / BLOG */
.recents{background:#1e1e1e;color:#fff}
.recents .section-tag{color:#aaa}
.recents h2 em{color:var(--pink)}
.blog-feed{display:grid;gap:34px;max-width:860px}
.post{
  --accent:var(--blue);
  border:2px solid #fff;
  border-left:12px solid var(--accent);
  box-shadow:6px 6px 0 #fff;
  background:#2b2b2b;
  padding:28px 30px 30px;
}
.post:nth-child(5n+2){--accent:var(--red)}
.post:nth-child(5n+3){--accent:var(--green)}
.post:nth-child(5n+4){--accent:var(--purple)}
.post:nth-child(5n+5){--accent:var(--yellow)}
.post-meta{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  font-family:monospace;font-size:11px;letter-spacing:.08em;color:#bbb;
}
.post-tag{
  background:var(--accent);color:#111;
  padding:3px 8px;font-weight:800;
}
.post h3{
  margin-top:16px;
  font-size:clamp(1.8rem,3.2vw,2.8rem);
  line-height:1;
  letter-spacing:-.045em;
}
.post-body{margin-top:18px;max-width:68ch}
.post-body p{font-size:17px;line-height:1.7;color:#eee}
.post-body p+p{margin-top:16px}
.post-body a{color:var(--sky);text-decoration:underline}
.post-body strong{background:linear-gradient(transparent 60%,rgba(247,201,72,.45) 60%)}
.post-body img{max-width:100%;border:2px solid #fff;margin-top:16px;display:block}
.blog-empty{font-family:monospace;color:#aaa}
@media(max-width:650px){.post{padding:22px 18px 24px;border-left-width:8px}}

/* EXPERIENCE */
.timeline{
  display:grid;
  gap:0;
  border-top:2px solid var(--line);
}
.job{
  display:grid;
  grid-template-columns:130px 1fr 220px;
  padding:26px 0;
  border-bottom:2px solid var(--line);
  align-items:center;
}
.job-year{
  font-family:monospace;
  font-size:11px;
}
.job h3{font-size:26px;letter-spacing:-.03em}
.job p{color:#666;margin-top:4px}
.job-loc{text-align:right;font-family:monospace;font-size:10px}


/* EXPERIENCE DETAIL POPUP */
button.job{
  width:100%;background:none;border:0;border-bottom:2px solid var(--line);
  color:inherit;text-align:left;cursor:pointer;font:inherit;
  transition:background .15s ease,padding .15s ease;
}
button.job:hover,button.job:focus-visible{background:rgba(247,201,72,.35);padding-left:12px;padding-right:12px;outline:none}
button.job:focus-visible{box-shadow:inset 0 0 0 3px var(--line)}
.job-loc .more{display:block;margin-top:6px;font-weight:800}
.job-dialog{
  border:3px solid var(--line);box-shadow:10px 10px 0 var(--line);
  background:#fff;color:var(--ink);padding:0;
  width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  margin:auto;overflow:auto;
}
.job-dialog::backdrop{background:rgba(23,23,23,.6)}
.job-dialog[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.jd-top{background:var(--yellow);border-bottom:3px solid var(--line);padding:22px 26px;position:relative}
.jd-meta{font-family:monospace;font-size:11px;letter-spacing:.08em}
.jd-top h3{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1;letter-spacing:-.04em;margin-top:10px;padding-right:44px}
.jd-role{margin-top:8px;font-weight:700}
.jd-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;
  border:2px solid var(--line);background:#fff;box-shadow:3px 3px 0 var(--line);
  font-size:20px;font-weight:900;line-height:1;cursor:pointer;
}
.jd-close:hover{background:var(--pink)}
.jd-body{padding:24px 26px 28px}
.jd-body p{font-size:16px;line-height:1.7}
.jd-body p+p{margin-top:14px}
.jd-body ul{margin:16px 0 0 20px;line-height:1.7;font-size:16px}
.jd-body a{text-decoration:underline;color:var(--blue)}
.jd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.jd-tags span{border:2px solid var(--line);background:var(--sky);padding:4px 10px;font-size:12px;font-weight:700}
@media(prefers-reduced-motion:reduce){.job-dialog[open]{animation:none}}

/* RESUME */
.resume{
  background:var(--yellow);
}
.resume-box{
  border:3px solid var(--line);
  box-shadow:10px 10px 0 var(--line);
  padding:34px;
  background:#fff;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:60px;
  align-items:end;
}
.resume-box h2{max-width:700px}
.resume-side p{line-height:1.6;color:#555;margin-bottom:22px}
.resume-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:2px solid var(--line);
  padding-top:16px;
  font-weight:900;
}

/* CONTACT */
.contact{
  background:var(--sky);
}
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
}
.contact-copy{
  font-size:20px;
  line-height:1.6;
}
.contact-links{
  display:grid;
  gap:12px;
}
.contact-links a{
  border:2px solid var(--line);
  background:#fff;
  padding:18px;
  display:flex;
  justify-content:space-between;
  font-weight:900;
  box-shadow:4px 4px 0 var(--line);
  transition:.2s ease;
}
.contact-links a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.contact-links a:nth-child(2){background:var(--pink)}
.contact-links a:nth-child(3){background:var(--green);color:#fff}

/* FOOTER */
footer{
  padding:24px 4vw;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-family:monospace;
  font-size:10px;
  background:#fff;
  border-top:2px solid var(--line);
}
.marquee{
  overflow:hidden;
  white-space:nowrap;
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
  background:var(--pink);
  padding:10px 0;
  font-weight:900;
}
.marquee span{
  display:inline-block;
  padding-left:100%;
  animation:scroll 18s linear infinite;
}
@keyframes scroll{to{transform:translateX(-100%)}}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:.7s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:950px){
  .hero{grid-template-columns:1fr}
  .collage{min-height:520px}
  .about,.contact-grid,.resume-box{grid-template-columns:1fr}
  .recent.large,.recent.medium,.recent.small{grid-column:1/-1}
  .job{grid-template-columns:90px 1fr}
  .job-loc{display:none}
}
@media(max-width:650px){
  header{align-items:flex-start;gap:15px;flex-direction:column}
  nav{gap:8px}
  .hero{padding-top:45px}
  .hero h1{font-size:18vw}
  .collage{min-height:480px}
  .poster{width:70%}
  .bodega{width:68%}
  .city-receipt{width:65%}
  .section{padding-top:75px;padding-bottom:75px}
  .section-head{display:block}
  .section-tag{margin-bottom:18px}
}

.city-receipt{
  right:10%;
  bottom:6%;
  width:49%;
  min-height:170px;
  background:#fffdf6;
  transform:rotate(-4deg);
  padding:20px 20px 16px;
  font-family:monospace;
}
.city-receipt:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-9px;height:10px;
  background:linear-gradient(135deg,transparent 5px,#fffdf6 0) 0 0/10px 10px repeat-x;
}
.city-receipt .receipt-rule{
  height:2px;
  background:var(--line);
  border:0;
  margin:12px 0;
}
.city-receipt h4{
  font-family:Arial,Helvetica,sans-serif;
  font-size:25px;
  line-height:.95;
  letter-spacing:-.04em;
}
.city-receipt p{
  font-family:monospace;
  font-size:9px;
  line-height:1.6;
  margin-top:8px;
}
.receipt-total{
  display:flex;
  justify-content:space-between;
  border-top:1px dashed #777;
  padding-top:8px;
  margin-top:10px;
  font-weight:800;
  font-size:9px;
}
.street-signs{
  position:absolute;
  left:3.5vw;
  bottom:28px;
  z-index:5;
  width:235px;
  height:125px;
  pointer-events:none;
}
.sign-pole{
  position:absolute;
  left:112px;
  top:34px;
  width:5px;
  height:91px;
  background:#555;
  border:1px solid #222;
}
.nyc-sign{
  position:absolute;
  min-width:150px;
  padding:8px 12px;
  background:#24734a;
  color:#fff;
  border:2px solid #f4f4ef;
  outline:2px solid #222;
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  text-align:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.2);
}
.nyc-sign small{
  display:block;
  font-family:monospace;
  font-size:6px;
  letter-spacing:.12em;
  opacity:.8;
  margin-top:2px;
}
.nyc-sign.one{left:8px;top:4px;transform:rotate(-2deg)}
.nyc-sign.two{left:88px;top:48px;transform:rotate(2deg)}
.street-sign-mini{
  display:inline-block;
  background:#24734a;
  color:#fff;
  border:2px solid #fff;
  outline:2px solid var(--line);
  padding:5px 9px;
  font-family:monospace;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  transform:rotate(-1deg);
  margin-left:8px;
}
@media(max-width:650px){
  .street-signs{transform:scale(.78);transform-origin:left bottom;left:2vw}
}


/* STREET SIGNS REMOVED */
.street-signs,.sign-pole,.nyc-sign,.street-sign-mini,.street-sign{display:none!important}

/* LARGER RESUME CTA */
.resume-link{
  padding:20px 22px;
  border:2px solid var(--line);
  background:var(--yellow);
  box-shadow:5px 5px 0 var(--line);
  font-size:18px;
  font-weight:900;
  transition:.2s ease;
}
.resume-link:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--line);
}
.resume-link span:last-child{
  font-size:25px;
}
@media(max-width:650px){
  .resume-link{
    font-size:17px;
    padding:18px 20px;
  }
}


/* BLOG: archive link + archive page */
.blog-more{margin-top:38px}
.archive-year{
  font-family:monospace;font-size:13px;letter-spacing:.1em;color:#fff;
  border-bottom:2px dashed #666;padding-bottom:8px;margin-top:22px;
}
.archive-year:first-child{margin-top:0}
.archive-intro{max-width:60ch;color:#ccc;font-size:17px;line-height:1.6;margin:-20px 0 44px}