/* ============== WORK DETAIL PAGE ============== */
.page-work{background:var(--cream);color:var(--ink);}

/* ----- generic section header ----- */
.wd-cap{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:60px;text-transform:uppercase;}

.wd-section{padding:140px 32px;max-width:1400px;margin:0 auto;position:relative;}

/* ----- HERO ----- */
.wd-hero{
  position:relative;padding:140px 32px 60px;min-height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
}
.wd-hero-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none;}
.wd-hero-grid span{border-right:1px solid var(--rule);}
.wd-hero-grid span:last-child{border-right:0;}
.wd-hero-back{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);display:inline-flex;align-items:center;gap:8px;}
.wd-hero-back:hover{color:var(--ink);}
.wd-eyebrow{display:flex;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}
.wd-eyebrow .wd-eb-n{color:var(--accent);}
.wd-hero-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
.wd-title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(60px,15vw,260px);line-height:.84;letter-spacing:-.04em;
  text-transform:lowercase;margin:auto 0;position:relative;z-index:1;
}
.wd-title .wd-line{display:block;overflow:hidden;line-height:.86;}
.wd-title .wd-line-inner{display:inline-block;}
.wd-title .ch{display:inline-block;will-change:transform,filter,opacity;}
.wd-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;}

.wd-subtitle{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,32px);line-height:1.3;
  color:var(--ink);max-width:42ch;margin-top:30px;position:relative;z-index:1;
}

.wd-meta-strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
  border-top:1px solid var(--rule);padding-top:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  position:relative;z-index:1;
}
.wd-meta-strip > div{display:flex;flex-direction:column;gap:6px;}
.wd-meta-strip span:first-child{font-size:10px;letter-spacing:.18em;color:var(--muted);}

/* ----- COVER ----- */
.wd-cover-wrap{padding:60px 32px;max-width:1600px;margin:0 auto;position:relative;}
.wd-cover{
  width:100%;height:78vh;min-height:520px;border-radius:6px;overflow:hidden;
  background:#22201d;position:relative;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.wd-cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(244,241,234,.04) 0 2px, transparent 2px 16px);}
.wd-cover-shape{
  width:34%;aspect-ratio:5/7;border-radius:60% 60% 50% 50% / 70% 70% 30% 30%;
  background:linear-gradient(180deg,#ece6d8, #cbb89a 60%, #8a7d65);
  position:relative;z-index:1;will-change:transform,filter;
}
.wd-cover-shape::before{content:"";position:absolute;inset:14%;background:rgba(244,241,234,.18);border-radius:inherit;}
.wd-cover-tag{position:absolute;left:24px;bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(244,241,234,.55);z-index:2;}
.wd-cover-meta{position:absolute;right:24px;top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.55);text-align:right;z-index:2;}

/* ----- STATS ----- */
.wd-stats{display:grid;grid-template-columns:repeat(4,1fr);}
.wd-stats > .wds-cell{padding:30px 24px 30px 0;border-right:1px solid var(--rule);}
.wd-stats > .wds-cell:last-child{border-right:0;}
.wds-n{font-family:var(--sans);font-weight:900;font-size:clamp(60px,7vw,120px);line-height:.9;letter-spacing:-.04em;display:block;}
.wds-l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);margin-top:14px;display:block;}

/* ----- BRIEF ----- */
.wd-brief-quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.2vw,68px);line-height:1.15;
  letter-spacing:-.01em;max-width:24ch;
  border-left:2px solid var(--accent);padding-left:32px;
}
.wd-brief-quote .pq-mark{color:var(--accent);font-family:var(--sans);font-weight:900;font-size:1.2em;line-height:0;display:inline-block;transform:translateY(.16em);}
.wd-brief-body{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.wd-brief-body p{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);max-width:42ch;}
.wd-brief-body p .w{display:inline-block;opacity:.16;filter:blur(8px);transition:opacity .6s, filter .6s;}
.wd-brief-body p .w.in{opacity:1;filter:blur(0);}

