/* Vaishnavi Devi Muthoorah Portfolio — cleaned stylesheet */
/* Design tokens, layout, responsive rules, and final visual fixes are consolidated below. */

:root{
  --ink:#222223;
  --paper:#FFFEEC;
  --paper-2:#F3F0D8;
  --white:#FFFFFF;
  --violet:#7D39EB;
  --lavender:#BCB4FF;
  --lime:#C6FF33;
  --olive:#CAC426;
  --pink:#FF4D97;
  --orange:#FF7A2F;
  --gold:var(--olive);
  --violet-soft:#EAE3FF;
  --pink-soft:#EFEBFF;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"DM Sans", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1240px;
  --r:22px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body.loading{
  overflow:hidden;
  height:100vh;
}
body.locked{
  overflow:hidden;
}
a{
  color:inherit;
  text-decoration:none;
}
img{
  max-width:100%;
  display:block;
}
::selection{
  background:var(--violet);
  color:#fff;
}
:focus-visible{
  outline:3px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}
.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
}
#loader{
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  transition:transform 1s var(--ease);
}
#loader.done{
  transform:translateY(-100%);
}
.load-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:300px;
  max-width:78vw;
}
.load-icons{
  display:flex;
  gap:24px;
}
.load-icons svg{
  width:42px;
  height:42px;
  overflow:visible;
}
.li-path{
  fill:none;
  stroke:var(--paper);
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.2;
  animation:liDraw .8s var(--ease) forwards;
}
.load-icons svg:nth-child(1) .li-path{
  animation-delay:.1s;
}
.load-icons svg:nth-child(2) .li-path{
  animation-delay:.4s;
}
.load-icons svg:nth-child(3) .li-path{
  animation-delay:.7s;
}
.load-icons svg:nth-child(4) .li-path{
  animation-delay:1s;
  stroke:var(--lime);
}
.load-name{
  text-align:center;
}
.load-name b{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-.01em;
}
.load-name span{
  font-family:var(--mono);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:#b9b4a3;
}
.load-bar{
  width:100%;
  height:4px;
  background:rgba(255,255,255,.14);
  border-radius:6px;
  overflow:hidden;
}
.load-bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:6px;
  background:linear-gradient(90deg,var(--violet),var(--pink),var(--orange),var(--lime));
  transition:width .2s linear;
}
.load-meta{
  display:flex;
  justify-content:space-between;
  width:100%;
  align-items:center;
  font-family:var(--mono);
  font-size:.72rem;
  color:#b9b4a3;
}
.load-dots{
  display:flex;
  gap:7px;
}
.load-dots i{
  width:9px;
  height:9px;
  border-radius:50%;
  transform:scale(0);
  animation:dotPop .4s var(--ease) forwards;
}
.load-dots i:nth-child(1){
  background:var(--violet);
  animation-delay:1.2s;
}
.load-dots i:nth-child(2){
  background:var(--pink);
  animation-delay:1.32s;
}
.load-dots i:nth-child(3){
  background:var(--orange);
  animation-delay:1.44s;
}
.load-dots i:nth-child(4){
  background:var(--lime);
  animation-delay:1.56s;
}
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:90;
  transition:transform .4s var(--ease);
}
header.hide{
  transform:translateY(-120%);
}
.brand .dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 0 0 rgba(91,39,224,.5);
  animation:pulse 2.4s infinite;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links a.navlink{
  font-weight:600;
  font-size:.95rem;
  padding:9px 16px;
  border-radius:40px;
  transition:background .25s,color .25s;
  position:relative;
}
.nav-links a.navlink:hover{
  background:var(--ink);
  color:var(--paper);
}
.btn-get{
  font-weight:600;
  font-size:.95rem;
  padding:10px 20px;
  border-radius:40px;
  background:var(--violet);
  color:#fff;
  border:1.5px solid var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .25s var(--ease),background .25s;
}
.btn-get:hover{
  background:var(--ink);
  transform:translateY(-2px);
}
.btn-get .ar{
  transition:transform .3s var(--ease);
}
.btn-get:hover .ar{
  transform:translate(3px,-3px);
}
.burger{
  display:none;
  width:46px;
  height:46px;
  border:1.5px solid var(--ink);
  border-radius:50%;
  background:var(--paper);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.burger span{
  width:20px;
  height:2px;
  background:var(--ink);
  transition:.3s var(--ease);
}
.burger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.burger.open span:nth-child(2){
  opacity:0;
}
.burger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
#mobile-menu{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 32px;
  gap:6px;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
#mobile-menu.open{
  transform:translateX(0);
  visibility:visible;
}
#mobile-menu a{
  font-family:var(--display);
  font-weight:700;
  font-size:13vw;
  line-height:1.15;
  border-bottom:1px solid rgba(244,237,225,.18);
  padding:14px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#mobile-menu a span{
  font-family:var(--mono);
  font-size:.8rem;
  opacity:.6;
}
#mobile-menu .mm-foot{
  margin-top:30px;
  font-family:var(--mono);
  font-size:.78rem;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--ink);
  border-radius:40px;
  padding:7px 15px;
  background:var(--white);
  margin-bottom:24px;
}
.eyebrow b{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
  border:1px solid var(--ink);
}
.hero h1 .ln:nth-child(3) i{
  animation-delay:.34s;
}
.hero h1 .out{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}
.hero-tagline::before{
  content:"";
  width:24px;
  height:2px;
  background:var(--violet);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:1rem;
  padding:14px 24px;
  border-radius:48px;
  border:1.5px solid var(--ink);
  transition:transform .25s var(--ease),background .25s,color .25s;
  cursor:pointer;
}
.btn.solid{
  background:var(--ink);
  color:var(--paper);
}
.btn.solid:hover{
  background:var(--violet);
  transform:translateY(-3px);
}
.btn.ghost{
  background:var(--white);
}
.btn.ghost:hover{
  background:var(--orange);
  transform:translateY(-3px);
}
.btn .ar{
  transition:transform .3s var(--ease);
}
.btn:hover .ar{
  transform:translate(3px,-3px);
}
.btn.ghost:hover .ar{
  transform:translateY(3px);
}
.hero-art{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:470px;
}
.hero-frame-wrap{
  position:relative;
  width:min(520px,94%);
  transition:transform .25s var(--ease);
}
.hb1{
  width:150px;
  height:150px;
  background:var(--lavender);
  top:-12px;
  left:0;
  animation-duration:11s;
}
.hb2{
  width:88px;
  height:88px;
  background:var(--lime);
  bottom:4%;
  right:-2%;
  animation-duration:8s;
}
.sticker{
  position:absolute;
  z-index:3;
  pointer-events:none;
}
.spark{
  position:absolute;
  z-index:4;
  pointer-events:none;
  animation:floaty 6.5s ease-in-out infinite;
}
.st-star{
  width:62px;
  height:62px;
  animation:spin 12s linear infinite;
}
.badge-avail svg{
  width:100%;
  height:100%;
}
.tag-1{
  top:5%;
  right:0;
  background:var(--violet);
  color:#fff;
  transform:rotate(7deg);
  animation:floaty 6s ease-in-out infinite;
  z-index:6;
}
.scroll-hint .ln-d{
  width:40px;
  height:1.5px;
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.scroll-hint .ln-d::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--violet);
  transform:translateX(-100%);
  animation:slide 1.8s var(--ease) infinite;
}
.marquee .track{
  display:inline-flex;
  gap:34px;
  animation:scroll 26s linear infinite;
}
.marquee:hover .track{
  animation-play-state:paused;
}
.marquee span{
  font-family:var(--display);
  font-weight:700;
  font-size:1.5rem;
  display:inline-flex;
  align-items:center;
  gap:34px;
}
.marquee em{
  font-style:normal;
  color:var(--lime);
}
section{
  position:relative;
}
.sec-pad{
  padding:96px 0;
}
.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:46px;
  flex-wrap:wrap;
}
.sec-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
}
.sec-kicker b{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:700;
}
.sec-title .vio{
  color:var(--violet);
}
#work{
  background:var(--paper);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}
