:root{
    --carbon:#141414;
    --bone:#F5F1E8;
    --cyan:#2B5C8A;
    --wine:#7B3856;
    --ink:#4a463f;      /* muted secondary on bone */
    --line:#d9d3c6;     /* hairline on bone */
    --bone-dim:rgba(245,241,232,.62);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--carbon);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}

  /* ---------- placeholders ---------- */
  .ph{
    border:1px dashed var(--line);
    background:
      repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(43,92,138,.05) 11px,rgba(43,92,138,.05) 12px);
    color:var(--ink);
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.04em;
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:14px;
  }
  .ph span{opacity:.75}

  /* ---------- top nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:40;
    background:var(--bone-dim);
    backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:baseline;justify-content:space-between;padding:16px 28px;max-width:1180px;margin:0 auto}
  .brand{font-family:'Cormorant',serif;font-size:22px;font-weight:600;letter-spacing:.01em;cursor:pointer}
  .brand .sp{color:var(--cyan)}
  .nav-links{display:flex;gap:22px;font-size:14px}
  .nav-links a{
    background:none;border:none;font-family:'Inter';font-size:14px;color:var(--carbon);
    cursor:pointer;padding:2px 0;border-bottom:1px solid transparent;
  }
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--carbon)}

  /* ---------- views ---------- */
  .view{display:none}
  .view.active{display:block}

  /* ================= HOME ================= */

  /* index of works */
  .index{padding-top:78px;padding-bottom:30px}
  .index-lead{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
    color:var(--ink);margin-bottom:26px;text-transform:uppercase;
  }
  .work-row{
    display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
    padding:22px 0;border-top:1px solid var(--line);cursor:pointer;
  }
  .work-row:last-child{border-bottom:1px solid var(--line)}
  .work-row .title{
    font-family:'Cormorant',serif;font-weight:500;font-size:clamp(30px,5.4vw,58px);
    line-height:1.02;transition:color .25s ease,transform .35s ease;
  }
  .work-row .one{font-size:14px;color:var(--ink);margin-top:6px;max-width:52ch}
  .work-row .disc{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan);
    white-space:nowrap;padding-top:12px;letter-spacing:.02em;
  }
  .work-row:hover .title{color:var(--cyan);transform:translateX(6px)}
  .work-row .thumb{display:none}

  /* floating hover preview (desktop) */
  #peek{
    position:fixed;z-index:60;width:280px;height:200px;pointer-events:none;
    opacity:0;transition:opacity .18s ease;transform:translate(-50%,-50%);
  }
  #peek .ph{width:100%;height:100%;background:#e9e3d6;border-color:var(--cyan);border-radius:2px}

  
  /* ================= WORK ================= */
  .page-head{padding:64px 0 30px}
  .page-head h1,.page-head h2{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(40px,8vw,80px);line-height:1}
  .page-head p{color:var(--ink);margin-top:10px;font-size:16px}

  .filters{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0 34px;border-bottom:1px solid var(--line)}
  .filters button{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.02em;
    background:none;border:1px solid var(--line);color:var(--ink);
    padding:8px 14px;border-radius:999px;cursor:pointer;transition:all .2s ease;
  }
  .filters button:hover{border-color:var(--carbon);color:var(--carbon)}
  .filters button[aria-pressed="true"]{background:var(--carbon);color:var(--bone);border-color:var(--carbon)}

  .grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;
    padding:38px 0 20px;
  }
  .card{cursor:pointer;display:flex;flex-direction:column;gap:12px}
  .card .cover{aspect-ratio:4/3;border-radius:2px;overflow:hidden}
  .card .cover .ph{width:100%;height:100%}
  .card:hover .cover .ph{border-color:var(--cyan)}
  .card .c-title{font-family:'Cormorant',serif;font-weight:600;font-size:24px;line-height:1.05}
  .card .c-meta{font-size:13px;color:var(--ink)}
  .card .c-disc{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan)}
  .card.is-hidden{display:none}

  /* ================= CASE ================= */
  .case{padding-top:48px}
  .case-back{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);
    background:none;border:none;cursor:pointer;padding:0;margin-bottom:34px;
  }
  .case-back:hover{color:var(--carbon)}
  .case-top{padding-top:52px}
  .ficha{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.9;color:var(--ink)}
  .ficha .row{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
  .ficha .row:first-child{border-top:none}
  .ficha .k{color:var(--carbon)}
  .ficha .v{color:var(--ink)}
  .ficha .v a{color:var(--cyan);border-bottom:1px solid transparent}
  .ficha .v a:hover{border-bottom-color:var(--cyan)}

  .case-intro h1{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(40px,7vw,74px);line-height:1;margin-bottom:4px}
  .case-intro .sub{font-family:'Cormorant',serif;font-size:clamp(20px,3vw,28px);color:var(--ink);margin-bottom:26px}
  .case-intro p{max-width:62ch;margin-bottom:18px;font-size:15.5px;line-height:1.68}
  .case-intro .stat{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--cyan);margin-top:8px}

  .gallery{padding:64px 0 30px;display:grid;gap:22px}
  .gallery .g-full .ph{aspect-ratio:16/9}
  .gallery .g-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .gallery .g-two .ph{aspect-ratio:3/4}
  .gallery .ph{width:100%}

  .next{
    border-top:1px solid var(--line);margin-top:30px;padding:40px 0 10px;
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;cursor:pointer;
  }
  .next .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink)}
  .next .np{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(28px,5vw,52px);transition:color .2s}
  .next:hover .np{color:var(--cyan)}

  /* ================= ABOUT ================= */
  .about{padding-top:56px}
  .about-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .about-portrait .ph{aspect-ratio:4/5;border-color:var(--cyan);border-radius:2px}
  .about-copy h1,.about-copy h2{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(34px,5vw,52px);margin-bottom:20px}
  .about-copy p{max-width:56ch;margin-bottom:16px}
  .about-copy .fine{font-size:14px;color:var(--ink)}
  .logowall{padding:70px 0 20px}
  .logowall .lw-lead{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink);margin-bottom:22px}
  .lw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .lw-grid .ph{aspect-ratio:5/2}
  .lw-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);margin-top:16px}

  /* ================= FOOTER ================= */
  footer{border-top:1px solid var(--line);margin-top:80px;padding:40px 0 60px}
  .foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:baseline}
  .foot-talk{font-family:'Cormorant',serif;font-size:clamp(28px,5vw,46px);font-weight:500}
  .foot-talk a{border-bottom:1px solid var(--cyan)}
  .foot-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);text-align:right;line-height:1.9}
  .foot-meta a:hover{color:var(--cyan)}

  /* ================= RESPONSIVE ================= */
  @media(max-width:860px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .case-top{padding-top:30px}
    .about-top{grid-template-columns:1fr;gap:30px}
    .lw-grid{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:600px){
    .wrap{padding:0 18px}
    .nav-in{padding:14px 18px}
    .index{padding-top:52px;padding-bottom:20px}
    /* work index becomes stacked blocks with inline thumb, hover-peek off */
    .work-row{grid-template-columns:1fr;gap:12px;padding:26px 0}
    .work-row .disc{padding-top:0}
    .work-row .thumb{display:block;order:-1}
    .work-row .thumb .ph{aspect-ratio:16/9;width:100%}
    #peek{display:none}
    .grid{grid-template-columns:1fr;gap:30px}
    .gallery .g-two{grid-template-columns:1fr}
    .lw-grid{grid-template-columns:repeat(2,1fr)}
    .foot-meta{text-align:left}
  }
  @media(prefers-reduced-motion:reduce){
    .revealed .reveal{transition:none}
    html{scroll-behavior:auto}
    .work-row:hover .title{transform:none}
  }
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.about-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.work-row .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;display:block}
.card .cover .cv-bg{width:100%;height:100%;object-fit:cover;display:block}
#peek img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.gallery .g-full img,.gallery .g-full video{width:100%;border-radius:2px;display:block}
/* a tall portrait must not fill the viewport on its own */
.gallery .g-full img{width:auto;max-width:100%;max-height:76vh;margin:0 auto}
/* autoplaying loop, optionally boxed to a ratio */
.gallery .g-loop{margin:0 auto;overflow:hidden;border-radius:2px}
.gallery .g-loop video{width:100%;display:block;border-radius:2px}
.gallery .g-loop.r1x1,.gallery .g-loop.r4x5,.gallery .g-loop.r9x16{position:relative}
.gallery .g-loop.r1x1{aspect-ratio:1/1}
.gallery .g-loop.r4x5{aspect-ratio:4/5}
.gallery .g-loop.r9x16{aspect-ratio:9/16}
.gallery .g-loop.r1x1 video,.gallery .g-loop.r4x5 video,.gallery .g-loop.r9x16 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery .g-two img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block}
.gallery .gcap{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);margin:2px 0 4px;letter-spacing:.02em}

/* ============ interactive gallery ============ */

/* clickable images open the lightbox. Flip frames are excluded: they run their own
   crossfade, and this rule used to outrank it on specificity. */
.gallery img[data-lb]:not(.fl-fr){cursor:zoom-in;transition:opacity .2s ease}
.gallery img[data-lb]:not(.fl-fr):hover{opacity:.86}

