/* ---------- case study ----------
   The shape of a project page, in the work page's own voice: the same nine
   columns, the same three type faces, the same mono label in the accent over
   every block. Loaded after site.css, only on a project page.

   Everything across the work column is laid on seven tracks — the same seven
   the caption rows and the play grid already use — so a figure's edge lands on
   a page column wherever it sits. */
#col{--track:calc((100% - 6 * var(--cap-gap)) / 7)}

/* one rule for every block that runs to the right edge of the window */
.bleed{margin-right:var(--bleed);padding-right:var(--edge)}

/* ---------- the rail ----------
   Every row of the page is placed by hand. Auto-placed items step around a
   cell that is already taken, and the head and the picture both span, so
   leaving the rail and the column to find their own way is one edit away from
   the wrong one. Named rows, no guessing. */
#page > .cshead{grid-row:1}
#page > .chero{grid-row:2}
#page > #rail{grid-column:1;grid-row:3}
#page > #col{grid-column:2;grid-row:3}
#page > #foot{grid-row:4}

/* Under the picture the rail carries the way out, the project's name and its
   contents — one column of side nav, riding together so the project is still
   named when the reader is four sections down.

   The name is not the rail's first line, the back link is, so the work column
   is dropped by exactly that much: measured in case.js, because it is whatever
   a 10px line and its gap come out at. Then the name and the sentence beside
   it start on the same line — one row across the page, not two. */
.csrail{position:sticky;top:var(--stick,58px);z-index:4;
  background:var(--bg);padding-bottom:14px}
/* the way out, then the project, then its sections — one column of side nav */
.csback{width:48.816%}
.csback a{display:inline-block;color:var(--dim);font-size:12px;
  letter-spacing:-0.012em;text-decoration:none}
.csback a:hover{color:var(--accent)}
.csid{margin:22px 0 0}
/* the directory's own sticky would be a second one inside this one */
.csrail #dir{position:static;max-height:none;overflow:visible;margin-top:34px}
#dir .dirlist.toc li{cursor:pointer}
/* the rows are a contents list, not project names: set in the reading face,
   not the directory's heavier Triplex */
#dir .dirlist.toc li b{display:flex;gap:8px;align-items:baseline}
/* the number rides in the tags' voice, and unlike a tag it is always there */
#dir .dirlist.toc li b i{font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:-0.01em;color:var(--accent);flex:none}
#dir .dirlist.toc li.on b,#dir .dirlist.toc li:hover b{color:var(--accent)}
#dir .dirlist.toc li.up b i{color:var(--dim)}
/* the rail folds away: Hide / Show sits where the work page keeps its filters.
   Folded, the rail is just its way out and that switch, and the work takes the
   whole page under it. Wide screens only; on one column the rail already stacks. */
.railtog{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 auto;padding:2px;border:0;
  background:none;color:var(--dim);cursor:pointer;font:inherit}
.railtog svg{display:block;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.railtog:hover{color:var(--accent)}
.railtog .rt-l{display:none}
/* folded: the button leaves the rail and stays pinned just under the nav, flush
   with it, as the page scrolls, on the page colour so the work slides under it */
body.rail-off .railtog{position:fixed;left:var(--edge);top:calc(var(--stick,58px) - 10px);   /* --stick is the nav plus 10px: this is the nav's own bottom edge */z-index:60;margin:0;
  padding:4px 8px 4px 0;background:#fafafa;color:var(--dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:-0.01em;text-transform:uppercase}
body.rail-off .railtog:hover{color:var(--accent)}
body.rail-off .railtog .rt-l{display:inline}
body.rail-off .railtog svg{transform:rotate(180deg)}
/* Folding is the page's own two columns animating: the rail's track closes to
   nothing and the work's opens to the full width, so the pictures grow into the
   room rather than jumping. The rail fades and slides out first (quickly, so the
   narrowing column is never seen squeezing its text) and comes back only once
   its column has opened again. */
@media (min-width:1261px){
  #page{transition:grid-template-columns .75s cubic-bezier(.65,0,.35,1),column-gap .75s cubic-bezier(.65,0,.35,1)}
  body.rail-off #page{grid-template-columns:0% 100%;column-gap:0}
  #page > #rail{min-width:0}
  #rail .csrail{transition:opacity .45s ease .4s,transform .7s cubic-bezier(.22,1,.36,1) .35s,visibility 0s 0s}
  body.rail-off #rail .csrail{opacity:0;transform:translateX(-28px);visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,transform .35s cubic-bezier(.4,0,1,1),visibility 0s .35s}
  body.rail-off .railtog{animation:tabin .55s cubic-bezier(.22,1,.36,1) .45s both}
  /* The work's own seven columns stay on the page grid when it opens to all
     nine: the third and the seventh each take two page columns (gutter
     included), so every placement keeps its numbers and lands on a page line.
     The intro paragraph still starts under 'work' and the facts stay a pair of
     single columns. Both states in % so the tracks ease with the fold. */
  #page > #cs2 .g9{grid-template-columns:repeat(7,calc((100% - 6 * 0.6657%) / 7));column-gap:0.6657%;
    transition:grid-template-columns .75s cubic-bezier(.65,0,.35,1),column-gap .75s cubic-bezier(.65,0,.35,1)}
  body.rail-off #page > #cs2 .g9{--c1:calc((100% - 8 * 0.517%) / 9);--c2:calc((100% - 8 * 0.517%) * 2 / 9 + 0.517%);
    grid-template-columns:var(--c1) var(--c1) var(--c2) var(--c1) var(--c1) var(--c1) var(--c2);column-gap:0.517%}
}
body.rail-init #page,body.rail-init #rail .csrail,body.rail-init #page > #cs2 .g9{transition:none!important}
body.rail-init .railtog{animation:none!important}
@keyframes tabin{from{opacity:0;transform:translateX(-10px)}}

