/* Versor drafts: shared styles for the draft home page and blog.
   Link /_design-system/tokens.css and /_design-system/components/styles.css first. The nav bar, brand lockup,
   Contact link, lede, footer bar and social icons are the design system's vs- parts, used as they are; this sheet
   adds what a multi-section site needs, in the system's terms: no borders, radii or shadows, space between things,
   Figtree at 500 for headings and links and 300 for running text. The nav's scrolled glass is the one departure
   from the system's single ground and its nothing-else-moves rule. */
*{box-sizing:border-box}
:root{--article:900px;--column:1168px;--gutter:max(var(--space-56),(100% - var(--column))/2);--nav-h:82px;--section:112px}
/* Smooth in-page jumps for the nav anchors; respects a reduced-motion preference. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
a{color:var(--teal-text);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3{margin:0;color:var(--ink);font-weight:500;text-wrap:balance}
h1,h2{letter-spacing:-.03em}
h3{letter-spacing:-.01em}
/* the footer's dateline type, for other place, date and venue lines */
.dateline{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.intro{margin:0;max-width:540px;font-size:20px;line-height:1.5;font-weight:300;color:var(--body)}

/* nav: the design system's bar, held at the top while the page scrolls. It matches the page at the top and turns
   to frosted glass, a translucent rule-coloured tint of bg, once content scrolls under it (.scrolled, set by the
   page's script). */
.vs-bar{padding-inline:var(--gutter)}
.site-nav{position:sticky;top:0;z-index:10;transition:background-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.site-nav.scrolled{background-color:color-mix(in srgb,color-mix(in srgb,var(--bg) 88%,var(--rule)) 78%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
@media (prefers-reduced-motion:reduce){.site-nav{transition:none}}
.nav-links{display:flex;align-items:center;gap:var(--space-24);font-size:15px}
.nav-links [aria-current="page"]{color:var(--ink)}

/* closing line above the footer bar */

/* blog index */
.page-head{display:flex;flex-direction:column;gap:var(--space-24);padding:96px var(--gutter) var(--space-56)}
.page-head h1{font-size:64px;line-height:1}
.posts{padding:0 var(--gutter)}
.post-row{display:grid;grid-template-columns:160px 1fr;gap:var(--space-32);padding-block:var(--space-32);color:var(--body)}
.post-row:hover{color:var(--body)}
.post-row .dateline{padding-top:8px;line-height:1.7}
.post-row h2{margin-bottom:var(--space-10);font-size:28px;line-height:1.2;letter-spacing:-.015em;color:var(--teal-text)}
.post-row:hover h2{color:var(--ink)}
.post-row p{margin:0;max-width:620px;font-size:17px;line-height:1.55;font-weight:300}
/* blog index: long preview, with the post's hero, summary points and opening paragraph */
.post-preview{display:grid;grid-template-columns:160px 1fr;gap:var(--space-32);padding-block:var(--space-32);color:var(--body)}
.post-preview .dateline{padding-top:8px;line-height:1.7}
.pp-body{max-width:820px}
.pp-title{display:block;color:var(--teal-text)}
.pp-title h2{margin:0 0 var(--space-24);font-size:32px;line-height:1.2;letter-spacing:-.015em;color:inherit}
.pp-title:hover{color:var(--ink)}
.pp-hero{display:block;margin-bottom:var(--space-24);overflow:hidden}
.pp-hero img{display:block;width:100%;height:auto;transition:transform .4s ease}
.pp-hero:hover img{transform:scale(1.015)}
.pp-points{margin:0 0 var(--space-24);padding:0;list-style:none;display:grid;gap:12px;font-size:18px;font-weight:300;line-height:1.45}
.pp-points li{position:relative;margin:0;padding-left:26px}
.pp-points li::before{content:"";position:absolute;left:2px;top:.5em;border-style:solid;border-width:.3em 0 .3em .48em;border-color:transparent transparent transparent var(--teal)}
.post-preview p{margin:0 0 var(--space-24);font-size:17px;line-height:1.6;font-weight:300}
.pp-more{font-size:15px;font-weight:500;color:var(--teal-text)}
.pp-more:hover{color:var(--ink)}
@media (max-width:640px){
  .post-preview{grid-template-columns:1fr;gap:var(--space-10);padding-block:var(--space-28)}
  .post-preview .dateline{padding-top:0}
  .pp-title h2{font-size:24px;margin-bottom:var(--space-16,16px)}
  .pp-points{font-size:15px;gap:10px}.pp-points li{padding-left:22px}
  .post-preview p{font-size:16px}
}
.post-row:has(.row-thumb){grid-template-columns:160px 1fr 280px}
.row-thumb{display:block;width:100%;height:auto;align-self:start;margin-top:6px}
@media (max-width:820px){.post-row:has(.row-thumb){grid-template-columns:160px 1fr}.row-thumb{grid-column:2;margin-top:var(--space-10)}}
@media (max-width:640px){.post-row:has(.row-thumb){grid-template-columns:1fr}.row-thumb{grid-column:auto}}
.empty{padding:64px 0;font-size:16px;font-weight:300;color:var(--body)}

/* article */
article{padding:80px var(--gutter) 0}
article > *{max-width:var(--article)}
article .kicker{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--space-28)}
.release-kicker{max-width:var(--article);justify-content:space-between;align-items:baseline}
.release-kicker a{color:var(--teal-text);border-bottom:1px solid color-mix(in srgb,var(--teal-text) 45%,transparent)}
.release-kicker a:hover{color:var(--ink);border-bottom-color:var(--gold)}
article h1{margin-bottom:var(--space-28);font-size:52px;line-height:1.08;text-wrap:pretty}
article .standfirst{margin:0 0 48px;font-size:22px;line-height:1.45;font-weight:300;color:var(--body)}
article h2{margin:56px 0 18px;font-size:28px;line-height:1.2;letter-spacing:-.015em}
article h3{margin:36px 0 12px;font-size:20px}
article p,article li{font-size:18px;line-height:1.65;font-weight:300;color:var(--body)}
article p{margin:0 0 22px}
article ul,article ol{margin:0 0 22px;padding-left:22px}
article li{margin-bottom:10px}
article strong{font-weight:500;color:var(--ink)}
article a{font-weight:500}
article blockquote{margin:32px 0;padding-left:var(--space-24);font-size:21px;line-height:1.5;font-weight:300;color:var(--ink)}
article hr{height:0;margin:56px 0;border:0}
article figure{margin:36px 0}
article figure img,article figure video{display:block;width:100%}
.split-video{position:relative}
.split-label{position:absolute;z-index:2;top:0;padding:3px 9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:color-mix(in srgb,var(--ink) 72%,transparent);pointer-events:none}
.split-label-left{left:0}
.split-label-right{left:50%}
article figure.plot svg{display:block;width:100%;height:auto}
article figcaption{margin-top:var(--space-10);font-size:14px;font-weight:300;color:var(--body)}
.byline{margin-top:56px}
.byline .who{font-size:15px;font-weight:500;color:var(--ink)}
.byline .what{font-size:15px;font-weight:300;color:var(--body)}
/* the space between the last section and the footer */
main{padding-bottom:var(--section)}
.post-nav{padding:48px var(--gutter) 0;font-size:15px}

@media (max-width:600px){
  :root{--gutter:var(--space-24);--nav-h:66px;--section:72px}
  .nav-links{font-size:14px}
  .nav-links a:not(.vs-contact){display:none}
  .dateline{font-size:11px}
  .intro{font-size:17px}
  .page-head{padding-top:48px;padding-bottom:var(--space-32)}.page-head h1{font-size:44px}
  .post-row{grid-template-columns:1fr;gap:var(--space-10);padding-block:var(--space-28)}
  .post-row .dateline{padding-top:0}.post-row h2{font-size:22px}.post-row p{font-size:16px}
  article{padding-top:48px}
  article h1{font-size:34px}article .standfirst{font-size:19px;margin-bottom:32px}
  article h2{font-size:24px;margin:40px 0 14px}article h3{font-size:18px}
  article p,article li{font-size:17px}
  article blockquote{font-size:18px;margin:24px 0}
  .post-nav{padding-top:32px}
}

/* interactive plot: a tooltip beside the hovered mark, the hovered checkpoint lit across series, legend entries that hide a series */
article figure.plot{position:relative}
.plot .mk,.plot .lg{cursor:pointer;outline-offset:3px}
.plot.hl [data-ck]:not(.on){opacity:.3}
.plot .off{display:none}
.plot .lg[aria-pressed="false"]{opacity:.4}
.plot-tip{position:absolute;z-index:2;pointer-events:none;padding:8px 10px;background:var(--bg);border:1px solid var(--rule);font-size:13px;line-height:1.45;font-weight:300;color:var(--ink);white-space:pre}
.plot-tip[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.plot [data-ck]{transition:opacity .15s}}

/* task grid: three tiles a row, rows labelled by body model; a switch above flips every tile to its real episode */
article .tasks{max-width:var(--article);margin:36px 0}
.tasks-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--space-16);margin-bottom:var(--space-24)}
.tasks-title{font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.switch{display:flex;gap:var(--space-20);font-size:15px}
.switch button{font:inherit;font-weight:500;padding:0 0 2px;border:0;border-bottom:1.5px solid transparent;background:none;color:var(--body);cursor:pointer}
.switch button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.tasks-row{margin-bottom:var(--space-32)}
.tasks-rowlabel{margin-bottom:var(--space-10)}
.tasks-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16) var(--space-20)}
.tasks-rowlabel{grid-column:1 / -1}
.tile{margin:0;position:relative}
.tile-v,.tile-ph{display:block;width:100%;aspect-ratio:4/3;background:color-mix(in srgb,var(--bg) 85%,var(--rule));object-fit:cover}
.tile-ph{display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.tile.no-real::after{content:"no real footage cut yet";position:absolute;inset:0 0 auto 0;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.tile figcaption{margin-top:var(--space-10);font-size:14px;line-height:1.45;font-weight:300;color:var(--body)}
.tile figcaption b{font-weight:500;color:var(--ink)}
.tile .tag{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
@media (max-width:600px){.tasks-row{grid-template-columns:1fr 1fr}}

/* task list and feature rows: the nine tasks enumerated without video, then a row of clips per characteristic */
article .tasklist-groups{max-width:var(--article);margin:var(--space-24) 0 var(--space-40);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-20) var(--space-40);counter-reset:task}
.tasklist-groups .col{display:grid;gap:var(--space-20);align-content:start}
.tasklist-groups .dateline{margin-bottom:6px}
.tasklist{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.tasklist li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;font-weight:300;color:var(--body);counter-increment:task}
.tasklist li::before{content:counter(task);position:absolute;left:0;top:1px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.tasklist li b{font-weight:500;color:var(--ink)}
.tasklist .tag{font-size:13px;color:var(--muted)}
.tasklist .tag::before{content:" · "}
article .feature{max-width:var(--article);margin:0 0 var(--space-40)}
.feature h3{margin:0 0 6px}
.feature p{margin:0 0 var(--space-16)}
.feature .clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-16) var(--space-20)}
.feature .clips:has(.wide){grid-template-columns:1fr}
.tile.wide .tile-v{aspect-ratio:auto;height:auto;object-fit:contain}
@media (max-width:600px){article .tasklist-groups{grid-template-columns:1fr}.feature .clips{grid-template-columns:1fr 1fr}}

article figure.chart svg{display:block;width:100%;height:auto}

/* real/sim example pairs: three a row, each cell a real frame above its reconstruction */
article .pairs{max-width:var(--article);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-28) var(--space-20);margin:var(--space-24) 0 var(--space-40)}
.pair{margin:0}
.pair-ims{display:grid;gap:3px}
.pair-im{position:relative;overflow:hidden}
.pair-im img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pair-im>span:not(.scene-lens){position:absolute;z-index:2;left:0;top:0;padding:2px 7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:color-mix(in srgb,var(--ink) 72%,transparent)}
.pair-ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 86%,var(--rule));font-size:12px;color:var(--muted)}
.pair figcaption{margin-top:var(--space-10);font-size:13.5px;line-height:1.4;font-weight:300;color:var(--body)}
.pair figcaption b{font-weight:500;color:var(--ink)}
@media (max-width:600px){article .pairs{grid-template-columns:1fr 1fr}}