.card{
  border:2px solid var(--ink);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--white);
  cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  display:flex;
  flex-direction:column;
}
.card-thumb{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  border-bottom:2px solid var(--ink);
}
.card-thumb .ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-thumb .ph .big{
  font-family:var(--display);
  font-weight:800;
  font-size:5rem;
  opacity:.9;
  mix-blend-mode:overlay;
}
.card-num{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  font-family:var(--mono);
  font-weight:700;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:30px;
  padding:4px 12px;
  font-size:.78rem;
}
.card-cat{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  font-family:var(--mono);
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--ink);
  color:var(--paper);
  border-radius:30px;
  padding:5px 12px;
}
.card-body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:14px;
}
.card-meta .yr{
  font-family:var(--mono);
  font-size:.78rem;
  color:#6b6354;
}
.card-view{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:.92rem;
}
.card-view .circ{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  display:grid;
  place-items:center;
  transition:.3s var(--ease);
}
.card:hover .card-view .circ{
  background:var(--violet);
  color:#fff;
  transform:rotate(-45deg);
}
#about{
  background:var(--ink);
  color:var(--paper);
  border-top:2px solid var(--ink);
}
#about .sec-title .vio{
  color:var(--lime);
}
#about .sec-kicker b{
  background:var(--paper);
  color:var(--ink);
}
#about .sec-note{
  color:#cfc6b6;
}
.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:46px;
  align-items:start;
}
.about-photo{
  position:relative;
}
.about-photo .frame{
  aspect-ratio:860/986;
  border-radius:24px;
  overflow:hidden;
  border:2px solid var(--paper);
  background:var(--paper-2);
  box-shadow:14px 14px 0 var(--pink);
}
.about-photo .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;
}

.about-image-placeholder{
  display:grid;
  place-items:center;
  min-height:360px;
  background:
    linear-gradient(rgba(34,34,35,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,34,35,.06) 1px, transparent 1px),
    var(--paper-2);
  background-size:24px 24px;
}
.about-image-placeholder span{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,237,225,.72);
  background:var(--ink);
  border:1.5px solid var(--paper);
  border-radius:999px;
  padding:9px 15px;
}
.about-photo .pill{
  position:absolute;
  bottom:-16px;
  left:50%;
  transform:translateX(-50%);
  background:var(--lime);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:40px;
  padding:9px 18px;
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
}
.bio p .hl{
  color:var(--lime);
}
.about-main{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.about-focus h3{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:var(--orange);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(244,237,225,.2);
}
.about-focus ul{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 26px;
}
.about-focus li{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:1rem;
  color:#e9e2d4;
}
.about-focus li i{
  width:12px;
  height:12px;
  border-radius:4px;
  flex:none;
}
.about-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  margin-top:50px;
  padding-top:42px;
  border-top:1px solid rgba(255,255,255,.16);
}
.about-foot{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:34px;
  margin-top:46px;
  padding-top:42px;
  border-top:1px solid rgba(255,255,255,.16);
}
.tools{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.tool{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:62px;
  text-align:center;
}
.tool .ic{
  width:52px;
  height:52px;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:800;
  font-size:1.18rem;
  line-height:1;
  border:1px solid rgba(255,255,255,.12);
}
.tool .ic-img{
  overflow:hidden;
  padding:0;
  background:#1C1C1E;
}
.tool .ic-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.tool span{
  font-size:.7rem;
  color:#bdb8a6;
  line-height:1.2;
}
.about-block h3{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:var(--orange);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(244,237,225,.2);
}
.tl{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.tl .it .role{
  font-weight:600;
  font-size:1.02rem;
}
.tl .it .org{
  color:#cfc6b6;
  font-size:.92rem;
}
.tl .it .when{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--lime);
  margin-top:2px;
}
.skills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.skills span{
  border:1.5px solid rgba(244,237,225,.4);
  border-radius:30px;
  padding:7px 14px;
  font-size:.86rem;
  transition:.25s var(--ease);
}
.skills span:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.soft{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.soft b{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gold);
}
.soft em{
  font-style:normal;
  color:var(--lime);
}
#contact .sec-title .vio{
  color:var(--pink);
}
.contact-left .big .vio{
  color:var(--violet);
}
.contact-left p{
  color:#5b5343;
  max-width:42ch;
  margin-bottom:30px;
}
.contact-actions{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:380px;
}
.contact-mail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1.5px solid var(--ink);
  border-radius:48px;
  padding:14px 14px 14px 24px;
  font-weight:600;
  transition:.3s var(--ease);
  flex-wrap:wrap;
}
.contact-mail:hover{
  background:var(--violet);
  color:#fff;
}
.contact-mail .go{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--orange);
  color:var(--ink);
  display:grid;
  place-items:center;
  flex:none;
  transition:.3s var(--ease);
}
.contact-mail:hover .go{
  background:var(--lime);
  color:var(--ink);
  transform:rotate(-45deg);
}
.contact-right{
  background:var(--violet);
  color:var(--paper);
  padding:46px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}
