/* ============================================================
   case-study.css - a project, read at length. Loads after
   core.css and projects.css (the film at the top is the same
   player the home page uses). The older case pages have their
   own sheet, case.css; this one does not touch them.

   The page is two columns from 1000px: a narrow rail that stays
   with its section while that section scrolls past, and the
   reading beside it. The rail carries the section's number and
   name, and - where a section has parts - the parts as links.
   No screenshots between the sections: the film is the picture.
   ============================================================ */

/* ---------- the opening ---------------------------------------- */
.crumb .wrap{padding-top:var(--f26-40);padding-bottom:0}
.crumb{font-size:var(--t-label);color:var(--ink-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover,.crumb a:focus-visible{color:var(--ember)}
.crumb .sep{margin:0 .6em;opacity:.5}

.case-head .wrap{padding-top:var(--f26-40);padding-bottom:var(--f30-52)}
.case-head .lab{display:block;margin-bottom:var(--f16-24)}
/* The name a reader arrived on. The thin setting elsewhere is for
   sentences, where the weight marks the words that carry; a project's
   name carries whole, so it is set the way the list on the home page
   sets it - the same weight, one size up. */
.case-head h1{
  font-weight:600;font-size:var(--t-display);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 var(--f16-24);max-width:18ch;text-wrap:balance;
}
.case-head .standfirst{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);max-width:62ch;margin:0}

/* The facts, as a table that reads down on a phone and across on
   a desktop - the terms quiet, the values in the reading ink. */
.facts{
  display:grid;gap:var(--s16) var(--f34-72);margin:var(--f26-40) 0 0;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:700px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts dt{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:var(--s4) 0 0;font-size:var(--t-body-s);line-height:1.5;color:var(--ink-2)}

/* ---------- the film ------------------------------------------- */
.case-film .wrap{padding-top:0;padding-bottom:var(--pad-sec)}

/* ---------- a section, with its rail --------------------------- */
.cs .wrap{padding-top:var(--pad-sec);padding-bottom:var(--pad-sec)}
.cs + .cs .wrap{padding-top:0}
/* A section reached by its own anchor has to clear the capsule. */
.cs{scroll-margin-top:calc(var(--head-h) + 24px)}
@media(min-width:1000px){
  .cs-in{
    display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
    gap:var(--f34-72);align-items:start;
  }
  /* It stays with its own section and lets go at the end of it -
     no script, just the one line. */
  .cs-rail{position:sticky;top:calc(var(--head-h) + 28px)}
}
.cs-rail{margin:0 0 var(--f22-32)}
@media(min-width:1000px){.cs-rail{margin:0}}
.cs-num{
  margin:0;font-family:var(--mono);font-size:var(--t-head);line-height:1;
  color:var(--ember);font-variant-numeric:tabular-nums;
}
.cs-of{
  margin:var(--s12) 0 0;padding-top:var(--s12);border-top:1px solid var(--rule);
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.cs-sub{list-style:none;margin:0;padding:0}
.cs-sub li{border-top:1px solid var(--rule)}
.cs-sub a{
  display:block;padding:var(--s12) 0;
  font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  transition:color var(--dur-2) var(--ease);
}
.cs-sub a:hover,.cs-sub a:focus-visible{color:var(--ember)}

.cs-body h2{
  margin:0 0 var(--f16-24);font-weight:300;font-size:var(--t-title);
  letter-spacing:-.02em;line-height:1.14;max-width:22ch;text-wrap:balance;
}
.cs-count{
  display:inline-block;margin-left:var(--s12);vertical-align:middle;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.cs-body p{margin:0 0 var(--s16);font-size:var(--t-body);line-height:1.65;color:var(--ink-2);max-width:62ch}
.cs-body p:last-child{margin-bottom:0}

.cs-did{
  list-style:none;margin:var(--f22-32) 0 0;padding:0;
  display:grid;gap:var(--s12);grid-template-columns:minmax(0,1fr);
}
@media(min-width:620px){.cs-did{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-did li{
  padding:var(--s16) var(--s20);border:1px solid var(--rule);border-radius:var(--r-film,8px);
  font-size:var(--t-body-s);color:var(--ink);
}
.cs-figs{margin-top:var(--f22-32)}
/* Written as .cs-body p so it outweighs the reading type above it -
   it is a footnote to the figures, not another sentence. */
.cs-body p.cs-caveat{
  margin:var(--f16-24) 0 0;font-size:var(--t-label);line-height:1.5;color:var(--ink-3);
}

/* ---------- the parts of the work ------------------------------ */
.cs-views{list-style:none;margin:var(--f26-40) 0 0;padding:0}
.cs-view{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s16) var(--s24);
  padding:var(--f22-32) 0;border-top:1px solid var(--rule);
  scroll-margin-top:calc(var(--head-h) + 32px);
}
.cs-view:first-child{border-top:0;padding-top:0}
.cs-i{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;
  color:var(--ember);font-variant-numeric:tabular-nums;
}
.cs-view .lab{display:block;margin-bottom:var(--s8)}
.cs-view h3{
  margin:0 0 var(--s12);font-weight:500;font-size:var(--t-sub);
  letter-spacing:-.015em;line-height:1.25;max-width:30ch;text-wrap:balance;color:var(--ink);
}
.cs-view p{margin:0;font-size:var(--t-body-s);line-height:1.65;color:var(--ink-2);max-width:60ch}

/* ---------- the way on ----------------------------------------- */
.pager .wrap{
  display:flex;justify-content:space-between;gap:var(--s24);flex-wrap:wrap;
  padding-top:var(--f30-52);padding-bottom:var(--f30-52);
  border-top:1px solid var(--rule);
}
.pager a{display:grid;gap:var(--s4);min-height:44px}
.pager .dir{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pager .nm{font-size:var(--t-body-s);color:var(--ink);transition:color var(--dur-2) var(--ease)}
.pager a:hover .nm,.pager a:focus-visible .nm{color:var(--ember)}
.pager a:last-child{text-align:right}

/* ---------- the film, kept in the corner ------------------------ */
/* Scroll past the film and it folds into a card in the lower corner,
   so the screens stay in sight while the page is read. It is small
   enough to be ignored and plain enough to be used: the picture itself
   starts and stops it, and three controls sit along its foot. */
.fdock{
  position:fixed;z-index:60;
  right:clamp(12px,2.2vw,28px);
  bottom:calc(clamp(12px,2.2vw,28px) + env(safe-area-inset-bottom,0px));
  width:clamp(168px,24vw,304px);aspect-ratio:16/9;
  border-radius:var(--r-film,8px);overflow:hidden;
  background:#000;border:1px solid var(--edge,rgba(255,255,255,.1));
  box-shadow:0 18px 50px rgba(0,0,0,.52);
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.fdock.is-in{opacity:1;transform:none}
.fdock-video{display:block;width:100%;height:100%;object-fit:cover;background:#000}

/* The picture is the play button; the controls sit on top of it. */
.fdock-hit{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;border:0;cursor:pointer;
}
.fdock-hit::after{
  content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(8,9,12,.62);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.fdock-hit::before{
  content:"";position:absolute;left:50%;top:50%;z-index:1;
  width:0;height:0;margin-left:2px;
  border-left:13px solid var(--ink,#fff);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  transform:translate(-50%,-50%);
  transition:opacity .22s var(--ease);
}
/* Once it is running the picture is the point, so the mark steps back. */
.fdock.is-playing .fdock-hit::after,
.fdock.is-playing .fdock-hit::before{opacity:0}
.fdock.is-playing .fdock-hit:hover::after,
.fdock.is-playing .fdock-hit:focus-visible::after{opacity:1}

.fdock-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:2px;
  padding:var(--s16) var(--s4) var(--s4) var(--s8);
  background:linear-gradient(to top,rgba(4,5,7,.82),transparent);
  pointer-events:none;
}
.fdock-bar > *{pointer-events:auto}
.fdock-grow{margin-left:auto}

.fdock-btn{
  display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:var(--r-s,6px);background:transparent;
  color:var(--ink-2,#d7d8dd);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.fdock-btn svg{width:17px;height:17px;fill:currentColor}
.fdock-btn svg .w{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fdock-btn:hover,.fdock-btn:focus-visible{background:rgba(255,255,255,.14);color:var(--ink,#fff)}

.fdock-close{
  position:absolute;z-index:3;top:var(--s4);right:var(--s4);
  width:30px;height:30px;background:rgba(8,9,12,.58);backdrop-filter:blur(6px);
}
.fdock-close svg{width:15px;height:15px}
.fdock-close:hover,.fdock-close:focus-visible{background:var(--ember);color:#0b0c10}

.fdock-seek{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.16)}
.fdock-seek i{display:block;height:100%;width:0;background:var(--ember)}

/* A phone has less room to give, and the card must clear the thumb. */
@media(max-width:600px){
  .fdock{width:min(46vw,210px);right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .fdock-btn{width:32px;height:32px}
  .fdock-hit::after{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .fdock{transition:none;transform:none}
  .fdock-hit::after,.fdock-hit::before,.fdock-btn{transition:none}
}