:root{
    --ink:#111111;
    --muted:#4d4d4d;
    --line:#c9c9c9;
    --bg:#ffffff;
    --max:1320px;
    --radius:14px;
    --sp-tight:10px;
    --sp-block:40px;
    --sp-stack:24px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Montserrat',sans-serif;
    font-size:17px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}
  h1{margin:0;font-weight:400;}
  a:focus-visible, button:focus-visible{outline:2px solid #111;outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:0.01ms !important;}
  }

  /* HEADER / NAV */
  header{padding:36px 0 28px;}
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    max-width:var(--max);margin:0 auto;padding:0 48px;
    flex-wrap:wrap;gap:18px;
  }
  .logo{display:block;}
  .logo img{height:24px;width:auto;display:block;}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
  .nav-toggle span{display:block;width:20px;height:1px;background:var(--ink);margin:5px 0;}
  nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;align-items:center;flex-wrap:wrap;}
  nav a{font-size:1.05rem;padding-bottom:3px;border-bottom:1px solid transparent;}
  nav a:hover{border-bottom-color:var(--muted);}
  nav a[aria-current="page"]{border-bottom-color:var(--ink);}
  .nav-social{margin-left:6px;display:flex;align-items:center;}
  .nav-social a{display:flex;align-items:center;}
  .nav-social img{width:20px;height:20px;display:block;}

  /* PAGE HEADING */
  .page-head{padding:28px 0 44px;}
  .page-head h1{font-size:1.9rem;font-weight:400;}

  /* PROJECT GRID — 2 columns, rounded corners, generous gaps */
  .grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:64px 44px;
  }
  .tile{display:block;}
  .tile-img{
    aspect-ratio:16/11;background:#ececec;
    border-radius:var(--radius);
    overflow:hidden;
  }
  .tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .tile:hover .tile-img img{transform:scale(1.03);}
  .tile-caption{margin-top:16px;font-size:1.1rem;}
  .tile-caption .cat{color:var(--muted);}

  .section{padding:80px 0 20px;border-top:1px solid var(--line);margin-top:60px;}

  /* ABOUT */
  .about-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start;}
  .about-photo{aspect-ratio:1/1;background:#ececec;border-radius:50%;overflow:hidden;}
  .about-photo img{width:100%;height:100%;object-fit:cover;}
  .about p{font-size:1.15rem;max-width:58ch;margin:0 0 18px;}

  footer{padding:48px 0;color:var(--muted);font-size:0.95rem;margin-top:60px;}

  /* RESPONSIVE */
  @media (max-width:900px){
    .grid{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;gap:28px;}
    .about-photo{max-width:280px;}
  }
  @media (max-width:640px){
    .wrap, .nav-inner{padding:0 24px;}
    .grid{gap:40px;}
    .nav-toggle{display:block;}
    nav ul{
      position:fixed;top:88px;left:0;right:0;bottom:0;background:var(--bg);
      flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 24px;
      transform:translateY(-6px);opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
      border-top:1px solid var(--line);
    }
    nav ul.open{opacity:1;transform:translateY(0);pointer-events:auto;}
    nav li{width:100%;border-bottom:1px solid var(--line);}
    nav a{display:block;padding:16px 0;}
  }

/* ===== PROJECT DETAIL PAGES ===== */
.crumb{display:none;}
.crumb a:hover{color:var(--ink);}

.detail-head{padding:20px 0 16px;}
.detail-head h1{font-size:2.3rem;font-weight:400;margin-bottom:16px;}
.detail-meta{color:var(--muted);font-size:1rem;}

.detail-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:#ececec;}
.detail-hero img{width:100%;display:block;}

.detail-body p{font-size:1.15rem;margin:0 0 22px;}
.detail-body p.italic{font-style:italic;color:#333;}

.section-divider{border:none;border-top:1px solid var(--line);margin:var(--sp-block) 0;}
.detail-h2{font-size:1.5rem;font-weight:500;margin:0 0 28px;}

.figure{margin-bottom:var(--sp-stack);}
.figure img{width:100%;border-radius:var(--radius);display:block;background:#ececec;}
.figcap{color:var(--muted);font-size:0.95rem;text-align:center;margin:14px 0 var(--sp-block);}
.figure:has(+ .figcap){margin-bottom:0;}

/* Horizontal scroll-snap row, for tightly related image sets */
.media-row{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:14px;margin-bottom:var(--sp-block);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.media-row .item{flex:0 0 78%;scroll-snap-align:start;}
.media-row .item.wide-plan{flex-basis:86%;}
.media-row .item.wide-plan-2{flex-basis:91%;}
.media-row .item.plan-narrow{flex-basis:74%;}
.media-row .item.portrait-a{flex-basis:44.6%;}
.media-row .item.portrait-b{flex-basis:48.5%;}
.media-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:#ececec;display:block;}
.media-row .item p{margin-top:var(--sp-tight);}
@media (min-width:760px){
  .media-row .item{flex:0 0 42%;}
  .media-row .item.wide-plan{flex-basis:47%;}
  .media-row .item.wide-plan-2{flex-basis:49%;}
  .media-row .item.plan-narrow{flex-basis:40%;}
  .media-row .item.portrait-a{flex-basis:24%;}
  .media-row .item.portrait-b{flex-basis:26.1%;}
}

/* Alternating strategy-detail rows (image + label + caption) */
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px;margin-bottom:var(--sp-block);}
.detail-grid .item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:#ececec;}
.detail-grid .item h4{font-size:1.05rem;font-weight:600;margin:var(--sp-tight) 0 6px;}
.detail-grid .item p{font-size:0.98rem;color:var(--muted);margin:0;}

.credits{color:var(--muted);font-size:0.95rem;line-height:1.9;margin:0 0 var(--sp-block);}

.detail-nav{
  display:flex;justify-content:space-between;padding:36px 0;border-top:1px solid var(--line);
  margin-top:20px;font-size:1rem;
}
.detail-nav a:hover{color:var(--muted);}
.detail-nav .dir{display:block;font-size:0.8rem;color:var(--muted);margin-bottom:4px;}
.detail-nav .next{text-align:right;margin-left:auto;}

@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;}
  .detail-head h1{font-size:1.8rem;}
}

/* Strategy detail carousel — horizontal scroll-snap with title + caption per card */
.strategy-row{
  display:flex;gap:24px;overflow-x:auto;padding-bottom:16px;margin-bottom:var(--sp-block);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.strategy-row .item{flex:0 0 78%;scroll-snap-align:start;}
.strategy-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:#ececec;display:block;}
@media (min-width:760px){
  .strategy-row .item{flex:0 0 42%;}
}

/* Two images side by side, together filling the full content width */
.pair-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:var(--sp-block);}
.pair-row .figure{margin-bottom:0;aspect-ratio:5/4;overflow:hidden;}
.pair-row .figure img{width:100%;height:100%;object-fit:cover;}
@media (max-width:640px){
  .pair-row{grid-template-columns:1fr;}
}

/* Strategy-row captions: centered, sitting below the image like other captions */
.strategy-row .item{position:static;}
.strategy-row p{
  position:static;margin:var(--sp-tight) 0 0;padding:0;
  text-align:center;color:var(--muted);font-size:0.95rem;
  background:none;border-radius:0;
}


/* Visual References: real text labels instead of baked-in image text */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:var(--sp-block);}
.ref-grid .swap{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#000;}
.ref-grid .swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ref-grid .swap img.overlay{opacity:0;transition:opacity .35s ease;}
.ref-grid .swap:hover img.overlay,
.ref-grid .swap.active img.overlay{opacity:1;}
@media (max-width:760px){
  .ref-grid{grid-template-columns:1fr;gap:32px;}
}

/* Let a pair-row figure keep its own natural aspect ratio instead of being forced to match */
.pair-row .figure.auto{aspect-ratio:auto;}
.pair-row .figure.auto img{position:static;height:auto;object-fit:initial;}

/* Image + text side-by-side split (for sections like Challenge) */
.split-row{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start;margin-bottom:var(--sp-block);}
.split-row .split-media .figure{margin-bottom:var(--sp-tight);}
.split-row .split-media .figure:last-child{margin-bottom:0;}
.split-row .split-text p{margin:0;}
@media (max-width:760px){
  .split-row{grid-template-columns:1fr;gap:var(--sp-tight);}
  .split-row .split-text{order:-1;margin-bottom:var(--sp-tight);}
}

/* Side-by-side pair inside a split-row's media column */
.split-media.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.split-media.pair .figure{margin-bottom:0;}
@media (max-width:520px){
  .split-media.pair{grid-template-columns:1fr;}
}

/* Consistent breathing room between body copy and whatever image block follows it */
.detail-body + .detail-hero,
.detail-body + .figure,
.detail-body + .media-row,
.detail-body + .pair-row,
.detail-body + .split-row,
.detail-body + .strategy-row,
.detail-body + .ref-grid{
  margin-top: var(--sp-block);
}

/* Sketch panorama + rotated floorplan carousel: sized to match heights while keeping each image's true proportions */
.media-row .item.hero-plan{flex-basis:74%;}
.media-row .item.hero-sketch{flex-basis:141%;}
@media (min-width:760px){
  .media-row .item.hero-plan{flex-basis:40%;}
  .media-row .item.hero-sketch{flex-basis:76%;}
}

/* Nested subsection heading, for pages that bundle multiple sub-projects */
.detail-h3{font-size:1.15rem;font-weight:600;margin:0 0 24px;}

/* Three images side by side, no scroll, no crop (natural proportions) */
.trio-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:var(--sp-block);}
.trio-row .figure{margin-bottom:0;}
@media (max-width:640px){
  .trio-row{grid-template-columns:1fr;}
}

