/* Version 4 — modeled on patiadanza.com
   Helvetica Neue 14px/28px, #333 text, gray #b5b5b5 nav, captions 12px #bdbdbd, 1200px content, 34px gutters. */
:root {
  --c-bg: #fff; --c-fg: #333; --c-muted: #bdbdbd; --c-line: #e9e9e9;
  --c-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut: 34px; --side: 35px;
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--c-fg); font: 14px/28px var(--c-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: calc(1200px + var(--side) * 2); margin: 0 auto; padding: 0 var(--side); }

/* header */
.hd-in { display: flex; justify-content: space-between; align-items: center; padding-top: 38px; padding-bottom: 30px; }
.logo img { height: 46px; width: auto; display: block; }
.nav { display: flex; gap: 40px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: #b5b5b5; letter-spacing: .65px; transition: color .2s; }
.nav a:hover, .nav a.active { color: #000; }

main { min-height: 0; }

/* 2-up / 3-up rhythm (Design home + Playground) */
.rh { display: grid; gap: var(--gut); margin-bottom: 70px; }
.rh-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rh-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: block; margin: 0; }
.ph { aspect-ratio: 4 / 5; overflow: hidden; background: #f3f3f3; }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
a.card:hover .ph img, a.card:hover .ph video { opacity: .88; }
.card.pg .ph img { cursor: zoom-in; }
.cap { margin: 44px 0 0; font-size: 12px; line-height: 16.8px; letter-spacing: .75px; color: var(--c-muted); }
.cap span { color: #333; }
.cap a { color: #333; text-decoration: underline; text-underline-offset: 2px; }

/* square tiles (Campaigns, Social & Editorial) */
.sq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 80px; }
.sq-t { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #f3f3f3; }
.sq-t img, .sq-t video { width: 100%; height: 100%; object-fit: cover; }
.sq-o { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: rgba(255,255,255,.92); opacity: 0; transition: opacity .25s; color: #333; }
.sq-t:hover .sq-o, .sq-t:focus-visible .sq-o { opacity: 1; }
@media (hover: none) { .sq-o { opacity: 1; inset: auto 0 0 0; background: rgba(255,255,255,.9); padding: 8px 12px; font-size: 12px; line-height: 18px; justify-content: flex-start; } }

/* project */
.pj-hero { background: #f3f3f3; }
.pj-hero img, .pj-hero video { width: 100%; max-height: 82vh; object-fit: cover; }
.pj-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; margin: 56px 0 110px; font-size: 12px; line-height: 21px; }
.pj-story { max-width: 520px; }
.pj-story h1 { font-size: 12px; font-weight: 700; line-height: 21px; margin: 0 0 6px; color: #000; }
.pj-story h2 { font-size: 12px; font-weight: 700; line-height: 21px; margin: 18px 0 2px; color: #000; }
.pj-story p { margin: 0 0 10px; }
.pj-story ul { margin: 0 0 10px; padding-left: 16px; }
.pj-credits p { margin: 0 0 4px; }
.pj-credits b { color: #000; }
.pj-links { margin-top: 14px !important; }
.pj-links a, .b-link { text-decoration: underline; text-underline-offset: 2px; }
.pj-tester { margin: -50px 0 110px; }

/* media sections — small centered bold headings, tight gutters, big images */
.pj-body .b-media, .pj-body .b-sub { margin: 0 0 110px; padding-top: 0; }
.pj-body .b-title { text-align: center; font-size: 12px; font-weight: 700; line-height: 21px; color: #000; margin: 0 0 22px; text-transform: none; letter-spacing: 0; }
.pj-body .b-desc { text-align: center; max-width: 560px; margin: -14px auto 26px; font-size: 12px; line-height: 20px; color: #777; }
.pj-body .b-more { text-align: center; font-size: 12px; }
.pj-body .b-grid { gap: 12px; }
.b-cell { background: transparent; }
.pj-body .b-cards { gap: 12px; }
.pj-body .b-cards figcaption, .pj-body .c-phone figcaption, .pj-body .c-browser figcaption { font-size: 12px; line-height: 17px; letter-spacing: .4px; color: #999; }
.pj-body .b-cards figcaption a, .pj-body figcaption a { color: #333; }
.pj-body .b-pair { margin-bottom: 70px; }
.pj-body .b-phones { gap: 50px 24px; }
.pj-body .b-spread { box-shadow: none; border: 1px solid var(--c-line); }
.c-tester { border-color: var(--c-line); }
.c-tester__controls { font-size: 12px; letter-spacing: .5px; }
.pj-next { display: flex; justify-content: space-between; border-top: 1px solid var(--c-line); padding: 22px 0 10px; margin-top: 20px; font-size: 12px; letter-spacing: .65px; color: #999; }
.pj-next a:hover { color: #000; }

/* about / info — small multi-column page */
.info { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; gap: 40px; font-size: 12px; line-height: 19px; margin: 6px 0 90px; }
.info h3 { font-size: 10px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); margin: 0 0 10px; }
.info h3:not(:first-child) { margin-top: 30px; }
.info p { margin: 0 0 12px; }
.info b { color: #000; font-weight: 700; }
.info a:hover { text-decoration: underline; }
.info .g { color: #a5a5a5; }
.in-e { margin-bottom: 8px; }
.in-bio p { font-size: 12px; line-height: 19px; }
.in-photo { width: 120px; margin-top: 18px; }
.c-record { gap: 6px; }
.c-record video { width: 110px; height: 110px; border-radius: 4px; }
.c-record span { font-size: 10px; letter-spacing: 1px; color: #a5a5a5; }

/* footer */
.ft { text-align: center; color: #333; padding-top: 30px; padding-bottom: 50px; font-size: 14px; }

/* responsive */
@media (max-width: 960px) {
  .info { grid-template-columns: 1fr 1fr; }
  .pj-intro { gap: 36px; }
}
@media (max-width: 640px) {
  :root { --side: 16px; --gut: 16px; }
  .hd-in { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 24px; padding-bottom: 22px; }
  .logo img { height: 40px; }
  .nav { gap: 6px 20px; justify-content: flex-start; }
  .rh-2, .rh-3 { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  .cap { margin-top: 14px; }
  .sq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pj-intro, .info { grid-template-columns: 1fr; gap: 26px; margin-bottom: 60px; }
  .pj-tester { margin: -20px 0 60px; }
  .pj-body .b-media, .pj-body .b-sub { margin-bottom: 64px; }
  .ft { font-size: 12px; }
}
@media (max-width: 640px) { .pj-intro, .info { font-size: 13px; line-height: 22px; } .pj-story h1, .pj-story h2 { font-size: 13px; } }

/* ---- scaled down: narrower page, smaller images and type ---- */
:root { --gut: 24px; }
.wrap { max-width: calc(1000px + var(--side) * 2); }
body { font-size: 13px; line-height: 24px; }
.hd-in { padding-top: 30px; padding-bottom: 26px; }
.logo img { height: 36px; }
.nav { gap: 30px; }
.nav a { font-size: 13px; }
.rh { margin-bottom: 52px; }
.rh-2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.cap { margin-top: 26px; font-size: 11px; line-height: 15px; }
.sq { gap: 10px; max-width: 820px; margin-left: auto; margin-right: auto; }
.pj-hero img, .pj-hero video { max-height: 62vh; }
.pj-intro { margin: 40px 0 80px; font-size: 12px; line-height: 20px; }
.pj-body { max-width: 860px; margin: 0 auto; }
.pj-body .b-media, .pj-body .b-sub { margin-bottom: 80px; }
.pj-body .c-phone { width: min(100%, 250px); }
.pj-body .b-pair { grid-template-columns: minmax(180px, 230px) 1fr; gap: 30px; }
.pj-body .b-phones { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pj-body .b-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pj-body .b-cards.web, .pj-body .b-cards.illo { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pj-body .b-spread { max-width: 720px; }
.pj-tester { margin: -36px auto 80px; max-width: 860px; }
.info { gap: 32px; font-size: 11.5px; line-height: 18px; }
.in-photo { width: 100px; }
.c-record video { width: 90px; height: 90px; }
.ft { font-size: 12px; padding-bottom: 40px; }
@media (max-width: 640px) {
  .logo img { height: 34px; }
  .nav a { font-size: 13px; }
  .pj-body .b-pair { grid-template-columns: 1fr; }
}
.rh-2, .rh-3, .sq { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Brief / Concept / Process dropdowns */
.pj-story > p:first-of-type { margin-bottom: 18px; }
.dd { border-top: 1px solid var(--c-line); }
.dd:last-of-type { border-bottom: 1px solid var(--c-line); }
.dd summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-weight: 700; color: #000; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: "+"; font-weight: 400; color: #999; font-size: 15px; }
.dd[open] summary::after { content: "–"; }
.dd summary:hover::after { color: #000; }
.dd-b { padding: 0 0 12px; }
.dd-b p:last-child { margin-bottom: 0; }
/* Campaigns / Social: square covers with the same caption as Design (no hover overlay) */
.sq { gap: 24px; }
.sq-c .cap { margin-top: 14px; }
a.sq-c:hover .sq-t img { opacity: .88; }
.sq-t img { transition: opacity .3s; }
@media (max-width: 640px) { .sq { gap: 16px; } }

/* Design landing: every cover the same size, 3 across; a leftover cover centers on the last row */
.even { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 24px; max-width: 860px; margin: 0 auto 70px; }
.even > .card { flex: 0 0 calc((100% - 48px) / 3); }
.even .cap { margin-top: 14px; }
@media (max-width: 640px) {
  .even { gap: 32px 12px; }
  .even > .card { flex-basis: calc((100% - 12px) / 2); }
}

/* Playground: small uncropped images in clean columns */
.pg-wall { columns: 5 150px; column-gap: 18px; max-width: 860px; margin: 0 auto 70px; }
.pg-i { break-inside: avoid; margin: 0 0 20px; }
.pg-i img, .pg-i video { width: 100%; height: auto; display: block; cursor: zoom-in; background: #f3f3f3; }
.pg-i figcaption { margin-top: 6px; font-size: 10.5px; line-height: 14px; letter-spacing: .5px; color: var(--c-muted); }
.pg-i figcaption span { color: #333; }
.pg-i figcaption a { color: #333; }
@media (max-width: 640px) { .pg-wall { columns: 2; column-gap: 12px; } }
.pg-i { margin-bottom: 16px; }

/* Playground v2: clusters keep each project's pieces together */
.pg-wall { columns: auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px 30px; max-width: 860px; margin: 0 auto 70px; }
.pg-g { max-width: 100%; }
.pg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-row .pg-i { height: var(--h); margin: 0; break-inside: auto; flex: none; }
.pg-row .pg-i img, .pg-row .pg-i video { width: 100%; height: 100%; object-fit: contain; background: transparent; cursor: zoom-in; }
.pg-cap { margin: 8px 0 0; font-size: 10.5px; line-height: 14px; letter-spacing: .5px; color: #333; }
.pg-cap a { color: #333; }
@media (max-width: 640px) {
  .pg-wall { gap: 26px 16px; }
  .pg-row .pg-i { height: calc(var(--h) * .72); }
}
.pg-row { flex-wrap: nowrap; gap: 6px; margin-bottom: 6px; }
.pg-row .pg-i { flex: none; }
.pg-wall { gap: 30px 34px; }

/* Playground v3: even square tiles, whole pieces on light gray */
.pt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 10px; max-width: 860px; margin: 0 auto 70px; }
.pt { margin: 0; }
.pt-box { aspect-ratio: 1; background: #f3f3f3; display: flex; align-items: center; justify-content: center; padding: 12%; }
.pt-box img, .pt-box video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pt figcaption { margin-top: 5px; min-height: 13px; font-size: 10px; line-height: 13px; letter-spacing: .4px; color: #333; white-space: nowrap; overflow: visible; }
.pt figcaption a { color: #333; }
@media (max-width: 900px) { .pt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pt figcaption { white-space: normal; } }

/* Playground — Bits & Pieces style */
.bp-wrap { max-width: 620px; margin: 0 auto 90px; }
.bp-h { font-size: 15px; font-weight: 700; margin: 6px 0 4px; color: #000; }
.bp-intro { margin: 0 0 40px; font-size: 13px; line-height: 20px; color: #777; max-width: 440px; }
.bp { margin: 0 0 56px; }
.bp-media { position: relative; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.bp-f { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; }
.bp-f.on { visibility: visible; }
.bp-f img, .bp-f video { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.bp-cap { margin: 12px 0 0; font-size: 12px; line-height: 18px; color: #333; }
.bp-cap a { text-decoration: underline; text-underline-offset: 2px; }
.bp-side { display: grid; grid-template-columns: 60% 1fr; gap: 18px; align-items: start; }
.bp-side .bp-cap { margin-top: 0; }
@media (max-width: 640px) {
  .bp-side { grid-template-columns: 1fr; gap: 0; }
  .bp-side .bp-cap { margin-top: 12px; }
  .bp { margin-bottom: 40px; }
}
.bp-embed { aspect-ratio: 16 / 10; background: #f3f3f3; }
.bp-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.bp-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: stretch; }
.bp-side-col { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bp-sw { border-radius: 6px; overflow: hidden; }
.bp-sw img { width: 100%; height: auto; display: block; cursor: zoom-in; }
@media (max-width: 640px) { .bp-embed { aspect-ratio: 4 / 5; } }
.bp-two { grid-template-columns: 1.7fr 1fr; align-items: center; }

/* square corners everywhere in v4 */
.bp-media, .bp-sw, .bp-embed, .bp-f img, .bp-sw img, .c-figma, .b-cell, .b-cards img, .c-browser, .sq-t, .ph { border-radius: 0 !important; }
.in-photo { width: 100%; max-width: 220px; margin: 0 0 12px; }
.in-photo img { width: 100%; height: auto; }

/* sticky header */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: box-shadow .2s; }
.hd.scrolled { box-shadow: 0 1px 0 #ececec; }
.hd.scrolled .hd-in { padding-top: 16px; padding-bottom: 14px; }
.hd-in { transition: padding .2s; }
.c-lightbox { z-index: 100; }
.c-record video, .c-record img { width: 130px; height: 130px; border-radius: 0; }

/* header pinned to the top in every browser (fixed + matching spacer) */
.hd { position: fixed; top: 0; left: 0; right: 0; }
body { padding-top: var(--hd-h, 104px); }