/* ============ Project case-study subpage ============ */

.proj{padding-bottom:0}

/* ---- entrance stagger (arrival animation) ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
.rise{opacity:0;animation:riseIn .95s var(--ease) forwards;animation-delay:var(--d,0s)}

/* ---- 1. status + 2. headline / sub ---- */
.proj-hero{padding:140px var(--pad) 40px}
.proj-back{
  display:inline-flex;align-items:center;gap:.4em;
  min-height:44px;padding:0 10px;               /* >=44px WCAG hit area */
  margin:-10px -10px 24px;                       /* offset padding so visual position is unchanged */
  font-family:var(--font-label);font-weight:700;font-size:15px;opacity:.6;
  transition:opacity .3s,transform .35s var(--ease);
}
.proj-back:hover{opacity:1;transform:translateX(-6px)}

.proj-status{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:9px 18px;border:1px solid var(--line);border-radius:100px;margin-bottom:34px;
}
.proj-status .dot{
  width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 50%, transparent)}
  70%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.proj-title{
  font-family:var(--font-display);font-weight:700;line-height:.92;letter-spacing:-.03em;
  font-size:clamp(50px,10vw,150px);
  view-transition-name:project-title;
}
.proj-sub{
  font-weight:500;font-size:clamp(20px,2.6vw,38px);line-height:1.15;
  max-width:24ch;margin-top:clamp(20px,3vw,34px);
}

/* ---- 3. hero image — before/after split reveal ---- */
.proj-media{padding:clamp(24px,4vw,50px) 0 0}
.compare{
  position:relative;width:100%;height:clamp(320px,72vh,860px);
  overflow:hidden;user-select:none;touch-action:none;
  view-transition-name:project-media;
}
.compare__after,.compare__before{position:absolute;inset:0}
.compare__before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.compare img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.compare__before img{filter:grayscale(1) contrast(.92) brightness(1.06)}
.compare__label{
  position:absolute;top:16px;z-index:3;
  font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.04em;
  padding:7px 14px;border-radius:100px;
  background:rgba(20,18,16,.68);color:#faf9f7;backdrop-filter:blur(6px);
}
.compare__label--before{left:16px}
.compare__label--after{right:16px}
.compare__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:2px;background:var(--bg);transform:translateX(-50%);
  z-index:4;cursor:ew-resize;
}
.compare__handle::before{content:"";position:absolute;top:0;bottom:0;left:-22px;width:44px}
.compare__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 6px 22px rgba(0,0,0,.2);transition:transform .3s var(--ease);
}
.compare.is-dragging .compare__knob{transform:translate(-50%,-50%) scale(.94)}
.compare__handle:hover .compare__knob,
.compare__handle:focus-visible .compare__knob{transform:translate(-50%,-50%) scale(1.1)}
.compare__handle:focus-visible{outline:none}

/* ---- 4. platform / role / timeline ---- */
.proj-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:clamp(40px,6vw,72px) var(--pad);
  border-bottom:1px solid var(--line);
}
.proj-meta > div{display:flex;flex-direction:column;gap:12px}
.meta-k{font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.06em;opacity:.65}
.meta-v{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,32px);line-height:1;letter-spacing:.005em}

/* ---- 5. sidebar + content ---- */
.proj-body{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(30px,6vw,100px);
  padding:clamp(56px,9vh,120px) var(--pad);align-items:start;
}
.proj-nav{position:sticky;top:104px}
.proj-nav-title{font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:.06em;opacity:.65;margin-bottom:18px}
.proj-nav a{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-label);font-weight:700;font-size:16px;padding:11px 0;opacity:.65;
  border-top:1px solid var(--line);
  transition:opacity .3s,color .3s,padding-left .35s var(--ease);
}
.proj-nav a::before{
  content:"→";display:inline-block;width:0;overflow:hidden;
  opacity:0;transform:translateX(-8px);
  transition:width .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease);
}
.proj-nav a:hover{opacity:.85}
.proj-nav a.active{opacity:1;color:var(--red);padding-left:4px}
.proj-nav a.active::before{width:20px;opacity:1;transform:none}

