/* work-moves.css — The work page: headline letters that answer the pointer, and the six projects as a sideways gallery. */

/* work-weight.css — the headline set letter by letter. Each letter is its own fixed box, placed by transform, so a change of
 * weight lays out one letter only and never the line, the hero or the shrink that shell.js scrubs. */
/* In normal case the first line, "Pharmacoepidemiology,", is 10em wide: it fills the width, short of the screen's height */
.hero .hero-h{font-size:min(calc((100vw - 2*var(--pad))/10.1),150px,19vh)}
html[data-wt-live] .hero-h .line{position:relative;height:1em;white-space:nowrap}
html[data-wt-live] .hero-h .wl{position:absolute;left:0;top:0;height:1em;font-family:'Figtree Flex',var(--sans);font-variation-settings:"wght" 620;white-space:pre;contain:layout size style;transform-origin:0 92%;user-select:none}

/* work-sideways.css — the six projects on a pinned track. The tall #worlds gives the scroll distance, the sticky .sw-pin holds the
 * view, and work-sideways.js moves the track by transform. */
html[data-sw-live] .sw-pin{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip;background:var(--black)}
html[data-sw-live] .sw-track{display:flex;width:600%;height:100%;will-change:transform}
html[data-sw-live] .sw-track>.world{flex:0 0 16.6667%;min-height:0;height:100%}
html[data-sw-live] .sw-far .prop{animation-play-state:paused}

