/* =====================================================================
   THE WORK: four projects, before and after. Pass 3, second cut.

   The first cut held the page still and let the scroll turn each yard;
   the owner found the older version easier to use, so this goes back to
   it in the new clothes. The introduction stays put on the left; on the
   right the project cards deal themselves out: each is sticky against the
   BOTTOM of the screen at a negative offset, so a band of every card
   still to come stays in view while the next one rides up over it. No
   scroll listener drives it. Every picture has a drag seam.
   ===================================================================== */
.works{padding:clamp(96px,10vw,150px) 0 clamp(80px,8vw,120px)}
.works .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--tan-text)}
.works .fan{width:24px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1}
.works-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0 clamp(40px,5vw,80px);align-items:start}
.works-intro{position:sticky;top:calc(var(--navh,72px) + 48px)}
.works-h{font-family:var(--display);font-weight:600;font-size:clamp(36px,3.9vw,58px);line-height:1.04;
  letter-spacing:-.022em;color:var(--ink-forest);margin:22px 0 22px}
.works-h span{display:block;color:var(--tan-text)}
.works-lede{font-size:17px;line-height:1.6;color:var(--on-surface-variant);max-width:36ch;margin:0 0 30px}

/* ---------- the deck ------------------------------------------------ */
.pdeck{--card:clamp(480px,calc(var(--sh,100vh) * .7),600px);--head:64px;--strip:46px;display:grid}
.pcard{position:sticky;bottom:calc(var(--head) - var(--card) + var(--i) * var(--strip));height:var(--card);
  display:flex;flex-direction:column;overflow:hidden;margin-top:28px;
  background:#faf6ef;border:1px solid var(--outline-variant);
  outline:1px solid rgba(163,138,102,.3);outline-offset:-7px;
  box-shadow:0 -18px 34px -28px rgba(40,34,22,.45)}
.pcard:first-child{margin-top:0}
.pcard-head{display:flex;align-items:center;gap:16px;flex:none;height:var(--head);margin:0;padding:0 28px;
  border-bottom:1px solid var(--outline-variant);cursor:pointer;
  font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.012em;color:var(--on-surface)}
.pcard-no{font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:oldstyle-nums;color:var(--tan-text);min-width:32px}
.pcard-name{flex:1;min-width:0}
.pcard-count{font-size:10px;letter-spacing:.2em;color:var(--outline)}
.pcard-head:hover .pcard-name{color:var(--ink-forest)}