/* ---------- motion on the new-format pages ----------
   The hero settles in on load; everything else in #cs2 eases up into place the
   first time it scrolls into view, a beat apart when several arrive together. */
.chero img,.chero video{animation:heroin 1.4s cubic-bezier(.22,1,.36,1) both}
@keyframes heroin{from{opacity:0;transform:scale(1.025)}}
.chero{overflow:hidden}
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--rd,0ms),transform 1.1s cubic-bezier(.22,1,.36,1) var(--rd,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  #page,#rail .csrail,body.rail-off #rail .csrail{transition:none}
  body.rail-off .railtog,.chero img,.chero video{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}
/* on one column the rail stacks above the work: the way back stays, the contents list goes */
@media (max-width:1260px){ .railtog{display:none!important} #rail #dir{display:none} }

/* ---------- the head, and the picture under it ----------
   Both take the whole page rather than a column of it: the nav spreads across
   the nine columns the way the footer's links do, and the picture runs the
   full width beneath it, over the rail as well as the work column. So a
   project opens on its own image, and the site's own line sits above it.

   Everything below that is the two columns the work page is built on, which is
   why these two are the only children of #page that span. */
#page > .cshead,#page > .chero{grid-column:1/-1}
.cshead{margin:calc(-1 * var(--edge)) var(--bleed) 0;
  padding:var(--edge) var(--edge) 11px}
/* Each link on a column line, not spread to fit: the nav runs from column 5's
   left line to the right edge, and inside it the three sit two columns apart —
   columns 5, 7 and 9. A column plus its gutter is 11.1664% of the page, so two
   of them is 22.3328%, which is 40.3603% of this box. */
.cshead nav{width:55.3344%;display:grid;
  grid-template-columns:40.3603% 40.3603% 1fr}

/* The picture is shown whole: the box takes the height the file's own
   proportions give it at the page's full width, rather than a height chosen
   here that would crop it. */
.chero{position:relative;background:#eeedeb;margin:0 var(--bleed) 30px}
.chero img,.chero video{display:block;width:100%;height:auto}

/* ---------- title ----------
   Two columns of the seven: the name and its tag on the first two, the line
   that says what the project is on the rest.

   A project page is set in Simplex, not the Triplex the work page cuts its
   name in. Both faces have a weight 100, but Triplex draws every stroke three
   times, so at its lightest it still reads heavy — lightening a heading means
   changing the face, not the number. A case study is a page of reading. */
.csname{margin:0;font-family:var(--sim);font-weight:100;font-size:19px;
  letter-spacing:-0.03em;line-height:1.1}
.cskicker{margin:6px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--accent)}
/* a project's one sentence: the largest type on the page after the picture */
.cslede{margin:0 0 0;font-family:var(--sim);font-weight:100;
  font-size:clamp(28px,3.24vw,56px);line-height:1.12;letter-spacing:-0.035em;
  text-wrap:pretty}
.cslede .hl{color:var(--accent)}

/* ---------- the credits row ----------
   Four equal cells across the work column: label in the accent mono, value in
   the same face and size as a project's season. */
.csmeta{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--cap-gap);
  row-gap:18px;margin:40px 0 0}
.csmeta h3{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--accent)}
.csmeta p{margin:0;font-size:12px;line-height:1.45;letter-spacing:-0.02em}
.csmeta a{color:var(--ink);text-decoration:none;border-bottom:1px solid #dcdbd8}
.csmeta a:hover{color:var(--accent);border-color:currentColor}

/* ---------- blocks ---------- */
/* the label every block carries, in the directory's voice */
.slab{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--accent)}
.block-t{margin:0 0 22px;font-family:var(--sim);font-weight:100;font-size:16px;
  letter-spacing:-0.03em;line-height:1.25}