/* reconstructed cells, four per task: the real frame above the scene rebuilt from it */
article .scenesets{max-width:var(--article);margin:var(--space-24) 0 var(--space-40)}
.sceneset{position:relative;padding:var(--space-16) 0 var(--space-24);border-top:1px solid color-mix(in srgb,var(--rule) 55%,transparent)}
.scene-summary{display:flex;align-items:baseline;gap:var(--space-12);margin-bottom:var(--space-10);padding-right:120px}
.scene-summary h3{margin:0;font-size:16px;font-weight:500;line-height:1.3;color:var(--ink)}
.scene-summary p{margin:0;font-size:12.5px;color:var(--muted);white-space:nowrap}
.scene-browser{min-width:0}
.scene-toolbar{position:absolute;right:0;top:var(--space-16);height:27px;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-12)}
.scene-next{appearance:none;border:0;border-bottom:1px solid var(--rule);padding:2px 0;background:transparent;color:var(--ink);font:500 11px/1.4 var(--font-mono);letter-spacing:.04em;cursor:pointer}
.scene-next:hover{border-color:var(--ink)}
.scene-next:focus-visible{outline:2px solid var(--wisp-blue);outline-offset:3px}
.scenerow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.scene{margin:0}
.scene[hidden]{display:none}
.scene:not([hidden])~.scene:not([hidden]){border-left:1px solid color-mix(in srgb,var(--rule) 55%,transparent);padding-left:var(--space-16)}
.scene .pair-ims{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
.scene-lens{display:none;position:absolute;z-index:3;width:108px;height:108px;border:2px solid color-mix(in srgb,var(--bg) 82%,transparent);border-radius:50%;box-shadow:0 3px 14px color-mix(in srgb,var(--ink) 36%,transparent);background-repeat:no-repeat;pointer-events:none}
@media (hover:hover) and (pointer:fine){.scenesets .pair-im{cursor:crosshair}.scene-lens.on{display:block}}
.scenes-note{margin:var(--space-10) 0 0;font-size:13px;color:var(--muted)}
.distribution-compare{max-width:var(--article);margin:var(--space-20) 0 var(--space-24);display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-20);align-items:start}
.distribution-compare figure{margin:0;min-width:0}
.stock-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 6px}
.stock-compare figcaption,.mug-distribution figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
.mug-distribution svg{display:block;width:100%;height:auto}
.correlation-summary{max-width:var(--article);margin:var(--space-24) 0 var(--space-32)}
.correlation-summary svg{display:block;width:100%;height:auto}
.correlation-summary figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
.nuts-example{max-width:var(--article);display:flow-root;margin:var(--space-16) 0 var(--space-24)}
.nuts-example p:first-of-type{margin-top:0}
.nuts-example p:last-child{margin-bottom:0}
.nuts-compare{float:right;width:432px;margin:0 0 var(--space-12);padding-left:72px}
.nuts-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.nuts-compare figcaption{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
@media (max-width:600px){.distribution-compare{grid-template-columns:1fr}}
@media (max-width:600px){.nuts-compare{float:none;margin:0 0 var(--space-12);padding-left:0;width:min(360px,100%)}}
@media (max-width:600px){.scene-summary{display:block;padding-right:0}.scene-summary p{margin-top:3px}.scene-toolbar{position:static;height:auto;margin-bottom:8px}.scenerow{grid-template-columns:1fr}.scene:not([hidden])~.scene:not([hidden]){border-left:0;border-top:1px solid color-mix(in srgb,var(--rule) 55%,transparent);padding:var(--space-12) 0 0}}