/* ============================================================
   hdw site kit · CASE STUDY
   Loaded by site/work/*.html only, after components.css and
   before responsive.css.

   The markup (cs-*) is written by the build scripts and
   /new-work, and they match it by exact class. So it keeps its
   names and takes the kit's look here. Never restyle it in a page.

   Shape, after the reference site's project page: the name as the
   opening statement, the cover under it, then the facts in the
   first three columns and the words beside them, and the pictures
   across the full width.
   ============================================================ */

.container{padding:0 var(--edge);}

/* ---- opening: the name, then the cover ---- */
.cs-hero{display:grid;}
.cs-cover{order:-1;padding:calc(var(--top-h) + var(--s-7)) var(--edge) var(--s-7);}
.cs-cover-name{
  font-size:var(--fs-statement);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-l);
  max-width:23em;
  text-wrap:balance;
}
.cs-cover-kicker{display:block;color:var(--ink-2);margin-bottom:var(--s-3);}
.cs-hero > img{
  width:calc(100% - 2 * var(--edge));
  margin:0 var(--edge);
  height:min(86svh, 62vw);
  object-fit:cover;
  background:var(--card);
}
.scroll-nudge{display:none;}

/* ---- facts beside words ---- */
.cs-dual{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--x);
  /* the words take the first three rows and the fourth soaks up whatever
     height the facts need, so Read more sits under the words, not adrift */
  grid-template-rows:auto auto auto 1fr;
  padding:var(--s-8) 0 0;
}
.cs-main{display:contents;}
.cs-side{padding-bottom:var(--s-6);grid-column:1 / 4;grid-row:1 / span 4;display:grid;gap:var(--s-4);align-content:start;}
.cs-main > *{grid-column:4 / -1;min-width:0;}
.cs-main > .cs-gallery,.cs-main > .cs-block{grid-column:1 / -1;}
.cs-main > .readall{justify-self:start;}

.cs-side-row{display:grid;gap:3px;line-height:var(--lh-text);}
.cs-side-row .k{color:var(--ink-2);}
.cs-side-row .v a{box-shadow:inset 0 -1px 0 currentColor;}
.cs-side-row .v a.cs-client{box-shadow:none;}
.cs-disc{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--x);}
.cs-disc em{font-style:normal;color:var(--ink-2);white-space:nowrap;}
a.cs-disc{color:var(--ink-3);transition:color var(--dur-s) ease;}
a.cs-disc.is-active,.cs-side-campaigns a.cs-disc{color:var(--ink);}
@media (hover:hover){
  a.cs-disc:hover,.cs-side-row .v a:hover{color:var(--ink-2);}
}

/* ---- the words ---- */
.cs-summary{display:grid;gap:var(--s-3);margin-bottom:var(--s-7);}
.cs-summary-k,.cs-chapter-k{color:var(--ink-2);}
.cs-summary p{
  font-size:var(--fs-title);
  line-height:1.02;
  letter-spacing:var(--track-l);
  max-width:28em;
  text-wrap:pretty;
}
.cs-story{display:grid;gap:var(--s-5);margin-bottom:var(--s-7);}
.cs-chapter{display:grid;gap:var(--s-2);}
.cs-chapter p{max-width:var(--measure);line-height:var(--lh-text);}
.readall-ready .cs-story .cs-chapter{display:none;}
.readall-ready.readall-open .cs-story .cs-chapter{display:grid;}
.readall-ready .cs-story{margin-bottom:0;}
.readall-ready.readall-open .cs-story{margin-bottom:var(--s-5);}
.readall{box-shadow:inset 0 -1px 0 currentColor;margin-bottom:var(--s-7);transition:color var(--dur-s) ease;}
@media (hover:hover){ .readall:hover{color:var(--ink-2);} }

/* ---- pictures: full width, every one whole, read across ----
   js/masonry.js builds the columns and reads --cols from here. */
