/* Portfolio 4.3: a clear route from the case study to the live experience. */

.project-live-link{max-width:100%;overflow-wrap:anywhere}.project-live-link>span:first-child{min-width:0}
.project-live-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;width:fit-content;padding:12px 18px;border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:1.3;color:var(--ink);text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.project-live-link>span:last-child{font-size:19px;line-height:1;color:var(--accent)}
.project-live-link:hover{background:var(--blue,#0866ff);border-color:var(--blue,#0866ff);color:#fff;transform:translateY(-2px)}
.project-live-link:hover>span:last-child{color:#fff}.project-live-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.project-caption .project-live-link{margin-top:18px;font-weight:500}.project-launch{display:flex;align-items:center;gap:20px;margin:26px 0 32px}.project-launch .project-live-link{background:var(--blue,#0866ff);border-color:var(--blue,#0866ff);color:#fff;padding:16px 24px;font-size:14px}.project-launch .project-live-link>span:last-child{color:#fff}.project-launch-note{font:10px/1.5 Consolas,monospace;color:var(--muted)}
.project-gallery img{width:auto;max-width:100%;height:auto;margin-inline:auto;image-rendering:auto}.project-gallery>a{display:block;line-height:0;position:relative;width:100%}.project-gallery>a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.project-gallery .gallery-open{position:absolute;right:16px;bottom:16px;line-height:1.3;font-size:10px;letter-spacing:.04em;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 14px;opacity:0;transition:opacity .2s}.project-gallery>a:hover .gallery-open,.project-gallery>a:focus-visible .gallery-open{opacity:1}
@media(max-width:760px){.project-launch{align-items:flex-start;flex-direction:column;gap:10px}.project-caption .project-live-link{padding:11px 14px;font-size:11px;margin-top:14px}.project-gallery .gallery-open{opacity:1;right:8px;bottom:8px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.project-live-link,.project-gallery .gallery-open{transition:none}.project-live-link:hover{transform:none}}

/* One reading grid for both the overlay and the directly opened project URL. */
.project-case-shell{
  width:calc(100% - 2 * var(--pad));
  max-width:1440px;
  margin-inline:auto;
}
.project-case-shell .project-detail-header{
  padding:clamp(36px,5vw,72px) 0 32px;
  border-bottom:1px solid var(--line);
}
.project-case-shell .project-detail-header>.mono{
  font-size:11px;line-height:1.6;letter-spacing:.08em;
}
.project-case-shell .case-heading{
  display:flex;align-items:center;gap:40px;margin-top:24px;
}
.project-case-shell .case-heading h1,
.project-case-shell .case-heading h2{
  min-width:0;max-width:1100px;margin:0;
  font-size:clamp(42px,5.6vw,88px);font-weight:500;
  letter-spacing:-.055em;line-height:1.06;overflow-wrap:anywhere;
  text-wrap:balance;
}
.project-case-shell .case-number{
  flex-shrink:0;font-size:clamp(68px,8vw,120px);line-height:1;
  letter-spacing:-.07em;-webkit-text-stroke:1px var(--line);
}
.project-case-shell .project-meta{
  display:flex;flex-wrap:wrap;gap:24px 56px;margin-top:32px;
  font-size:14px;line-height:1.5;
}
.project-case-shell .project-meta>div{max-width:360px;overflow-wrap:anywhere}
.project-case-shell .project-meta span{font-size:10px;letter-spacing:.08em;margin-bottom:8px}
.project-case-shell .project-overview{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;gap:clamp(36px,6vw,112px);margin:38px 0 48px;
}
.project-case-shell .project-intro{min-width:0}
.project-case-shell .project-summary{
  max-width:34ch;margin:0;color:var(--ink);
  font-size:clamp(20px,1.7vw,26px);line-height:1.5;letter-spacing:-.025em;
  overflow-wrap:anywhere;text-wrap:pretty;
}
.project-case-shell .project-launch{margin:26px 0 0;gap:0}
.project-case-shell .project-launch .project-live-link{padding:16px 24px;gap:30px;font-weight:500;line-height:1.4}
.project-case-shell .project-description{
  min-width:0;max-width:66ch;margin:0;font-size:16px;line-height:1.8;
  letter-spacing:0;color:var(--muted);overflow-wrap:anywhere;text-wrap:pretty;
}
.project-case-shell .project-description p+p{margin-top:18px}
.project-case-shell .project-overview:not(.has-intro),
.project-case-shell .project-overview:not(.has-description){grid-template-columns:minmax(0,800px)}
.project-case-shell .project-overview:not(.has-description) .project-summary{max-width:48ch}
.project-case-shell .language-fallback{margin:24px 0 0;max-width:800px}
.project-case-shell .project-gallery{padding:0;gap:24px;margin-top:40px}
.project-case-shell .project-overview+.project-gallery{margin-top:0}
.project-case-shell .project-gallery:empty{display:none}
.project-case-shell .project-gallery>a{
  width:fit-content;max-width:100%;margin-inline:auto;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--soft);
}
.project-case-shell .project-gallery img{display:block;width:auto;max-width:100%;height:auto;margin-inline:auto}
.project-case-shell .project-video{margin:32px 0;padding:32px;border-radius:12px}
.project-case-shell .empty-project{margin:36px 0;font-size:17px;line-height:1.7;max-width:60ch}
.project-case-shell .project-outlinks{margin:32px 0 0;gap:20px 32px;align-items:center}
.project-case-shell .project-outlinks a,.project-case-shell .project-outlinks button{font-size:13px;overflow-wrap:anywhere}
.project-case-shell .project-next{padding:40px 0;margin:48px 0 0;gap:32px}
.project-case-shell .project-next>div{min-width:0}
.project-case-shell .project-next h2,.project-case-shell .project-next h3{
  font-size:clamp(27px,3vw,44px);line-height:1.15;letter-spacing:-.04em;margin:14px 0 0;overflow-wrap:anywhere;
}
@media(min-width:1800px){
  .project-dialog .project-topbar,.case-page .project-topbar{
    padding-inline:max(var(--pad),calc((100% - 1440px) / 2));
  }
}
@media(max-width:900px){
  .project-case-shell .project-overview{grid-template-columns:minmax(0,1fr);gap:28px;margin:28px 0 36px}
  .project-case-shell .project-summary{max-width:48ch}
  .project-case-shell .project-description{max-width:70ch}
}
@media(max-width:600px){
  .project-case-shell{width:calc(100% - 44px)}
  .project-case-shell .project-detail-header{padding:34px 0 26px}
  .project-case-shell .project-detail-header>.mono{font-size:10px}
  .project-case-shell .case-heading{margin-top:20px;gap:0}
  .project-case-shell .case-heading h1,.project-case-shell .case-heading h2{font-size:42px;letter-spacing:-.05em;line-height:1.08}
  .project-case-shell .case-number{display:none}
  .project-case-shell .project-meta{gap:20px 28px;margin-top:26px;font-size:13px}
  .project-case-shell .project-meta>div{flex:1 1 125px}
  .project-case-shell .project-meta span{font-size:9px}
  .project-case-shell .project-summary{font-size:21px;line-height:1.5}
  .project-case-shell .project-description{font-size:15px;line-height:1.8}
  .project-case-shell .project-launch{margin-top:22px}
  .project-case-shell .project-launch .project-live-link{font-size:13px;padding:15px 21px}
  .project-case-shell .project-gallery{gap:14px}
  .project-case-shell .project-gallery>a{border-radius:7px}
  .project-case-shell .project-video{padding:22px 16px;margin:24px 0}
  .project-case-shell .project-outlinks{gap:16px 24px;margin-top:24px}
  .project-case-shell .project-next{padding:30px 0;margin-top:36px}
}