.sw-count{position:absolute;left:0;bottom:0;z-index:4;display:flex;align-items:flex-end;gap:10px;padding:14px 18px 15px var(--pad);background:#1f3b2d;color:#cdbf9a;pointer-events:none}
.sw-roll{display:block;height:1em;overflow:hidden;font-family:var(--sans);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.04em;color:#f3efe4}
.sw-col{display:block;transition:transform .55s cubic-bezier(.215,.61,.355,1)}
.sw-col span{display:block;height:1em}
.sw-of{font-size:clamp(.69rem,.8vw,.81rem);letter-spacing:.06em;line-height:1.5;padding-bottom:.1em}
.sw-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;height:3px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%}

/* the text in the corners stays clear of the drawings at this shorter height */
html[data-sw-live] #w2 .prop.d2,html[data-sw-live] #w5 .prop.over,html[data-sw-live] #w6 .prop.d3{margin-top:12vh}

/* work-narrow.css — phones and tablets: every layout redrawn for the width, not squeezed. Headlines fit exactly: --fit is the width
 * to fill and --n the word's width in em, so no size is guessed. The thread keeps to the margins, routed in work-moves.js. */
@media (max-width:899.98px),(max-height:500px) and (hover:none){
  :root{--fit:calc(100vw - 2*var(--pad))}

  /* the header: a band in the surface's own colour, so text never runs under bare letters; it leaves as you read on */
  .whead{padding:7px var(--pad);background:var(--black);transition:color .35s ease,background-color .35s ease,transform .3s cubic-bezier(.215,.61,.355,1)}
  .whead.on-ivory{background:var(--ivory)}
  .whead.sw-held{background:none}
  .whead.w-hide{transform:translate3d(0,-100%,0)}
  .whead a::before{content:"";position:absolute;inset:-11px -5px}
  .whead nav{align-items:center}
  .whead .shell-btn{min-height:40px;box-sizing:border-box}

  /* capabilities: a ledger on the thread, each dot sitting on the line in the margin */
  .caps{min-height:0;padding-top:max(11vh,84px);padding-bottom:clamp(56px,10vh,96px)}
  .caps h2{--n:4.85;margin-bottom:clamp(20px,4vh,40px);font-size:calc(var(--fit)/var(--n));text-align:left;white-space:nowrap}
  .caps .thread path[data-arc]{display:none}
  .orbit{display:flex;flex-direction:column;height:auto;max-width:none;margin:0}
  .branch{position:static;order:0;margin:0 0 10px;font-size:12px}
  .branch.right{order:2;margin-top:36px}
  .cap{position:relative;left:auto!important;top:auto!important;order:1;width:auto;margin:0;padding:15px 0 15px 14px;border-top:1px solid rgba(241,236,224,.16);text-align:left}
  .orbit .cap:nth-child(n+7){order:3}
  .orbit .cap:nth-child(n+11){order:4;margin-top:36px;border-bottom:1px solid rgba(241,236,224,.16)}
  .cap .core{position:absolute;left:calc(var(--pad)/-2 - 7px);top:17px;width:14px;height:14px;margin:0;box-sizing:border-box}
  .cap b{font-size:16px;line-height:1.25}
  .cap span{font-size:12px;line-height:1.5;letter-spacing:.04em}

  /* the gallery: a stacked sheet for each project. The word fills the width, the note reads under it, the sheet and drawing share a row */
  .world{--col:30%;display:grid;grid-template-columns:minmax(0,1fr) var(--col);grid-template-rows:repeat(5,auto);align-content:center;align-items:center;justify-items:stretch;column-gap:16px;row-gap:clamp(9px,1.9vh,30px);min-height:100svh;padding:62px var(--pad) 68px}
  .world:nth-child(even){grid-template-columns:var(--col) minmax(0,1fr)}
  #w1{--n:2.94}#w2{--n:1.72}#w3{--n:2.12}#w4{--n:3.36}#w5{--n:2.19}#w6{--n:2.54}
  .world .corner{position:static;grid-column:1/-1;max-width:none;text-align:left;font-size:12px}
  .world .tl{grid-row:1}
  .world .tr{grid-row:3;max-width:60ch}
  .world .h-poster,.world .h-poster.wide{grid-column:1/-1;grid-row:2;font-size:min(calc(var(--fit)/var(--n)),31vh);text-align:left;white-space:nowrap}
  .world .paper{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:1;grid-row:4/span 2;min-width:0;padding:10px 12px;margin:0 6px 6px 0;font-size:10.5px;line-height:1.5}
  .world .paper .row{gap:10px;padding:4px 0}
  .world .paper .figure{font-size:30px}
  .world .paper .tag{margin-bottom:4px}
  .world:nth-child(even) .paper{grid-column:2}
  .world .prop{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;max-width:none;grid-column:2;grid-row:4/span 2;align-self:center;margin:0!important;z-index:1}
  .world:nth-child(even) .prop{grid-column:1}
  .world .prop.over{grid-row:5}
  .world .prop:not(.over):has(~ .prop.over){grid-row:4}
  #w1 .prop svg{aspect-ratio:160/110}#w1 .prop.over svg{aspect-ratio:150/100}#w2 .prop svg{aspect-ratio:160/120}#w2 .prop.over svg{aspect-ratio:200/60}#w3 .prop svg,#w6 .prop svg{aspect-ratio:1}#w4 .prop svg{aspect-ratio:140/170}#w5 .prop svg{aspect-ratio:110/200}
  #w5 .prop.over{display:none}
  #w5 .prop{grid-row:4/span 2;justify-self:center;width:62%!important}
  .world .corner.br{position:absolute;right:var(--pad);bottom:13px;left:auto;grid-column:auto}
  .corner a{position:relative}
  .corner a::before{content:"";position:absolute;inset:-12px -6px}
  html:not([data-sw-live]) .world .thread{display:none}
  .sw-count{padding:10px 16px 12px var(--pad)}

  /* the words about the work, and the last screen */
  .dag{min-height:max(46vh,400px)}
  .statement p,.about p{font-size:16px}
  .about .facts{grid-template-columns:1fr 1fr}
  .contact{gap:clamp(20px,4vh,40px);padding-top:84px;padding-bottom:var(--pad)}
  .contact h2{--n:6.96;max-width:none;font-size:calc(var(--fit)/var(--n));white-space:nowrap}
  .tangle{position:relative;right:auto;top:auto;transform:none;width:min(100%,520px);justify-self:end}
  .pull{position:static;justify-self:start;min-height:44px}
  .wfoot{position:static;flex-wrap:wrap;gap:24px 22px;margin-top:clamp(16px,5vh,48px);font-size:12px}
  .wfoot a{position:relative}
  .wfoot a::before{content:"";position:absolute;inset:-12px -6px}
  .drawer{width:100vw;padding-top:84px}
  .drawer h3{--n:6.96;font-size:calc((100vw - 2*clamp(24px,5vw,72px))/var(--n));white-space:nowrap}
  .drawer .close{top:16px;right:clamp(24px,5vw,72px);min-height:44px;min-width:64px}
  .drawer li a{min-height:44px;box-sizing:border-box;align-items:center}
}

/* a phone at its narrowest: the sheets carry less air */
@media (max-width:359.98px){
  .world{row-gap:8px}
  .world .corner{font-size:11.5px}
  .world .tr{line-height:1.42}
}

/* a tall phone: the spare height goes to the type */
@media (max-width:699.98px) and (min-height:740px){
  .world{row-gap:24px}
  .world .corner{font-size:13px}
  .world .paper{padding:14px;font-size:11.5px}
  .world .paper .row{padding:6px 0}
  .world .paper .figure{font-size:36px}
}

/* a tablet upright: the same stack with room to breathe */
@media (min-width:700px) and (max-width:899.98px){
  .world{--col:34%;column-gap:32px;row-gap:clamp(20px,3.4vh,40px)}
  .world .corner{font-size:14px}
  .world .paper{padding:20px 22px;font-size:13.5px}
  .world .paper .figure{font-size:44px}
  .world .paper .tag{font-size:11px;margin-bottom:10px}
  .world .h-poster,.world .h-poster.wide{font-size:min(calc(var(--fit)/var(--n)),25vh)}
}

/* wide enough for the ledger's title and note side by side */
@media (min-width:560px) and (max-width:899.98px),(max-height:500px) and (hover:none){
  .cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:24px;align-items:baseline}
  .cap span{margin-top:0}
}