.socials{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.socials a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 4px;
  border-bottom:1px solid rgba(244,237,225,.28);
  font-weight:600;
  font-size:1.05rem;
  transition:.25s var(--ease);
}
.socials a:first-child{
  border-top:1px solid rgba(244,237,225,.28);
}
.socials a:hover{
  padding-left:14px;
  color:var(--lime);
}
.socials a span{
  font-family:var(--mono);
  font-size:.72rem;
  opacity:.7;
}
.cv-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.cv-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--lime);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:48px;
  padding:13px 22px;
  font-weight:600;
  transition:.3s var(--ease);
}
.cv-btn:hover{
  background:var(--orange);
  color:#fff;
  transform:translateY(-2px);
}
#project-page{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--paper);
  overflow-y:auto;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform .55s var(--ease);
}
#project-page.open{
  transform:translateY(0);
  visibility:visible;
}
.pp-bar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  background:rgba(244,237,225,.85);
  backdrop-filter:blur(12px);
  border-bottom:1.5px solid var(--ink);
}
.pp-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  border:1.5px solid var(--ink);
  border-radius:40px;
  padding:10px 18px;
  background:var(--white);
  transition:.3s var(--ease);
  cursor:pointer;
}
.pp-back:hover{
  background:var(--ink);
  color:var(--paper);
}
.pp-bar .pp-id{
  font-family:var(--mono);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.pp-hero{
  padding:54px 0 30px;
}
.pp-cat{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--ink);
  color:var(--paper);
  border-radius:30px;
  padding:6px 14px;
  margin-bottom:20px;
}
.pp-title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.95;
  font-size:clamp(2.6rem,7vw,5.4rem);
  margin-bottom:18px;
}
.pp-lead{
  font-size:1.2rem;
  max-width:60ch;
  color:#3b352c;
}
.pp-meta{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:24px 0;
  margin:38px 0;
}
.pp-meta .m h5{
  font-family:var(--mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b6354;
  margin-bottom:7px;
}
.pp-meta .m p{
  font-weight:600;
}
.pp-gallery{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-bottom:30px;
}
.pp-shot{
  border:2px solid var(--ink);
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:16/10;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pp-shot.tall{
  aspect-ratio:16/13;
}
.pp-shot .ph-label{
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:30px;
  padding:8px 16px;
}
.pp-shot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pp-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.pp-body{
  max-width:62ch;
  font-size:1.08rem;
  color:#3b352c;
  padding:8px 0 30px;
}
.pp-body h4{
  font-family:var(--display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--ink);
  margin:24px 0 10px;
}
.pp-next{
  border-top:2px solid var(--ink);
  padding:40px 0 70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  cursor:pointer;
}
.pp-next:hover .pp-next-title{
  color:var(--violet);
}
.pp-next small{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b6354;
}
.pp-next-title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.8rem,5vw,3.4rem);
  transition:color .3s;
}
.pp-next .arrow{
  width:60px;
  height:60px;
  border-radius:50%;
  border:2px solid var(--ink);
  display:grid;
  place-items:center;
  flex:none;
  transition:.3s var(--ease);
}
.pp-next:hover .arrow{
  background:var(--violet);
  color:#fff;
  transform:translateX(6px);
}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  letter-spacing:-.005em;
}
.brand-logo{
  height:27px;
  width:auto;
  display:none !important;
}
.nav-links a.navlink,.btn-get,.btn,.submit-btn{
  letter-spacing:-.01em;
}
.sec-title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.9;
  font-size:clamp(2.3rem,5.4vw,4rem);
}
.sec-note{
  max-width:370px;
  color:#5a5549;
  font-size:1.04rem;
  line-height:1.6;
}
.bio p{
  font-size:1.08rem;
  color:#e9e2d4;
  margin-bottom:18px;
  max-width:60ch;
  line-height:1.72;
}
.card-body h3{
  font-family:var(--display);
  font-weight:700;
  font-size:1.62rem;
  line-height:1;
  letter-spacing:-.035em;
}
.nav,.card,.card-thumb,.about-photo .frame,.pp-shot{
  border-width:1.25px;
}
.btn,.btn-get,.contact-mail,.cv-btn,.to-top,.pp-back,.pp-next .arrow,.eyebrow{
  border-width:1.25px;
}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.reveal.in{
  opacity:1;
  transform:none;
}
.hero h1 .ln i{
  display:inline-block;
  font-style:normal;
  transform:translateY(110%);
  animation:rise .9s var(--ease) forwards;
  will-change:transform;
}
.hero h1 .ln:nth-child(1) i{
  animation-delay:.18s;
}
.hero h1 .ln:nth-child(2) i{
  animation-delay:.30s;
}
.hero-tagline{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  font-weight:700;
  color:var(--violet);
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:11px;
  opacity:0;
  animation:fadeUp .8s var(--ease) .48s forwards;
}
.hero-sub{
  max-width:540px;
  margin:16px 0 30px;
  font-size:1.08rem;
  color:#4f493b;
  opacity:0;
  animation:fadeUp .8s var(--ease) .58s forwards;
  line-height:1.65;
}
.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  opacity:0;
  animation:fadeUp .8s var(--ease) .68s forwards;
}
.scroll-hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:46px;
  color:#5b5343;
  opacity:0;
  animation:fadeUp .8s var(--ease) .84s forwards;
}
.card,.btn,.btn-get,.submit-btn,.footer-actions a,.to-top{
  transition:transform .28s var(--ease),background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:8px 10px 0 var(--ink);
}
.card-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s var(--ease);
}
.card:hover .card-thumb img{
  transform:scale(1.045);
}
.tag-2{
  top:52%;
  right:-5%;
  background:var(--lime);
  color:var(--ink);
  transform:rotate(-6deg);
  animation:floaty 8s ease-in-out infinite .5s;
  z-index:6;
  animation-delay:.5s;
}
.sticker,.st-star,.spark{
  display:none !important;
}
.badge-avail{
  position:absolute;
  z-index:4;
  bottom:6%;
  left:-6%;
  width:118px;
  height:118px;
  background:var(--lime);
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:spin 16s linear infinite !important;
}
.badge-avail .star-c{
  position:absolute;
  inset:0;
  margin:auto;
  width:34px;
  height:34px;
  animation:spin 16s linear infinite reverse;
  display:none !important;
}
.badge-dot{
  position:absolute;
  inset:0;
  width:16px;
  height:16px;
  margin:auto;
  border-radius:50%;
  background:var(--ink);
}
.badge-avail text{
  text-transform:uppercase;
}
.marquee{
  background:var(--violet);
  color:var(--paper);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
  padding:14px 0;
  margin-top:30px;
  display:none !important;
}
.discipline-strip:hover .discipline-track{
  animation-play-state:paused;
}
#contact .sec-head{
  margin-bottom:34px;
}
#contact .sec-title{
  font-size:clamp(2.7rem,6vw,5rem);
}
.contact-card{
  border:0 !important;
  border-radius:30px !important;
  overflow:hidden !important;
  display:grid;
  grid-template-columns:1fr .92fr;
  box-shadow:0 0 0 1.25px rgba(34,34,35,.18);
  background:var(--white);
}
.contact-left,.contact-right{
  border:0 !important;
}
.contact-left{
  padding:56px 50px !important;
  background:var(--white) !important;
  position:relative;
  overflow:hidden;
  border-radius:0 !important;
}
.contact-left .big{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.92;
  font-size:clamp(2.4rem,5vw,3.9rem);
  margin-bottom:18px;
  display:none;
}
.contact-intro{
  font-size:1.12rem;
  line-height:1.62;
  max-width:45ch;
  color:#5b5343;
  margin-bottom:34px;
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.contact-form label.full{
  grid-column:1/-1;
}
.contact-form label span{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:#6b6354;
}
.contact-form input,.contact-form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(34,34,35,.42);
  background:transparent;
  padding:13px 0;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;
  border-bottom-color:var(--violet);
}
.submit-btn{
  grid-column:1/-1;
  justify-self:start;
  border:0;
  border-radius:50px;
  padding:14px 24px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}
