/* ===========================================================
   AURALIS — individual project (case study) page
   Loads on tokens.css + site.css. Content comes from the CMS.
   Read-more = the gallery squeezes left, a sticky description
   panel opens on the right; a persistent cream pill toggles it.
   Type follows the frozen stylesheet.
   =========================================================== */

/* =================== HERO (full-bleed, then cuts) =================== */
.proj-hero{
  position:relative;width:100%;height:clamp(440px,78vh,880px);overflow:hidden;
  background:var(--black);   /* black before the image decodes — no green flash */
}
.proj-hero img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s var(--ease)}
.proj-hero img.loaded{opacity:1}
.proj-hero::after{content:"";position:absolute;inset:0 0 auto 0;height:200px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}

/* =================== TITLE BLOCK =================== */
.proj-head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);
  padding:clamp(48px,8vw,110px) var(--shell) clamp(30px,4vw,52px);align-items:start;
}
.proj-title{font-size:clamp(2.2rem,5vw,4rem);font-weight:500;letter-spacing:-.03em;line-height:1.02}
.proj-caption{margin-top:16px;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.4;color:var(--cream-60);max-width:34ch}
.proj-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.proj-chip{font-size:13px;color:var(--cream);border:1px solid var(--line-2);border-radius:10px;padding:8px 15px;line-height:1;white-space:nowrap}
.proj-short{font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.55;color:var(--cream);max-width:46ch}
.proj-more{
  margin-top:24px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;
  font-size:13px;letter-spacing:.04em;color:var(--cream-60);border-bottom:1px solid var(--line-2);
  padding-bottom:4px;transition:color .25s,border-color .25s;
}
.proj-more::after{content:"+";color:var(--green);font-size:15px;line-height:1}
body.proj-open .proj-more::after{content:"–"}
.proj-more:hover{color:var(--cream);border-color:var(--cream)}

/* =================== SPLIT: gallery (left) + panel (right) =================== */
.proj-split{
  display:grid;grid-template-columns:1fr 0fr;gap:0;
  padding:0 var(--shell) clamp(90px,14vw,170px);
  transition:grid-template-columns .55s var(--ease),gap .55s var(--ease);
}
.proj-split.open{grid-template-columns:2.5fr 1fr;gap:clamp(24px,4vw,56px)}
.proj-gallery{min-width:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,30px)}

/* body image rhythm */
.pm{position:relative;overflow:hidden;border-radius:3px;background:linear-gradient(160deg,var(--green),var(--black))}
.pm img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform 1.2s var(--ease-out)}
.pb-full:hover .pm img,.pb-pair:hover .pm img,.pb-split:hover .pm img{transform:scale(1.025)}   /* subtle hover zoom */
.pb-full .pm{aspect-ratio:16/9}
.pb-text{margin-top:clamp(12px,1.4vw,18px);font-size:14px;line-height:1.5;color:var(--cream-60);max-width:42ch}
.pb-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,30px);align-items:stretch}
.pb-cell{display:flex;flex-direction:column}
/* baseline square; a caption-less image grows to bottom-align with its captioned
   neighbour, and a captioned image gives back exactly the height the text needs */
.pb-pair .pm{aspect-ratio:5/4;flex:1 1 auto;min-height:0}

/* sticky description panel */
.proj-panel{min-width:0;overflow:hidden;position:relative}
/* Once open, drop the clip: overflow:hidden makes the aside a scroll container
   that captures the sticky panel (clipping it / pinning it inside the aside
   instead of the viewport). The clip is only needed for the closed 0fr column. */
.proj-split.open .proj-panel{overflow:visible}
/* Closed: the panel column collapses to 0fr. Keep the text OUT of flow so it can't
   wrap into a ~0px column, balloon in height, and force a tall grid row (= dark gap
   under the gallery). It becomes a sticky in-flow element only once opened. */
.proj-panel__in{opacity:0;transition:opacity .45s var(--ease) .15s;position:absolute;top:18px;left:0;width:100%;display:flow-root}
/* Sticky panel. project.js sets the sticky `top` offset adaptively: a short
   panel sticks to the TOP (below the nav); a tall panel (>= the available
   height) sticks to the BOTTOM (Pentagram-style — its bottom hangs just above
   the viewport bottom and follows the scroll). Recomputed on resize / height
   change. overflow:visible on the open aside is required so the aside doesn't
   capture the sticky. */