.proj-section{margin-bottom:clamp(64px,11vh,130px);scroll-margin-top:100px}
.proj-section:last-child{margin-bottom:0}
.proj-section .label{margin-bottom:20px}
.proj-section h2{
  font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.005em;
  font-size:clamp(26px,3.6vw,46px);margin-bottom:28px;max-width:16ch;
}
.proj-section p{
  font-size:clamp(17px,1.5vw,22px);line-height:1.55;max-width:62ch;margin-bottom:18px;opacity:.9;
}
.proj-section p em{color:var(--red)}

/* content image placeholders (swap the inner span for an <img>) */
.media-ph{
  aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:color-mix(in srgb, var(--red) 6%, var(--bg));
  border:1px dashed color-mix(in srgb, var(--red) 40%, transparent);
  background-image:repeating-linear-gradient(45deg,transparent 0 12px,color-mix(in srgb, var(--red) 8%, transparent) 12px 13px);
  display:flex;align-items:center;justify-content:center;
  margin-top:clamp(24px,3vw,38px);
  transition:border-color .3s ease;
}
.media-ph:hover{border-color:var(--red)}
.media-ph span{font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--red);opacity:1}
.media-ph img{width:100%;height:100%;object-fit:cover;display:block}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(24px,3vw,38px)}
.media-grid .media-ph{aspect-ratio:4/3;margin-top:0}

/* live prototype embed (Figma Make) — click-to-load facade */
.proto-embed{
  position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  margin-top:clamp(24px,3vw,38px);
}
.proto-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.proto-open{
  display:inline-flex;align-items:center;min-height:44px;margin-top:10px;
  font-family:var(--font-label);font-weight:700;font-size:14px;opacity:.65;transition:opacity .25s;
}
.proto-open:hover{opacity:1}

/* research methods */
.method-list{list-style:none;margin-top:34px;display:grid;gap:0;max-width:620px}
.method-list li{
  display:flex;align-items:baseline;gap:18px;
  padding:20px 0;border-top:1px solid var(--line);
  font-size:clamp(17px,1.6vw,22px);
}
.method-list li:last-child{border-bottom:1px solid var(--line)}
.method-list li span{font-family:var(--font-label);font-weight:700;font-size:14px;opacity:.5;min-width:32px}

/* key features grid — cards warp toward the cursor on hover (JS clip-path) */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.feat{
  background:var(--bg-soft);border-radius:12px;padding:clamp(24px,3vw,36px);
  transition:background .3s ease;
}
.feat:hover{background:color-mix(in srgb, var(--red) 14%, var(--bg))}
.feat .feat-no{font-family:var(--font-label);font-weight:700;font-size:14px;color:var(--red);opacity:1}
.feat h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,2.6vw,34px);line-height:1;margin:16px 0 12px;
}
.feat p{font-size:16px;line-height:1.5;opacity:.85;margin:0}

/* key metrics */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.metric{
  padding:clamp(20px,2.4vw,30px) 0 clamp(18px,2.2vw,28px);
  background-image:var(--wave-bold);
  background-repeat:repeat-x;
  background-position:top left;
  background-size:24px 10px;
}
.metric-v{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,4.6vw,62px);line-height:.92;letter-spacing:-.03em;
}
.metric-k{display:block;font-family:var(--font-label);font-weight:700;font-size:14px;opacity:.6;margin-top:14px}
.metric:nth-child(2) .metric-v{color:var(--red)}
.metric:nth-child(3) .metric-v{color:var(--blue)}