/* Small centered figure, sized by height rather than filling the column */
.figure-mini{text-align:center;margin-bottom:var(--sp-block);}
.figure-mini img{width:auto;max-width:100%;border-radius:var(--radius);display:inline-block;}

/* Modeling-row variant for portrait (3:4) process photos */
.media-row.portrait img{aspect-ratio:3/4;object-fit:cover;}

/* Sub-project titles styled like a standard page h1 */
.detail-h2.project-title{font-size:2.3rem;font-weight:400;margin-bottom:16px;}
@media (max-width:760px){
  .detail-h2.project-title{font-size:1.8rem;}
}

/* Row immediately followed by its own caption: use the standard tight image-to-caption gap */
.trio-row.tight{margin-bottom:var(--sp-tight);}

/* Smaller media-row variant sized by fixed height rather than percentage width */
.media-row.small-portrait .item{flex:0 0 auto;}
.media-row.small-portrait img{height:4in;width:auto;aspect-ratio:3/4;object-fit:cover;}

/* Flat exploded image + GIF sitting side by side, no overlap */
.exploded-row{display:flex;align-items:flex-start;gap:0;margin-bottom:var(--sp-block);}
.exploded-row .base-img{flex:0 1 auto;max-width:66%;display:block;}
.exploded-row .gif-img{height:auto;max-height:468px;width:auto;display:block;margin-left:60px;margin-top:-44px;align-self:flex-start;}
@media (max-width:640px){
  .exploded-row{flex-wrap:wrap;justify-content:center;}
  .exploded-row .base-img{max-width:100%;}
}