.proj-split.open .proj-panel__in{position:sticky;opacity:1}
.proj-panel__in > .pb-blk:first-child{margin-top:-4px}   /* align heading top with image top */
.pb-blk{margin-bottom:clamp(28px,3vw,40px)}
.pb-blk:last-child{margin-bottom:0}
.p-h{font-size:1.05rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--cream);margin-bottom:12px}
.p-long{font-size:15px;line-height:1.6;color:var(--cream-60);margin-bottom:14px}
.p-long:last-child{margin-bottom:0}
.p-v{font-size:15px;line-height:1.6;color:var(--cream-60)}
.p-v li{list-style:none}

/* persistent cream pill */
.proj-pill{
  position:fixed;right:24px;bottom:24px;z-index:70;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;font-weight:500;letter-spacing:-.01em;padding:14px 22px;border-radius:40px;
  background:var(--cream);color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:transform .35s var(--ease);
}
.proj-pill:hover{transform:translateY(-2px)}
.proj-pill .ic{font-size:15px;line-height:1}

/* =================== MODAL SCAFFOLDING (phones only; inert otherwise) =================== */
/* Backdrop + close button exist on every viewport but stay hidden/inert until the
   phone media query below activates them, so desktop/tablet are unaffected. */
.proj-backdrop{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.proj-x{display:none}

/* =================== NEXT / PREV + CTA (twin cards) =================== */
/* Sits between the gallery and the footer. A centred CTA ribbon over two
   project cards (previous + next), mirroring the work-grid media. */
.proj-next{
  padding:clamp(56px,8vw,100px) var(--shell) clamp(70px,11vw,140px);
  border-top:1px solid var(--line);
}
.pn-ribbon{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(16px,2vw,24px);text-align:center;margin-bottom:clamp(34px,4.5vw,56px);
}
.pn-h{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--cream)} /* Subhead */
.pn-ribbon .pill i{font-style:normal}

.pn-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.pn-card{display:block}
.pn-media{position:relative;height:clamp(180px,24vw,300px);border-radius:4px;overflow:hidden;
  background:linear-gradient(160deg,var(--green),var(--black))}
.pn-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);
  transition:transform 1.2s var(--ease-out)}
.pn-card:hover .pn-media img{transform:scale(1.035)}   /* subtle hover zoom */
.pn-row{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pn-lbl{font-size:13px;font-weight:400;letter-spacing:-.01em;color:var(--cream-60)}  /* Body-S, sentence case */
.pn-ttl{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--cream)} /* Subhead */
.pn-arw{color:var(--green);display:inline-block;transition:transform .4s var(--ease)}
.pn-prev:hover .pn-arw{transform:translateX(-6px)}
.pn-next{text-align:right}
.pn-next:hover .pn-arw{transform:translateX(6px)}

/* =================== RESPONSIVE =================== */
@media (max-width:680px){
  .pn-cards{grid-template-columns:1fr;gap:26px}
  .pn-next{text-align:left}
}
@media (max-width:860px){
  .proj-head{grid-template-columns:1fr;gap:22px}
  .proj-split.open{grid-template-columns:1fr;gap:30px}
  .pb-pair{grid-template-columns:1fr}.pb-pair .pm{aspect-ratio:4/3}
  /* stacked layout: panel sits below the gallery once open (closed stays out of flow) */
  .proj-split.open .proj-panel__in{position:static}
  .proj-pill{right:16px;bottom:16px}
}

/* =================== PHONES: Read-more becomes a centered modal =================== */
@media (max-width:600px){
  /* gallery keeps the full width; the panel leaves the flow and floats as a card */
  .proj-split.open{grid-template-columns:1fr;gap:0}
  .proj-panel{
    position:fixed;z-index:320;left:50%;top:50%;
    width:min(92vw,440px);overflow:visible;          /* override base overflow:hidden so ✕ can sit on the corner */
    background:var(--cream);color:var(--ink);
    border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);
    opacity:0;pointer-events:none;
    transform:translate(-50%,-46%) scale(.96);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
  .proj-panel__in{
    position:static;top:auto;left:auto;width:auto;opacity:1;
    max-height:82vh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:30px 22px 24px;border-radius:14px;
  }
  body.proj-open .proj-panel{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  body.proj-open .proj-backdrop{opacity:1;pointer-events:auto}

  /* dark text on the cream "paper" card */
  .proj-panel .p-h{color:var(--ink)}
  .proj-panel .p-long,.proj-panel .p-v{color:var(--ink-72)}

  /* close ✕ — pinned to the card corner, doesn't scroll with the content */
  .proj-x{
    display:block;position:absolute;top:10px;right:10px;z-index:1;
    width:34px;height:34px;border-radius:50%;
    font-size:15px;line-height:34px;text-align:center;
    color:var(--ink);background:rgba(0,0,0,.06);
  }

  /* the floating pill is redundant while the modal is open */
  body.proj-open .proj-pill{opacity:0;pointer-events:none;transform:translateY(14px)}
}