/* Portfolio palette sampled from the featured UI/UX, graphic design and fine-art thumbnails. */
:root{
  --bg:#f2f0ed;
  --paper:#fbfaf8;
  --ink:#171716;
  --muted:#655f5b;
  --line:#d8d3ce;
  --accent:#8b6861;
  --accent2:#a57b72;
  --sand:#e4ded8;
  --dark:#20201e;
  --lav:#ece8e4;
  --sage:#74796d;
  --sky:#9ea8a6;
  --ochre:#a18b68;
}

body{background:var(--bg);color:var(--ink)}
::selection{background:#ded8d2;color:#171716}
.site-header{background:rgba(242,240,237,.84);border-bottom-color:rgba(45,42,39,.1)}
.nav a:after{background:var(--ink)}
.eyebrow{color:var(--accent)}
.accent{color:var(--accent2)}
.btn.primary{background:#1d1d1c;border-color:#1d1d1c}
.btn:hover{box-shadow:0 9px 24px rgba(40,36,32,.1)}
.passion{border-left-color:rgba(117,95,128,.24)}
.passion .script{color:var(--accent2)}
.passion-meta{border-top-color:rgba(117,95,128,.17)}
.featured{
  background:
    radial-gradient(circle at 8% 12%,rgba(139,104,97,.025),transparent 28%),
    radial-gradient(circle at 88% 88%,rgba(116,121,109,.025),transparent 27%),
    rgba(251,250,248,.78);
}
.work-card{border-color:rgba(85,67,101,.18);box-shadow:0 12px 36px rgba(54,42,65,.07)}
.work-card:nth-child(1){border-top:3px solid #8b6861}
.work-card:nth-child(2){border-top:3px solid #aaa098}
.work-card:nth-child(3){border-top:3px solid #74796d}
.work-card .overlay,.project-overlay{background:rgba(255,250,247,.92)}
.stats{border-color:#d9d1dd}
.stat{border-color:#d9d1dd}
.stat strong{color:#292725}
#about{background:rgba(255,250,247,.56)}
#experience{
  background:
    linear-gradient(135deg,rgba(228,222,216,.2),transparent 42%),
    linear-gradient(315deg,rgba(116,121,109,.03),transparent 38%);
}
.timeline,.timeline-item{border-color:#d9d1dd}
.timeline-item .date{color:#8b6861}
.pill{border-color:#d7cfdd;background:rgba(255,250,247,.58)}
.client{border-color:#d8d0dc;background:rgba(255,250,247,.72)}
.section.dark{background:linear-gradient(145deg,#20201e,#2b2926);color:#faf8f4}
.section.dark .eyebrow{color:#c8a39a}
.section.dark .btn{border-color:#77748d}
.contact-card{background:linear-gradient(135deg,#49443f 0%,#373431 58%,#262523 100%)}
.contact-card .eyebrow{color:#d8b0a6!important}
.filter-btn.active{background:#1d1d1c;border-color:#1d1d1c}
.gallery-hero{background:linear-gradient(180deg,rgba(228,222,216,.26),transparent)}
.gd-item,.process-card,.project-hero-media{border-color:rgba(85,67,101,.15)}
.lightbox{background:rgba(23,25,37,.95)}
.site-header{z-index:200}
section[id]{scroll-margin-top:112px}

@media(max-width:860px){
  .nav{background:var(--paper)}
  .hero:after{background:linear-gradient(180deg,rgba(242,240,237,.04) 0 42%,rgba(242,240,237,.96) 57%,var(--bg) 70%)}
  .passion{border-top-color:rgba(117,95,128,.24)}
}

/* Soft neutral split hero based on the supplied reference image. */
.home-page .site-header{
  position:fixed;
  top:24px;
  left:26px;
  right:26px;
  width:auto;
  z-index:200;
  border:1px solid rgba(74,67,61,.08);
  border-radius:17px;
  background:rgba(251,250,248,.91);
  box-shadow:0 9px 32px rgba(62,55,49,.07);
  backdrop-filter:blur(13px) saturate(.72);
}
.home-page .site-header .container{width:100%;padding:0 28px}
.home-page .hero{
  min-height:790px;
  margin-top:0;
  padding:132px 0 56px;
  background:#f3f1ee;
}
.home-page .hero-art{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  background-color:#f3f1ee;
  background-image:url('hero-background-v3.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 58px;
  filter:brightness(1.035) contrast(.96) saturate(.92);
  opacity:1;
}
.home-page .hero-art:after,
.home-page .hero:after{display:none}
.home-page .hero-grid{
  min-height:600px;
  display:grid;
  grid-template-columns:47% 53%;
  align-items:center;
}
.home-page .hero-copy{
  grid-column:2;
  max-width:680px;
  padding:42px 0 24px 38px;
}
.home-page .hero-copy h1{
  max-width:660px;
  margin:.14em 0 .28em;
  font-size:clamp(4.25rem,5.7vw,6.65rem);
  line-height:.92;
}
.home-page .hero-copy h1 em{color:#8b6861}
.home-page .hero-copy .lead{max-width:590px;color:#514c48;font-size:clamp(1rem,1.2vw,1.17rem)}
.home-page .hero-actions{margin-top:29px}
.home-page .hero-actions .btn{border-radius:5px;padding:13px 20px}
.home-page .hero-note{
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  max-width:590px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(77,70,64,.19);
  color:#726b65;
  font-size:.72rem;
}
.home-page .hero-note .serif{width:100%;margin-bottom:3px;color:#453f3a;font-size:1rem;font-style:italic}

@media(max-width:1080px){
  .home-page .hero-art{width:100%;background-size:cover;background-position:center 58px}
  .home-page .hero-grid{grid-template-columns:47% 53%}
  .home-page .hero-copy{padding-left:32px}
  .home-page .hero-copy h1{font-size:clamp(3.6rem,6.4vw,5.4rem)}
}

@media(max-width:860px){
  .home-page .site-header{top:14px;left:14px;right:14px;background:rgba(251,250,248,.84)}
  .home-page .site-header .container{padding:0 14px}
  .home-page .hero{min-height:970px;padding:86px 0 46px}
  .home-page .hero-art{
    width:100%;
    height:535px;
    background-size:auto 535px;
    background-position:left 58px;
    filter:brightness(1.035) contrast(.96) saturate(.92);
  }
  .home-page .hero-grid{display:block;min-height:0;padding-top:485px}
  .home-page .hero-copy{max-width:690px;padding:24px 0 0}
  .home-page .hero-copy h1{font-size:clamp(3.45rem,10vw,5.2rem)}
}

@media(max-width:560px){
  .home-page .site-header{top:9px;left:9px;right:9px;border-radius:12px}
  .home-page .hero{min-height:930px;padding-top:72px}
  .home-page .hero-art{height:465px;background-size:auto 430px;background-position:left 54px}
  .home-page .hero-grid{padding-top:418px}
  .home-page .hero-copy{padding-top:20px}
  .home-page .hero-copy h1{font:normal 500 clamp(3rem,14vw,4.15rem)/.94 var(--serif)}
  .home-page .hero-note{display:block}.home-page .hero-note span{display:block;margin:5px 0}
}