/* ----- PROCESS (sticky scrollytelling) ----- */
.wd-process{height:380vh;padding:0;position:relative;background:var(--ink);color:var(--cream);}
.wdp-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 32px;max-width:1400px;margin:0 auto;overflow:hidden;}
.wdp-cap{display:flex;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(244,241,234,.55);margin-bottom:40px;}
.wdp-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:480px;}
.wdp-shape{
  width:100%;aspect-ratio:1/1;max-width:480px;justify-self:center;
  background:var(--cream);position:relative;overflow:hidden;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1), border-radius 1.1s cubic-bezier(.7,0,.2,1), background 1.1s ease, clip-path 1.1s cubic-bezier(.7,0,.2,1);
  border-radius:6px;
}
.wdp-shape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(12,12,11,.05) 0 2px, transparent 2px 16px);}
.wdp-shape.s0{border-radius:6px;background:#cbb89a;}
.wdp-shape.s1{border-radius:50%;background:#a3916d;transform:scale(.78);}
.wdp-shape.s2{border-radius:60% 60% 50% 50% / 70% 70% 30% 30%;background:#7a6f5f;transform:scale(.7) rotate(-6deg);}
.wdp-shape.s3{border-radius:60% 60% 50% 50% / 70% 70% 30% 30%;background:#ece6d8;transform:scale(.98) rotate(0deg);}
.wdp-step{
  position:absolute;left:50%;width:50%;padding-left:32px;
  opacity:0;transform:translateY(40px);filter:blur(20px);
  transition:opacity .6s,transform .6s cubic-bezier(.7,0,.2,1),filter .6s;
  display:flex;flex-direction:column;gap:14px;
}
.wdp-step.active{opacity:1;transform:translateY(0);filter:blur(0);}
.wdp-step .wdp-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);}
.wdp-step h3{font-family:var(--sans);font-weight:900;font-size:clamp(40px,5vw,80px);line-height:.95;letter-spacing:-.03em;text-transform:lowercase;}
.wdp-step p{font-family:var(--serif);font-size:22px;line-height:1.45;color:rgba(244,241,234,.78);max-width:32ch;}
.wdp-step .wdp-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(244,241,234,.45);margin-top:8px;}
.wdp-progress{
  position:absolute;left:0;right:0;bottom:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 32px;
}
.wdp-progress > div{height:2px;background:rgba(244,241,234,.18);position:relative;overflow:hidden;}
.wdp-progress > div::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);}
.wdp-progress > div.on::after{width:100%;transition:width .6s ease;}

/* ----- TYPE ----- */
.wd-type{background:var(--cream);}
.wdt-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start;}
.wdt-spec{display:flex;flex-direction:column;gap:24px;font-family:var(--mono);font-size:13px;line-height:1.6;}
.wdt-spec .wdt-row{display:grid;grid-template-columns:120px 1fr;gap:14px;border-bottom:1px solid var(--rule);padding-bottom:10px;}
.wdt-spec .wdt-row span:first-child{color:var(--muted);font-size:10px;letter-spacing:.18em;}
.wdt-spec .wdt-row span:last-child{font-size:14px;}
.wdt-canvas{
  position:relative;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,#22201d,#0c0c0b);
  color:var(--cream);
  padding:60px;min-height:520px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;
}
.wdt-canvas::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(244,241,234,.03) 0 2px, transparent 2px 16px);pointer-events:none;}
.wdt-big{
  font-family:var(--serif);font-size:clamp(80px,12vw,220px);line-height:.85;letter-spacing:-.03em;
  position:relative;z-index:1;
}
.wdt-big .wdt-tog{transition:opacity .5s, filter .5s, transform .5s;}
.wdt-big.b1 .r{opacity:1;}
.wdt-big.b1 .i{opacity:0;filter:blur(10px);transform:translateY(-10px);position:absolute;left:0;top:0;}
.wdt-big.b1 .b{opacity:0;filter:blur(10px);transform:translateY(10px);position:absolute;left:0;top:0;}
.wdt-big.b2 .r{opacity:0;filter:blur(10px);transform:translateY(-10px);position:absolute;left:0;top:0;}
.wdt-big.b2 .i{opacity:1;}
.wdt-big.b2 .b{opacity:0;filter:blur(10px);transform:translateY(10px);position:absolute;left:0;top:0;}
.wdt-big.b3 .r{opacity:0;filter:blur(10px);transform:translateY(-10px);position:absolute;left:0;top:0;}
.wdt-big.b3 .i{opacity:0;filter:blur(10px);transform:translateY(-10px);position:absolute;left:0;top:0;}
.wdt-big.b3 .b{opacity:1;}
.wdt-big > span{display:block;position:relative;}
.wdt-row-stack{position:relative;}
.wdt-pills{display:flex;gap:6px;position:relative;z-index:1;flex-wrap:wrap;}
.wdt-pills button{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  background:transparent;border:1px solid rgba(244,241,234,.3);color:inherit;
  padding:8px 14px;border-radius:99px;cursor:none;
  transition:background .3s,border-color .3s;
}
.wdt-pills button:hover{background:rgba(244,241,234,.06);}
.wdt-pills button.on{background:var(--accent);border-color:var(--accent);}