/* a phone on its side, or a short tablet: the word and its note on the left, the sheet and drawing on the right */
@media (max-height:500px) and (min-width:480px) and (max-width:899.98px),(max-height:500px) and (hover:none),(min-width:700px) and (max-width:899.98px) and (max-height:830px){
  :root{--leaf:calc((100vw - 2*var(--pad) - 44px)*.54)}
  .world,.world:nth-child(even){grid-template-columns:minmax(0,54fr) minmax(0,31fr) minmax(0,13fr);grid-template-rows:auto auto auto;column-gap:22px;row-gap:8px;padding:50px var(--pad) 46px}
  .world .corner{grid-column:1;font-size:11.5px}
  .world .h-poster,.world .h-poster.wide{grid-column:1;font-size:min(calc(var(--leaf)/var(--n)),30vh)}
  .world .paper,.world:nth-child(even) .paper{grid-column:2;grid-row:1/span 3;margin:0;padding:8px 10px;font-size:10px;line-height:1.4}
  .world .paper .row{padding:3px 0}
  .world .paper .figure{font-size:24px;margin:2px 0}
  .world .prop,.world:nth-child(even) .prop,.world .prop:not(.over):has(~ .prop.over),#w5 .prop{grid-column:3;grid-row:1/span 3;width:100%!important;justify-self:center}
  .world .prop.over{display:none}
  .sw-count{padding:6px 12px 8px var(--pad)}
  .sw-roll{font-size:20px}
  .world .corner.br{bottom:7px}
  .contact{padding-top:60px}
  .tangle{width:min(100%,380px)}
  .hero{padding-top:52px;padding-bottom:64px}
  .hero .hero-h{font-size:min(calc((100vw - 2*var(--pad))/10.1),15vh)}
  .hero .hero-idx{display:none}
  .hero .hero-sub{left:var(--pad);right:var(--pad);max-width:none;text-align:left}
}

/* Scrolling: ScrollTrigger cannot measure a scrolled page under CSS smooth scrolling, and turning a phone makes it measure one */
html{scroll-behavior:auto}

/* When a phone's address bar folds away, the screen grows past the pin, which is sized to the small screen. Each sheet's colour runs on
 * below it along the foot of the track, so an ivory sheet does not end in a black band. */
@supports (overflow:clip){
  @media (max-width:899.98px),(max-height:500px) and (hover:none){
    html[data-sw-live] #worlds{overflow:clip}
    html[data-sw-live] .sw-pin{overflow-x:clip;overflow-y:visible}
    html[data-sw-live] .sw-track{position:relative}
    html[data-sw-live] .sw-track::after{content:"";position:absolute;left:0;right:0;top:100%;height:160px;background:repeating-linear-gradient(90deg,var(--ivory) 0 16.6667%,var(--black) 16.6667% 33.3333%)}
  }
}

/* Between tablet and desktop the word would reach the start of its line; a touch smaller, it stops short of it */
@media (min-width:900px) and (max-width:1199.98px){.contact h2{font-size:6.8vw}}