/* n-up grid */
.gallery .g-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:22px}
.gallery .g-grid img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover;border-radius:2px;display:block}
/* fit-contain: nothing gets cropped, the piece sits on a bone field */
.gallery .g-grid.fit-contain img,.gallery .g-two.fit-contain img{object-fit:contain;background:#EFEAE0;border:1px solid rgba(20,20,20,.07)}
.gallery .g-two.fit-contain img{aspect-ratio:4/5}

/* slider */
.gallery .g-slider{position:relative}
.gallery .sl-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery .sl-track::-webkit-scrollbar{display:none}
.gallery .sl-item{flex:0 0 46%;scroll-snap-align:start}
/* Every slide is boxed to one height so a run of mixed shapes does not step up and
   down as you scroll it. Composed pieces sit inside the box instead of being cropped;
   photographs fill it. The box is the same for both, which is what keeps it even. */
.gallery .sl-item img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:2px;display:block;background:var(--line)}
.gallery .g-slider.fit-contain .sl-item img{object-fit:contain;background:transparent}
/* a slider with a ratio crops every slide to the same size */
.gallery .g-slider.r1x1 .sl-item img{aspect-ratio:1/1}
.gallery .g-slider.r4x5 .sl-item img{aspect-ratio:4/5}
.gallery .g-slider.r16x9 .sl-item img{aspect-ratio:16/9}
.gallery .g-slider.r3x2 .sl-item img{aspect-ratio:3/2}
.gallery .sl-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(20,20,20,.18);background:var(--bone);color:var(--carbon);
  font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s ease,border-color .2s ease}
.gallery .sl-nav:hover{background:var(--carbon);color:var(--bone);border-color:var(--carbon)}
.gallery .sl-prev{left:14px}
.gallery .sl-next{right:14px}
.gallery .sl-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);margin-top:10px;letter-spacing:.02em}

/* video link placement · horizontal and vertical */
.gallery .v-frame,.gallery .v-link{position:relative;display:block;width:100%;border-radius:2px;overflow:hidden;
  background:var(--carbon);cursor:pointer}
.gallery .v-frame.r16x9,.gallery .v-link.r16x9{aspect-ratio:16/9}
.gallery .v-frame.r9x16,.gallery .v-link.r9x16{aspect-ratio:9/16}
.gallery .v-frame img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .25s ease}
.gallery .v-frame:hover img{opacity:1}
.gallery .v-frame iframe,.gallery .v-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.gallery .v-frame .ph{width:100%;height:100%;border:0}
.gallery .v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(245,241,232,.5);background:rgba(20,20,20,.42);backdrop-filter:blur(3px);
  cursor:pointer;display:grid;place-items:center;transition:background .2s ease,transform .2s ease}
.gallery .v-frame:hover .v-play{background:var(--cyan);transform:translate(-50%,-50%) scale(1.06)}
.gallery .v-play svg{width:26px;height:26px;fill:var(--bone);margin-left:3px}
.gallery .v-frame.is-live .v-play{display:none}
.gallery .v-link{display:grid;place-items:center}
.gallery .v-link span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--bone);letter-spacing:.04em}

/* a single vertical video does not go full bleed */
.gallery .g-video.is-vert{max-width:400px}

/* a row of vertical videos */
.gallery .g-vrow{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:22px}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(20,20,20,.94);padding:5vh 6vw;cursor:zoom-out}
#lightbox.open{display:grid}
#lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:2px;display:block}
#lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(245,241,232,.28);background:transparent;color:var(--bone);
  font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s ease}
#lightbox .lb-nav:hover{background:rgba(245,241,232,.14)}
#lightbox .lb-prev{left:3vw}
#lightbox .lb-next{right:3vw}
#lightbox .lb-count{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(245,241,232,.7);letter-spacing:.04em}

@media (max-width:760px){
  .gallery .g-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .gallery .g-grid[data-n="3"]{grid-template-columns:repeat(3,1fr);gap:8px}
  .gallery .g-vrow{grid-template-columns:1fr 1fr;gap:14px}
  .gallery .sl-item{flex:0 0 70%}
  .gallery .sl-nav{width:38px;height:38px}
  .gallery .g-video.is-vert{max-width:none}
  #lightbox{padding:4vh 4vw}
  #lightbox .lb-prev{left:2vw}
  #lightbox .lb-next{right:2vw}
}

/* ============ About · also at Espacio ============ */
.alsoat{margin-top:56px;padding-top:34px;border-top:1px solid rgba(20,20,20,.12)}
.aa-list{margin-top:22px;display:grid;gap:0}
.aa-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) minmax(0,200px);gap:24px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid rgba(20,20,20,.08)}
.aa-row:last-child{border-bottom:0}
.aa-c{font-family:'Cormorant',serif;font-weight:600;font-size:21px;line-height:1.1}
.aa-d{font-size:14px;line-height:1.55;color:var(--ink)}
.aa-m{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.02em;text-align:right;
  overflow-wrap:anywhere;line-height:1.5}
@media (max-width:900px){
  .aa-row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .aa-m{text-align:left}
}


/* ============ flip · cycle a set of same-size images ============ */
.gallery .g-flip{position:relative;max-width:var(--max,none)}
.gallery .fl-stack{position:relative;border-radius:2px;overflow:hidden}
.gallery .fl-sizer{width:100%;height:auto;display:block;visibility:hidden}
.gallery .fl-fr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .55s ease;pointer-events:none}
.gallery .fl-fr.is-on{opacity:1;pointer-events:auto;cursor:zoom-in}
.gallery .g-flip.fit-contain .fl-stack{background:#EFEAE0;border:1px solid rgba(20,20,20,.07)}
.gallery .g-flip.fit-contain .fl-fr{object-fit:contain}
.gallery .fl-meta{display:flex;align-items:center;gap:14px;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:.02em}
.gallery .fl-nav{display:flex;gap:6px}
.gallery .fl-nav button{width:22px;height:22px;line-height:1;padding:0;border-radius:50%;
  border:1px solid rgba(20,20,20,.18);background:transparent;color:var(--carbon);
  font-size:14px;cursor:pointer;display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.gallery .fl-nav button:hover{background:var(--carbon);color:var(--bone);border-color:var(--carbon)}


/* ============ covers · full bleed image, title set over it ============ */
/* This follows the cover language already used on Behance: a frame from the
   project at a fixed ratio, with the project name over it. Nothing is framed
   or letterboxed, so the crop is chosen when the cover is picked, not by CSS. */
.card .cover{position:relative;aspect-ratio:808/632;border-radius:2px;overflow:hidden;background:var(--carbon)}
.card .cover .cv-bg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}


/* ---- cover plate: photo, scrim, client mark ----
   The mark sits centred on the plate so every cover signs itself the same way,
   whatever shape the logo or the photograph behind it happens to be. */
/* The campaign artwork already carries its own headline, so the plate pushes it back
   to a texture: desaturated, darkened, slightly soft. The client's mark is then the
   only thing in focus, which is what makes a wall of thirteen covers read as one set. */
/* Every branded piece ships with its own headline burnt into the artwork, so at rest
   the plate holds it back to a field of the campaign's own colour and the client's
   mark is the only thing in focus. Hovering brings the artwork back. */
.cover.is-plate .cv-bg,.ch-img.is-plate .cv-bg{filter:saturate(.95) brightness(.8);transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover.is-plate .cv-bg{transform:scale(1.06)}
/* a plate built on a clean photograph keeps the photograph sharp: only a scrim, no blur */
.cover.is-plate.is-clean .cv-bg,.ch-img.is-plate.is-clean .cv-bg{filter:saturate(.95) brightness(.8);transform:scale(1.02)}
.card:hover .cover.is-plate.is-clean .cv-bg{transform:scale(1.06)}
.is-clean .cov-scrim{background:radial-gradient(120% 100% at 50% 48%,rgba(14,14,14,.18) 0%,rgba(14,14,14,.5) 100%)}
.cover.is-plate .cv-mark{transition:opacity .4s ease}
.card:hover .cover .cv-bg{transform:scale(1.035)}
.cov-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%,rgba(14,14,14,.22) 0%,rgba(14,14,14,.56) 100%)}
.cov-scrim.is-soft{background:linear-gradient(to top,rgba(16,16,16,.42) 0%,rgba(16,16,16,.06) 46%,rgba(16,16,16,0) 72%)}
.cv-mark{position:absolute;inset:0;display:grid;place-items:center;padding:30px;pointer-events:none}
.cv-mark .cv-logo{width:min(58%,300px);height:auto;max-height:30%;object-fit:contain;
  filter:drop-shadow(0 2px 16px rgba(10,10,10,.62));transition:none}
.cv-mark .cv-word{font-family:'Cormorant',serif;font-weight:600;
  font-size:clamp(22px,3.1vw,34px);line-height:1.04;text-align:center;color:var(--bone);
  max-width:72%;letter-spacing:.005em;text-shadow:0 2px 20px rgba(10,10,10,.55)}
.cv-mark.is-big{padding:52px}
.cv-mark.is-big .cv-logo{width:min(44%,340px);max-height:24%}
.cv-mark.is-big .cv-word{font-size:clamp(26px,3.4vw,44px);max-width:62%}
.card:hover .cv-mark .cv-logo{opacity:.94}

