/* ============================================================
   codebymks — HOME page (index.html)
   Split poster landing: poppy | petals, on-image menu, big title.
   ============================================================ */

.split-hero{position:relative;min-height:100svh;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#e7e3dc}
.split-img{background-size:cover;background-position:center}
.split-img.left{background-image:url('../images/poppy-orange.jpg');background-position:center 34%}
.split-img.right{background-image:url('../images/poppy-petal.jpg');background-position:center}
.split-hero .logo{position:absolute;z-index:3;top:calc(18px + env(safe-area-inset-top,0px));left:clamp(20px,5vw,60px);right:auto;margin:0}
.split-hero .logo img{height:24px;width:auto;display:block}
.split-menu{position:absolute;z-index:3;top:clamp(88px,15vh,158px);left:52%;right:auto;width:min(380px,42vw);display:block;padding:0;mix-blend-mode:normal}
.split-menu ul{list-style:none}
.split-menu li{border-top:1px solid rgba(20,16,12,.55)}
.split-menu li:last-child{border-bottom:1px solid rgba(20,16,12,.55)}
.split-menu a{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;color:#000;transition:color .2s,padding-left .2s}
.split-menu a:hover{color:#c96b89;padding-left:6px}
.split-menu a:focus-visible{outline:2px solid #c96b89;outline-offset:3px}
.split-title{position:absolute;z-index:3;bottom:clamp(8px,2.4vw,34px);margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.6rem,10vw,7rem);line-height:.9;letter-spacing:-.01em;color:#17130f}
.split-title.t-left{left:0;width:50%;text-align:right;padding-right:clamp(4px,1vw,14px)}
.split-title.t-right{right:0;width:50%;text-align:left;padding-left:clamp(4px,1vw,14px)}

/* ---- Phones (≤680px): "Computer Science" sits ON the poppy; menu below on petals ---- */
@media(max-width:680px){
  .split-hero{position:relative;display:block;min-height:100svh;min-height:100dvh;background:#e9e4dd}
  /* poppy banner across the top */
  .split-img.left{position:absolute;top:0;left:0;right:0;height:56vh}
  /* petals fills the area below the banner */
  .split-img.right{position:absolute;top:56vh;left:0;right:0;bottom:0;z-index:0}
  /* title (Computer / Science) overlaid on the lower part of the poppy */
  .split-title{position:absolute;z-index:2;left:0;right:0;width:100%;text-align:left;padding:0 8vw;color:#fff;text-shadow:0 2px 20px rgba(90,26,0,.55),0 1px 3px rgba(70,18,0,.4);font-size:clamp(2.6rem,13vw,4.1rem);line-height:1.0}
  .split-title.t-left{top:auto;bottom:calc(44vh + 1.02em)}
  .split-title.t-right{top:auto;bottom:calc(44vh + 0.06em)}
  /* menu below, on the petals */
  .split-menu{position:absolute;z-index:2;left:8vw;right:8vw;top:62vh;width:auto}
  .split-menu a{font-size:clamp(1.5rem,6vw,2rem)}
}