.cs-gallery{
  --cols:2;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  align-items:start;
  gap:var(--x);
  padding-bottom:var(--s-9);
}
.mason-col{min-width:0;display:flex;flex-direction:column;gap:var(--x);}
.cs-gallery img,.cs-gallery video,.cs-gallery .cs-shot,.cs-gallery .hdw-player{
  width:100%;height:auto;display:block;background:var(--card);
}
.cs-gallery .hdw-player,.cs-gallery > video:not([width]){aspect-ratio:9 / 16;}
@media (prefers-reduced-motion:no-preference){
  .cs-gallery img.cs-shot{transition:opacity .7s var(--ease), transform .9s var(--ease);}
  .cs-ready .cs-gallery img.cs-shot:not(.is-in){opacity:0;transform:translate3d(0,14px,0);}
}

/* ---- blocks: a discipline, or the campaigns ---- */
.cs-block{scroll-margin-top:96px;margin-bottom:var(--s-8);}
.cs-block:last-child{margin-bottom:0;}
.cs-block-title{
  font-size:var(--fs-title);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-l);
  margin-bottom:var(--s-5);
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
}
.cs-block-title em{font-style:normal;color:var(--ink-2);}
.cs-campaigns{padding-bottom:var(--s-9);}
.cs-campaign + .cs-campaign{margin-top:var(--s-8);}
.cs-campaign-line{color:var(--ink-2);line-height:var(--lh-text);max-width:52ch;margin:var(--s-1) 0 var(--s-4);}
.cs-campaigns .cs-campaign .cs-gallery{padding-bottom:0;}
.cs-campaign .cs-gallery > .is-folded{display:none;}
.cs-campaign-more{display:none;}
.cs-campaign-btn{display:inline-block;margin-top:var(--s-4);box-shadow:inset 0 -1px 0 currentColor;transition:color var(--dur-s) ease;}
@media (hover:hover){ .cs-campaign-btn:hover{color:var(--ink-2);} }
.cs-campaign-btn--more{display:none;}
.cs-campaign-btn--more.is-needed{display:inline-block;}

/* ---- where the work was written about ---- */
.cs-press{margin:0 0 var(--s-7);}
.cs-press-k{display:block;color:var(--ink-2);margin-bottom:var(--s-4);}
.cs-press-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);}
.cs-press-row a{display:block;transition:opacity var(--dur-s) ease;}
@media (hover:hover){ .cs-press-row a:hover{opacity:.55;} }
.cs-press-mark{
  --cap:clamp(22px,2vw,26px);
  --ratio:calc(var(--w) / var(--h));
  --factor:min(calc(1.1 - 0.1 * var(--ratio)), 1);
  --nudge:1;
  display:block;width:auto;
  height:calc(max(calc(var(--cap) / 2), calc(var(--cap) * var(--factor))) * var(--nudge));
  aspect-ratio:var(--w) / var(--h);
}
.cs-press-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ---- next project ---- */
.cs-next{display:grid;gap:var(--s-3);border-top:1px solid var(--line);padding:var(--s-5) 0 var(--s-9);}
.cs-next .lbl{color:var(--ink-2);}
.cs-next .nm{font-size:var(--fs-statement);line-height:var(--lh-tight);letter-spacing:var(--track-l);transition:color var(--dur-s) ease;}
@media (hover:hover){ .cs-next a:hover .nm{color:var(--ink-2);} }

/* ---- the clip player (js/video.js builds it) ----
   The tile is the player. White controls with a shadow, never a
   scrim, so the work is not darkened. They come on hover, focus, or
   once pressed, and step aside while it runs. */