/* ----- COLOR ----- */
.wd-color{background:var(--cream);}
.wdc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-radius:6px;overflow:hidden;}
.wdc-cell{
  height:240px;position:relative;
  display:flex;align-items:flex-end;padding:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  transform-origin:bottom;
  transition:flex .55s, transform .55s;
}
.wdc-cell .wdc-name{display:block;font-size:14px;letter-spacing:.02em;font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.wdc-cell .wdc-hex{display:block;opacity:.7;}

/* ----- GRID ----- */
.wd-grid-sec{background:var(--ink);color:var(--cream);}
.wdg-canvas{
  position:relative;background:#1a1816;border-radius:6px;overflow:hidden;
  aspect-ratio:16/9;
}
.wdg-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);}
.wdg-bg span{border-right:1px solid rgba(244,241,234,.08);border-bottom:1px solid rgba(244,241,234,.08);}
.wdg-bg span:nth-child(12n){border-right:0;}
.wdg-rect{
  position:absolute;background:var(--accent);opacity:.92;border-radius:2px;
  display:flex;align-items:flex-end;padding:10px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cream);
}
.wdg-r1{left:6%;top:14%;width:26%;height:54%;}
.wdg-r2{left:36%;top:14%;width:22%;height:24%;background:rgba(244,241,234,.86);color:var(--ink);}
.wdg-r3{left:36%;top:42%;width:22%;height:26%;background:rgba(244,241,234,.16);color:var(--cream);}
.wdg-r4{left:62%;top:14%;width:30%;height:54%;background:rgba(244,241,234,.4);color:var(--ink);}