/* Vertical (portrait) crop for specific carousel items, same height as siblings */
.media-row .item.portrait-crop{flex-basis:44%;}
.media-row .item.portrait-crop img{aspect-ratio:3/4;}
@media (min-width:760px){
  .media-row .item.portrait-crop{flex-basis:29%;}
  .media-row .item.portrait-crop img{aspect-ratio:29/32;}
}

/* This specific carousel: sized to fit one screen width without horizontal scroll */
@media (min-width:760px){
  .media-row.tight-fit .item{flex-basis:calc(42% - 17px);}
  .media-row.tight-fit .item.portrait-crop{flex-basis:calc(29% - 11.5px);}
}

/* Deliverables-style section: minimize gap between each caption line and its image */
.deliverables .detail-body p{margin-bottom:20px;}
.deliverables .detail-body + .figure{margin-top:0;}

/* Responsive embedded video */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;margin-bottom:var(--sp-block);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Deliverables story images: proportional grid columns matching each image's true ratio, so heights match with zero cropping */
.pair-row.story-pair{grid-template-columns:1.0181fr 1.1504fr;}
.pair-row.story-pair .figure{aspect-ratio:auto;}
.pair-row.story-pair .figure img{width:100%;height:auto;object-fit:initial;}

/* Strategy Ideation: wide sketches shown at their true (uncropped) proportions */
.media-row .item.wide-sketch-a{flex-basis:106.2%;}
.media-row .item.wide-sketch-b{flex-basis:103.7%;}
@media (min-width:760px){
  .media-row .item.wide-sketch-a{flex-basis:57.2%;}
  .media-row .item.wide-sketch-b{flex-basis:55.9%;}
}
.pair-row.feedback-pair{grid-template-columns:1.1236fr 1.1291fr;gap:56px;position:relative;}
.pair-row.feedback-pair .figure{aspect-ratio:auto;}
.pair-row.feedback-pair .figure img{width:100%;height:auto;object-fit:initial;}
.pair-row.feedback-pair::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--line);transform:translateX(-50%);
}

