/* =========================================================================
   AXIOMAXS — alternating project rows.
   Row 1: copy left / image right.  Row 2: image left / copy right. …
   Only overrides layout — colours, hover and the "VISIT LIVE" chip in
   css/site.css are untouched. Load AFTER css/site.css.
   ========================================================================= */

@media (min-width:900px){

  .work .proj{
    display:grid;
    grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
    grid-template-areas:
      ".    fig"
      "top  fig"
      "desc fig"
      "meta fig"
      ".    fig";
    grid-template-rows:1fr auto auto auto 1fr;   /* copy column sits vertically centred */
    column-gap:clamp(32px,5vw,86px);
    row-gap:1.1rem;
    align-items:start;
    margin-bottom:clamp(5rem,12vh,9rem);
  }

  /* every second project mirrors */
  .work .proj:nth-of-type(even){
    grid-template-columns:minmax(0,1.14fr) minmax(0,0.86fr);
    grid-template-areas:
      "fig ."
      "fig top"
      "fig desc"
      "fig meta"
      "fig .";
  }

  .work .proj-top{
    grid-area:top;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:.55rem; margin-bottom:0;
  }
  .work .proj-top h3{
    font-size:clamp(1.7rem,3.4vw,3.1rem); line-height:.98;
  }
  .work .proj-top .yr{ order:3; }

  .work .wk-desc{
    grid-area:desc;
    color:var(--mut); line-height:1.75; font-size:.98rem; max-width:44ch;
  }

  .work .proj-fig{
    grid-area:fig;
    aspect-ratio:16 / 10;      /* close to the 1600x950 source — minimal crop */
    align-self:center;
  }

  .work .proj-meta{
    grid-area:meta;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:1rem; margin-top:.6rem;
  }
  .work .proj-meta .tags{
    display:flex; flex-wrap:wrap; gap:.4rem;
  }

  /* a real, visible link in the copy column */
  .work .wk-go{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
    color:var(--bone); border-bottom:1px solid rgba(239,236,227,.35);
    padding-bottom:.35rem; transition:color .3s, border-color .3s, gap .3s;
  }
  .work .proj:hover .wk-go{ color:var(--cobalt); border-color:var(--cobalt); gap:.85rem; }
}

/* mobile / tablet keep the original stacked order, just add the paragraph */
@media (max-width:899px){
  .work .wk-desc{ color:var(--mut); line-height:1.7; font-size:.95rem; margin-top:1rem; }
  .work .wk-go{
    display:inline-flex; margin-top:1rem; align-items:center; gap:.5rem;
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
    color:var(--bone); border-bottom:1px solid rgba(239,236,227,.35); padding-bottom:.3rem;
  }
}

/* =========================================================================
   PROJECT TREE -- the real reference artwork (both apples we shipped, plus
   the two placeholder apples baked into the art) with invisible clickable
   hotspots. Only Sleepdot + AguaClan are wired live; the other two apples
   stay purely visual (no link, no hover affordance) since they are not
   real Axiomaxs projects yet.
   ========================================================================= */
.ptree-stage.ptree-photo-stage{
  background:#eef4f8; padding:0; border:1px solid var(--line); border-radius:28px; overflow:hidden;
}
.ptree-photo{
  position:relative; width:100%; aspect-ratio:3/2; line-height:0; isolation:isolate; user-select:none;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.ptree-photo.grow{ opacity:1; transform:translateY(0) scale(1); }
.ptree-photo-img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }

.ptree-spot{
  position:absolute; display:block; z-index:2; border-radius:50%; outline:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ptree-spot--tl{ left:17.0%; top:19.5%; width:29.5%; height:29.5%; }
.ptree-spot--tr{ left:58.3%; top:19.5%; width:29.0%; height:29.5%; }
.ptree-spot--bl{ left:12.2%; top:49.4%; width:29.8%; height:29.5%; }
.ptree-spot--br{ left:61.0%; top:50.0%; width:29.6%; height:29.0%; }

.ptree-spot::after{
  content:""; position:absolute; inset:6%; border-radius:50%; opacity:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 14px 45px rgba(0,0,0,.14);
  transition:opacity .2s ease, transform .2s ease;
}
.ptree-spot:hover::after,
.ptree-spot:focus-visible::after{ opacity:1; transform:scale(1.02); }
.ptree-spot:focus-visible::after{
  box-shadow:0 0 0 4px #fff, 0 0 0 7px rgba(29,78,216,.45), 0 14px 45px rgba(0,0,0,.14);
}

.ptree-spot-hint{
  position:absolute; left:50%; bottom:-2.75rem; transform:translate(-50%,6px);
  padding:.55rem .85rem; border-radius:999px; background:rgba(6,20,35,.86); color:#fff;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.03em; line-height:1; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.ptree-spot:hover .ptree-spot-hint,
.ptree-spot:focus-visible .ptree-spot-hint{ opacity:1; transform:translate(-50%,0); }

/* the two apples that are not real projects yet -- visible, never clickable */
.ptree-spot--inert{ cursor:default; pointer-events:none; }

.work .proj{ position:relative; z-index:2; }

@media (max-width:700px){
  .ptree-spot--tl{ left:13%; top:17%; width:35%; height:35%; }
  .ptree-spot--tr{ left:53%; top:17%; width:35%; height:35%; }
  .ptree-spot--bl{ left:8%; top:47%; width:37%; height:35%; }
  .ptree-spot--br{ left:57%; top:48%; width:37%; height:34%; }
  .ptree-spot-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ptree-photo{ transition:none; }
  .ptree-spot::after, .ptree-spot-hint{ transition:none; }
}