/* ELIZABETH PLAYFUL DESIGN PORTFOLIO V12 */

:root{
  --cream:#f5f1e8;
  --green:#033D21;
  --sage:#899B8B;
  --charcoal:#303330;
  --line:rgba(3,61,33,.22);
}

/* ONE CONTINUOUS CANVAS */

.hero{
  position:relative!important;
  min-height:790px!important;
  overflow:hidden!important;
  background-color:var(--cream)!important;
  background-image:
    linear-gradient(rgba(3,61,33,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,61,33,.045) 1px,transparent 1px)!important;
  background-size:112px 112px!important;
}

.hero-inner{
  position:relative!important;
  width:min(1400px,92vw)!important;
  min-height:790px!important;
  margin:auto!important;
  background:transparent!important;
}

/* PLAYFUL BACKGROUND FORM */

.hero-inner:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  width:430px!important;
  height:430px!important;
  right:2vw!important;
  top:175px!important;
  border-radius:50%!important;
  background:rgba(137,155,139,.20)!important;
}

.hero-inner:after{
  content:"FORM  /  PEOPLE  /  PURPOSE"!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  left:2px!important;
  bottom:22px!important;
  color:rgba(3,61,33,.065)!important;
  font-family:Arial,sans-serif!important;
  font-size:clamp(3.8rem,7.8vw,8rem)!important;
  font-weight:700!important;
  letter-spacing:-.055em!important;
  white-space:nowrap!important;
}

/* HEADER */

.topbar{
  position:relative!important;
  z-index:20!important;
  height:92px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
}

.name{
  color:var(--green)!important;
  font-family:Georgia,serif!important;
  font-size:1.15rem!important;
  font-weight:400!important;
}

.nav{
  display:flex!important;
  width:auto!important;
  gap:36px!important;
}

.nav a,
.nav a:nth-child(2),
.nav a:nth-child(3){
  display:inline-block!important;
  color:var(--charcoal)!important;
  font-size:.67rem!important;
  font-weight:700!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
}

/* MAIN COMPOSITION */

.hero-content{
  position:relative!important;
  z-index:5!important;
  min-height:698px!important;
  display:flex!important;
  align-items:center!important;
  padding:42px 0 82px!important;
  background:transparent!important;
}

.hero-copy{
  position:relative!important;
  z-index:10!important;
  width:64%!important;
  max-width:860px!important;
  padding:0!important;
  transform:none!important;
  background:transparent!important;
}

/* EDITORIAL INDEX */

.hero-index{
  display:block!important;
  width:max-content!important;
  margin:0 0 27px!important;
  padding:8px 13px!important;
  border:1px solid rgba(3,61,33,.30)!important;
  border-radius:100px!important;
  color:var(--green)!important;
  background:rgba(245,241,232,.62)!important;
  font-size:.62rem!important;
  font-weight:700!important;
  letter-spacing:.20em!important;
}

/* HEADLINE */

.hero-title{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  margin:0!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(4.8rem,7.2vw,8rem)!important;
  font-weight:400!important;
  line-height:.78!important;
  letter-spacing:-.065em!important;
  color:var(--green)!important;
}

.hero-title span{
  display:block!important;
}

.hero-title span:nth-child(2){
  transform:translateX(5vw)!important;
}

.hero-title span:nth-child(3){
  color:var(--charcoal)!important;
  transform:translateX(1.5vw)!important;
}

/* SMALL DESIGN DETAILS */

.hero-copy:before{
  content:"PRODUCT  /  OBJECT  /  EXPERIENCE"!important;
  display:block!important;
  position:absolute!important;
  left:2px!important;
  bottom:-57px!important;
  color:var(--sage)!important;
  font-size:.59rem!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
}

.hero-copy:after{
  content:"LAHTI · FINLAND"!important;
  display:block!important;
  position:absolute!important;
  right:7%!important;
  top:-3px!important;
  color:var(--sage)!important;
  font-size:.58rem!important;
  font-weight:700!important;
  letter-spacing:.19em!important;
  transform:rotate(90deg) translateX(100%)!important;
  transform-origin:right top!important;
}

/* SUBTITLE */

.hero-subtitle{
  width:min(590px,83%)!important;
  margin:34px 0 0!important;
  padding-top:18px!important;
  border-top:1px solid var(--line)!important;
  color:var(--charcoal)!important;
  font-size:.84rem!important;
  line-height:1.6!important;
}

/* BUTTON */