.submit-btn:hover{
  background:var(--violet);
  transform:translateY(-2px);
}
.submit-btn span{
  display:inline-block;
  margin-left:8px;
}
.quick-info{
  background:var(--violet) !important;
  color:#fff;
  padding:56px 50px !important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100%;
  gap:0;
}
.quick-label{
  color:rgba(255,255,255,.9);
  margin-bottom:10px;
}
.quick-row:first-of-type{
  border-top:1px solid rgba(255,255,255,.36);
}
.quick-row a,.quick-row span:last-child{
  font-family:var(--mono);
  font-size:.86rem;
  letter-spacing:.08em;
  color:#fff;
  justify-self:end;
  text-align:right;
}
.availability{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  justify-self:end;
  text-align:right;
}
.availability i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 0 rgba(198,255,51,.55);
  animation:availPulse 2s ease-out infinite;
}
header .wrap{
  max-width:none;
  width:100%;
  padding:0 18px;
}
.brand-name{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.025em;
  font-size:1.12rem;
  line-height:1;
  white-space:nowrap;
  text-transform:none;
}
#work .sec-kicker{
  text-transform:uppercase;
  color:#5d574a;
}
#work .sec-title{
  font-size:clamp(2.9rem,7vw,5.8rem);
  text-transform:none;
}
.tag-float,.tag-1,.tag-2{
  display:none !important;
  animation:none !important;
}
.hero-frame,.hero-frame-wrap,.hero-frame img{
  animation:none !important;
  transform:none !important;
  transition:none !important;
}
.hero-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.hero-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.22;
  z-index:0;
  animation:floaty 9s ease-in-out infinite;
}
.quick-icon{
  font-size:1.36rem;
  line-height:1;
  color:#fff;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
}
.quick-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.quick-row{
  display:grid;
  grid-template-columns:44px minmax(120px,1fr) 1.45fr;
  gap:18px;
  align-items:center;
  padding:25px 0;
  border-bottom:1px solid rgba(255,255,255,.36);
}
.quick-row strong{
  font-family:var(--body);
  font-size:1.16rem;
  font-weight:750;
  color:#fff;
  letter-spacing:-.02em;
}
.foot-name em{
  color:var(--violet);
  font-style:italic;
  text-transform:none;
  letter-spacing:-.035em;
  margin-left:.04em;
}
.foot-arrow{
  font-weight:700;
  margin-left:.08em;
  color:var(--paper);
}
.footer-actions a[aria-label="Behance"] svg path{
  fill:none;
  stroke:currentColor;
}
.availability .work-word{
  color:var(--orange);
  font-weight:700;
}
footer{
  background:var(--ink) !important;
  color:var(--paper) !important;
  padding:68px 0 32px !important;
  border-top:0 !important;
  margin:0 !important;
}
.footer-inner{
  max-width:1320px !important;
  margin:0 auto !important;
  padding:0 28px !important;
}
.foot-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:32px !important;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  padding-bottom:30px !important;
  margin-bottom:22px !important;
}
.foot-name{
  font-family:var(--display) !important;
  font-weight:800 !important;
  letter-spacing:-.06em !important;
  font-size:clamp(3.2rem,7vw,5.8rem) !important;
  line-height:.9 !important;
  color:var(--paper) !important;
  text-transform:none !important;
  display:flex !important;
  align-items:center !important;
  gap:.18em !important;
  flex-wrap:wrap;
  white-space:nowrap !important;
}
.foot-name span,.foot-name em{
  color:var(--paper) !important;
  font-style:normal !important;
  text-transform:none !important;
  margin:0 !important;
  letter-spacing:inherit !important;
}
.footer-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.footer-actions a:not(.to-top){
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(255,255,255,.65) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  font-weight:700;
  font-family:var(--body);
  font-size:0;
  text-transform:none;
  color:var(--paper) !important;
  background:transparent !important;
}
.footer-actions a:not(.to-top) svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  display:block !important;
}
.footer-actions a[aria-label="Behance"] svg{
  width:23px !important;
  height:23px !important;
}
.footer-actions a[aria-label="LinkedIn"] svg path,.footer-actions a[aria-label="LinkedIn"] svg circle{
  fill:currentColor !important;
  stroke:none !important;
}
.footer-actions a:not(.to-top):hover{
  background:var(--paper) !important;
  color:var(--ink) !important;
  transform:translateY(-2px) !important;
}
.to-top{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.78) !important;
  border-radius:999px !important;
  padding:13px 22px !important;
  font-weight:700 !important;
  transition:.3s var(--ease);
  border-color:rgba(255,255,255,.75);
  color:var(--paper) !important;
  text-transform:none !important;
  font-family:var(--body) !important;
  letter-spacing:0 !important;
  font-size:.95rem !important;
  background:transparent !important;
  white-space:nowrap !important;
}
.to-top:hover{
  background:var(--paper) !important;
  color:var(--ink) !important;
  transform:translateY(-2px) !important;
}
.foot-bot{
  display:grid !important;
  justify-content:space-between;
  gap:20px !important;
  flex-wrap:wrap;
  font-family:var(--mono) !important;
  font-size:.72rem !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  color:rgba(255,255,255,.58) !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:center !important;
}
.foot-bot span:nth-child(2){
  text-align:center !important;
}
.foot-bot span:nth-child(3){
  text-align:right !important;
}
#work .sec-title .title-orange{
  color:var(--orange) !important;
}
.foot-name .foot-talk{
  color:var(--lavender) !important;
  font-style:normal !important;
}
.brand-accent{
  color:var(--violet) !important;
  font-style:normal !important;
}
#work .sec-title .vio{
  color:var(--orange) !important;
}
.foot-name .foot-arrow{
  font-size:.9em !important;
  line-height:1 !important;
  margin-left:.08em !important;
  color:var(--violet) !important;
  transform:translateY(-.02em);
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  justify-self:start !important;
  white-space:nowrap !important;
}
.nav-center{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
.nav-cta{
  justify-self:end !important;
  white-space:nowrap !important;
}
.hero{
  position:relative;
  padding:138px 0 40px;
  overflow:hidden;
  background:linear-gradient(rgba(34,34,35,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,34,35,.075) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper) 0%, #fffcec 100%) !important;
  background-size:46px 46px,46px 46px,auto !important;
  background-position:center top !important;
}
.hero::before,
.hero::after,
.hero-grid::before{
  display:none !important;
  content:none !important;
}
#work,
#contact,
#project-page{
  background:linear-gradient(rgba(34,34,35,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,34,35,.06) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper) 0%, #fffcec 100%) !important;
  background-size:46px 46px,46px 46px,auto !important;
  background-position:center top !important;
}
#contact{
  background:linear-gradient(rgba(34,34,35,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,34,35,.055) 1px, transparent 1px),
    linear-gradient(180deg, #fffcec 0%, var(--paper) 100%) !important;
  background-size:46px 46px,46px 46px,auto !important;
}
.hero-copy::after,
.hero-grid::after,
.spark,
.st-star,
.sticker{
  display:none !important;
  content:none !important;
}
.hero-blob.hb2{
  display:none !important;
}
.discipline-strip{
  background:var(--ink) !important;
  border-top:0 !important;
  border-bottom:0 !important;
  overflow:hidden;
  white-space:nowrap;
  margin-top:8px !important;
  color:var(--paper) !important;
}
.discipline-track{
  width:max-content;
  min-width:200%;
  min-height:44px !important;
  display:inline-flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.25em;
  font-weight:700;
  font-size:.76rem;
  color:var(--paper) !important;
  animation:stripMove 32s linear infinite;
}
.discipline-track .slash{
  color:var(--paper) !important;
  font-size:1.16rem;
  letter-spacing:0;
  font-weight:400;
  opacity:.7 !important;
}
.discipline-track em{
  font-family:var(--mono) !important;
  text-transform:uppercase !important;
  letter-spacing:.25em !important;
  font-style:normal !important;
  color:var(--pink) !important;
  font-weight:700 !important;
  font-size:.92rem;
}
.skip-link{
  position:fixed;
  top:16px;
  left:16px;
  z-index:2000;
  transform:translateY(-140%);
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  transition:transform .25s var(--ease);
}
.skip-link:focus{
  transform:translateY(0);
}
.hero-frame{
  position:relative;
  width:100%;
  aspect-ratio:980/899;
  border:0 !important;
  border-radius:28px;
  overflow:hidden;
  background:transparent !important;
  box-shadow:none !important;
  animation:none !important;
  transform:none !important;
}
.hero-frame-wrap,.hero-frame img{
  transform:none !important;
  animation:none !important;
}
.tag-float{
  position:absolute;
  z-index:4;
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:30px;
  padding:7px 13px;
  box-shadow:2px 2px 0 var(--ink);
  animation:none !important;
}
.hero-art::before{
  background:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.04)),
    repeating-linear-gradient(-45deg, rgba(125,57,235,.12) 0 2px, transparent 2px 18px) !important;
  opacity:.32 !important;
  display:none !important;
  content:none !important;
}
.hero h1{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.055em;
  font-size:clamp(2.9rem,7.6vw,6.1rem);
  padding-bottom:.18em !important;
  max-width:760px;
  overflow:visible !important;
}
.hero h1 .ln{
  display:block;
  overflow:visible !important;
  padding-bottom:.08em !important;
}
.hero h1 .vio{
  color:var(--violet);
  font-style:italic;
  letter-spacing:-.045em;
  padding-right:.04em;
  line-height:1.05 !important;
}
.nav{
  display:grid !important;
  align-items:center !important;
  justify-content:space-between;
  margin-top:12px;
  background:rgba(255,254,236,.95) !important;
  backdrop-filter:blur(22px) saturate(155%) !important;
  border:1px solid rgba(34,34,35,.28) !important;
  border-radius:999px;
  padding:12px 14px 12px 26px;
  width:100%;
  -webkit-backdrop-filter:blur(22px) saturate(155%) !important;
  box-shadow:0 10px 35px rgba(34,34,35,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr) !important;
  column-gap:18px !important;
  will-change:backdrop-filter;
}
header.scrolled .nav,.nav{
  background:rgba(255,254,236,.62) !important;
  -webkit-backdrop-filter:blur(22px) saturate(155%) !important;
  backdrop-filter:blur(22px) saturate(155%) !important;
}
.contact-form input:invalid:not(:placeholder-shown),.contact-form textarea:invalid:not(:placeholder-shown){
  border-bottom-color:var(--pink);
}