/* Equal-width image/text split (50/50), vs the default slightly image-favoring split-row */
.split-row.equal{grid-template-columns:1fr 1fr;}

/* Standardize gap before a split-row that immediately follows the title/meta block, matching the body-to-hero gap elsewhere */
.detail-head + .split-row{margin-top:var(--sp-block);}

/* Strategy Ideation: scaled down so all 3 fit one screen width without scrolling, same at every breakpoint */
.media-row.fit-strategy .item.wide-sketch-a{flex-basis:calc(36.88% - 14.75px);}
.media-row.fit-strategy .item.wide-sketch-b{flex-basis:calc(36.04% - 14.42px);}
.media-row.fit-strategy .item.chosen{flex-basis:calc(27.08% - 10.83px);}

/* Deliverables: keychain tag + watch, proportional columns so heights match with zero cropping */
.pair-row.deliverables-pair{grid-template-columns:0.8345fr 2.3358fr;gap:85px;}
.pair-row.deliverables-pair .figure{aspect-ratio:auto;}
.pair-row.deliverables-pair .figure img{width:100%;height:auto;object-fit:initial;}

/* Three images with a simple arrow between each, plus its own caption row below */
.arrow-row{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.arrow-row .figure{flex:1 1 0;}
.arrow-row .arrow{flex:0 0 auto;font-size:1.8rem;color:var(--muted);}
.arrow-row-captions{display:flex;gap:16px;margin-bottom:var(--sp-block);}
.arrow-row-captions .figcap{flex:1 1 0;margin:0;}
@media (max-width:640px){
  .arrow-row{flex-wrap:wrap;justify-content:center;}
  .arrow-row .arrow{transform:rotate(90deg);}
  .arrow-row-captions{flex-wrap:wrap;}
}

/* Three equal-size images spread to the full row width */
.spread-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-block);}
.spread-row > div{flex:0 0 30%;}
.spread-row .figure{margin-bottom:0;}
@media (max-width:640px){
  .spread-row{flex-wrap:wrap;gap:16px;justify-content:center;}
  .spread-row > div{flex:0 0 45%;}
}

/* Sock Research pair: pain points + competitors, proportional columns, no crop */
.pair-row.sock-research-pair{grid-template-columns:1.027fr 1.122fr;}
.pair-row.sock-research-pair .figure{aspect-ratio:auto;}
.pair-row.sock-research-pair .figure img{width:100%;height:auto;object-fit:initial;}