/* ----- GALLERY ----- */
.wd-gallery{padding:80px 32px;max-width:1600px;margin:0 auto;}
.wdg-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:18px;}
.wdg-tile{position:relative;border-radius:4px;overflow:hidden;background:#1a1816;
  will-change:transform,filter,opacity;
}
.wdg-tile::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px);pointer-events:none;}
.wdg-tile .wdg-num{position:absolute;left:14px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,241,234,.62);}
.wdg-tile .wdg-shape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.gt-1{grid-column:span 4;grid-row:span 2;background:linear-gradient(135deg,#2c2a26,#1a1816);}
.gt-2{grid-column:span 2;background:#cbb89a;color:#0b0b0b;}
.gt-3{grid-column:span 2;background:#ece6d8;color:#0b0b0b;}
.gt-4{grid-column:span 4;background:linear-gradient(135deg,#252320,#0b0b0b);}
.gt-5{grid-column:span 3;background:#3a342c;}
.gt-6{grid-column:span 3;background:linear-gradient(135deg,#cbb89a,#7a6f5f);color:#0b0b0b;}

/* ----- PULL QUOTE ----- */
.wd-quote{padding:200px 32px;background:var(--cream);text-align:center;}
.wdq-text{
  font-family:var(--serif);font-style:italic;font-size:clamp(40px,6vw,100px);line-height:1.1;
  max-width:18ch;margin:0 auto;letter-spacing:-.01em;text-wrap:balance;
}
.wdq-text .w{display:inline-block;opacity:.18;filter:blur(10px);transition:opacity .55s, filter .55s;}
.wdq-text .w.in{opacity:1;filter:blur(0);}
.wdq-cite{margin-top:60px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

/* ----- CREDITS ----- */
.wd-credits{background:var(--cream);}
.wdcr-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);}
.wdcr-row{
  display:grid;grid-template-columns:160px 1fr auto;gap:20px;align-items:baseline;
  padding:22px 24px;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-weight:500;
  transition:background .35s, color .35s, padding-left .55s cubic-bezier(.7,0,.2,1);
}
.wdcr-row:hover{background:var(--ink);color:var(--cream);padding-left:36px;}
.wdcr-row .wdcr-role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;}
.wdcr-row:hover .wdcr-role{color:rgba(244,241,234,.6);}
.wdcr-row .wdcr-name{font-size:clamp(22px,2vw,32px);font-weight:800;letter-spacing:-.02em;}
.wdcr-row .wdcr-mark{font-family:var(--mono);font-size:11px;color:var(--muted);}
.wdcr-row:hover .wdcr-mark{color:var(--accent);}

/* ----- NEXT PROJECT ----- */
.wd-next{background:var(--ink);color:var(--cream);padding:120px 32px;text-align:center;position:relative;overflow:hidden;}
.wdn-meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(244,241,234,.55);}
.wdn-name{
  font-family:var(--sans);font-weight:900;font-size:clamp(60px,12vw,200px);line-height:.9;letter-spacing:-.04em;text-transform:lowercase;
  margin-top:24px;display:inline-block;cursor:none;
}
.wdn-name em{font-family:var(--serif);font-style:italic;font-weight:400;}
.wdn-arrow{display:inline-block;margin-left:30px;transition:transform .6s cubic-bezier(.7,0,.2,1);}
.wdn-link:hover .wdn-arrow{transform:translateX(40px) rotate(0deg);}
.wdn-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none;}

/* ----- responsive ----- */
@media (max-width:900px){
  .wd-meta-strip{grid-template-columns:repeat(2,1fr);}
  .wd-brief-body{grid-template-columns:1fr;}
  .wd-stats{grid-template-columns:repeat(2,1fr);}
  .wd-stats > .wds-cell:nth-child(2){border-right:0;}
  .wdp-stage{grid-template-columns:1fr;gap:30px;}
  .wdp-step{position:relative;left:0;width:100%;padding-left:0;}
  .wdt-grid{grid-template-columns:1fr;}
  .wdc-grid{grid-template-columns:repeat(3,1fr);}
  .wdcr-list{grid-template-columns:1fr;}
  .wdg-grid{grid-template-columns:repeat(2,1fr);}
  .gt-1,.gt-2,.gt-3,.gt-4,.gt-5,.gt-6{grid-column:span 2;grid-row:span 1;}
}

/* phone tightening */
@media (max-width:700px){
  .wd-hero{ padding:120px 20px 40px; }
  .wd-title{ font-size:clamp(48px,16vw,96px); }
  .wd-eyebrow{ flex-wrap:wrap; gap:10px; font-size:9px; }
  .wd-meta-strip{ grid-template-columns:1fr; gap:0; }
  .wd-meta-strip > div{ grid-template-columns:90px 1fr; padding:10px 0; }
  .wd-cover-wrap{ padding:0 20px; }
  .wd-section{ padding:60px 20px; }
  .wd-stats{ grid-template-columns:1fr; }
  .wd-stats > .wds-cell{ border-right:0; border-bottom:1px solid var(--rule); padding:18px 0; }
  .wdt-grid{ grid-template-columns:1fr; gap:20px; }
  .wdc-grid{ grid-template-columns:repeat(2,1fr); }
  .wdg-grid{ grid-template-columns:1fr; }
  .gt-1,.gt-2,.gt-3,.gt-4,.gt-5,.gt-6{ grid-column:span 1; }
}

/* (process section restored to its original sticky-scrollytelling layout on
   every viewport — the mobile rework was removed because it was breaking the
   layered text positioning.) */

/* ============================================================
   T2ELVE — mobile fixes for work-detail
   (1) no horizontal scroll
   (2) process section: shape on top, scrub still drives text + shape
   ============================================================ */

/* ----- (1) kill horizontal overflow ----- */
@media (max-width: 900px){
  /* every detail section is contained */
  body.page-work{ overflow-x: clip; }
  .wd-hero, .wd-cover-wrap, .wd-section, .wd-process, .wd-gallery,
  .wd-quote, .wd-next, .wk-end{
    max-width: 100vw; overflow-x: clip;
  }
  /* hero title can outscale on small viewports */
  .wd-title{ font-size: clamp(48px, 14vw, 88px); word-break: break-word; }
  .wd-eyebrow{ flex-wrap: wrap; gap: 8px; font-size: 9px; }
  .wd-meta-strip{ grid-template-columns: 1fr; gap: 0; }
  .wd-meta-strip > div{ grid-template-columns: 100px 1fr; gap: 10px; padding: 8px 0; font-size: 11px; }
  .wd-cover{ height: 60vh; min-height: 360px; border-radius: 6px; }
  /* grid section was wide on small viewports */
  .wd-grid-sec{ overflow-x: clip; }
  .wdg-canvas{ max-width: 100%; }
  /* gallery already collapses elsewhere but ensure no horizontal slip */
  .wdg-grid{ overflow-x: clip; }
  /* type section */
  .wdt-grid{ grid-template-columns: 1fr; gap: 24px; }
  .wdt-big{ font-size: clamp(72px, 18vw, 140px); word-break: break-word; }
  /* color grid */
  .wdc-grid{ grid-template-columns: repeat(2, 1fr); }
  /* next section arrow */
  .wdn-name{ font-size: clamp(40px, 11vw, 64px); word-break: break-word; }
  /* end marquee */
  .wk-end{ padding: 60px 22px; }
}

/* ----- (2) process — mobile: shape on top, text below, sticky scrub kept ----- */
@media (max-width: 900px){
  .wd-process{ height: 380vh; }              /* same scroll budget as desktop */
  .wdp-sticky{
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    padding: 16px 22px 36px;
    display: flex; flex-direction: column;
    justify-content: flex-start;
    max-width: 100vw;
  }
  .wdp-cap{ margin-bottom: 12px; }

  /* Stage becomes a 2-row layout: shape on top, steps area below.
     Steps remain absolute (so the .active fade still works), but now
     anchored inside the lower portion of the stage. */
  .wdp-stage{
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Shape: always at the top of the sticky frame, smaller. The s0/s1/s2/s3
     classes from desktop still apply — same shape morphs as you scroll. */
  .wdp-shape{
    position: relative;
    width: min(46vw, 200px);
    aspect-ratio: 1/1;
    max-width: 200px;
    margin: 0 auto 24px;
    justify-self: center;
  }

  /* Steps: absolute under the shape. Only .active is visible, just like desktop. */
  .wdp-step{
    position: absolute;
    left: 0; right: 0;
    top: 260px;              /* shape (~200) + margin (~24) + breathing (~36) */
    width: 100%;
    padding-left: 0;
    text-align: left;
    gap: 12px;
  }
  .wdp-step h3{ font-size: clamp(32px, 8vw, 52px); }
  .wdp-step p{ font-size: 16px; line-height: 1.45; max-width: 38ch; }
  .wdp-step .wdp-tag{ font-size: 10px; }

  /* progress dots pinned to bottom of the sticky frame */
  .wdp-progress{
    position: absolute; left: 22px; right: 22px; bottom: 22px;
  }
}

@media (max-width: 480px){
  .wdp-shape{ width: 38vw; max-width: 160px; }
  .wdp-step{ top: 220px; }
  .wdp-step h3{ font-size: clamp(28px, 9vw, 44px); }
}

/* (older .wdg-grid.has-images rules removed — the consolidated, image-tile
   version lives below in the "static gallery polish" block.) */

/* ============================================================
   T2ELVE — cover hero with uploaded image
   ============================================================ */
.wd-cover.has-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wd-cover.has-image::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.40) 100%),
    repeating-linear-gradient(45deg, rgba(244,241,234,.02) 0 2px, transparent 2px 16px);
}
.wd-cover.has-image .wd-cover-meta,
.wd-cover.has-image .wd-cover-tag{
  color: rgba(244,241,234,.95);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ============================================================
   T2ELVE — cover image AS hero background (static detail page)
   The .wd-cover-wrap block underneath stays as a second viewing.
   ============================================================ */
.wd-hero.has-cover-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 92vh;
  padding: 140px 32px 80px;
}
.wd-hero.has-cover-bg::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,8,7,.55) 0%,
      rgba(8,8,7,.18) 30%,
      rgba(8,8,7,.06) 55%,
      rgba(8,8,7,.70) 100%);
  pointer-events: none;
  z-index: 0;
}
.wd-hero.has-cover-bg .wd-hero-top,
.wd-hero.has-cover-bg .wd-title,
.wd-hero.has-cover-bg .wd-subtitle,
.wd-hero.has-cover-bg .wd-meta-strip{
  position: relative;
  z-index: 1;
}
.wd-hero.has-cover-bg .wd-title{
  color: #f4f1ea;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.wd-hero.has-cover-bg .wd-subtitle{
  color: rgba(244,241,234,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.wd-hero.has-cover-bg .wd-eyebrow{ color: rgba(244,241,234,.78); }
.wd-hero.has-cover-bg .wd-hero-back{ color: rgba(244,241,234,.82); }
.wd-hero.has-cover-bg .wd-meta-strip{
  color: rgba(244,241,234,.92);
  border-top-color: rgba(244,241,234,.18);
}
.wd-hero.has-cover-bg .wd-meta-strip span:first-child{ color: rgba(244,241,234,.55); }
/* the grid lines aren't useful over a photo */
.wd-hero.has-cover-bg .wd-hero-grid{ display: none; }

/* ============================================================
   T2ELVE — static work-detail process: mobile layout
   Same shape-on-top approach for the .wd-process scrub.
   ============================================================ */
@media (max-width: 900px){
  .wd-process{ height: 380vh; }
  .wdp-sticky{
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    padding: 18px 22px 36px;
    display: flex; flex-direction: column;
    justify-content: flex-start;
    max-width: 100vw;
  }
  .wdp-cap{ margin-bottom: 12px; }
  .wdp-stage{
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wdp-shape{
    position: relative;
    width: min(46vw, 200px);
    aspect-ratio: 1/1;
    max-width: 200px;
    margin: 0 auto 24px;
    justify-self: center;
  }
  .wdp-step{
    position: absolute;
    left: 0; right: 0;
    top: 260px;
    width: 100%;
    padding-left: 0;
    text-align: left;
    gap: 12px;
  }
  .wdp-step h3{ font-size: clamp(32px, 8vw, 52px); }
  .wdp-step p{ font-size: 16px; line-height: 1.45; max-width: 38ch; }
  .wdp-progress{
    position: absolute; left: 22px; right: 22px; bottom: 22px;
  }
}
@media (max-width: 480px){
  .wdp-shape{ width: 38vw; max-width: 160px; }
  .wdp-step{ top: 220px; }
  .wdp-step h3{ font-size: clamp(28px, 9vw, 44px); }
}

/* ============================================================
   T2ELVE — static gallery polish (matches popup behaviour)
   ============================================================ */
.wdg-grid.has-images{
  grid-auto-rows: auto;
}
.wdg-grid.has-images .wdg-tile{
  aspect-ratio: 4 / 3;
  background-color: #1a1816;
  background-image: none !important;
  border: 0; padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.wdg-grid.has-images .wdg-tile img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .9s cubic-bezier(.7,0,.2,1);
}
.wdg-grid.has-images .wdg-tile:hover img{ transform: scale(1.04); }
.wdg-grid.has-images .wdg-tile .wdg-num{
  position: absolute; left: 18px; bottom: 14px; padding: 0;
  z-index: 2;
}
.wdg-grid.has-images .wdg-tile:nth-child(7n+1){
  grid-column: span 2; grid-row: span 2;
  aspect-ratio: auto;
}
@media (max-width: 900px){
  .wdg-grid.has-images{ grid-template-columns: repeat(2, 1fr); }
  .wdg-grid.has-images .wdg-tile:nth-child(7n+1){ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
}
@media (max-width: 560px){
  .wdg-grid.has-images{ grid-template-columns: 1fr; }
  .wdg-grid.has-images .wdg-tile:nth-child(n){ grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
}

/* ============================================================
   T2ELVE — credits row on mobile (was overflowing the viewport)
   The desktop 160px role column ate almost all the horizontal
   space on phones, leaving no room for the name + ↗ mark. We
   reflow into a 2x2 grid: role on top-left, name on bottom-left,
   mark spans the right side and is centered vertically.
   ============================================================ */
@media (max-width: 700px){
  .wd-credits{ padding: 60px 0; }                  /* section bg keeps cream */
  .wd-credits .wd-cap{ margin-left: 22px; margin-right: 22px; }
  .wdcr-list{ grid-template-columns: 1fr; }
  .wdcr-row{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 18px 22px;
    align-items: start;
    max-width: 100%;
  }
  .wdcr-row .wdcr-role{ grid-column: 1 / 2; grid-row: 1 / 2; }
  .wdcr-row .wdcr-name{
    grid-column: 1 / 2; grid-row: 2 / 3;
    font-size: 20px; line-height: 1.2;
    word-break: break-word;
  }
  .wdcr-row .wdcr-mark{
    grid-column: 2 / 3; grid-row: 1 / 3;
    align-self: center; white-space: nowrap;
    font-size: 10px;
  }
  /* the hover padding-left animation would add 12px on mobile too — kill
     it; nothing on a touch device "hovers" anyway and the shift would
     push the row out of the viewport mid-tap on Safari. */
  .wdcr-row:hover{ padding-left: 22px; background: transparent; color: inherit; }
  .wdcr-row:hover .wdcr-role{ color: var(--muted); }
  .wdcr-row:hover .wdcr-mark{ color: var(--muted); }
}