.proj-hero{ padding:160px var(--edge-gap) 0; }
  .proj-hero .eyebrow{ margin-bottom:16px; }
  .proj-hero h1{
    font-family:'Playfair Display', serif; font-weight:400; font-style:italic;
    font-size:clamp(38px,6vw,72px); line-height:1.05; max-width:760px;
  }
  .proj-hero p{ margin-top:20px; max-width:560px; font-size:16px; line-height:1.8; color:#4a463f; }

  .proj-grid{
    padding:60px var(--edge-gap) 140px;
    display:grid; grid-template-columns:repeat(2,1fr); gap:40px;
  }
  @media (max-width:760px){ .proj-grid{ grid-template-columns:1fr; } }

  .proj-card{
    position:relative; cursor:pointer; overflow:hidden; aspect-ratio:4/3;
    box-shadow:0 30px 60px -30px rgba(26,24,21,0.35);
  }
  .proj-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .6s ease; filter:grayscale(20%); }
  .proj-card:hover img{ transform:scale(1.04); filter:grayscale(0%); }
  .proj-card .overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:26px; background:linear-gradient(0deg, rgba(15,13,11,0.75), transparent 65%);
    color:var(--paper);
  }
  .proj-card .overlay .eyebrow{ color:var(--gold); }
  .proj-card .overlay h3{ font-family:'Playfair Display', serif; font-style:italic; font-size:26px; margin-top:6px; }
  .proj-card .overlay .ptag{ font-size:12px; color:#cdc6b6; margin-top:6px; }

  .proj-card.soon{ display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px dashed var(--line); cursor:default; box-shadow:none; }
  .proj-card.soon:hover img{ transform:none; }
  .proj-card.soon .soon-label{ font-family:'Playfair Display', serif; font-style:italic; font-size:22px; color:var(--mist); }

  /* ---------- story popup (scrollable case study) ---------- */
  .story-modal{
    position:fixed; inset:0; z-index:200;
    background:rgba(15,13,11,0.94);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:flex-start; justify-content:center;
    padding:4vh var(--edge-gap);
    opacity:0; pointer-events:none;
    transition:opacity .45s ease;
  }
  .story-modal.open{ opacity:1; pointer-events:auto; }
  .story-modal-close{
    position:fixed; top:22px; right:22px; z-index:220;
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,13,11,0.55); border:1px solid rgba(239,234,224,0.28);
    backdrop-filter:blur(4px);
    color:var(--paper); font-size:16px; line-height:1; cursor:pointer;
    transition:background .3s ease, transform .3s ease;
  }
  .story-modal-close:hover{ background:rgba(15,13,11,0.85); transform:scale(1.08); }
  .story-modal-panel{
    width:100%; max-width:1100px; max-height:92vh;
    overflow-y:auto;
    background:var(--paper); color:var(--ink);
    box-shadow:0 60px 120px -40px rgba(0,0,0,0.6);
    transform:scale(0.97) translateY(14px); opacity:0;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  }
  .story-modal.open .story-modal-panel{ transform:scale(1) translateY(0); opacity:1; }
  .story-modal-panel .case-study{ padding:70px var(--edge-gap) 90px; max-width:none; }
  @media (max-width:760px){
    .story-modal{ padding:0; }
    .story-modal-panel{ max-width:none; max-height:100vh; }
    .story-modal-panel .case-study{ padding:60px var(--edge-gap) 70px; }
  }

  /* case study */
  .case-study{ padding:0 var(--edge-gap) 140px; max-width:1100px; margin:0 auto; }
  .case-cover{ margin-bottom:60px; }
  .case-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
  .case-meta-row{
    display:flex; flex-wrap:wrap; gap:40px; padding:34px 0; margin-bottom:50px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .case-meta-row div{ display:flex; flex-direction:column; gap:4px; }
  .case-meta-row .label{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); }
  .case-meta-row .value{ font-family:'Playfair Display', serif; font-style:italic; font-size:19px; }

  .case-body{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; margin-bottom:70px; }
  @media (max-width:860px){ .case-body{ grid-template-columns:1fr; } }
  .case-body h2{ font-family:'Playfair Display', serif; font-style:italic; font-weight:400; font-size:clamp(26px,3vw,36px); line-height:1.2; }
  .case-body p{ font-size:16px; line-height:1.9; color:#3a362f; margin-top:20px; }

  .case-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-bottom:30px; }
  @media (max-width:760px){ .case-gallery{ grid-template-columns:1fr; } }
  .case-gallery img{ width:100%; height:100%; object-fit:cover; box-shadow:0 24px 50px -28px rgba(26,24,21,0.3); }
  .case-gallery .full{ grid-column:1 / -1; }
  .case-gallery figcaption{ margin-top:10px; font-size:12px; color:#6b665c; }

  .case-quote{
    font-family:'Playfair Display', serif; font-style:italic; font-size:26px; line-height:1.5; color:var(--ink);
    text-align:center; max-width:640px; margin:60px auto; padding:0 20px;
  }
  .case-quote span{ color:var(--ember); }

  /* generic content typography for the free-form project story
     (headings, paragraphs, images, quote blocks written in the editor) */
  .case-body-content{ max-width:760px; margin:0 auto; }
  .case-body-content h2, .case-body-content h3{
    font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
    font-size:clamp(24px,2.8vw,36px); line-height:1.2; margin:50px 0 20px;
  }
  .case-body-content p{ font-size:16px; line-height:1.85; color:#4a463f; margin-bottom:20px; }
  .case-body-content img{ width:100%; height:auto; margin:40px 0; max-width:none; }
  .case-body-content figure{ margin:40px 0; }
  .case-body-content figcaption{ font-size:12.5px; color:var(--mist); text-align:center; margin-top:10px; }
  .case-body-content blockquote{
    font-family:'Playfair Display', serif; font-style:italic;
    font-size:clamp(20px,2.4vw,28px); line-height:1.5; text-align:center;
    max-width:640px; margin:50px auto; color:var(--ember); border:none; padding:0;
  }
  .case-body-content ul, .case-body-content ol{ font-size:16px; line-height:1.85; color:#4a463f; padding-left:24px; margin-bottom:20px; }