/* Shared project foundations. Typography roles live in typography.css.
   The stacking breakpoint is 768px, matching the site's navigation. */
:root { --project-width:1600px; --project-sidebar:calc((100% - 80px)/3); --project-gutter:40px; --project-edge:28px; --project-section:40px; --project-ratio:8/5; --project-radius:8px; --project-line:#dedede; --project-muted:#737373; --project-ink:#262626; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.gallery-tag,.editorial .gallery-tag { display:inline-flex; color:var(--project-muted); background:transparent; border:1px solid var(--project-line); border-radius:4px; padding:3px 7px; max-width:100%; white-space:normal; }
.project-media,.editorial .project-media { width:100%; aspect-ratio:var(--project-ratio); margin:0; padding:0; overflow:hidden; background:#f7f7f7; border:1px solid var(--project-line); border-radius:var(--project-radius); }
.project-media img,.project-media video,.editorial .project-media img,.editorial .project-media video { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; }
.project-media img.media-cover,.editorial .project-media img.media-cover,.slide img.media-cover { object-fit:cover; object-position:50% 60%; }
.project-placeholder { width:100%; height:100%; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#fafafa,#eee); color:var(--project-muted); }
.project-placeholder strong { text-align:center; }
.project-content,.editorial .project-content { padding:16px 0 0; }
.project-title-row,.editorial .project-title-row { display:block; }
.project-title-row h3 { margin:0; }
.project-description,.editorial .project-description { display:block; margin:8px 0 0; color:var(--project-muted); }
.project-card { min-width:0; }
.editorial.home-page .work-feed { gap:48px var(--project-gutter); }
.project-card:focus-visible { outline:2px solid var(--project-ink); outline-offset:6px; border-radius:var(--project-radius); }
.case-layout { max-width:var(--project-width); margin:40px max(var(--project-edge),calc((100vw - var(--project-width))/2)) 0; display:grid; grid-template-columns:minmax(0,var(--project-sidebar)) minmax(0,1fr); gap:var(--project-gutter); }
.case-sidebar { min-width:0; padding:0 8px 24px 0; }
.case-back { display:inline-block; color:var(--project-muted); margin-bottom:26px; }
.case-sidebar > .project-tags { margin:0 0 20px; }
.case-header h1 { margin:0; overflow-wrap:break-word; }
.case-intro { color:var(--project-muted); margin:22px 0 26px; }
.case-sections { display:flex; flex-direction:column; border-left:2px solid var(--project-line); }
.case-sections a { margin-left:-2px; border-left:2px solid transparent; padding:10px 0 10px 16px; color:var(--project-muted); }
.case-sections a:hover,.case-sections a[aria-current] { color:var(--project-ink); }
.case-sections a[aria-current] { border-color:var(--project-ink); }
.case-shell { min-width:0; padding:0 4px 32px 0; scroll-behavior:smooth; }
.case-shell section[id] { scroll-margin-top:24px; }
.gallery-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; border:1px solid var(--project-line); border-radius:var(--project-radius); }
.gallery-track:focus-visible { outline:2px solid var(--project-ink); outline-offset:4px; }
.slide { flex:0 0 100%; min-width:0; aspect-ratio:var(--project-ratio); margin:0; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; background:#f7f7f7; }
.slide > img,.slide > video { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:12px; }
.gallery-caption { margin:0; color:var(--project-muted); }
.gallery-controls { display:flex; align-items:center; gap:8px; margin-left:auto; }
.gallery-controls button { cursor:pointer; background:white; color:inherit; border:1px solid var(--project-line); border-radius:50%; width:32px; height:32px; }
.gallery-controls button:disabled { opacity:.35; cursor:default; }
.gallery-dots { display:flex; }
.gallery-controls .gallery-dot { border:0; display:grid; place-items:center; width:24px; padding:0; }
.gallery-dot::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--project-line); }
.gallery-dot[aria-current=true]::after { background:var(--project-ink); }
.gallery-count { color:var(--project-muted); }
[hidden] { display:none!important; }
.case-story { padding:var(--project-section) 0; border-bottom:1px solid var(--project-line); }
.case-story h2, .case-story h3, .case-story h4 { margin:0 0 24px; }
.case-story p { margin:0 0 20px; color:var(--project-muted); }
.case-story p:last-child { margin-bottom:0; }
.project-context { margin:24px 0 0; }
.project-context dt { color:var(--project-ink); }
.project-context dd { margin:6px 0 20px; color:var(--project-muted); }
.project-context div:last-child dd { margin-bottom:0; }
.case-shell .text-link { text-decoration:underline; text-underline-offset:4px; }
.project-context + p { margin-top:20px; }
.highlights dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; }
.highlights dd { margin:8px 0 0; color:var(--project-muted); }
.highlights .project-note { margin-top:24px; }
.case-footer { padding:28px 0 12px; }
.case-footer > p { margin:0 0 16px; color:var(--project-muted); }
.other-projects { display:flex; flex-wrap:wrap; gap:12px; }
.other-project { display:block; width:100px; border-radius:6px; transition:opacity 180ms ease; }
.other-project:hover { opacity:.72; }
.other-project:focus-visible { outline:2px solid var(--project-ink); outline-offset:4px; }
.other-project .project-media { border:0; border-radius:6px; }
.other-project .project-media img { object-fit:cover; }
.other-project .project-placeholder { padding:5px; }
.other-project .project-placeholder strong { max-width:100%; overflow-wrap:anywhere; }
@media(min-width:769px) {
 .project-page { height:100dvh; overflow:hidden; }
 .project-page .case-layout { height:calc(100dvh - 128px); overflow:hidden; align-items:stretch; }
 .case-sidebar,.case-shell { height:100%; overflow-y:auto; overscroll-behavior-y:contain; min-height:0; }
}
@media(max-width:768px) {
 :root { --project-edge:22px; --project-gutter:24px; --project-section:32px; }
 .case-layout { display:block; margin-top:36px; }
 .case-sidebar { padding:0 0 32px; }
 .case-sections { flex-direction:row; flex-wrap:wrap; gap:0 18px; border-left:0; border-bottom:1px solid var(--project-line); }
 .case-sections a { padding:10px 0; margin:0 0 -1px; border-left:0; border-bottom:1px solid transparent; }
 .case-shell { padding-right:0; }
 .highlights dl { grid-template-columns:1fr; }
 .gallery-dots { display:none; }
 .editorial.home-page .work-feed { gap:36px; }
}
@media(prefers-reduced-motion:reduce) { .case-shell { scroll-behavior:auto; } .project-card .project-media img { transition:none; } }