.card .c-title{font-family:'Cormorant',serif;font-weight:600;font-size:23px;line-height:1.08;margin-top:13px}
.card .c-meta{margin-top:3px;font-size:12.5px;color:var(--ink);opacity:.72}

@media (max-width:900px){
  .cv-mark{padding:20px}
  .cv-mark .cv-logo{width:min(66%,240px);max-height:32%}
  .card .c-title{font-size:20px}
}


/* ============ links · where the work actually ran ============ */
.published{margin-top:8px}
.published:empty{display:none}
.pub-head{font-family:'Cormorant',serif;font-weight:600;font-size:26px;line-height:1;margin-bottom:14px}
.g-links{display:grid;gap:0;border-top:1px solid rgba(20,20,20,.12)}
.lk{display:grid;grid-template-columns:96px 1fr auto 22px;gap:18px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid rgba(20,20,20,.09);text-decoration:none;color:var(--carbon);
  transition:background .18s ease}
.lk > *{transition:transform .32s cubic-bezier(.16,1,.3,1)}
.lk:hover{background:rgba(20,20,20,.035)}
.lk:hover > *{transform:translateX(8px)}
.lk-p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan);letter-spacing:.04em;text-transform:uppercase}
.lk-l{font-size:15px;line-height:1.4}
.lk-n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.lk-a{font-size:13px;color:var(--ink);text-align:right}
.lk:hover .lk-a{color:var(--cyan)}
@media (max-width:900px){
  .lk{grid-template-columns:1fr 22px;gap:3px 12px;align-items:start}
  .lk-p{grid-column:1/-1}
  .lk-l{grid-column:1;grid-row:2}
  .lk-a{grid-column:2;grid-row:2;text-align:right}
  .lk-n{grid-column:1/-1;grid-row:3}
}


/* ============ posts · the piece as it ran, linking to the post ============ */
.gallery .g-posts{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(var(--min,210px),1fr))}
.gallery .g-posts.r9x16{--min:178px}
.gallery .g-posts.r4x5{--min:200px}
.gallery .pst{display:block;text-decoration:none;color:var(--carbon)}
.gallery .pst-media{position:relative;display:block;border-radius:2px;overflow:hidden;background:var(--carbon)}
.gallery .g-posts.r1x1 .pst-media img{aspect-ratio:1/1}
.gallery .g-posts.r4x5 .pst-media img{aspect-ratio:4/5}
.gallery .g-posts.r9x16 .pst-media img{aspect-ratio:9/16}
.gallery .pst-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.gallery .pst:hover .pst-media img{transform:scale(1.04);opacity:.9}
.gallery .pst-go{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;color:var(--bone);
  background:rgba(20,20,20,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease}
.gallery .pst:hover .pst-go{opacity:1}
.gallery .pst-meta{display:block;margin-top:10px}
.gallery .pst-p{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:var(--cyan);letter-spacing:.05em;text-transform:uppercase}
.gallery .pst-l{display:block;font-size:14px;line-height:1.35;margin-top:3px}
.gallery .pst-n{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink);margin-top:2px}
@media (max-width:760px){ .gallery .g-posts{--min:140px;gap:14px} }


/* ============ clients · the roster inside a case ============ */
.gallery .g-clients{border-top:1px solid rgba(20,20,20,.12)}
.gallery .cl-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,230px);
  gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(20,20,20,.08)}
.gallery .cl-n{font-family:'Cormorant',serif;font-weight:600;font-size:21px;line-height:1.1}
.gallery .cl-d{font-size:14px;line-height:1.5;color:var(--ink)}
.gallery .cl-m{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan);
  letter-spacing:.02em;text-align:right;overflow-wrap:anywhere;line-height:1.5}
@media (max-width:900px){
  .gallery .cl-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .gallery .cl-m{text-align:left}
}

/* ============ motion ============ */

/* Blocks rise into place as they enter the viewport. Applied by JS so the page
   still reads with scripting off: without .rv-on nothing is hidden until observed. */
.rv{opacity:0;transform:translateY(14px)}
.rv.rv-in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}

/* the Work grid staggers, so the page assembles instead of appearing */
.card.rv{transition-delay:0s}

/* switching views cross-fades instead of cutting */
.view.active{animation:viewIn .5s cubic-bezier(.22,.7,.24,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* images settle in rather than popping. Opt-in by design: only an image JS has
   confirmed is still loading gets hidden, so nothing can stay invisible. */
img.fade-in{opacity:0}
img.fade-in.is-loaded{opacity:1;transition:opacity .6s ease}

/* the data block holds while the gallery scrolls past it */
@media (min-width:901px){
  .ficha{position:sticky;top:88px}
}

/* how far through the case you are */
#caseProgress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;
  background:transparent;pointer-events:none;opacity:0;transition:opacity .3s ease}
#caseProgress.on{opacity:1}
#caseProgress span{display:block;height:100%;width:100%;background:var(--cyan);
  transform-origin:left;transform:scaleX(0);will-change:transform}

/* the nav lightens once you leave the top */
header.nav{transition:box-shadow .3s ease,background .3s ease}
header.nav.is-scrolled{box-shadow:0 1px 0 rgba(20,20,20,.06),0 8px 30px rgba(20,20,20,.05)}

/* caption and title micro-motion */
.card .cov-title{transition:transform .5s cubic-bezier(.22,.7,.24,1)}
.card:hover .cov-title{transform:translateY(-3px)}
.next{transition:transform .4s cubic-bezier(.22,.7,.24,1)}
.next:hover{transform:translateX(6px)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv.rv-in{opacity:1;transform:none;transition:none}
  .view.active{animation:none}
  img.fade-in,img.fade-in.is-loaded{opacity:1;transition:none}
  .card:hover .cov-title,.next:hover{transform:none}
  #caseProgress span{transition:none}
}


/* ============ site · a website shown as a scroll, not a screenshot ============ */
.gallery .g-site{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:start}
.gallery .g-site.no-phone{grid-template-columns:1fr}
.gallery .st-desk{border:1px solid rgba(20,20,20,.14);border-radius:7px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(20,20,20,.10)}
.gallery .st-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EFEAE0;
  border-bottom:1px solid rgba(20,20,20,.10)}
.gallery .st-dot{width:9px;height:9px;border-radius:50%;background:rgba(20,20,20,.18)}
.gallery .st-url{margin-left:12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--cyan);letter-spacing:.02em;border-bottom:1px solid transparent}
.gallery .st-url:hover{border-bottom-color:var(--cyan)}
.gallery .st-desk .st-scroll{height:min(66vh,560px)}
.gallery .st-phone{border:9px solid var(--carbon);border-radius:30px;overflow:hidden;background:var(--carbon);
  box-shadow:0 18px 40px rgba(20,20,20,.16)}
.gallery .st-phone .st-scroll{height:min(66vh,560px);border-radius:22px}
.gallery .st-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scroll-behavior:auto;background:#fff;cursor:ns-resize}
.gallery .st-scroll::-webkit-scrollbar{width:5px}
.gallery .st-scroll::-webkit-scrollbar-thumb{background:rgba(20,20,20,.2);border-radius:3px}
.gallery .st-scroll img{width:100%;height:auto;display:block}
@media (max-width:760px){
  .gallery .g-site{grid-template-columns:1fr;gap:18px}
  .gallery .st-phone{max-width:230px;margin:0 auto}
  .gallery .st-desk .st-scroll,.gallery .st-phone .st-scroll{height:52vh}
}


/* ============ home · the arc ============ */
.arc{padding:8px 0 26px}
.arc-w{font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:rgba(245,241,232,.55);position:relative;transition:color .4s ease}
.arc-w::after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:1px;
  background:var(--bone);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.7,.24,1)}
.arc-w.is-on{color:var(--bone)}
.arc-w.is-on::after{transform:scaleX(1)}

.hero-foot{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(245,241,232,.18);padding-top:12px}

/* the nav sits over the image until you scroll */
header.nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease,box-shadow .35s ease}
header.nav .brand,header.nav .nav-links a{color:var(--bone);transition:color .35s ease}
header.nav.is-scrolled{background:var(--bone-dim);backdrop-filter:saturate(120%) blur(8px);
  border-bottom-color:var(--line)}
header.nav.is-scrolled .brand,header.nav.is-scrolled .nav-links a{color:var(--carbon)}
header.nav.is-scrolled .nav-links a:hover,
header.nav.is-scrolled .nav-links a[aria-current="page"]{border-bottom-color:var(--carbon)}
header.nav .nav-links a:hover,header.nav .nav-links a[aria-current="page"]{border-bottom-color:var(--bone)}
/* every other view starts under the nav, so it needs the solid treatment */
body.not-home header.nav{background:var(--bone-dim);backdrop-filter:saturate(120%) blur(8px);
  border-bottom-color:var(--line)}
body.not-home header.nav .brand,body.not-home header.nav .nav-links a{color:var(--carbon)}

.index{padding-top:64px}

