:root{
  --ink:#10151a;
  --bone:#f5f4ef;
  --tint:#e9ece4;
  --pitch:#1f8a4c;
  --pitch-dark:#166b3a;
  --muted:#5b6670;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bone);line-height:1.65}
h1,h2,h3,.navbar-brand{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}


.site-nav{background:rgba(245,244,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(16,21,26,.08)}
.site-nav .navbar-brand{font-weight:700;color:var(--ink)}
.site-nav .nav-link{color:var(--ink);font-weight:500}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--pitch)}

.btn-pitch{background:var(--pitch);color:#fff;border:0;border-radius:2px;font-weight:700}
.btn-pitch:hover{background:var(--pitch-dark);color:#fff}
.btn-outline-ink{border:2px solid var(--ink);color:var(--ink);border-radius:2px;font-weight:700}
.btn-outline-ink:hover{background:var(--ink);color:var(--bone)}


.hero{padding:9rem 0 0;position:relative}
.hero__meta{color:var(--pitch);font-weight:700;font-size:.95rem;margin-bottom:1rem}
.hero__name{font-weight:700;font-size:clamp(2.6rem,7.5vw,5.4rem);line-height:1.02;margin-bottom:1.4rem}
.hero__lead{font-size:1.2rem;color:var(--muted);max-width:34rem;margin-bottom:2rem}
.portrait{position:relative;aspect-ratio:4/5;max-width:360px;margin:0 auto;background:var(--ink);border-radius:2px;overflow:hidden;box-shadow:12px 12px 0 var(--pitch)}
.portrait__mono{position:absolute;inset:0;display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:6rem;color:var(--bone)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


.keys{height:46px;margin-top:5rem;background:
  linear-gradient(90deg,var(--ink) 0 100%) 0 0/100% 4px no-repeat,
  repeating-linear-gradient(90deg,#fff 0 40px,var(--ink) 40px 42px);
  position:relative}
.keys::after{content:"";position:absolute;inset:0 0 16px 0;background:
  repeating-linear-gradient(90deg,transparent 0 28px,var(--ink) 28px 52px,transparent 52px 82px,var(--ink) 82px 106px,transparent 106px 124px);
  opacity:.9;mask:linear-gradient(90deg,#000 0 100%)}


.section{padding:6rem 0}
.section--tint{background:var(--tint)}
.section--dark{background:var(--ink);color:var(--bone)}
.section__title{font-weight:700;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.8rem}
.section__intro{color:var(--muted);font-size:1.1rem;max-width:34rem;margin-bottom:2.5rem}
.section--dark .section__intro{color:rgba(245,244,239,.7)}


.story{list-style:none;margin:0;padding:0 0 0 1.6rem;border-left:3px solid var(--pitch)}
.story__item{position:relative;padding-bottom:1.8rem}
.story__item::before{content:"";position:absolute;left:calc(-1.6rem - 8px);top:.45rem;width:13px;height:13px;background:var(--bone);border:3px solid var(--pitch);border-radius:50%}
.story__item h3{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.story__item p{margin:0;color:var(--muted)}
.chip{border:1.5px solid var(--ink);padding:.25rem .8rem;font-weight:500;font-size:.9rem;border-radius:2px}


.project{background:#fff;border:1px solid rgba(16,21,26,.1);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 6px 0 rgba(16,21,26,.12)}
.project__thumb{height:150px}
.project__thumb--shoes{background:linear-gradient(135deg,#131210 0 50%,#f2ede3 50% 100%)}
.project__thumb--forest{background:linear-gradient(180deg,#f0c869,#d98d3c 45%,#a8492c 75%,#241713)}
.project__thumb--belt{background:repeating-linear-gradient(135deg,var(--ink) 0 18px,var(--pitch) 18px 36px)}
.project__body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.project__body h3{font-size:1.3rem;font-weight:700}
.project__body p{color:var(--muted);font-size:.98rem}
.project__tags{font-weight:500;color:var(--ink)!important;font-size:.88rem!important;margin-top:auto}
.project__link{color:var(--pitch);font-weight:700;text-decoration:none;border-bottom:2px solid var(--pitch);align-self:flex-start}
.project__link:hover{color:var(--pitch-dark)}
.project__soon{font-weight:700;color:var(--muted);font-size:.9rem}


.fav{border:2px solid var(--ink);padding:1.6rem 1.2rem;height:100%;transition:transform .2s,background .2s}
.fav:hover{transform:translateY(-4px);background:#fff}
.fav svg{width:44px;height:44px;fill:none;stroke:var(--pitch);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1rem}
.fav h3{font-size:1.25rem;font-weight:700;margin-bottom:.2rem}
.fav p{margin:0;color:var(--muted)}


.site-foot{background:var(--ink);color:rgba(245,244,239,.55);text-align:center;padding:1.6rem 1rem;font-size:.9rem;border-top:1px solid rgba(245,244,239,.1)}
.site-foot p{margin:0}

@media (max-width:575px){
  .hero{padding-top:7rem}
  .section{padding:4rem 0}
  .portrait{max-width:260px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fav{transition:none}
}