/* Markdown story content follows the same responsive editorial column. */
.case-story { overflow-wrap:anywhere; }
.case-story img { display:block; max-width:100%; height:auto; }
.case-story pre { max-width:100%; overflow-x:auto; }
.case-story table { display:block; max-width:100%; overflow-x:auto; }

/* Project strips stay on one line and scroll when space is limited. */
.other-projects { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.other-project { flex:0 0 100px; }
.other-projects::-webkit-scrollbar,.project-rail::-webkit-scrollbar { display:none; }
.about-page .project-rail { justify-content:flex-start; overflow:auto; scrollbar-width:none; }
@media(min-width:769px) {
 .about-page .project-rail { height:auto; max-height:calc(100dvh - 180px); min-height:0; }
 .about-page .project-thumbnail { width:100%; flex-shrink:0; }
}

@media(max-width:768px) {
 .project-page .case-sections { display:none; }
}

@media(max-width:768px) {
 .about-page .about-layout { display:flex; flex-direction:column; }
 .about-page .about-sidebar { order:0; }
 .about-page .about-layout > main { order:1; min-width:0; }
 .about-page .project-rail { order:2; width:100%; max-width:100%; height:auto; max-height:none; flex-direction:row; flex-wrap:nowrap; margin:28px 0 24px; padding:0 0 8px; }
 .about-page .project-thumbnail { flex:0 0 100px; width:100px; align-self:auto; }
}

/* Match the Dechonk recording canvas across project previews and the case study. */
video[src$="assets/dechonk.mp4"], video[src$="assets/sagetuner.mp4"] { background:#f2f2f2; object-fit:contain; object-position:center; padding:10%; }

video[src$="assets/workalive.mp4"] { background:#f2f2f2; object-fit:contain; object-position:center; padding:6%; }

.project-media img.media-video-poster { object-fit:contain; background:#f2f2f2; padding:10%; }

/* An ordered, aligned homepage grid keeps every filter predictable. */
.home-page .project-card { margin-bottom:0; min-width:0; }
.editorial.home-page .work-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:24px; }
.home-page .project-card .project-media { --project-ratio:4/3; }
.home-page .project-title-row h3 { margin:0; }
.home-page .project-title-row { margin-bottom:12px; }
@media(max-width:768px) {
 .editorial.home-page .work-feed { grid-template-columns:minmax(0,1fr); }
}

/* A shared neutral canvas keeps project previews consistent at every size.
   The artwork scales inside the frame instead of cropping in the small rails. */
.editorial.home-page .project-card .project-media,
.editorial.about-page .project-rail .project-media,
.case-footer .other-project .project-media {
 background:#f2f2f2;
 border:0;
 display:grid;
 place-items:center;
}
.editorial.home-page .project-card .project-media > img,
.editorial.home-page .project-card .project-media > video,
.editorial.about-page .project-rail .project-media > img,
.editorial.about-page .project-rail .project-media > video,
.case-footer .other-project .project-media > img,
.case-footer .other-project .project-media > video {
 width:100%;
 height:100%;
 min-width:0;
 min-height:0;
 padding:10%;
 object-fit:contain;
 object-position:center;
 background:transparent;
 border-radius:0;
}

/* The case-study gallery uses the same canvas as its project thumbnails. */
.project-page .gallery .slide { background:#f2f2f2; }
.project-page .gallery .slide > img,
.project-page .gallery .slide > video {
 padding:10%;
 object-fit:contain;
 object-position:center;
 background:transparent;
}

/* Preview artwork belongs to the frame rather than the browser drag layer. */
.project-media img,.project-media video,.gallery img,.gallery video {
 -webkit-user-drag:none;
 user-select:none;
}


/* Story comparisons preserve the full recording at its natural ratio. */
.case-story > .project-media { aspect-ratio:auto; border:0; background:#f2f2f2; }
.case-story > .project-media > video { width:100%; height:auto; object-fit:contain; }

/* Give the Checkout comparison phones room within their shared canvas. */
[data-project="checkout-rework"] .case-story > .project-media:has(> video[src$="checkout-comparison-apple.webm"]) { padding:8%; }

.case-story > .project-media + h4 { margin-top:36px; }

/* Keep the final Checkout phone small within a landscape presentation. */
[data-project="checkout-rework"] .case-story > .project-media:has(> video[src$="only-ask-whats-missing.webm"]) {
 position:relative;
 aspect-ratio:16/9;
}
[data-project="checkout-rework"] .case-story > .project-media:has(> video[src$="only-ask-whats-missing.webm"]) > video {
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 padding:5%;
 object-fit:contain;
 object-position:center;
 background:transparent;
}

/* Project categories use the same quiet borders as the project tags. */
.home-page .project-filter { position:relative; isolation:isolate; display:flex; flex-wrap:wrap; gap:2px; width:fit-content; max-width:100%; padding:3px; margin-bottom:28px; border:1px solid #dedede; border-radius:28px; background:#fff; }
.home-page .project-filter[hidden],.home-page .project-card[hidden] { display:none; }
.home-page .project-filter button { position:relative; z-index:1; appearance:none; border:0; border-radius:24px; padding:5px 12px; min-height:36px; background:transparent; color:#737373; cursor:pointer; transition:color 220ms ease; }
.home-page .project-filter button[aria-pressed="true"] { color:#fff; }
.home-page .project-filter::before { content:""; position:absolute; z-index:0; top:0; left:0; width:var(--filter-width,0px); height:var(--filter-height,0px); transform:translate(var(--filter-x,0px),var(--filter-y,0px)); border-radius:24px; background:#242424; transition:transform 280ms cubic-bezier(.22,1,.36,1),width 280ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1); }
.home-page .project-filter button:focus-visible { outline:2px solid #737373; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
 .home-page .project-filter::before,.home-page .project-filter button { transition:none; }
}

@media(max-width:768px) {
 .home-page .project-filter { width:100%; }
 .home-page .project-filter button { flex:1 1 0; min-width:max-content; min-height:44px; padding:5px 4px; text-align:center; }
}

/* Shared twelve-column frame: three-column aside on every desktop page. */
:root { --portfolio-gap:24px; }
@media(min-width:769px) {
 .editorial.home-page main.home-layout,
 .about-page .about-layout,
 .project-page .case-layout {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--portfolio-gap);
 }
 .home-page .home-profile,.about-page .about-sidebar,.project-page .case-sidebar {
  grid-column:1 / span 3; grid-row:1;
 }
 .home-page #work,.project-page .case-shell { grid-column:4 / -1; grid-row:1; }
 .home-page #work { padding-right:0; }
 .editorial.home-page .work-feed { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--portfolio-gap); }
 .about-page .about-layout > main { grid-column:4 / span 8; grid-row:1; }
 .about-page .project-rail {
  grid-column:12; grid-row:1; align-self:stretch;
  height:100%; max-height:100%; padding:0;
  justify-content:flex-start; gap:var(--portfolio-gap); overflow-y:auto;
 }
 .about-page .project-thumbnail { width:100%; }
}

/* Tablet landscape: one four-column aside and two four-column projects. */
@media(min-width:769px) and (max-width:1024px) {
 .home-page .home-profile,.about-page .about-sidebar,.project-page .case-sidebar { grid-column:1 / span 4; }
 .home-page #work,.project-page .case-shell { grid-column:5 / -1; }
 .editorial.home-page .work-feed { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .about-page .about-layout > main { grid-column:5 / span 7; }
}