/* Animations and feature rules */
@keyframes liDraw{to{stroke-dashoffset:0;opacity:1}}
@keyframes dotPop{to{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,39,224,.5)}70%{box-shadow:0 0 0 9px rgba(91,39,224,0)}100%{box-shadow:0 0 0 0 rgba(91,39,224,0)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatTilt{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(-.4deg)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes stripMove{to{transform:translateX(-50%)}}
@keyframes availPulse{70%{box-shadow:0 0 0 10px rgba(198,255,51,0)}100%{box-shadow:0 0 0 0 rgba(198,255,51,0)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:rgba(255,254,236,.94)!important}}

@media (max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-art{
    order:-1;
    min-height:380px;
    margin-bottom:6px;
  }
  .hero-frame-wrap{
    width:min(400px,84%);
  }
  .about-grid{
    grid-template-columns:1fr;
    gap:60px;
  }
  .about-photo{
    max-width:340px;
    margin:0 auto;
  }
  .about-info{
    grid-template-columns:1fr 1fr;
  }
  .about-foot{
    grid-template-columns:1fr 1fr;
  }
  .pp-meta{
    grid-template-columns:repeat(2,1fr);
  }
  .discipline-track{
    min-height:50px;
    gap:24px;
  }
  .contact-card{
    grid-template-columns:1fr;
  }
  .quick-row{
    grid-template-columns:34px 1fr;
    gap:14px;
  }
  .quick-row a,.quick-row span:last-child{
    grid-column:2;
    justify-self:start;
    text-align:left;
  }
}

@media (max-width:760px){
  .wrap{
    padding:0 18px;
  }
  .nav-links{
    display:none;
  }
  .burger{
    display:flex;
  }
  .sec-pad{
    padding:72px 0;
  }
  .work-grid{
    grid-template-columns:1fr;
  }
  .about-info{
    grid-template-columns:1fr;
    gap:30px;
  }
  .about-foot{
    grid-template-columns:1fr;
    gap:30px;
  }
  .about-focus ul{
    grid-template-columns:1fr 1fr;
  }
  .pp-split{
    grid-template-columns:1fr;
  }
  .contact-left{
    padding:38px 26px;
  }
  .contact-right{
    padding:34px 26px;
  }
  .sec-head{
    margin-bottom:34px;
  }
  .contact-form{
    grid-template-columns:1fr;
  }
  .contact-left,.quick-info{
    padding:36px 24px !important;
  }
  footer{
    padding:58px 0 28px !important;
  }
  header .wrap{
    padding:0 10px;
  }
  .brand-name{
    font-size:.96rem;
  }
  .discipline-track{
    min-height:42px;
    gap:20px;
    font-size:.68rem;
    letter-spacing:.18em;
  }
  .footer-inner{
    padding:0 20px !important;
  }
  .foot-top{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:24px !important;
  }
  .foot-name{
    gap:.12em;
    font-size:clamp(3rem,15vw,4.6rem) !important;
    white-space:normal !important;
  }
  .footer-actions{
    flex-wrap:wrap !important;
  }
  .foot-bot{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .foot-bot span,.foot-bot span:nth-child(2),.foot-bot span:nth-child(3){
    text-align:left !important;
  }
  .nav{
    padding:10px 10px 10px 18px;
    display:flex !important;
    justify-content:space-between !important;
  }
  .nav-center,.nav-cta{
    display:none !important;
  }
  .hero,#work,#contact,#project-page{
    background-size:34px 34px,34px 34px,auto !important;
  }
}

@media (max-width:420px){
  .hero h1{
    font-size:13vw;
  }
  .badge-avail{
    width:92px;
    height:92px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .hero h1 .ln i{
    transform:none;
  }
  .hero-sub,.hero-cta,.scroll-hint{
    opacity:1;
  }
  #loader{
    display:none;
  }
  body.loading{
    overflow:auto;
    height:auto;
  }
  .discipline-track,.badge-avail,.availability i,.hero h1 .ln i,.hero-tagline,.hero-sub,.hero-cta,.scroll-hint{
    animation:none !important;
  }
  .hero h1 .ln i,.hero-tagline,.hero-sub,.hero-cta,.scroll-hint{
    opacity:1 !important;
    transform:none !important;
  }
}

/* ───────────────────────── PROJECT 03 CASE STUDY ───────────────────────── */
.pp-hero-balanced{
  padding-bottom:18px;
}
.pp-case-section{
  padding:34px 0 22px;
}
.pp-hero-image{
  padding-top:0;
}
.pp-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin:0 0 20px;
  border-top:1.25px solid var(--ink);
  padding-top:24px;
}
.pp-section-head .mono{
  color:var(--orange);
  font-weight:700;
  white-space:nowrap;
}
.pp-section-head h2{
  font-family:var(--display);
  font-size:clamp(1.9rem,4vw,3.25rem);
  line-height:.95;
  letter-spacing:-.045em;
  max-width:760px;
  text-align:right;
}
.pp-copy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:18px;
}
.pp-text-block{
  background:rgba(255,255,255,.58);
  border:1.25px solid rgba(34,34,35,.18);
  border-radius:20px;
  padding:22px;
}
.pp-text-block h3{
  font-family:var(--display);
  font-size:1.32rem;
  line-height:1;
  letter-spacing:-.025em;
  margin-bottom:10px;
}
.pp-text-block p,
.pp-body.narrow p{
  color:#3b352c;
  font-size:1.04rem;
  line-height:1.72;
}
.pp-image-grid{
  display:grid;
  gap:20px;
  margin:18px 0;
}
.pp-image-grid.one{
  grid-template-columns:1fr;
}
.pp-image-grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pp-image-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pp-image-grid.align-even{
  align-items:stretch;
}
.pp-image-card{
  background:var(--white);
  border:1.25px solid var(--ink);
  border-radius:22px;
  overflow:hidden;
  min-height:320px;
  aspect-ratio:16 / 10;
}
.pp-image-card img{
  display:block;
  width:100%;
  height:100%;
  min-height:320px;
  aspect-ratio:16 / 10;
}
.pp-image-card.cover img{
  object-fit:cover;
}
.pp-image-card.contain{
  display:flex;
  flex-direction:column;
}
.pp-image-card.contain img{
  object-fit:contain;
  background:#fff;
  padding:18px;
}
.pp-image-card figcaption{
  border-top:1.25px solid rgba(34,34,35,.18);
  padding:11px 14px 13px;
  font-family:var(--mono);
  font-size:.68rem;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#625b4c;
  background:rgba(255,254,236,.9);
}
.pp-body.narrow{
  max-width:850px;
  padding:4px 0 10px;
}
@media(max-width:820px){
  .pp-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .pp-section-head h2{
    text-align:left;
  }
  .pp-copy-grid,
  .pp-image-grid.two,
  .pp-image-grid.three{
    grid-template-columns:1fr;
  }
  .pp-image-card,
  .pp-image-card img{
    min-height:240px;
  }
}

