/* ============================================================
   codebymks — WORK page (work.html)
   Parallax garden hero, brand project bands + video, backend
   dropdowns, contact footer.
   ============================================================ */

/* ---------- Hero · layered parallax garden ---------- */
.work-hero{position:relative;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;background:linear-gradient(to bottom,#d6dbcb 0%,#c2c8b7 100%)}
.garden{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.g-layer{position:absolute;bottom:0;mix-blend-mode:darken;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 16%)}
.g-layer.g1{right:-4%;height:96vh}
.g-layer.g2{left:0;width:80vw;max-width:none}
.g-layer.g4{left:0;height:100vh;opacity:0.5}
.work-hero-inner{position:relative;z-index:1;padding:0 6vw;max-width:820px;display:flex;flex-direction:column;align-items:center}
.hero-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3rem,10vw,6.5rem);line-height:.94;color:#2c2c2e;text-wrap:balance;text-shadow:0 1px 22px rgba(240,244,240,.6)}
.work-hero .hero-title{color:#2d3628;text-shadow:none}

/* ---------- Project bands — each gets a hint of its brand ---------- */
.proj{width:100%;padding:clamp(100px,17vh,190px) clamp(20px,7vw,110px);background:#faf3eb;color:#2b2622;border-top:1px solid rgba(0,0,0,.07)}
/* keep the hero→first-project and last-project→footer spacing as-is */
.proj:first-of-type{padding-top:clamp(56px,9vh,110px)}
.proj:last-of-type{padding-bottom:clamp(56px,9vh,110px)}
.proj-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,5vw,68px);align-items:center}
.proj h3{font-family:var(--pfont,var(--serif));font-style:var(--pstyle,italic);font-weight:var(--pweight,400);font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.04;margin-bottom:16px;color:var(--ptitle,#2b2622)}
.proj p{color:#6c635a;font-family:var(--serif);font-style:normal;font-size:1.06rem;line-height:1.6;max-width:52ch}

/* per-project accent + palette (subtle background tint only) + brand font */
.t-hon{--pbg:#f1f5f7;--paccent:#0e7c86;--ptitle:#0A2540;--pc1:#0A2540;--pc2:#00C4B4;--pfont:'Montserrat',system-ui,sans-serif;--pstyle:normal;--pweight:700}
.t-toki{--pbg:#f5f0ea;--paccent:#3d2a4a;--ptitle:#3d2a4a;--pc1:#3d2a4a;--pc2:#c7b6a4;--pfont:'EB Garamond',Georgia,serif;--pstyle:normal;--pweight:500}
.t-dyr{--pbg:#faf4f0;--paccent:#a00000;--ptitle:#a00000;--pc1:#a00000;--pc2:#ff503c;--pfont:'Space Grotesk',system-ui,sans-serif;--pstyle:normal;--pweight:600}

/* ---------- Video frame — a slim wash of the brand colours ---------- */
figure.video{margin:0}
.video-frame{
  position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:linear-gradient(140deg,var(--pc1,#c5d0c6) 0%,var(--pc2,#e79ab0) 122%);
  border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;cursor:pointer;object-fit:cover;
}
.video-frame::before{content:"";position:absolute;inset:0;background:rgba(20,20,22,.14)}
.play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);color:#2c2c2e;border:none;display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;transition:transform .2s,background .2s;box-shadow:0 8px 24px rgba(0,0,0,.24)}
.play:hover{transform:scale(1.08);background:#fff}
.play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.video-tag{position:absolute;z-index:2;left:14px;bottom:12px;font-family:var(--serif);font-size:.85rem;letter-spacing:.02em;color:#fff;background:rgba(28,28,30,.5);padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px)}

/* ---------- Section headings ---------- */
.section-head{background:#faf3eb;padding:clamp(58px,9vh,104px) clamp(20px,7vw,110px) clamp(8px,2vh,22px)}
.section-head h2{max-width:1200px;margin:0 auto;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;color:#2b2622}
.myprojects{background:#faf3eb;padding:clamp(22px,3vh,42px) clamp(20px,7vw,110px) clamp(74px,12vh,140px)}
.myprojects h2{max-width:1200px;margin:0 auto 14px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;color:#2b2622}
.myprojects .soon{max-width:1200px;margin:0 auto;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.1rem);color:#c96b89}

/* ---------- Footer · contact + backend projects, over the photo ---------- */
footer{position:relative;background:#2b2622 url('../images/lily-bud-pink.jpg') center/cover no-repeat fixed;color:#1c1814;padding:0;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(248,245,239,.74) 0%,rgba(248,245,239,.6) 48%,rgba(248,245,239,.22) 82%,rgba(248,245,239,0) 100%)}
.foot-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:clamp(60px,10vh,110px) clamp(20px,7vw,60px) clamp(130px,22vh,260px)}
footer h2{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.05;color:#1c1814}
.foot-social{position:absolute;z-index:1;right:clamp(18px,7vw,60px);bottom:clamp(18px,3vh,34px);display:flex;gap:18px}
.foot-social a{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:#1c1814;padding-bottom:2px;border-bottom:1px solid rgba(28,24,20,.4);transition:color .2s,border-color .2s}
.foot-social a:hover{color:var(--pink-deep);border-color:var(--pink-deep)}
.backend-q{font-size:clamp(1.35rem,2.9vw,1.95rem);margin-bottom:4px;max-width:26ch}
.drops{margin:16px 0 0}
details.drop{border-top:1px solid rgba(28,24,20,.28)}
details.drop:last-of-type{border-bottom:1px solid rgba(28,24,20,.28)}
details.drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 2px}
details.drop summary::-webkit-details-marker{display:none}
.drop-title{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.8vw,1.32rem);color:#1c1814;transition:color .2s}
.drop-title:hover{color:var(--pink-deep)}
.drop .chev{flex:none;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(28,24,20,.55);border-radius:50%;font-family:var(--mono);font-size:1.1rem;line-height:0;color:#1c1814;transition:transform .25s,background .2s,color .2s}
details.drop[open] .chev{transform:rotate(45deg);background:#1c1814;color:#f6efe8;border-color:#1c1814}
.drop-body{padding:0 2px 12px;font-family:var(--serif);font-size:clamp(.95rem,1.45vw,1.06rem);line-height:1.55;color:#4a423b;max-width:64ch}
.drop-link{display:inline-block;margin:0 2px 16px;font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.7vw,1.25rem);color:var(--pink-deep);border-bottom:1px solid var(--pink-deep);padding-bottom:2px;transition:color .2s,border-color .2s,letter-spacing .2s}
.drop-link:hover{color:#a84f6c;border-color:#a84f6c;letter-spacing:.02em}

/* ---------- Responsive ---------- */
/* On phones/tablets: lock the footer photo to a fixed size so opening a dropdown
   (which makes the footer taller) doesn't rescale/zoom the background image.
   (cover + scroll would re-fit the image to the taller footer.) */
@media(max-width:900px){
  footer{background-attachment:scroll;background-size:auto 100vh;background-position:center top;background-color:#e8e1d7}
}
/* stack project bands so the text never gets too narrow */
@media(max-width:820px){
  .proj-inner{grid-template-columns:1fr;gap:26px}
  .proj-text{order:-1}
}
/* tighten the (desktop-generous) project spacing on phones so there aren't huge empty gaps */
@media(max-width:600px){
  .proj{padding-top:clamp(52px,8vh,80px);padding-bottom:clamp(52px,8vh,80px)}
  .proj:first-of-type{padding-top:clamp(36px,6vh,64px)}
  .proj:last-of-type{padding-bottom:clamp(36px,6vh,64px)}
  .proj h3{font-size:clamp(1.9rem,7vw,2.4rem)}
}