.csblock{margin-top:74px}
.csblock.tight{margin-top:44px}

/* Cards are ruled, not filled: a hairline over each one, the way the directory
   rules its rows. A panel would be the only box on a page that has none. */
.cards{display:grid;column-gap:var(--cap-gap);row-gap:26px;
  grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards > div{border-top:1px solid #e6e5e2;padding-top:11px}
.cards h4{margin:0 0 8px;font-family:var(--sim);font-weight:100;font-size:16px;
  letter-spacing:-0.025em;line-height:1.3}
.cards h4 i{font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:-0.01em;color:var(--accent);margin-right:8px}
.cards p{margin:0;font-size:12px;line-height:1.6;letter-spacing:-0.02em;
  text-wrap:pretty}

/* Five of the seven tracks: long copy wants a measure, and the picture beside
   it already owns the edge. */
.prose{max-width:calc(5 * var(--track) + 4 * var(--cap-gap))}
.prose p{margin:0 0 13px;font-size:12px;line-height:1.62;letter-spacing:-0.02em;
  text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
/* the opening runs in two columns across the work column, so it reads as a
   block of setting rather than as one long measure */
.prose.two{max-width:none;columns:2;column-gap:var(--cap-gap);
  margin-right:var(--bleed);padding-right:var(--edge)}
.prose.two p{break-inside:avoid}

/* ---------- a section's own header ----------
   A rule across the column, the number in the accent on the first two tracks,
   the title on the rest — the same split as the title block, so the page keeps
   one spine down its left side. */
.band{display:grid;
  grid-template-columns:calc(2 * var(--track) + var(--cap-gap)) 1fr;
  column-gap:var(--cap-gap);align-items:start;
  margin:104px 0 34px;padding-top:15px;border-top:1px solid #e6e5e2}
.band .n{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--accent)}
.band h2{margin:0;font-family:var(--sim);font-weight:100;
  font-size:clamp(28px,3.24vw,56px);letter-spacing:-0.035em;line-height:1.12}
.band p{margin:8px 0 0;font-size:12px;line-height:1.5;letter-spacing:-0.02em;
  color:var(--dim);max-width:52ch}

/* ---------- figures ----------
   A row of pictures whose columns are its pictures' own proportions: widths in
   fr of the aspect ratios means every image in the row comes out the same
   height, at its own shape, with nothing cropped. The ratios are written on
   each row in the markup, beside the pictures they belong to. */
.grow{display:grid;column-gap:var(--cap-gap);align-items:start;
  margin-right:var(--bleed);padding-right:var(--edge)}
.grow + .grow{margin-top:var(--gutpx)}
.grow .card{display:block;min-width:0}
.grow .rect{width:100%;height:auto}

/* a single picture with its own label over it */
.fig{margin:0}
.fig + .fig{margin-top:44px}
.fig .rect{width:100%;height:auto}
.figcap{margin:8px 0 0;font-size:12px;line-height:1.6;letter-spacing:-0.02em;
  color:var(--dim);max-width:60ch}

/* ---------- palette ----------
   Drawn rather than pictured: the swatch is the colour, and its hex sits under
   it in the mono the rest of the page labels with. */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--cap-gap);
  margin-right:var(--bleed);padding-right:var(--edge)}
.swatches div{min-width:0}
.swatches b{display:block;height:clamp(90px,9.4vw,160px)}
.swatches em{display:block;margin-top:7px;font-style:normal;font-family:var(--mono);
  font-size:10.5px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink)}
.swatches span{display:block;margin-top:2px;font-size:12px;letter-spacing:-0.02em;
  color:var(--dim)}