.hero-button{
  display:inline-flex!important;
  margin-top:27px!important;
  padding:14px 25px!important;
  border:1px solid var(--green)!important;
  border-radius:0!important;
  color:var(--green)!important;
  background:rgba(245,241,232,.55)!important;
  font-size:.64rem!important;
  font-weight:700!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

/* PORTRAIT — PART OF COMPOSITION, NOT A CARD */

.hero-photo{
  position:absolute!important;
  z-index:8!important;
  top:122px!important;
  right:-1vw!important;
  bottom:auto!important;
  width:min(37vw,500px)!important;
  height:595px!important;
  margin:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-image:url("/assets/elizabeth-industrial-designer.png")!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:right bottom!important;
}

.hero-tech{
  display:none!important;
}

/* TABLET */

@media(max-width:1000px){

  .hero-title{
    font-size:clamp(4.2rem,7.4vw,6.7rem)!important;
  }

  .hero-photo{
    right:-5vw!important;
    width:43vw!important;
  }

  .hero-inner:before{
    right:-5vw!important;
    width:380px!important;
    height:380px!important;
  }
}

/* MOBILE */

@media(max-width:760px){

  .hero{
    min-height:auto!important;
    background-size:82px 82px!important;
  }

  .hero-inner{
    width:100%!important;
    min-height:auto!important;
  }

  .hero-inner:before{
    width:280px!important;
    height:280px!important;
    right:-105px!important;
    top:490px!important;
  }

  .hero-inner:after{
    left:18px!important;
    bottom:15px!important;
    font-size:2.7rem!important;
  }

  .topbar{
    width:calc(100% - 36px)!important;
    height:auto!important;
    min-height:88px!important;
    margin:auto!important;
    padding:16px 0 14px!important;
    flex-wrap:wrap!important;
    gap:14px!important;
  }

  .nav{
    width:100%!important;
    gap:18px!important;
    flex-wrap:wrap!important;
  }

  .nav a,
  .nav a:nth-child(2),
  .nav a:nth-child(3){
    display:inline-block!important;
    font-size:.60rem!important;
  }

  .hero-content{
    min-height:auto!important;
    display:block!important;
    padding:45px 20px 0!important;
  }

  .hero-copy{
    width:100%!important;
    max-width:none!important;
  }

  .hero-index{
    margin-bottom:22px!important;
  }

  .hero-title{
    font-size:clamp(3.4rem,14.5vw,5.1rem)!important;
    line-height:.83!important;
  }

  .hero-title span:nth-child(2){
    transform:translateX(5vw)!important;
  }

  .hero-title span:nth-child(3){
    transform:none!important;
  }

  .hero-subtitle{
    width:100%!important;
    margin-top:27px!important;
  }

  .hero-copy:after{
    display:none!important;
  }

  .hero-copy:before{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    margin-top:27px!important;
  }

  .hero-photo{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:86vw!important;
    max-width:390px!important;
    height:420px!important;
    margin:10px -10px 0 auto!important;
  }
}

/* END ELIZABETH PLAYFUL DESIGN PORTFOLIO V12 */

/* V12.1 MOBILE CLEANUP */

@media(max-width:760px){

  .hero{
    min-height:auto!important;
    overflow:hidden!important;
    background-size:82px 82px!important;
  }

  .hero-inner{
    width:100%!important;
    min-height:auto!important;
  }

  .hero-inner:before{
    width:230px!important;
    height:230px!important;
    right:-95px!important;
    top:520px!important;
    opacity:.55!important;
  }

  .hero-inner:after{
    display:none!important;
  }

  .topbar{
    width:calc(100% - 32px)!important;
    margin:0 auto!important;
    padding:16px 0 14px!important;
    gap:12px!important;
  }

  .name{
    width:100%!important;
    font-size:1rem!important;
  }

  .nav{
    width:100%!important;
    gap:16px!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  .nav a{
    font-size:.58rem!important;
    letter-spacing:.14em!important;
  }

  .hero-content{
    display:block!important;
    min-height:auto!important;
    padding:38px 18px 0!important;
  }

  .hero-copy{
    width:100%!important;
    max-width:none!important;
  }

  .hero-index{
    margin:0 0 20px!important;
    padding:7px 11px!important;
    font-size:.58rem!important;
  }

  .hero-title{
    width:100%!important;
    font-size:clamp(3.15rem,13.5vw,4.7rem)!important;
    line-height:.84!important;
    letter-spacing:-.05em!important;
  }

  .hero-title span,
  .hero-title span:nth-child(2),
  .hero-title span:nth-child(3){
    transform:none!important;
  }

  .hero-subtitle{
    width:100%!important;
    margin:26px 0 0!important;
    padding-top:16px!important;
    font-size:.78rem!important;
    line-height:1.55!important;
  }

  .hero-button{
    margin-top:22px!important;
    padding:13px 20px!important;
    font-size:.60rem!important;
  }

  .hero-copy:before,
  .hero-copy:after{
    display:none!important;
  }

  .hero-photo{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:88vw!important;
    max-width:360px!important;
    height:390px!important;
    margin:24px -12px 0 auto!important;
    background-size:contain!important;
    background-position:right bottom!important;
  }
}

/* END V12.1 MOBILE CLEANUP */

/* =========================================================
   KIJANI CREATIVE PRACTICE V12.2
   ========================================================= */

.project-kijani-case{
  position:relative!important;
  overflow:hidden!important;
}

.project-kijani-case .project-image-kijani{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:520px!important;
  background:
    linear-gradient(rgba(3,61,33,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,61,33,.04) 1px,transparent 1px),
    #eef2e9!important;
  background-size:72px 72px!important;
}

.project-kijani-case .project-kijani-logo{
  width:min(28%,170px)!important;
  max-width:170px!important;
  height:auto!important;
  object-fit:contain!important;
  opacity:.86!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.project-kijani-overlay{
  align-items:flex-start!important;
}

.project-kijani-description{
  width:min(480px,90%)!important;
  margin:12px 0 0!important;
  font-size:.81rem!important;
  line-height:1.6!important;
  opacity:.82!important;
}

.project-kijani-actions{
  display:flex!important;
  gap:20px!important;
  flex-wrap:wrap!important;
  margin-top:20px!important;
}

.project-kijani-actions a{
  display:inline-block!important;
  padding-bottom:4px!important;
  border-bottom:1px solid currentColor!important;
  color:inherit!important;
  font-size:.60rem!important;
  font-weight:700!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
}

.project-kijani-actions a:hover{
  opacity:.6!important;
}

.cv-kijani-logo{
  max-width:82px!important;
  height:auto!important;
  opacity:.78!important;
}

.discipline-kijani{
  display:none!important;
}

@media(max-width:760px){
  .project-kijani-case .project-image-kijani{
    min-height:320px!important;
  }

  .project-kijani-case .project-kijani-logo{
    width:112px!important;
    max-width:112px!important;
  }

  .project-kijani-description{
    width:100%!important;
    font-size:.75rem!important;
  }

  .project-kijani-actions{
    gap:14px!important;
    margin-top:16px!important;
  }

  .project-kijani-actions a{
    font-size:.56rem!important;
    letter-spacing:.11em!important;
  }
}

/* END KIJANI CREATIVE PRACTICE V12.2 */

/* V12.2 KIJANI CASE STUDY LOGO */

#portfolio .project-image{
  position:relative!important;
}

/*
  Kijani logo becomes a small editorial brand mark.
  No large centred white logo block.
*/
#portfolio img[src*="kijani-logo"]{
  position:absolute!important;
  z-index:8!important;
  top:34px!important;
  right:38px!important;
  left:auto!important;
  bottom:auto!important;

  width:112px!important;
  height:112px!important;
  max-width:112px!important;
  object-fit:contain!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;

  background:transparent!important;

  /*
    JPEG has a light background.
    Multiply lets the logo integrate visually
    with the project-card background.
  */
  mix-blend-mode:multiply!important;
  opacity:.82!important;

  transform:none!important;
}

/* Keep text clear of the logo */
#portfolio .project-image:has(img[src*="kijani-logo"]) .project-label,
#portfolio .project-image:has(img[src*="kijani-logo"]) .project-meta{
  padding-right:150px!important;
}