/* Hero self-portrait note */
.hero-portrait{
  width:100%;
  margin:0;
}
.hero-image-note{
  max-width:440px;
  margin:16px auto 0;
  font-family:var(--body);
  font-size:.94rem;
  line-height:1.55;
  color:#5b5343;
  text-align:center;
}


/* ───────────────────────── FINAL JESSICA FEEDBACK + CONTENT FIXES ───────────────────────── */
body{
  cursor:none;
}
a,button,input,textarea,[role="link"],.card{
  cursor:none !important;
}
.designer-cursor{
  position:fixed;
  left:0;
  top:0;
  width:34px;
  height:34px;
  z-index:3000;
  pointer-events:none;
  border:1.5px solid var(--ink);
  border-radius:50%;
  background:rgba(255,254,236,.82);
  display:grid;
  place-items:center;
  margin:-17px 0 0 -17px;
  mix-blend-mode:normal;
  transition:width .24s var(--ease),height .24s var(--ease),margin .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
  box-shadow:0 8px 24px rgba(34,34,35,.14);
}
.designer-cursor span{
  color:var(--violet);
  font-size:14px;
  line-height:1;
}
.designer-cursor.is-hover{
  width:54px;
  height:54px;
  margin:-27px 0 0 -27px;
  background:var(--violet);
  color:#fff;
}
.designer-cursor.is-hover span{color:#fff;}

.brand-accent{
  color:var(--violet) !important;
  font-style:normal !important;
}
.hero-frame{
  border:2px solid var(--ink) !important;
  box-shadow:10px 10px 0 var(--pink) !important;
  background:var(--paper-2) !important;
}
.hero-frame img{
  object-fit:cover !important;
  object-position:center 28% !important;
}
.hero-image-note{
  margin-top:8px !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
  max-width:430px !important;
  color:#605847 !important;
}
.badge-avail text{
  font-size:10.5px !important;
  letter-spacing:2px !important;
}
.about-photo .frame img{
  object-position:center 20% !important;
}
.contact-card{
  background:var(--ink) !important;
  box-shadow:0 0 0 1.25px rgba(34,34,35,.25) !important;
}
.contact-left{
  background:var(--ink) !important;
  color:var(--paper) !important;
}
.contact-intro{
  color:#ddd3c3 !important;
}
.contact-form label span{
  color:#c9c0ad !important;
}
.contact-form input,.contact-form textarea{
  color:var(--paper) !important;
  border-bottom-color:rgba(255,254,236,.42) !important;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{
  color:rgba(255,254,236,.52) !important;
}
.contact-form input:focus,.contact-form textarea:focus{
  border-bottom-color:var(--lime) !important;
}
.submit-btn{
  background:var(--paper) !important;
  color:var(--ink) !important;
}
.submit-btn:hover{
  background:var(--lime) !important;
}
.quick-info{
  background:var(--violet) !important;
}
.footer-actions a:not(.to-top) img{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
  display:block !important;
  border-radius:50%;
}
.footer-actions a[aria-label="Instagram"] img,
.footer-actions a[aria-label="Behance"] img,
.footer-actions a[aria-label="LinkedIn"] img{
  filter:none !important;
}
.pp-title{
  font-size:clamp(2.45rem,6vw,5.35rem) !important;
  line-height:.93 !important;
  margin-bottom:14px !important;
}
.card-body h3{
  font-size:clamp(1.22rem,2.1vw,1.45rem) !important;
  line-height:1.05 !important;
}
.pp-section-head{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  flex-direction:column !important;
  gap:9px !important;
}
.pp-section-head h2{
  text-align:left !important;
  font-size:clamp(1.55rem,3.1vw,2.55rem) !important;
  line-height:1 !important;
  max-width:860px !important;
}
.sec-head{
  align-items:flex-start !important;
}
.sec-note{
  margin-top:10px;
}

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  body,a,button,input,textarea,[role="link"],.card{cursor:auto !important;}
  .designer-cursor{display:none !important;}
}
@media (max-width:760px){
  .hero-frame{box-shadow:6px 6px 0 var(--pink) !important;}
  .pp-title{font-size:clamp(2.1rem,12vw,3.2rem) !important;}
}


/* ───────────────────────── FINAL IMAGE + ABOUT CLEANUP ───────────────────────── */
.hero-frame{
  border:0 !important;
  box-shadow:12px 12px 0 var(--ink) !important;
  background:transparent !important;
}
.hero-frame img{
  border-radius:20px !important;
}
.hero-image-note{
  display:none !important;
}
.about-photo .frame img{
  object-position:center 20% !important;
}
.about-info{
  grid-template-columns:repeat(2,1fr) !important;
}
.sec-note{
  font-size:.88rem !important;
  line-height:1.45 !important;
  max-width:330px !important;
}
@media (max-width:760px){
  .hero-frame{box-shadow:7px 7px 0 var(--ink) !important;}
  .about-info{grid-template-columns:1fr !important;}
  .sec-note{font-size:.84rem !important;}
}


/* ───────────────────────── FINAL REQUEST CLEANUP ───────────────────────── */
/* Restore normal cursor and remove the custom designer cursor. */
body,
a,
button,
input,
textarea,
[role="link"],
.card{
  cursor:auto !important;
}
button,
.btn,
.btn-get,
.submit-btn,
.to-top,
.pp-back,
.pp-next,
.card{
  cursor:pointer !important;
}
.designer-cursor{
  display:none !important;
}

/* Keep project images fully visible instead of cropped or zoomed. */
.card-thumb{
  background:var(--paper-2) !important;
}
.card-thumb img{
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  transform:none !important;
}
.card:hover .card-thumb img{
  transform:none !important;
}
.pp-shot,
.pp-image-card{
  background:var(--paper-2) !important;
}
.pp-shot img,
.pp-image-card img,
.pp-image-card.cover img,
.pp-image-card.contain img{
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
.pp-image-card:hover img,
.pp-shot:hover img{
  transform:none !important;
}

/* Keep Experience, Education, and Certification on the same row on desktop. */
.about-info{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:start !important;
}
@media (max-width:980px){
  .about-info{
    grid-template-columns:1fr !important;
  }
}

/* Coming soon thumbnail style for projects 5 and 6 on the home page. */
.coming-soon-thumb{
  text-align:center;
  padding:24px;
}
.coming-soon-thumb .big{
  font-family:var(--display);
  font-size:clamp(2.1rem, 6vw, 4.8rem) !important;
  line-height:.9;
  letter-spacing:.01em;
  text-transform:uppercase;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}


/* ───────────────────────── SIMPLE PROJECT PAGE LAYOUT UPDATE ───────────────────────── */
#project-page{
  background:#fbf8f3 !important;
}
.pp-bar{
  border-bottom:1px solid rgba(34,34,35,.16) !important;
  background:rgba(251,248,243,.9) !important;
}
.pp-back{
  border:1px solid rgba(34,34,35,.45) !important;
  background:#fff !important;
  color:#222223 !important;
}
.pp-simple{
  width:min(100% - 40px, 1120px);
  margin:0 auto;
  color:#171717;
  font-family:Inter, Arial, Helvetica, sans-serif;
}
.pp-simple img{
  display:block;
  width:100%;
  height:auto;
}
.pp-simple-hero{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:48px;
  align-items:end;
  padding:64px 0 34px;
}
.pp-simple-copy h1{
  margin:0 0 18px;
  font-family:var(--display);
  font-size:clamp(2.4rem,5.8vw,4.8rem);
  line-height:1;
  letter-spacing:-.055em;
  max-width:850px;
}
.pp-simple-copy p:last-child{
  max-width:700px;
  color:#625b4c;
  font-size:clamp(1rem,1.6vw,1.22rem);
  line-height:1.55;
}
.pp-simple-kicker,
.pp-simple-label{
  margin:0 0 12px;
  font-family:var(--mono);
  color:#9b4f3f;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.pp-simple-info{
  display:grid;
  gap:12px;
  padding:22px;
  background:#fff;
  border:1px solid #ddd3c8;
  border-radius:20px;
}
.pp-simple-info div{
  display:grid;
  gap:2px;
  padding-bottom:10px;
  border-bottom:1px solid #e6ddd3;
}
.pp-simple-info div:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.pp-simple-info span{
  color:#6c665f;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pp-simple-info strong{
  font-size:.92rem;
  line-height:1.35;
}
.pp-simple-image-section{
  padding:8px 0 54px;
}
.pp-simple-main-image,
.pp-simple-figure{
  margin:0;
  overflow:hidden;
  background:#f1ebe3;
  border:1px solid #ddd3c8;
  border-radius:20px;
}
.pp-simple-main-image img{
  max-height:620px;
  aspect-ratio:16/10;
  object-fit:contain;
  object-position:center;
  background:#f1ebe3;
}
.pp-simple-section{
  padding:58px 0;
  border-top:1px solid rgba(34,34,35,.12);
}
.pp-simple-two-col{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
}
.pp-simple-section h2,
.pp-simple-heading h2,
.pp-simple-details h2{
  margin:0 0 16px;
  font-family:var(--display);
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:1.08;
  letter-spacing:-.04em;
}
.pp-simple-text,
.pp-simple-heading p,
.pp-simple-details p,
.pp-simple-roadmap p{
  color:#625b4c;
  font-size:1rem;
  line-height:1.65;
}
.pp-simple-text p:last-child,
.pp-simple-heading p:last-child,
.pp-simple-details p:last-child,
.pp-simple-roadmap p:last-child{
  margin-bottom:0;
}
.pp-simple-muted{
  margin-left:calc((100vw - min(100vw - 40px, 1120px)) / -2);
  margin-right:calc((100vw - min(100vw - 40px, 1120px)) / -2);
  padding-left:calc((100vw - min(100vw - 40px, 1120px)) / 2);
  padding-right:calc((100vw - min(100vw - 40px, 1120px)) / 2);
  background:#f1ebe3;
}
.pp-simple-heading{
  max-width:760px;
  margin-bottom:28px;
}
.pp-simple-roadmap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.pp-simple-roadmap article,
.pp-simple-details article{
  background:#fff;
  border:1px solid #ddd3c8;
  border-radius:20px;
  padding:22px;
}
.pp-simple-roadmap span{
  display:inline-flex;
  margin-bottom:26px;
  color:#9b4f3f;
  font-weight:800;
}
.pp-simple-roadmap h3{
  margin:0 0 8px;
  font-size:1.04rem;
  line-height:1.2;
}
.pp-simple-details{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.pp-simple-image-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.pp-simple-image-grid.system-grid,
.pp-simple-image-grid.process-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pp-simple-image-grid.final-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pp-simple-figure img{
  aspect-ratio:16/10;
  max-height:420px;
  object-fit:contain;
  object-position:center;
  background:#fff;
}
.pp-simple-figure figcaption{
  border-top:1px solid #e2d8cf;
  padding:10px 13px 12px;
  color:#6c665f;
  font-family:var(--mono);
  font-size:.68rem;
  line-height:1.45;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:#fffaf3;
}
.pp-simple-next{
  border-top:1px solid rgba(34,34,35,.18);
  padding:34px 0 70px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 24px;
  align-items:center;
  cursor:pointer;
}
.pp-simple-next span{
  font-family:var(--mono);
  color:#6c665f;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.pp-simple-next strong{
  grid-column:1;
  font-family:var(--display);
  font-size:clamp(1.55rem,3vw,2.5rem);
  line-height:1;
  letter-spacing:-.035em;
}
.pp-simple-next i{
  grid-column:2;
  grid-row:1 / span 2;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid #222223;
  border-radius:50%;
  font-style:normal;
}
@media(max-width:860px){
  .pp-simple{
    width:min(100% - 28px, 1120px);
  }
  .pp-simple-hero,
  .pp-simple-two-col,
  .pp-simple-details,
  .pp-simple-image-grid,
  .pp-simple-image-grid.system-grid,
  .pp-simple-image-grid.process-grid,
  .pp-simple-image-grid.final-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .pp-simple-hero{
    padding:46px 0 28px;
  }
  .pp-simple-section{
    padding:46px 0;
  }
  .pp-simple-roadmap{
    grid-template-columns:repeat(2,1fr);
  }
  .pp-simple-main-image img{
    max-height:440px;
  }
  .pp-simple-figure img{
    max-height:360px;
  }
}
@media(max-width:560px){
  .pp-simple-roadmap{
    grid-template-columns:1fr;
  }
  .pp-simple-info,
  .pp-simple-roadmap article,
  .pp-simple-details article{
    padding:18px;
  }
  .pp-simple-copy h1{
    font-size:clamp(2rem,11vw,3.2rem);
  }
  .pp-simple-main-image img,
  .pp-simple-figure img{
    aspect-ratio:4/3;
    max-height:300px;
  }
  .pp-simple-next{
    grid-template-columns:1fr;
  }
  .pp-simple-next i{
    grid-column:1;
    grid-row:auto;
  }
}

/* Added for new standalone project page links */
.card{ text-decoration:none; color:inherit; }
.card-thumb img{ object-fit:contain !important; background:#fffef0; }


/* ───────── Selected Work card cleanup: title + View only ───────── */
.card-body{
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-body h3{
  max-width: 100%;
  margin-bottom: 22px;
}
.card-meta-clean{
  justify-content: flex-end;
  align-items: center;
}
.card-meta-clean .card-view{
  margin-left: auto;
}
.card-meta .yr{
  display: none !important;
}

/* ───────── Larger selected work project tab text ───────── */
.card-body{
  min-height: 170px !important;
  padding-top: 24px !important;
  padding-bottom: 22px !important;
}
.card-body h3{
  font-size: clamp(1.45rem, 2.4vw, 2.25rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 28px !important;
}
.card-meta-clean .card-view,
.card-view{
  font-size: 0.92rem !important;
  font-weight: 800 !important;
}
@media (max-width: 720px){
  .card-body{
    min-height: 140px !important;
  }
  .card-body h3{
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
  }
}

/* ───────── Project thumbnail image zoom/fill update ───────── */
.card-thumb{
  overflow: hidden !important;
}
.card-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.08) !important;
}
.card:hover .card-thumb img{
  transform: scale(1.12) !important;
}


/* Final cleanup and responsive fixes */
html{scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}
#project-page,.designer-cursor{display:none !important;}
.card{height:100%;}
.card-thumb{aspect-ratio:4/3;overflow:hidden;}
.card-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.08);transition:transform .35s ease;}
.card:hover .card-thumb img{transform:scale(1.12);}
.card-body{min-height:170px;display:flex;flex-direction:column;justify-content:space-between;}
.card-body h3{font-size:clamp(1.45rem,2.4vw,2.25rem);line-height:.98;letter-spacing:-.055em;margin-bottom:28px;}
.card-meta .yr{display:none !important;}
.card-meta-clean{justify-content:flex-end;align-items:center;}
.card-view{font-size:.92rem;font-weight:800;}
@media (max-width:1024px){
  .wrap{width:min(100% - 32px,var(--wrap));}
  .hero-grid,.about-grid{grid-template-columns:1fr !important;gap:42px;}
  .hero-copy{text-align:left;}
  .hero-art{max-width:620px;margin:0 auto;}
  .work-grid{grid-template-columns:1fr 1fr !important;gap:22px;}
  .contact-card{grid-template-columns:1fr !important;}
}
@media (max-width:760px){
  .wrap{width:min(100% - 24px,var(--wrap));}
  .nav{min-height:64px;gap:12px;}
  .brand-name{font-size:clamp(1rem,4.5vw,1.2rem);}
  .nav-center,.nav-cta{display:none !important;}
  .burger{display:inline-flex !important;}
  .hero{padding-top:108px !important;}
  .hero-copy h1{font-size:clamp(4rem,22vw,6.4rem) !important;line-height:.82;}
  .hero-sub{font-size:1rem;max-width:100%;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .btn{justify-content:center;}
  .badge-avail{width:96px;height:96px;right:8px;bottom:8px;}
  .work-grid{grid-template-columns:1fr !important;gap:20px;}
  .card-body{min-height:138px;padding:22px 18px;}
  .card-body h3{font-size:clamp(1.35rem,8vw,2rem);}
  .sec-title{font-size:clamp(2.5rem,14vw,4.6rem) !important;}
  .sec-head{gap:18px;}
  .about-info,.about-foot{grid-template-columns:1fr !important;}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot-top,.foot-bot{flex-direction:column;align-items:flex-start !important;gap:18px;}
  .foot-name{font-size:clamp(3.4rem,20vw,6.5rem) !important;}
}
@media (max-width:420px){
  .tools{grid-template-columns:1fr;}
  .contact-form{grid-template-columns:1fr !important;}
}

/* Project card title line break */
.card-body h3 br{
  display: block;
  content: "";
  margin-top: 4px;
}

/* Force homepage project titles onto two clean lines */
.card-body h3 br{
  display: block !important;
}
.card-body h3{
  white-space: normal !important;
}


/* Homepage project card title + spacing refinement */
.card-body{
  min-height: 118px !important;
  padding: 22px 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}
.card-body h3{
  margin: 0 !important;
  max-width: 100% !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}
.card-body h3 br{
  display: block !important;
}
.card-body h3 br + *{
  font-family: "DM Sans", system-ui, sans-serif !important;
}
.card-body h3{
  font-size: clamp(2rem, 3vw, 3.25rem) !important;
}
.card-body h3 br + span,
.card-body h3 .project-subtitle{
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 0.46em !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}
.card-meta-clean,
.card-meta{
  margin-top: 0 !important;
  justify-content: flex-end !important;
}
.card-view{
  margin-left: auto !important;
}
@media (max-width: 720px){
  .card-body{
    min-height: 104px !important;
    padding: 18px 20px 20px !important;
    gap: 14px !important;
  }
  .card-body h3{
    font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
  }
}


/* Make project card subtitle thinner */
.card-body h3 .project-subtitle{
  font-weight: 400 !important;
}


/* Project card subtitle font like the black category label */
.card-body h3 .project-subtitle{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.34em !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
}


/* Project card subtitle lowercase, smaller, aligned with View button */
.card-body{
  gap: 12px !important;
}
.card-body h3{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.card-body h3 .project-subtitle{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.26em !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  line-height: 1.25 !important;
}
.card-meta,
.card-meta-clean{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: -4px !important;
}
.card-view{
  align-self: flex-end !important;
}


/* Final project card subtitle alignment */
.card-body{
  min-height: 112px !important;
  padding: 20px 28px 22px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  align-items: end !important;
}
.card-body h3{
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  line-height: 0.98 !important;
}
.card-body h3 .project-subtitle{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.24em !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}
.card-meta,
.card-meta-clean{
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}
.card-view{
  margin-left: 0 !important;
  align-self: end !important;
  white-space: nowrap !important;
}
@media (max-width: 720px){
  .card-body{
    min-height: 104px !important;
    padding: 18px 20px 20px !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 12px !important;
  }
  .card-body h3 .project-subtitle{
    font-size: 0.28em !important;
  }
}