.hdw-player{position:relative;overflow:hidden;container-type:inline-size;}
.hdwp-stage{position:absolute;inset:0;display:block;font-size:0;}
.hdw-player video{width:100%;height:100%;object-fit:cover;display:block;margin:0;cursor:pointer;}
.hdwp-cue{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;}
.hdw-player.is-paused .hdwp-cue{display:flex;}
.hdwp-cue svg{width:52px;height:52px;padding:12px;background:#0a0a0a;fill:#fff;color:#fff;opacity:.88;border-radius:50%;}
.hdwp-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:2px;padding:0 2px;
  color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transition:opacity .25s ease;
  opacity:0;pointer-events:none;
}
@media (hover:hover){ .hdw-player:hover .hdwp-bar{opacity:1;pointer-events:auto;} }
.hdw-player:focus-within .hdwp-bar,.hdw-player.is-open .hdwp-bar{opacity:1;pointer-events:auto;}
.hdw-player.is-idle .hdwp-bar{opacity:0;pointer-events:none;}
.hdwp-btn{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:inherit;transition:opacity var(--dur-s) ease;}
@media (hover:hover){ .hdwp-btn:hover{opacity:.6;} }
.hdwp-btn svg{width:20px;height:20px;fill:currentColor;}
.hdwp-full{display:none;}
.hdw-player.is-open .hdwp-full{display:flex;}
.hdwp-scrub{flex:1 1 auto;min-width:32px;height:44px;display:flex;align-items:center;padding-inline:6px;cursor:pointer;touch-action:none;}
.hdwp-track{display:block;position:relative;width:100%;height:3px;background:rgba(255,255,255,.45);transition:height .15s ease;}
.hdwp-fill{display:block;height:100%;width:0;background:#fff;}
.hdwp-scrub:focus-visible .hdwp-track{height:5px;}
@media (hover:hover){ .hdwp-scrub:hover .hdwp-track{height:5px;} }
.hdwp-time{font-size:var(--fs-small);font-variant-numeric:tabular-nums;color:inherit;padding-inline:4px;min-width:4ch;text-align:right;}
@container (max-width: 230px){
  .hdwp-bar{gap:0;padding:0;}
  .hdwp-btn{width:40px;height:40px;}
  .hdwp-btn svg{width:18px;height:18px;}
  .hdwp-scrub{min-width:0;height:40px;padding-inline:4px;}
  .hdwp-time{display:none;}
  .hdwp-cue svg{width:36px;height:36px;padding:7px;}
  .hdw-player.is-open .hdwp-cue{display:none;}
}
.hdw-player.is-loading .hdwp-cue{display:flex;}
.hdwp-wait{display:none;}
.hdw-player.is-loading .hdwp-cue svg{display:none;}
.hdw-player.is-loading .hdwp-cue .hdwp-wait{display:block;}
.hdwp-arc{transform-box:fill-box;transform-origin:center;animation:hdwp-turn .8s linear infinite;}
@keyframes hdwp-turn{to{transform:rotate(1turn);}}
@keyframes hdwp-breathe{from{opacity:1;}to{opacity:.3;}}
.hdw-player:fullscreen{background:#000;container-type:normal;}
.hdw-player:fullscreen video{object-fit:contain;}
.hdw-player:fullscreen .hdwp-bar{padding-inline:8px;}
.hdw-player:-webkit-full-screen{background:#000;container-type:normal;}
.hdw-player:-webkit-full-screen video{object-fit:contain;}
.hdw-player:-webkit-full-screen .hdwp-bar{padding-inline:8px;}
@media (prefers-reduced-motion:reduce){
  .hdwp-btn,.hdwp-track{transition:none;}
  .hdwp-arc{animation:hdwp-breathe 1.2s ease-in-out infinite alternate;}
}

/* ---- narrower ---- */
@media (max-width: 900px){
  .cs-dual{padding-top:var(--s-7);row-gap:0;grid-template-rows:none;}
  .cs-side,.cs-main > *{grid-column:1 / -1;grid-row:auto;}
  .cs-side{margin-bottom:var(--s-7);}
  .cs-hero > img{height:auto;aspect-ratio:4 / 5;}
}
@media (max-width: 340px){
  .cs-press-mark{display:none;}
  .cs-press-name{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;box-shadow:inset 0 -1px 0 currentColor;}
}