@media (max-width:760px){
  .hero{height:88svh}
  .arc-line{max-width:none;margin-bottom:20px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .hero-frames img,.hero-frames video{transition:opacity .25s ease;transform:none}
}


/* the hero runs under the nav, so the bar floats over the image */
body{--nav-h:58px}
#home .hero{margin-top:calc(-1 * var(--nav-h));height:100svh}
@media (max-width:760px){ #home .hero{height:92svh} }

.foot-talk a{border-bottom:1px solid var(--line)}
.foot-talk a:hover{border-bottom-color:var(--carbon)}


/* ============ hero · the work names itself ============ */
.hero-now{cursor:pointer;margin-bottom:26px;width:fit-content;max-width:100%}
.hero-disc{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,241,232,.7);margin-bottom:8px}
.hero-title{font-family:'Cormorant',serif;font-weight:600;color:var(--bone);
  font-size:clamp(40px,7vw,88px);line-height:.98;letter-spacing:-.01em;
  text-shadow:0 1px 34px rgba(20,20,20,.5);border-bottom:1px solid transparent;
  transition:border-color .35s ease}
.hero-now:hover .hero-title{border-bottom-color:rgba(245,241,232,.6)}
.hero-now.is-swap .hero-disc{animation:swapIn .55s cubic-bezier(.22,.7,.24,1) both}
.hero-now.is-swap .hero-title{animation:swapIn .55s cubic-bezier(.22,.7,.24,1) .06s both}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.arc-index{display:flex;flex-wrap:wrap;gap:20px}
.arc-w{background:none;border:0;padding:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,241,232,.45);position:relative;transition:color .35s ease}
.arc-w::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--bone);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.7,.24,1)}
.arc-w.is-on{color:var(--bone)}
.arc-w.is-on::after{transform:scaleX(1)}

@media (max-width:760px){
  .arc-index{gap:14px}
  .arc-w{font-size:10px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .hero-now.is-swap .hero-disc,.hero-now.is-swap .hero-title{animation:none}
}

/* ============ hero · structure (restored) ============ */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--carbon);min-height:560px}
.hero-frames{position:absolute;inset:0;overflow:hidden}
.hero-frames img,.hero-frames video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;
  transform:scale(1.06);transition:opacity 1.1s ease,transform 7s cubic-bezier(.22,.7,.24,1)}
.hero-frames img.is-on,.hero-frames video.is-on{opacity:1;transform:scale(1)}
/* film already moves, so it does not get the slow push in */
.hero-frames video{transform:none;transition:opacity 1.1s ease}
.hero-frames video.is-on{transform:none}
.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,20,20,.5) 0,rgba(20,20,20,0) 150px),
    linear-gradient(to top,rgba(20,20,20,.84) 0%,rgba(20,20,20,.44) 40%,rgba(20,20,20,.06) 74%,rgba(20,20,20,.30) 100%)}
.hero-copy{position:relative;z-index:2;width:100%;padding-bottom:38px}
@media(prefers-reduced-motion:reduce){
  .hero-frames img,.hero-frames video{transition:opacity .25s ease;transform:none}
}


/* ten seconds: the title and the availability are facts, so they sit in the furniture */
.nav .brand-role{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.62;margin-top:3px}
.nav .nav-avail{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.75;display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.nav .nav-avail::before{content:'';width:6px;height:6px;border-radius:50%;background:#3B7F5A}
@media (max-width:640px){ .nav .nav-avail{display:none} }


/* ============ system-window furniture ============
   Taken from the JPMorgan campaign's own vocabulary: a title bar, a hard border,
   a block cursor. Her palette, not DOS blue, so it frames the work instead of
   dressing up as something else. */
.ficha .fw{border:1px solid var(--carbon);border-radius:2px;overflow:hidden;background:rgba(20,20,20,.02)}
.ficha .fw-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 9px;background:var(--carbon);color:var(--bone);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.ficha .fw-box{width:9px;height:9px;border:1px solid rgba(245,241,232,.55);flex:0 0 auto}
.ficha .fw-body{padding:2px 10px 7px}
.ficha .fw-body .row:first-child{border-top:none}

.cursor::after{content:'\25AE';margin-left:.4em;color:var(--cyan);
  animation:blinkcur 1.1s steps(1,end) infinite}
@keyframes blinkcur{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .cursor::after{animation:none} }


/* every card on Work is a window in a desktop: a numbered bar, then the frame */
.card .cov-bar{display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px;background:var(--carbon);color:var(--bone);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;
  border-radius:2px 2px 0 0;opacity:.88;transition:opacity .25s ease}
.card:hover .cov-bar{opacity:1}
.card .cov-box{width:7px;height:7px;border:1px solid rgba(245,241,232,.55)}
.card .cover{border-radius:0 0 2px 2px}

/* the caret in front of a caption, so the labels read as output */
.gallery .gcap .cv{color:var(--cyan);margin-right:.5em;opacity:.8}

.filters .f-n{font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:.55;margin-left:.35em;letter-spacing:.08em}
.filters button[aria-pressed="true"] .f-n{opacity:.8}


/* ============ editorial rhythm ============
   The gallery was one column at one width for every block, which read as a list.
   A block can now break out or pull in, so the page has a measure that changes. */
.gallery .g-w{display:contents}
.gallery .g-w.w-bleed{display:block;--fw:calc(100vw - var(--sbw,0px));width:var(--fw);
  margin-left:calc(50% - var(--fw) / 2);margin-right:calc(50% - var(--fw) / 2)}
.gallery .g-w.w-bleed .g-full img,.gallery .g-w.w-bleed .g-loop{max-height:none;border-radius:0}
.gallery .g-w.w-bleed .gcap{padding-left:max(24px,calc(50vw - 50%));padding-right:24px}
.gallery .g-w.w-narrow{display:block;width:min(62%,620px);margin-right:auto}
.gallery .g-w.w-narrow.w-right{margin-left:auto;margin-right:0}
@media (max-width:760px){
  .gallery .g-w.w-narrow{width:100%}
  .gallery .g-w.w-bleed .gcap{padding-left:16px;padding-right:16px}
}

/* a section breathes more than the blocks inside it */
.gallery{row-gap:22px}
.gallery .g-w.w-bleed{margin-top:26px;margin-bottom:26px}


/* ============ the client strip, moving ============
   A wall of mismatched client logos is a worse object than one line of names set
   properly. This runs, which gives the page the motion it was missing, and it
   carries the count, which is the actual argument. */
.logowall .lw-n{font-family:'IBM Plex Mono',monospace;font-size:10px;opacity:.5;margin-left:.4em}
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:18px 0;margin:4px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker .tk-track{display:flex;width:max-content;animation:tk 64s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
.ticker .tk-set{font-family:'Cormorant',serif;font-size:30px;line-height:1.1;
  white-space:nowrap;padding-right:28px;color:var(--carbon)}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker .tk-track{animation:none}
  .ticker{-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
}
@media (max-width:640px){ .ticker .tk-set{font-size:21px} }

/* the portrait was taking half the page */
.about-top{grid-template-columns:240px 1fr;gap:46px}
.about-portrait img{max-width:240px}
@media (max-width:760px){ .about-top{grid-template-columns:1fr} .about-portrait img{max-width:180px} }


/* ============ brand system, drawn not screenshotted ============ */
.gallery .g-system{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff}
.gallery .sy-logo{padding:0;border-bottom:1px solid var(--line)}
.gallery .sy-logo img{width:100%;display:block}
.gallery .sy-block{padding:26px 28px;border-bottom:1px solid var(--line)}
.gallery .sy-block:last-child{border-bottom:none}
.gallery .sy-lead{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);opacity:.6;margin-bottom:16px}
.gallery .sy-tys{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
.gallery .sy-face{font-size:30px;line-height:1.15;color:var(--carbon)}
.gallery .sy-note{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink);opacity:.72;margin-top:6px}
.gallery .sy-sws{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px}
.gallery .sy-sw{display:flex;flex-direction:column;gap:7px}
.gallery .sy-chip{display:block;height:68px;border-radius:2px;border:1px solid rgba(20,20,20,.1)}
.gallery .sy-hex{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--carbon)}
.gallery .sy-nm{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink);opacity:.62;margin-top:-4px}
@media (max-width:640px){ .gallery .sy-block{padding:20px 18px} .gallery .sy-face{font-size:24px} }

/* the RAN AT row: outbound links as metadata, not as a section */
.ficha .v a{text-decoration:none}
.ficha .fv-sep{opacity:.35;margin:0 5px}


/* ============ brand architecture, drawn ============ */
.gallery .g-arch{background:var(--carbon);border-radius:2px;padding:46px 30px 40px;
  display:flex;flex-direction:column;align-items:center;gap:0}
.gallery .ar-tier{display:flex;justify-content:center;width:100%}
.gallery .ar-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.gallery .ar-col{display:flex;flex-direction:column;align-items:center}
.gallery .ar-stem{width:1px;height:34px;background:rgba(245,241,232,.28)}
.gallery .ar-drop{width:1px;height:26px;background:rgba(245,241,232,.28)}
.gallery .ar-drop-sm{height:18px}
.gallery .ar-rule{width:100%;height:1px;background:rgba(245,241,232,.16);margin:40px 0 34px}
.gallery .ar-node{width:100%;max-width:280px;padding:20px 18px;border:1px solid rgba(245,241,232,.18);
  border-radius:2px;text-align:center;transition:border-color .25s ease,background .25s ease;outline:none}