/* MOBILE */
@media(max-width:760px){

  #portfolio img[src*="kijani-logo"]{
    top:20px!important;
    right:20px!important;
    width:76px!important;
    height:76px!important;
    max-width:76px!important;
    opacity:.76!important;
  }

  #portfolio .project-image:has(img[src*="kijani-logo"]) .project-label,
  #portfolio .project-image:has(img[src*="kijani-logo"]) .project-meta{
    padding-right:0!important;
  }
}

/* END V12.2 KIJANI CASE STUDY LOGO */

/* =========================================================
   V12.3 MOBILE EDITORIAL REDESIGN
   Desktop remains unchanged
   ========================================================= */

@media (max-width:760px){

  /* ---------- HERO ---------- */

  .hero{
    min-height:auto!important;
    overflow:hidden!important;
    background-color:#f5f1e8!important;
    background-image:
      linear-gradient(rgba(3,61,33,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(3,61,33,.025) 1px,transparent 1px)!important;
    background-size:96px 96px!important;
  }

  .hero-inner{
    width:100%!important;
    min-height:auto!important;
  }

  /* remove desktop decorative overload */
  .hero-inner:after{
    display:none!important;
  }

  /* soft sage shape behind portrait */
  .hero-inner:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    width:245px!important;
    height:305px!important;
    top:auto!important;
    right:-54px!important;
    bottom:28px!important;
    border-radius:48% 52% 46% 54% / 54% 46% 54% 46%!important;
    background:rgba(137,155,139,.20)!important;
    opacity:1!important;
  }

  /* ---------- HEADER ---------- */

  .topbar{
    position:relative!important;
    z-index:20!important;
    width:calc(100% - 32px)!important;
    min-height:78px!important;
    height:auto!important;
    margin:0 auto!important;
    padding:15px 0 12px!important;
    display:block!important;
    border-bottom:1px solid rgba(3,61,33,.18)!important;
  }

  .name{
    display:block!important;
    margin:0 0 12px!important;
    font-size:1rem!important;
    line-height:1.1!important;
  }

  .nav{
    display:flex!important;
    width:100%!important;
    gap:19px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  .nav::-webkit-scrollbar{
    display:none!important;
  }

  .nav a,
  .nav a:nth-child(2),
  .nav a:nth-child(3){
    flex:0 0 auto!important;
    font-size:.57rem!important;
    letter-spacing:.13em!important;
    white-space:nowrap!important;
  }

  /* ---------- COPY ---------- */

  .hero-content{
    position:relative!important;
    z-index:5!important;
    display:block!important;
    min-height:auto!important;
    padding:34px 18px 0!important;
  }

  .hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }

  .hero-index{
    width:max-content!important;
    margin:0 0 20px!important;
    padding:6px 10px!important;
    font-size:.52rem!important;
    letter-spacing:.16em!important;
  }

  .hero-title{
    width:100%!important;
    max-width:340px!important;
    margin:0!important;
    font-size:clamp(2.9rem,12.4vw,4.15rem)!important;
    line-height:.88!important;
    letter-spacing:-.045em!important;
  }

  .hero-title span,
  .hero-title span:nth-child(2),
  .hero-title span:nth-child(3){
    transform:none!important;
    margin-left:0!important;
  }

  .hero-title span:nth-child(3){
    color:#899B8B!important;
  }

  .hero-subtitle{
    width:100%!important;
    max-width:330px!important;
    margin:23px 0 0!important;
    padding-top:14px!important;
    border-top:1px solid rgba(3,61,33,.18)!important;
    font-size:.72rem!important;
    line-height:1.55!important;
  }

  .hero-button{
    margin-top:20px!important;
    padding:12px 17px!important;
    font-size:.55rem!important;
    letter-spacing:.14em!important;
  }

  .hero-copy:before,
  .hero-copy:after{
    display:none!important;
  }

  /* ---------- PORTRAIT ---------- */

  .hero-photo{
    position:relative!important;
    z-index:8!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;

    width:74vw!important;
    max-width:300px!important;
    height:335px!important;

    margin:18px -2px 0 auto!important;

    background-size:contain!important;
    background-position:right bottom!important;
    background-repeat:no-repeat!important;

    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  /* ---------- PORTFOLIO ---------- */

  .section{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .work-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .project,
  .project-large,
  .project-small{
    width:100%!important;
    min-width:0!important;
  }

  .project-image{
    min-height:0!important;
    height:330px!important;
    overflow:hidden!important;
  }

  .project h2,
  .project h3{
    font-size:clamp(1.55rem,7vw,2.15rem)!important;
    line-height:1.02!important;
  }

  /* Kijani card: logo smaller and quieter */
  #portfolio img[src*="kijani-logo"]{
    top:18px!important;
    right:18px!important;
    width:64px!important;
    height:64px!important;
    max-width:64px!important;
    opacity:.72!important;
  }

  /* ---------- CONTACT ---------- */

  .contact .section-heading{
    font-size:clamp(2rem,9vw,3rem)!important;
    line-height:1!important;
  }

  .contact-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

}

/* Slightly smaller phones */

@media (max-width:390px){

  .hero-title{
    font-size:2.85rem!important;
  }

  .hero-photo{
    width:72vw!important;
    max-width:270px!important;
    height:305px!important;
  }

  .project-image{
    height:300px!important;
  }

}

/* END V12.3 MOBILE EDITORIAL REDESIGN */