.pcard-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.pcard-say{display:flex;flex-direction:column;justify-content:center;padding:22px 26px;min-width:0;overflow:hidden}
.pcard-title{font-family:var(--display);font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.25;margin:0 0 12px;color:var(--ink-forest)}
.pcard-p{font-size:14px;line-height:1.6;color:var(--on-surface-variant);margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-height:820px){ .pcard-p{-webkit-line-clamp:3} }
/* the services in the project, each one a way to its own page */
.pcard-services{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pcard-services a{display:inline-block;padding:6px 10px;border:1px solid var(--outline-variant);background:rgba(255,255,255,.4);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.pcard-services a:hover{background:var(--ink-forest);border-color:var(--ink-forest);color:#f4efe4}
.pcard-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-forest);padding-bottom:4px;border-bottom:1px solid var(--tan)}
.pcard-cta svg{width:15px;height:9px;transition:transform .35s ease}
.pcard-cta:hover svg{transform:translateX(4px)}

/* ---------- the drag seam ------------------------------------------- */
.pba{position:relative;margin:0;min-width:0;border-left:1px solid var(--outline-variant)}
.pba-frame{--pos:50%;position:absolute;inset:0;overflow:hidden;cursor:ew-resize;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#e9e1d2}
.pba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.pba-after{clip-path:inset(0 0 0 var(--pos))}
.pba-seam{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#f6ecd2;
  box-shadow:0 0 0 1px rgba(20,30,22,.25);pointer-events:none}
/* a Deco lozenge, not a pill: square corners, stood on its point */
.pba-knob{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  background:var(--ink-forest);border:1px solid #d8bc88;transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;color:#f6ecd2;box-shadow:0 4px 14px rgba(20,30,22,.3);
  transition:transform .3s ease}
.pba-knob svg{width:18px;height:9px;transform:rotate(-45deg)}
.pba-frame:hover .pba-knob,.pba-frame.drag .pba-knob{transform:rotate(45deg) scale(1.08)}
.pba-tag{position:absolute;top:14px;padding:6px 10px;font-family:var(--body);font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;pointer-events:none;transition:opacity .3s ease}
.pba-tag-b{left:14px;background:rgba(20,32,24,.78);color:#f4efe4}
.pba-tag-a{right:14px;background:rgba(250,246,239,.9);color:var(--ink-forest)}
/* the range is the real control for a keyboard or a screen reader; the pointer drags the frame */
.pba-range{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;margin:0;pointer-events:none}
.pba-frame:has(.pba-range:focus-visible){outline:2px solid var(--tan);outline-offset:-2px}

/* ---------- phones and tablets ------------------------------------------ */
@media(max-width:900px){
  .works-grid{grid-template-columns:1fr}
  .works-intro{position:static;margin-bottom:34px}
  .works-lede{max-width:none}
  .pdeck{--card:clamp(580px,calc(var(--sh,100vh) * .78),620px);--head:54px;--strip:38px}
  .pcard{margin-top:18px;outline-offset:-5px}
  .pcard-head{padding:0 18px;font-size:18px;gap:12px}
  .pcard-no{font-size:22px;min-width:26px}
  .pcard-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .pba{order:-1;border-left:0;border-bottom:1px solid var(--outline-variant);aspect-ratio:4/3}
  .pcard-say{padding:16px 18px 18px;justify-content:flex-start}
  .pcard-title{font-size:18px;margin-bottom:8px}
  .pcard-p{font-size:13.5px;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pcard-services{margin-bottom:14px}
  .pcard-services a{padding:5px 8px;font-size:10px}
}
/* a card cannot pin against a screen shorter than itself, and the dealing is
   unwanted when someone has asked for less motion */
@media (max-height:620px), (prefers-reduced-motion: reduce){
  .pcard{position:relative;bottom:auto;height:auto}
  .pcard-body{grid-template-rows:auto}
  .pba{aspect-ratio:4/3}
}

/* ---------- a wall of star jasmine ------------------------------------
   The vine that covers Charleston's walls and fences. work.js paints the
   wall onto one canvas the size of the section from the painted jasmine,
   dense and tangled, and it is shown faint, the way the oyster shells are,
   so the plaster reads through; it creeps in from the left the first time
   you arrive. The introduction is a plaque on it, framed in a rail of
   black iron with the jasmine twined round it, the way it grows on the
   iron fences downtown. */
.works{position:relative;overflow:clip;isolation:isolate}
.works-wall{position:absolute;inset:0;z-index:-1;pointer-events:none}
.works-wall canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:.38}
.works-wall{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 2.6s cubic-bezier(.4,.1,.2,1),mask-position 2.6s cubic-bezier(.4,.1,.2,1)}
.works.grown .works-wall{-webkit-mask-position:0 0;mask-position:0 0}
/* grown: the mask has done its work and comes off, so nothing is masked while you scroll */
.works.grown-done .works-wall{-webkit-mask-image:none;mask-image:none;transition:none}

/* the introduction, a plaque on the wall, framed in a rail of black iron
   with the star jasmine twined round it (one painting, jasmine-frame.webp,
   laid on as a border image so the corners keep their shape at any size;
   a shorter cut of the same painting for phones). The rail runs along the
   plaque's edge: in the painting it sits 89px in from each side and 110px
   in from the top, of a 200px border. */
.works-intro{--fb:60px;background:#f8f3ea;border:0;padding:clamp(42px,3.2vw,48px);box-shadow:0 20px 40px -26px rgba(20,32,22,.55)}
.works-intro::before{content:"";position:absolute;pointer-events:none;z-index:1;
  top:calc(var(--fb) * -.55);left:calc(var(--fb) * -.445);right:calc(var(--fb) * -.445);bottom:calc(var(--fb) * -.445);
  border:var(--fb) solid transparent;border-image:url(art/jasmine-frame.webp) 200 / var(--fb) stretch}
.works-intro .works-lede{max-width:none}

.pcard-count{display:inline-block;margin-left:14px;vertical-align:.2em}
@media(max-width:900px){
  .works-intro{--fb:50px;position:relative;top:auto;padding:34px 30px}
  .works-intro::before{border-image-source:url(art/jasmine-frame-short.webp)}
}
@media (prefers-reduced-motion: reduce){
  .works-wall{-webkit-mask-image:none;mask-image:none}
}