.gallery .ar-node:hover,.gallery .ar-node:focus-visible{border-color:rgba(245,241,232,.55);background:rgba(245,241,232,.05)}
.gallery .ar-node.is-holding{max-width:340px;padding:26px 24px}
.gallery .ar-node.is-child{max-width:210px;padding:14px 12px;border-style:dashed}
.gallery .ar-node.is-studio{max-width:340px}
.gallery .ar-logo{display:flex;align-items:center;justify-content:center;height:46px;margin-bottom:14px}
.gallery .ar-node.is-holding .ar-logo{height:58px}
.gallery .ar-node.is-child .ar-logo{height:34px}
.gallery .ar-logo img{max-height:100%;max-width:100%;width:auto;display:block}
.gallery .ar-name{font-family:'Cormorant',serif;font-size:17px;color:var(--bone);line-height:1.2}
.gallery .ar-place{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,241,232,.5);margin-top:5px}
.gallery .ar-role{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;
  color:rgba(245,241,232,.0);margin-top:10px;transition:color .25s ease}
.gallery .ar-node:hover .ar-role,.gallery .ar-node:focus-visible .ar-role{color:var(--cyan)}
@media (max-width:760px){
  .gallery .ar-row{grid-template-columns:1fr;gap:0}
  .gallery .ar-col{margin-bottom:4px}
  .gallery .ar-role{color:rgba(245,241,232,.55)}
  .gallery .g-arch{padding:30px 16px}
}
@media (prefers-reduced-motion:reduce){ .gallery .ar-role{transition:none} }


/* ============ logo wall, drawn from the SVGs ============ */
.gallery .g-lw{border:1px solid var(--line);border-radius:2px;overflow:hidden}
.gallery .lw-row{border-bottom:1px solid var(--line)}
.gallery .lw-row:last-child{border-bottom:none}
.gallery .lw-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);opacity:.6;padding:12px 16px 0}
.gallery .lw-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:12px}
.gallery .lw-cell{display:flex;align-items:center;justify-content:center;height:112px;padding:0 20px}
.gallery .lw-cell.is-light{background:#F3F1ED}
.gallery .lw-cell.is-dark{background:var(--carbon)}
.gallery .lw-cell.is-color{background:#fff}
.gallery .lw-cell img{max-width:78%;max-height:42px;width:auto;display:block}
@media (max-width:640px){
  .gallery .lw-cells{grid-template-columns:1fr}
  .gallery .lw-cell{height:88px}
}


/* ============ principles, set as type ============ */
.gallery .g-tenets{border-top:1px solid var(--carbon)}
.gallery .tn-item{display:grid;grid-template-columns:52px minmax(170px,230px) 1fr;gap:18px 28px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.gallery .tn-b{display:contents}
.gallery .tn-n{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--cyan);padding-top:7px}
.gallery .tn-h{font-family:'Cormorant',serif;font-size:32px;line-height:1.02;color:var(--carbon);margin:0}
.gallery .tn-b p{font-size:14px;line-height:1.62;color:var(--ink);max-width:68ch;margin:0;padding-top:4px}
@media (max-width:640px){
  .gallery .tn-item{grid-template-columns:34px 1fr;gap:10px 12px}
  .gallery .tn-h{grid-column:2}
  .gallery .tn-b p{grid-column:2}
  .gallery .tn-h{font-size:24px}
}
/* the Baltimore mark is nearly square, so it needs more room than a wordmark */
.gallery .ar-node.is-child .ar-logo{height:104px}

/* ---- palette: core + one signature per title ---- */
.gallery .g-pal{border:1px solid var(--line);border-radius:2px}
.gallery .pl-core{padding:20px 18px;border-bottom:1px solid var(--line)}
.gallery .pl-sigs{padding:20px 18px}
.gallery .pl-lbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;margin-bottom:14px}
.gallery .pl-chips{display:flex;flex-wrap:wrap;gap:10px}
.gallery .pl-chip{flex:0 1 150px;min-width:112px;max-width:170px}
.gallery .pl-sw{height:64px;border-radius:2px}
.gallery .pl-meta{display:flex;flex-direction:column;gap:1px;margin-top:7px}
.gallery .pl-name{font-size:11.5px;line-height:1.25}
.gallery .pl-hex{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;opacity:.5}
.gallery .pl-rows{display:flex;flex-direction:column;gap:16px}
.gallery .pl-row{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start}
.gallery .pl-brand{font-size:12px;line-height:1.3;padding-top:2px}
@media(max-width:700px){
  .gallery .pl-row{grid-template-columns:1fr;gap:8px}
  .gallery .pl-sw{height:52px}
}

/* ---- products: the three newsletter briefs ---- */
.gallery .g-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
.gallery .pr-card{background:#F3F1ED;padding:26px 20px 22px;display:flex;flex-direction:column;gap:14px}
.gallery .pr-mark{height:26px;display:flex;align-items:center}
.gallery .pr-mark img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.gallery .pr-line{font-size:14px;line-height:1.35;color:#111}
.gallery .pr-brief{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;
  border-top:1px solid rgba(0,0,0,.12);padding-top:12px;margin-top:auto}
.gallery .pr-brief dt{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#111;opacity:.45;padding-top:2px}
.gallery .pr-brief dd{margin:0;font-size:11.5px;line-height:1.4;color:#111;opacity:.78}
@media(max-width:820px){.gallery .g-prod{grid-template-columns:1fr}}

/* ================= CASE HERO =================
   Title on the left, cover bleeding off the right edge. The case opens on the work
   instead of on a metadata table, and the empty right half of the old header is gone. */
.case-hero{border-bottom:1px solid var(--line)}
.case-hero .ch-in{display:grid;grid-template-columns:minmax(320px,38%) 1fr;align-items:stretch;
  min-height:min(74vh,660px)}
.case-hero .ch-text{display:flex;flex-direction:column;justify-content:flex-end;
  padding:46px 48px 44px max(28px,calc((100vw - 1180px)/2));gap:0}
.case-hero .case-back{align-self:flex-start;margin:0 0 auto;padding:0;background:none;border:none;
  text-decoration:none;display:inline-block;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--ink);
  opacity:.6;cursor:pointer}
.case-hero .case-back:hover{opacity:1}
.case-hero .ch-disc{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;margin-bottom:14px}
.case-hero .ch-dot{margin:0 8px;opacity:.5}
.case-hero h1{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(38px,5.2vw,70px);
  line-height:.98;margin:0 0 10px;letter-spacing:-.01em}
.case-hero .ch-sub{font-family:'Cormorant',serif;font-size:clamp(18px,2vw,25px);line-height:1.25;
  color:var(--ink);opacity:.82;max-width:26ch;margin-bottom:22px}
.case-hero .ch-role{display:flex;flex-wrap:wrap;gap:6px}
.case-hero .ch-role span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:4px 10px;opacity:.75}
.case-hero .ch-img{position:relative;overflow:hidden;background:var(--line)}
.case-hero .ch-img .cv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* credits move to a quiet right rail instead of leading the page */
.case .case-top .ficha{font-size:11.5px;line-height:1.75}
.case .case-top .ficha .row{grid-template-columns:76px 1fr;gap:7px}

/* ================= RESULTS BAND ================= */
.case-stat{margin:46px 0 4px;border-top:1px solid var(--carbon);border-bottom:1px solid var(--line)}
.case-stat[hidden]{display:none}
.case-stat .cs-in{display:flex;flex-wrap:wrap;gap:0}
.case-stat .cs-i{flex:1 1 200px;padding:22px 24px 20px 0;border-right:1px solid var(--line)}
.case-stat .cs-i:last-child{border-right:none}
.case-stat .cs-i + .cs-i{padding-left:24px}
.case-stat .cs-n{font-family:'Cormorant',serif;font-size:clamp(30px,4vw,48px);line-height:1;
  color:var(--carbon);letter-spacing:-.01em}
.case-stat .cs-l{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;margin-top:9px}

@media (max-width:860px){
  .case-hero .ch-in{grid-template-columns:1fr;min-height:0}
  .case-hero .ch-text{order:2;padding:22px 20px 30px}
  .case-hero .case-back{margin:0 0 16px}
  .case-hero .ch-img{order:1;height:54vh;min-height:300px}
  .case-stat .cs-i{flex:1 1 140px;padding:16px 16px 14px 0}
  .case-stat .cs-i + .cs-i{padding-left:16px}
}

/* ================= CREDITS, under the work =================
   A colophon on an inked plate, not a data table: the client's mark on the left,
   the case named once, and the facts set as a run of label/value pairs. */
.case .credits{margin-top:68px;background:var(--carbon);color:var(--bone);
  border-radius:3px;padding:34px 36px 32px}
.case .cr-top{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(245,241,232,.16)}
.case .cr-mark{display:flex;align-items:center;min-width:120px;max-width:210px}
.case .cr-mark img{width:100%;height:auto;max-height:46px;object-fit:contain;object-position:left center}
.case .cr-mark span{font-family:'Cormorant',serif;font-weight:600;font-size:26px;line-height:1.05;
  color:var(--bone)}
.case .cr-lead{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.45;margin-bottom:8px}
.case .cr-title{font-family:'Cormorant',serif;font-size:30px;line-height:1.02;color:var(--bone)}
.case .cr-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.07em;
  opacity:.55;margin-top:7px}
.case .cr-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:24px 34px;margin:0}
.case .cr-i dt{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.42;margin-bottom:7px}
.case .cr-i dd{margin:0;font-size:13px;line-height:1.5;color:var(--bone);opacity:.92}
.case .cr-i dd a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(245,241,232,.4)}
.case .cr-i dd a:hover{border-bottom-color:var(--bone);opacity:1}
.case .cr-i dd .fv-sep{opacity:.35;margin:0 6px}
@media (max-width:640px){
  .case .credits{margin-top:44px;padding:24px 20px}
  .case .cr-top{grid-template-columns:1fr;gap:16px;align-items:start}
  .case .cr-mark{max-width:160px}
  .case .cr-title{font-size:24px}
  .case .cr-list{grid-template-columns:1fr 1fr;gap:18px 20px}
}
}