/* reflections pull quote */
.proj-quote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3.6vw,52px);line-height:1.06;letter-spacing:-.005em;
  margin:clamp(30px,4vw,48px) 0;max-width:20ch;
}
.proj-quote::before{content:"“";color:var(--red);margin-right:.05em}
.proj-quote::after{content:"”";color:var(--red)}

/* ---- next project ---- */
.proj-next{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
  padding:clamp(60px,10vh,120px) var(--pad);border-top:1px solid var(--line);
}
.proj-next .label{margin-bottom:14px}
.proj-next a.next-link{
  font-family:var(--font-display);font-weight:700;text-transform:none;
  font-size:clamp(40px,7vw,92px);line-height:.9;
  display:inline-flex;align-items:center;gap:.2em;
  transition:color .35s ease,transform .45s var(--ease);
}
.proj-next a.next-link:hover{color:var(--red);transform:translateX(14px)}

/* ---- responsive ---- */
@media (max-width:820px){
  .proj-meta{grid-template-columns:1fr;gap:26px}
  .proj-body{grid-template-columns:minmax(0,1fr);gap:8px}
  .proj-nav{
    position:sticky;top:60px;z-index:40;min-width:0;background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(10px);margin:0 calc(var(--pad) * -1);
    padding:10px 0;
  }
  .proj-nav-title{display:none}
  .proj-nav nav{
    display:flex;gap:22px;overflow-x:auto;min-width:0;
    padding:0 var(--pad);scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* fade the trailing edge so the row reads as swipeable */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  }
  .proj-nav nav::-webkit-scrollbar{display:none}
  .proj-nav a{
    border-top:0;white-space:nowrap;padding:4px 0;
    font-size:15px;scroll-snap-align:start;
  }
  .proj-nav a::before{display:none}
  .proj-nav a.active{padding-left:0}
  .feat-grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr 1fr}
  .compare{height:clamp(260px,52vh,520px)}
}
@media (max-width:480px){
  .proj-nav nav{gap:16px}
  .proj-nav a{font-size:13.5px}
  .metric-grid{grid-template-columns:1fr 1fr;gap:12px}
  .metric-v{font-size:clamp(34px,12vw,52px)}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;animation:none}
  .proj-status .dot{animation:none}
}

/* ---- Ghost editor content (post.hbs renders {{content}} into .proj-content) ---- */
.proj-content > h2{
  font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.005em;
  font-size:clamp(26px,3.6vw,46px);margin:0 0 28px;max-width:16ch;scroll-margin-top:110px;
}
.proj-content > h2:not(:first-child){margin-top:clamp(64px,11vh,130px)}
.proj-content > h3{
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(22px,2.6vw,34px);margin:34px 0 12px;
}
.proj-content > p{font-size:clamp(17px,1.5vw,22px);line-height:1.55;max-width:62ch;margin-bottom:18px;opacity:.9}
.proj-content > p em{color:var(--red);font-style:normal}
.proj-content > .label{margin-top:clamp(64px,11vh,130px);margin-bottom:20px;scroll-margin-top:110px}
.proj-content > .label:first-child{margin-top:0}
.proj-content > .label + h2{margin-top:0}
.proj-content > ul:not([class]){margin:0 0 18px 20px;font-size:clamp(16px,1.4vw,20px);line-height:1.6;opacity:.9}
.proj-content figure{margin:clamp(24px,3vw,38px) 0}
.proj-content img{max-width:100%;height:auto;border-radius:10px;display:block}
.proj-content figcaption{font-family:var(--font-label);font-weight:700;font-size:12px;opacity:.55;margin-top:10px;text-align:left}
.proj-content .kg-width-wide img,.proj-content .kg-width-full img{width:100%}
.proj-content blockquote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3.6vw,52px);line-height:1.06;letter-spacing:-.005em;
  margin:clamp(30px,4vw,48px) 0;max-width:20ch;border:0;padding:0;
}
.proj-content blockquote p{font-size:inherit;line-height:inherit;opacity:1;max-width:none;margin:0}