@media (max-width:1260px){
  /* One column, and the two-column placement at the top of this file has to be
     undone for it. #col carries grid-column:2, and with a single explicit track
     that conjures an implicit second one — so the grid stays two columns wide
     while every full-bleed child spans 1/-1, which resolves against the
     explicit grid only and lands them all in the first track. That is the head
     at half width, the hero at half width, and a footer squeezed to 436px with
     its paper on top of its own type. The rail stacks above the work instead. */
  #page > .cshead,#page > .chero,
  #page > #rail,#page > #col,#page > #foot{grid-column:1/-1}
  #page > #rail{grid-row:3}
  #page > #col{grid-row:4}
  #page > #foot{grid-row:5}
  #page > .csback{position:static;width:auto;margin:0 0 14px}
  #page > .csback{mix-blend-mode:normal}
  .csback a{color:var(--dim)}
  .csrail{position:static;padding-bottom:0}
  .csrail #dir{margin-top:26px}
  .cshead{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  /* display:flex, not just width:auto — the nav is a three-column grid whose
     tracks are percentages, and a percentage track against an auto width
     collapses: 134px of box for 192px of type, with 'about' off the edge */
  .cshead nav{width:auto;gap:26px;display:flex;grid-template-columns:none}
  /* still edge to edge: dropping the bleed left it inset by the page margin,
     which is the one thing the hero is not supposed to respect */
  .chero{margin:0 var(--bleed) 22px}
  .chero.tbd{height:clamp(140px,34vw,220px)}
  .prose.two{columns:1;margin-right:0;padding-right:0}
  .csmeta{grid-template-columns:repeat(2,1fr)}
  .cards,.cards.two{grid-template-columns:1fr;row-gap:22px}
  .prose{max-width:none}
  .band{grid-template-columns:1fr;row-gap:8px;margin-top:64px}
  .grow{grid-template-columns:1fr!important;row-gap:var(--gutpx);
    margin-right:0;padding-right:0}
  .swatches{margin-right:0;padding-right:0}
  .csblock{margin-top:52px}
  .bleed{margin-right:0;padding-right:0}
}

/* ---------- not written yet ----------
   A slot waiting for its copy, marked in the labels' voice and kept pale, so
   a page under way reads as unfinished rather than as broken. Every one of
   these is a line to replace; nothing else on the page has to change. */
/* Named on every element it can land on, so it outranks that element's own
   size: a placeholder reads the same quiet way whether it is standing in for
   a 33px section title or for a line of body copy. */
.tbd,.cslede.tbd,.band h2.tbd,.block-t.tbd,.cards h4.tbd,#col .prose p.tbd{
  font-family:var(--mono);font-size:10.5px;font-weight:400;line-height:1.5;
  letter-spacing:-0.01em;text-transform:uppercase;color:#c4c3c0}
p.tbd,h4.tbd{margin:0}
.cards .tbd{margin-bottom:0}
/* an empty picture keeps the hero's box, so the page still opens on one */
/* an empty one has no file to take a height from, so it is given one */
.chero.tbd{background:#f0efed;height:clamp(160px,17vw,280px)}
.csmeta p.tbd,.prose p.tbd{margin:0}

/* every picture on a case study page opens large */
#cs2 img,#cs2 video,.chero img,.chero video{cursor:zoom-in}
#cs2 .pats,#cs2 .chairs,#cs2 .heatseq,#cs2 .spec{cursor:zoom-in}
/* a live drawing opened large: lifted over the page on the page colour, fitted to the window */
#cs2 .lifted{position:fixed!important;inset:0;z-index:30;margin:0!important;display:grid!important;place-items:center;
  background:var(--bg)!important;padding:clamp(16px,4vw,64px);cursor:zoom-out;transform:none!important;opacity:1!important}
/* the spectrum opens as one block: bar and words stacked, centred, the words still under their bars */
#cs2 .lifted.spec{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch}
#cs2 .lifted.spec > .words{width:100%}
#cs2 .lifted > svg,#cs2 .lifted > .hrow,#cs2 .lifted > .bar{max-width:100%;max-height:100%;width:100%!important;height:auto!important}
#cs2 .lifted.chairs > svg,#cs2 .lifted.pats > svg{width:auto!important;height:100%!important;max-width:100%}
html.lifting #rail,html.lifting .cshead{visibility:hidden}

/* one column: every block on a case study page runs the full width (the
   desktop placements ask for 3 to 7 tracks, and on a two-track grid that
   conjures extra columns and pushes the page wider than the phone). The
   facts keep their two-up. Anything still too wide is clipped, never scrolled. */
@media (max-width:1260px){
  #cs2 .g9 > *:not(.fact){grid-column:1/-1!important}
  #cs2 .stats{grid-template-columns:1fr}
  html,body{overflow-x:clip}
  #cs2{min-width:0;max-width:100%}
  #cs2 img,#cs2 video,#cs2 svg,#cs2 iframe{max-width:100%}
}