/* ---- published grid: cover as it ran, whole card clicks through ---- */
.gallery .g-posts{gap:18px}
.gallery .pst-media{box-shadow:0 1px 0 rgba(20,20,20,.06)}
.gallery .pst-tag{position:absolute;left:10px;top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(20,20,20,.55);backdrop-filter:blur(6px);padding:4px 7px;border-radius:2px;
  opacity:0;transition:opacity .22s ease}
.gallery .pst:hover .pst-tag{opacity:1}
.gallery .pst-l{font-size:13px;line-height:1.35;margin-top:8px}
.gallery .pst-n{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.45;margin-top:3px}
@media (max-width:760px){ .gallery .g-posts{gap:12px} }

/* ---- vertical cut on a stage, so a 9:16 frame never leaves half a page empty ---- */
.gallery .g-vstage{display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:38px;align-items:end;
  padding:34px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gallery .g-vstage .vs-media{max-width:380px;width:100%}
.gallery .g-vstage .vs-side{padding-bottom:6px}
.gallery .vs-cap{font-family:'Cormorant',serif;font-size:clamp(22px,2.6vw,34px);line-height:1.15;
  color:var(--carbon);max-width:18ch}
.gallery .vs-note{font-size:14px;line-height:1.6;color:var(--ink);max-width:46ch;margin:14px 0 0}
.gallery .vs-mark{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  opacity:.4;margin-top:18px}
@media (max-width:760px){
  .gallery .g-vstage{grid-template-columns:1fr;gap:18px;align-items:start}
  .gallery .g-vstage .vs-media{max-width:none}
}

/* ---- the way out of the home index ----
   A small pill under the list, not another row of it: three covers from the rest of
   the work, the words, an arrow. On hover the covers fan out and the pill fills. */
.index .index-all{display:inline-flex;align-items:center;gap:14px;margin-top:40px;
  padding:7px 20px 7px 7px;border:1px solid rgba(20,20,20,.22);border-radius:999px;
  color:var(--carbon);text-decoration:none;font-family:'Inter',sans-serif;font-size:15px;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.index .ia-stack{display:flex}
.index .ia-stack img{width:38px;height:38px;object-fit:cover;border-radius:999px;border:2px solid var(--bone);
  margin-left:-12px;transition:margin .45s cubic-bezier(.16,1,.3,1),border-color .35s ease}
.index .ia-stack img:first-child{margin-left:0}
.index .ia-arrow{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.index .index-all:hover,.index .index-all:focus-visible{background:var(--carbon);color:var(--bone);border-color:var(--carbon)}
.index .index-all:hover .ia-stack img{margin-left:-6px;border-color:var(--carbon)}
.index .index-all:hover .ia-stack img:first-child{margin-left:0}
.index .index-all:hover .ia-arrow{transform:translateX(4px)}

/* ---- series: the front door of a documentary series is where you watch it ---- */
.gallery .g-series{display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch;
  text-decoration:none;color:var(--bone);background:var(--carbon);border-radius:3px;overflow:hidden}
.gallery .g-series .sr-media{position:relative;overflow:hidden;aspect-ratio:16/9}
.gallery .g-series .sr-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery .g-series:hover .sr-media img{transform:scale(1.04)}
.gallery .g-series .sr-body{display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:34px 36px}
.gallery .sr-lead{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.5}
.gallery .sr-t{font-family:'Cormorant',serif;font-size:clamp(26px,3vw,40px);line-height:1.04}
.gallery .sr-n{font-size:13.5px;line-height:1.55;opacity:.75;max-width:34ch}
.gallery .sr-go{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  margin-top:8px;border-bottom:1px solid rgba(245,241,232,.35);align-self:flex-start;padding-bottom:3px}
.gallery .g-series:hover .sr-go{border-bottom-color:var(--bone)}
@media (max-width:760px){
  .gallery .g-series{grid-template-columns:1fr}
  .gallery .g-series .sr-body{padding:22px 20px 24px}
}


/* ================= MOTION, second pass =================
   Smooth scroll, one curtain, one mask. Everything below is switched off under
   reduced motion, and nothing is hidden unless a script has already marked it. */

/* lenis base, minus its iframe rule: that rule kills clicks on embedded players */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---- the curtain ---- */
#curtain{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden;
  background:var(--carbon);color:var(--bone);transform:translate3d(0,100%,0);
  display:grid;place-items:center;will-change:transform}
#curtain.on{visibility:visible;pointer-events:auto}
#curtain .ct-in{text-align:center;padding:0 24px;max-width:min(92vw,1100px)}
#curtain .ct-k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;opacity:.55;margin-bottom:18px}
#curtain .ct-t{font-family:'Cormorant',serif;font-weight:500;line-height:.96;
  font-size:clamp(44px,8.4vw,120px);letter-spacing:-.015em;text-wrap:balance}

/* ---- pictures unmask from the bottom edge ---- */
.rv-clip{clip-path:inset(100% 0 0 0)}
.rv-clip.rv-in{clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.rv-clip.rv-done{clip-path:none}
.rv-clip img,.rv-clip video{scale:1.07;transition:scale 1.7s cubic-bezier(.16,1,.3,1)}
.rv-clip.rv-in img,.rv-clip.rv-in video{scale:1}
/* inside a post grid the tiles open in sequence, left to right */
.g-posts .pst.rv-clip.rv-in{transition-delay:calc(var(--i,0) * 90ms)}

/* the work grid: no wipe, no cascade. Each card simply fades up to full as it arrives,
   all at once, so the grid reads as one page instead of thirty-two entrances. */
.card.rv{opacity:1;transform:none}
.card.rv .cover{clip-path:none;opacity:0}
.card.rv .c-title,.card.rv .c-meta,.card.rv .cov-bar{opacity:0}
.card.rv.rv-in .cover,.card.rv.rv-in .c-title,.card.rv.rv-in .c-meta,.card.rv.rv-in .cov-bar{opacity:1;transform:none;
  transition:opacity .5s ease;transition-delay:0s}

/* the case hero settles as the curtain lifts off it */
#case.active .case-hero .ch-img .cv-bg{animation:heroSettle 1.8s cubic-bezier(.16,1,.3,1) both}
#case.active .case-hero .ch-text > *{animation:heroText .9s cubic-bezier(.16,1,.3,1) both}
#case.active .case-hero .ch-text > :nth-child(2){animation-delay:.08s}
#case.active .case-hero .ch-text > :nth-child(3){animation-delay:.14s}
#case.active .case-hero .ch-text > :nth-child(4){animation-delay:.2s}
#case.active .case-hero .ch-text > :nth-child(5){animation-delay:.26s}
@keyframes heroSettle{from{scale:1.09}to{scale:1}}
@keyframes heroText{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #curtain{display:none}
  .rv-clip,.rv-clip.rv-in{clip-path:none;transition:none}
  .rv-clip img,.rv-clip video{scale:1;transition:none}
  .card.rv .cover,.card.rv.rv-in .cover{clip-path:none;opacity:1;transition:none}
  .card.rv .c-title,.card.rv .c-meta,.card.rv .cov-bar{opacity:1;transform:none;transition:none}
  #case.active .case-hero .ch-img .cv-bg,#case.active .case-hero .ch-text > *{animation:none}
}

/* ================= WORK GRID, editorial rhythm =================
   Twelve columns. A wide landscape sits against a tall portrait, three smaller pieces
   follow with the middle one dropped, and the pair comes back mirrored. Generous rows,
   tight columns, so each piece reads as its own object and the wall still holds. */
@media (min-width:861px){
  .grid{grid-template-columns:repeat(12,1fr);gap:88px 30px;padding:52px 0 40px;align-items:start}
  .card.w7{grid-column:span 7}
  .card.w5{grid-column:span 5}
  .card.w4{grid-column:span 4}
  .card .cover{aspect-ratio:4/3}
  .card.r-p .cover{aspect-ratio:4/5}
  .card.drop{margin-top:clamp(56px,9vw,128px)}
  .card.w7 .c-title{font-size:clamp(26px,2.4vw,34px)}
  .card.w5 .c-title{font-size:clamp(24px,2vw,29px)}
  /* the portrait in a wide pair sits low, so the two never read as one block */
  .card.w5.r-p{margin-top:clamp(40px,6vw,92px)}
  .card.w7 + .card.w5.r-p{margin-top:clamp(40px,6vw,92px)}
}
@media (max-width:860px){
  .card .cover{aspect-ratio:4/3}
  .card.drop{margin-top:0}
}

.nw{white-space:nowrap}

/* ---- Glen's own mark: the hand-lettered name and the sparkle ----
   Both are alpha masks painted with currentColor, so the mark follows the header:
   bone over the hero photograph, carbon on the light pages. The sparkle keeps its
   cianotipo blue from the brand guide. */
.brand{display:flex;align-items:center;gap:18px}
.brand-mark{display:flex;align-items:flex-start;gap:4px}
.brand-name{display:block;width:140px;height:24px;background:currentColor;
  -webkit-mask:url(images/gl_name_line.png) center/contain no-repeat;mask:url(images/gl_name_line.png) center/contain no-repeat}
.brand-spark{display:block;width:13px;height:19px;background:#6880BF;margin-top:-8px;
  -webkit-mask:url(images/gl_spark.png) center/contain no-repeat;mask:url(images/gl_spark.png) center/contain no-repeat;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.brand:hover .brand-spark{transform:rotate(90deg) scale(1.15)}
.nav .brand .brand-role{margin-top:0;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:0;
  font-weight:400;text-transform:none;color:currentColor;opacity:.62;white-space:nowrap}
@media (max-width:640px){
  .brand-name{width:105px;height:18px}
  .brand-spark{width:11px;height:16px}
  .nav .brand .brand-role{display:none}
}
header.nav .nav-in{align-items:center}

/* ---- curtain, signed with the sparkle ----
   Four sparkles in the brand guide's colours burst in as the curtain covers the page.
   Going home, the curtain carries the hand-lettered name instead of a title. */
#curtain .ct-sp{position:absolute;display:block;background:#6880BF;opacity:0;
  -webkit-mask:url(images/gl_spark.png) center/contain no-repeat;mask:url(images/gl_spark.png) center/contain no-repeat}
#curtain .s1{width:46px;height:70px;left:14%;top:22%;background:#6880BF}
#curtain .s2{width:22px;height:34px;left:78%;top:18%;background:#F0D9B8}
#curtain .s3{width:30px;height:46px;left:82%;top:70%;background:#7B3856}
#curtain .s4{width:16px;height:24px;left:22%;top:74%;background:#2B5C8A}
#curtain.on .ct-sp{animation:ctSpark 1.1s cubic-bezier(.16,1,.3,1) both}
#curtain.on .s1{animation-delay:.18s}#curtain.on .s2{animation-delay:.26s}
#curtain.on .s3{animation-delay:.32s}#curtain.on .s4{animation-delay:.4s}
@keyframes ctSpark{0%{opacity:0;transform:scale(0) rotate(-120deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
#curtain .ct-logo{display:none;align-items:flex-start;justify-content:center;gap:12px;margin:0 auto 26px}
#curtain .ct-name{display:block;width:min(52vw,520px);aspect-ratio:700/470;background:var(--bone);
  -webkit-mask:url(images/gl_name.png) center/contain no-repeat;mask:url(images/gl_name.png) center/contain no-repeat}
#curtain .ct-mainsp{display:block;width:clamp(28px,4vw,52px);aspect-ratio:1220/1840;background:#6880BF;margin-top:-4px;
  -webkit-mask:url(images/gl_spark.png) center/contain no-repeat;mask:url(images/gl_spark.png) center/contain no-repeat}
#curtain.on .ct-mainsp{animation:ctSpark 1.2s .2s cubic-bezier(.16,1,.3,1) both}
#curtain.is-home .ct-logo{display:flex}
#curtain.is-home .ct-t{display:none}
#curtain.is-home .ct-k{margin:0;order:2}
@media (max-width:640px){
  #curtain .s1{width:30px;height:46px;left:8%}
  #curtain .ct-name{width:70vw}
}
@media (prefers-reduced-motion:reduce){#curtain.on .ct-sp,#curtain.on .ct-mainsp{animation:none;opacity:1}}
.case .cr-mark span{font-size:30px}

/* Covers keep their colour. The photograph is only nudged down, and a soft pool of
   shadow sits behind the mark itself, so the mark reads without greying the picture. */
.cover.is-plate .cv-bg,.ch-img.is-plate .cv-bg,
.cover.is-plate.is-clean .cv-bg,.ch-img.is-plate.is-clean .cv-bg{filter:saturate(1.06) brightness(.93) contrast(1.02)}
.is-clean .cov-scrim,.is-plate .cov-scrim{background:
  radial-gradient(42% 30% at 50% 50%,rgba(10,10,10,.42) 0%,rgba(10,10,10,0) 100%),
  linear-gradient(to bottom,rgba(10,10,10,.06),rgba(10,10,10,.14))}
.cv-mark .cv-logo{filter:drop-shadow(0 2px 22px rgba(0,0,0,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.35))}


/* a bleed is the window, not the window plus the scrollbar */
html,body{overflow-x:clip}

/* ---- footer · the address, three facts, her signature ----
   Carbon like the credits panel. Kept low: one line of address, one line of facts.
   The sparkle keeps turning, slowly, the one moving thing here. */
footer.ft{background:var(--carbon);color:var(--bone);border-top:0;margin-top:80px;padding:52px 0 22px}
.ft-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ft-mail{display:inline-flex;align-items:baseline;gap:.25em;max-width:100%;overflow-wrap:anywhere;
  font-family:'Cormorant',serif;font-weight:500;font-size:clamp(26px,3.4vw,44px);line-height:1.05;
  color:var(--bone);text-decoration:none;padding-bottom:.08em;
  background:linear-gradient(#6880BF,#6880BF) 0 100%/0 1px no-repeat;transition:background-size .7s cubic-bezier(.16,1,.3,1)}
.ft-mail:hover,.ft-mail:focus-visible{background-size:100% 1px}
.ft-go{font-family:'Inter',sans-serif;font-size:.42em;color:#6880BF;transform:translateY(-.7em);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ft-mail:hover .ft-go{transform:translate(.15em,-.9em)}
.ft-sign{display:flex;align-items:flex-start;gap:5px}
.ft-name{display:block;width:150px;aspect-ratio:1762/304;background:rgba(245,241,232,.8);
  -webkit-mask:url(images/gl_name_line.png) center/contain no-repeat;mask:url(images/gl_name_line.png) center/contain no-repeat}
.ft-spark{display:block;width:13px;height:19px;background:#6880BF;margin-top:-8px;
  -webkit-mask:url(images/gl_spark.png) center/contain no-repeat;mask:url(images/gl_spark.png) center/contain no-repeat;
  animation:ftSpark 8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ftSpark{0%,100%{transform:rotate(0) scale(1)}42%{transform:rotate(90deg) scale(1.14)}54%{transform:rotate(90deg) scale(.96)}}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:34px;
  padding-top:18px;border-top:1px solid rgba(245,241,232,.14)}
.ft-l{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(245,241,232,.48);margin-bottom:6px}
.ft-cols p{margin:0;font-size:14px;line-height:1.5;color:rgba(245,241,232,.86)}
.ft-links p{display:flex;gap:18px;flex-wrap:wrap}
.ft-links a{color:var(--bone);border-bottom:1px solid rgba(245,241,232,.3);transition:border-color .25s ease,color .25s ease}
.ft-links a:hover{color:#9DB0E0;border-bottom-color:#6880BF}
.ft-base{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:34px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:rgba(245,241,232,.45)}
.ft-up{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;transition:color .25s ease}
.ft-up:hover,.ft-up:focus-visible{color:var(--bone)}
@media (max-width:760px){
  footer.ft{padding-top:40px;margin-top:56px}
  .ft-sign{display:none}
  .ft-cols{grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
  .ft-links{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){ .ft-spark{animation:none} }

/* the link has to read as a link before the hover: platform and arrow stay on every post */
.gallery .pst-tag,.gallery .pst-go{opacity:1}
.gallery .pst-go{background:rgba(20,20,20,.6)}
.gallery .pst:hover .pst-go{background:var(--carbon)}

/* ---- placements with no picture: articles and newsletter issues, one column per outlet ---- */
.gallery .g-nl{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:36px}
.gallery .nl-h{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding-bottom:10px;border-bottom:1px solid rgba(20,20,20,.18)}
.gallery .nl-i{display:grid;grid-template-columns:50px 1fr 14px;gap:10px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid rgba(20,20,20,.08);color:var(--carbon);text-decoration:none;transition:color .25s ease}
.gallery .nl-d{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink);white-space:nowrap}
.gallery .nl-t{font-size:14px;line-height:1.35}
.gallery .nl-a{font-size:12px;color:var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1),color .25s ease}
.gallery .nl-i:hover{color:var(--cyan)}
.gallery .nl-i:hover .nl-a{color:var(--cyan);transform:translate(2px,-2px)}
@media (max-width:860px){ .gallery .g-nl{grid-template-columns:1fr;gap:28px} }

.gallery .pst-media video{width:100%;display:block;object-fit:cover}
.gallery .g-posts.r1x1 .pst-media video{aspect-ratio:1/1}
.gallery .g-posts.r9x16 .pst-media video{aspect-ratio:9/16}

/* headings that structure the page for readers and crawlers but have no visual slot */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- contrast floor · small mono labels were set at 42-48% opacity, under the 4.5:1 a
   label that small needs. Raised to the lowest value that passes on its ground. ---- */
.arc-w{color:rgba(245,241,232,.66)}
.gallery .pr-brief dt{opacity:.62}
.case .cr-lead,.case .cr-i dt{opacity:.62}
.case .cr-sub{opacity:.7}
.gallery .pst-n{opacity:.62}
.ft-l{color:rgba(245,241,232,.6)}
.ft-base{color:rgba(245,241,232,.58)}
.case .cr-i dt{font-size:9.5px}


/* ---- selected work on a phone: the band of the cover under each title ----
   Desktop keeps the text list and the floating peek; the band only exists here. */
.work-row .wr-yr{display:none}
.wr-strip{display:none}
@media (max-width:760px){
  .index .work-row{display:block;padding:30px 0 28px}
  .index .work-row .title{font-size:clamp(40px,11.5vw,72px);line-height:.94;letter-spacing:-.015em}
  .index .work-row .disc{display:block;margin-top:10px;padding:0}
  .index .work-row .wr-yr{display:inline;color:var(--ink)}
  .index .work-row .one{margin-top:8px;font-size:14px;line-height:1.45;max-width:36ch}
  .index .work-row .wr-main{display:contents}
  .index .work-row .title{order:0}
  .index .work-row{display:flex;flex-direction:column;align-items:stretch}
  .index .work-row .title{order:1}.index .work-row .disc{order:2}.index .work-row .one{order:3}.index .wr-strip{order:4}
  .index .wr-strip{display:block;position:relative;overflow:hidden;margin-top:20px;border-radius:2px;background:var(--carbon);
    height:clamp(170px,34vh,300px);clip-path:inset(50% 0 50% 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
  .index .work-row.is-in .wr-strip{clip-path:inset(0 0 0 0)}
  .index .wr-par{position:absolute;left:0;right:0;top:-14%;bottom:-14%;will-change:transform}
  .index .wr-par img{width:100%;height:100%;object-fit:cover;display:block}
  .index .work-row:hover .title{transform:none}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .index .wr-strip{clip-path:none;transition:none}
  .index .wr-par{transform:none!important}
}

/* ---- covers · one even veil, no pool behind the mark ----
   The radial shadow behind the logo showed as a dark disc on flat skies (Villaverde).
   The photograph now takes one even darkening, set per cover with `scrim` when a bright
   image needs more, and the mark carries a tight shadow of its own. Width comes from
   sizeMark() in app.js; these rules only release the old caps. */
.is-clean .cov-scrim,.is-plate .cov-scrim{background:rgba(10,10,10,var(--scrim,.16))}
.cv-mark .cv-logo,.cv-mark.is-big .cv-logo{max-width:none;max-height:none;width:30%;height:auto;transform:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)) drop-shadow(0 4px 16px rgba(0,0,0,.18))}
@media (max-width:600px){ .cv-mark .cv-logo{max-height:none} }

/* ---- brand board · one even grid of plates, crops and the palette ---- */
.gallery .g-board{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:6px}
.gallery .bd-t{position:relative;aspect-ratio:var(--ar,4/5);overflow:hidden;border-radius:2px;background:#e9e3d6}
.gallery .bd-t > img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gallery .bd-t:hover > img{transform:scale(1.03)}
.gallery .bd-plate{display:grid;place-items:center}
.gallery .bd-plate > img{width:50%;height:auto;max-height:62%;object-fit:contain;cursor:default;transform:none!important}
.gallery .bd-pal{display:flex;flex-direction:column}
.gallery .bd-pal span{flex:1;display:flex;justify-content:space-between;align-items:flex-end;padding:10px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.gallery .bd-pal b{font-weight:500}.gallery .bd-pal i{font-style:normal;opacity:.75}
@media (max-width:760px){ .gallery .g-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} }
.gallery .bd-type{display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px}
.gallery .bd-aa{font-size:clamp(64px,9vw,128px);line-height:.9;margin-top:auto;margin-bottom:auto}
.gallery .bd-fn{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.gallery .bd-fu{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;opacity:.7;margin-top:3px}
.gallery .bd-t{box-shadow:inset 0 0 0 1px rgba(20,20,20,.06)}

/* ---- the thinking: brief, research, insight, strategy ----
   A numbered row read left to right, the order the work happened in. Hairline on top
   like the numbers below it; the step name in mono cyanotype, the sentence in Cormorant. */
.case-spine{margin:46px 0 0;border-top:1px solid var(--carbon)}
.case-spine[hidden]{display:none}
.case-spine .sp-in{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.case-spine .sp-i{padding:22px 26px 26px 0;border-right:1px solid var(--line);min-width:0}
.case-spine .sp-i:last-child{border-right:none}
.case-spine .sp-i + .sp-i{padding-left:26px}
.case-spine .sp-k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;display:flex;gap:10px}
.case-spine .sp-n{color:var(--ink);opacity:.55}
.case-spine .sp-v{font-family:'Cormorant',serif;font-size:clamp(19px,1.6vw,22px);line-height:1.28;color:var(--carbon);margin:0;text-wrap:pretty}
@media (max-width:860px){
  .case-spine .sp-in{grid-template-columns:1fr}
  .case-spine .sp-i{border-right:none;border-bottom:1px solid var(--line);padding:18px 0}
  .case-spine .sp-i + .sp-i{padding-left:0}
  .case-spine .sp-i:last-child{border-bottom:none}
}

/* About: the career as a data window, same furniture as the case ficha, instead of CV paragraphs */
.about-ficha{max-width:600px;margin-top:26px}
.about-ficha .row{grid-template-columns:96px 1fr;gap:10px}
@media (max-width:560px){ .about-ficha .row{grid-template-columns:68px 1fr;gap:8px} }

/* No widows: browsers that support it rebalance the last lines too */
p, li, dd, figcaption{text-wrap:pretty}
h1, h2, h3{text-wrap:balance}

/* ============ nav · one system (2026-10-13) ============
   Glen: two menus competing, two vocabularies, and a nav that looked like body copy.
   Now the furniture speaks one voice, mono caps: the nav, the role next to the name,
   the hero label and the hero control. Display stays Cormorant, reading stays Inter.
   The hero control is a slideshow control with no words, so it cannot read as a menu. */
.nav-links{gap:28px;align-items:center}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;padding:5px 0;border-bottom:1px solid transparent}
.nav .brand .brand-role{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.7}
@media (max-width:640px){
  .nav-links{gap:16px}
  .nav-links a{font-size:10px;letter-spacing:.1em}
}

.arc-index{display:flex;align-items:center;gap:18px;width:100%}
.arc-segs{display:flex;gap:6px}
.arc-seg{background:none;border:0;padding:12px 0;margin:-12px 0;cursor:pointer;width:44px}
.arc-seg span{display:block;height:2px;background:rgba(245,241,232,.26);position:relative;overflow:hidden;
  transition:background .3s ease}
.arc-seg span::after{content:'';position:absolute;inset:0;background:var(--bone);
  transform:scaleX(0);transform-origin:left}
.arc-seg:hover span{background:rgba(245,241,232,.5)}
.arc-seg:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.arc-seg.is-done span::after{transform:scaleX(1)}
.arc-seg.is-on span::after{animation:arcFill var(--arc-ms,5200ms) linear forwards}
.arc-index.is-held .arc-seg.is-on span::after,
.arc-index.is-away .arc-seg.is-on span::after{animation-play-state:paused}
.arc-index.is-still .arc-seg.is-on span::after{animation:none;transform:scaleX(1)}
.arc-count{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:rgba(245,241,232,.5)}
.arc-count b{font-weight:400;color:var(--bone)}
@keyframes arcFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .hero-foot{flex-direction:row;align-items:center}
  .arc-seg{width:32px}
}
/* the current page was underlined in bone on every page but home, so on paper it was invisible */
body.not-home header.nav .nav-links a:hover,
body.not-home header.nav .nav-links a[aria-current="page"]{border-bottom-color:var(--carbon)}

/* ============ about · with some life (2026-10-13) ============
   Glen: "tiene menos onda que un renglón". One sentence and a data table was a form,
   not a person. Now: the portrait large, the line set in display type, the career kept
   as the window, and an Off work block with her own 35mm scan (the same image as her
   LinkedIn and Behance banners) beside the list, set large in Cormorant. */
.about{padding-top:64px}
.about-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end}
.about-portrait img{max-width:none;width:100%}
.about-copy .about-k{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.about-copy .about-lede{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(34px,4.4vw,58px);
  line-height:1.04;letter-spacing:-.01em;max-width:15ch;margin:0 0 34px;color:var(--carbon);text-wrap:balance}
.about-ficha{margin-top:0}

.offwork{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:120px}
.ow-img{margin:0}
.ow-img img{display:block;width:100%;height:auto;border-radius:2px}
.ow-k{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.ow-list{list-style:none;counter-reset:ow;margin:0;padding:0}
.ow-list li{counter-increment:ow;display:grid;grid-template-columns:42px 1fr;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line);font-family:'Cormorant',serif;font-weight:500;
  font-size:clamp(22px,2.2vw,30px);line-height:1.12;color:var(--carbon);transition:color .3s ease}
.ow-list li:last-child{border-bottom:1px solid var(--line)}
.ow-list li::before{content:counter(ow,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.12em;color:var(--cyan)}
.ow-list li:hover{color:var(--cyan)}
@media (max-width:760px){
  .about{padding-top:40px}
  .about-top,.offwork{grid-template-columns:1fr;gap:28px}
  .about-portrait img{max-width:320px}
  .offwork{margin-top:72px}
}