/* ==========================================================================
   Site layout (Oct 27 redesign) — see assets/js/ks.js.
   Homepage: the About text and three buttons, the work list (rows that open to three videos on hover,
   with a "view" button for a cursor) and the info list. Project pages: the same header with the name,
   a column of rounded boxes on the left in the same text styles, the pictures on the right (site.js),
   scrolling in their own column on desktop.
   Type: 13px on 17px (two steps up from the previous live site's 11px on 15px); colours and hovers as that site: #222 and grey #8c8c8c; links fade
   to 60% of their colour, boxes and buttons darken a step (#f0f0f0 → #e6e6e6).
   Text: ABC Diatype Regular only (Edu licence) — no other weights, none faked.
   ========================================================================== */
@font-face { font-family: "ABC Diatype"; src: url("../fonts/ABCDiatypeEdu-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ks-bg: #f9f9f9;
  --ks-text: #222;
  --ks-grey: #8c8c8c;
  --ks-line: #dedede;
  --ks-box: #f0f0f0;      /* boxes and buttons */
  --ks-box-hover: #e6e6e6;
  --ks-pic: #f0f0f0;      /* behind a picture while it loads */
  --ks-side: clamp(32px, 5vw, 160px);   /* page margin, left and right: 5% of the window (72px on a laptop, wider on big screens), narrowing with the window */
  --ks-top: 24px;         /* page margin, top and bottom */
  --ks-gap: 6px;          /* between boxes and pictures */
  --ks-fs: 13px; --ks-lh: 17px;
  --ks-r: 6px;            /* rounded corners: boxes and pictures */
  --ks-pill-h: 28px;
  --ks-col: 28%;          /* where the second column starts: the rows' grey text, and the pictures beside it */
  --ks-ease: cubic-bezier(.22, 1, .36, 1);
  --font-family: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ks-bg: #0a0a0a;
  --ks-text: #ededed;
  --ks-grey: #7a7a7a;
  --ks-line: #262626;
  --ks-box: #191919;
  --ks-box-hover: #242424;
  --ks-pic: #161616;
  color-scheme: dark;
}
@media (max-width: 1023px) { :root { --ks-side: 24px; --ks-top: 14px; --ks-gap: 4px; --ks-r: 5px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ks-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { height: auto; }
body.ks {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--ks-bg); color: var(--ks-text);
  font-family: var(--font-family); font-weight: 400; font-synthesis: none;
  font-size: var(--ks-fs); line-height: var(--ks-lh); letter-spacing: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .4s ease, color .4s ease;
}
body.ks * { font-family: inherit; }
body.ks h1, body.ks h2, body.ks p, body.ks ul, body.ks figure { margin: 0; padding: 0; font: inherit; letter-spacing: inherit; }
body.ks ul { list-style: none; }
body.ks a { color: inherit; text-decoration: none; }
body.ks button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
body.ks :focus { outline: none; }
body.ks :focus-visible { outline: 1px solid var(--ks-text); outline-offset: 2px; }
body.ks img, body.ks video { display: block; }

/* hovers: links fade to 60% of their colour (the Contact links turn black / white); buttons and boxes darken a step */
body.ks .ks-name, body.ks .ks-row__meta a, body.ks .ks-box a { transition: color .25s ease; }
@media (hover: hover) {
  body.ks .ks-name:hover, body.ks .ks-box a:hover { color: color-mix(in srgb, currentColor 60%, transparent); }
  body.ks .ks-row__meta a:hover { color: var(--ks-text); }
}

/* ---- header: the About text (or the name) on the left, the buttons on the right ---- */
.ks-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 64px; column-gap: 24px; padding: var(--ks-top) var(--ks-side) 0; }   /* the buttons along the top right, the About text under them */
.ks-head .ks-pills { grid-column: 2; grid-row: 1; }
.ks-head .ks-time { grid-column: 1; grid-row: 1; }   /* desktop: top left, above the About text */
.ks-head .ks-about, .ks-head .ks-name { grid-column: 1 / -1; grid-row: 2; }
body.ks .ks-about { max-width: 25.5em; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.06; letter-spacing: -0.01em; margin-top: -0.12em !important; }   /* big: the About text sets the scale of the page */
body.ks .ks-about__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }   /* Ogilvy, linked (no hover change) */
body.ks .ks-about__link.is-pending { text-decoration-color: transparent; }   /* (while its letters are still settling) */
@media (max-width: 1023px) { body.ks .ks-about { font-size: 22px; line-height: 25px; max-width: none; } }
.ks-name { padding-top: 3px; }
.ks-pills { flex: none; display: flex; align-items: center; gap: 4px; }
.ks-time { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* the time (steady digits, so it doesn't jitter as it ticks) */
body.ks .ks-pill { display: inline-flex; align-items: center; height: var(--ks-pill-h); padding: 0 13px; border-radius: 999px; background: var(--ks-box); white-space: nowrap; transition: background-color .25s ease; }
@media (hover: hover) { body.ks .ks-pill:hover { background: var(--ks-box-hover); } }

/* ---- homepage: the two lists ---- */
.ks-home { flex: 1 0 auto; padding: 0 var(--ks-side); }
.ks-sec { margin-top: 80px; }
.ks-sec + .ks-sec { margin-top: 80px; }
body.ks .ks-label { color: var(--ks-grey); padding-bottom: 20px; }
.ks-list { border-top: 1px solid var(--ks-line); }
.ks-row { border-bottom: 1px solid var(--ks-line); }
.ks-row__link { display: block; }
.ks-row__line { display: grid; grid-template-columns: var(--ks-col) 1fr auto; align-items: center; min-height: 32px; padding: 8px 0; }
.ks-row--info .ks-row__line { grid-template-columns: var(--ks-col) 1fr; }
.ks-row--info .ks-row__meta { text-align: left; padding-left: 0; }   /* (the details lined up with the Work rows' grey text) */
.ks-i--icon { margin-left: 12px; }
body.ks .ks-li { display: inline-flex; vertical-align: -0.02em; }
body.ks .ks-li svg { display: block; width: .8em; height: .8em; }   /* (the LinkedIn icon, a little smaller than the text) */
.ks-row--info .ks-row__line:has(.ks-award) { align-items: start; }   /* (the label level with the first award) */
body.ks .ks-award { display: block; color: var(--ks-grey); }   /* each award: its name… */
body.ks .ks-award:not(:last-child) { margin-bottom: 6px; }   /* a little room between the awards (none after the last) */
body.ks .ks-award__detail { color: var(--ks-grey); }   /* …then " / " and its detail, on the same line, all grey */
.ks-row__type, .ks-row__meta { color: var(--ks-grey); }
.ks-soon-m { display: none; }   /* (Coming Soon in place of the type: phones only) */
body.ks .ks-row__mini { display: none; }   /* (the small picture on the right of a project's row: phones only) */   /* (in title case: ks.js) */
.ks-row__meta { text-align: right; padding-left: 16px; }
@media (min-width: 1024px) {
  #work .ks-row__line { grid-template-columns: var(--ks-col) 1fr max(calc((min(48%, 820px) - 8px) / 3), var(--textw, 0px)); }   /* (the last column as wide as a hover thumbnail: .ks-thumbs; wider if the longest services need it, ks.js) */
  #work .ks-row__meta { text-align: left; padding-left: 0; white-space: nowrap; }   /* (the services lined up with the left edge of the third thumbnail, never on two lines) */
  #work .ks-row__meta { transition: transform .6s var(--ks-ease); }
  #work .ks-row.is-open .ks-row__meta { transform: translateX(var(--shift, 0px)); }   /* (a project open: its services glide over to the right edge; how far: ks.js) */
}
/* hover: the row opens to three videos, right-aligned */
.ks-row__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ks-ease); }
.ks-row__more-in { min-height: 0; overflow: hidden; }
.ks-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: min(48%, 820px); margin-left: auto; padding: 12px 0 10px; }
.ks-thumb { display: block; aspect-ratio: 640 / 366; overflow: hidden; border-radius: var(--ks-r); background: var(--ks-pic); }
.ks-thumb video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ks-thumb video.is-in, .ks-thumb img.is-in { opacity: 1; }
.ks-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.ks-thumbs--one .ks-thumb { grid-column: 3; }   /* (a coming-soon project's one picture, where the third would be) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .ks-row__link, .ks-row--soon { cursor: none; }
  .ks-row__link:hover .ks-row__more, .ks-row__link:focus-visible .ks-row__more, .ks-row--pic:hover .ks-row__more { grid-template-rows: 1fr; }
  .ks-row__more .ks-thumb { opacity: 0; transform: translateY(-6px); transition: opacity .45s ease, transform .55s var(--ks-ease); }
  .ks-row__link:hover .ks-thumb, .ks-row__link:focus-visible .ks-thumb, .ks-row--pic:hover .ks-thumb { opacity: 1; transform: none; }
  .ks-row__link:hover .ks-thumb:nth-child(2) { transition-delay: .04s; }
  .ks-row__link:hover .ks-thumb:nth-child(3) { transition-delay: .08s; }
}
/* until the list has faded in, it doesn't respond to the pointer */
html:not(.ks-list-ready) .ks-list { pointer-events: none; }
/* the "view" button that stands in for the cursor */
.ks-view { position: fixed; top: 0; left: 0; z-index: 30; display: inline-flex; align-items: center; height: var(--ks-pill-h); padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--ks-box) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ks-text); font-size: var(--ks-fs); line-height: 1; pointer-events: none; opacity: 0; transition: opacity .1s ease; will-change: transform; }
.ks-view.is-on { opacity: 1; }
html.is-gated .ks-view { display: none; }

/* ---- a project, dropped down from its row: the text on the left (stays in view while the pictures pass), the
   pictures on the right from the second column (20.6%), as on the project's own page ---- */
.ks-row__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ks-ease); }
.ks-row.is-open .ks-row__panel { grid-template-rows: 1fr; }
.ks-row__panel-in { min-height: 0; overflow: clip; }
.ks-pp { display: grid; grid-template-columns: var(--ks-col) minmax(0, 1fr); padding: 6px 0 var(--ks-top); opacity: 0; transition: opacity .5s ease; }
.ks-row.is-open .ks-pp { opacity: 1; transition: opacity .8s ease .15s; }
.ks-row.is-closing .ks-pp { opacity: 0; transition: opacity .28s ease; }
.ks-row.is-closing .ks-row__panel { transition: grid-template-rows .45s var(--ks-ease) !important; }   /* closing: the list below closes in while it fades */   /* closing: the same fade, the other way */
.ks-pp__text { position: sticky; top: var(--ks-top); align-self: start; display: flex; flex-direction: column; gap: 22px; margin-right: 14px; padding: 16px 18px; border-radius: var(--ks-r); background: var(--ks-box); transition: background-color .4s ease; }   /* the project's info in a container */
.ks-pp__pics { min-width: 0; }
/* the info box's content (phones: behind an "About +" button) */
.ks-pp__toggle { display: none; }
.ks-pp__more-in { display: flex; flex-direction: column; gap: 22px; }
/* a line above the Role (here and on the project pages) */
/* (no line above the Role) */
.ks-row.is-open .ks-row__more, .ks-row.is-closing .ks-row__more { grid-template-rows: 0fr !important; }   /* (no hover videos while it's open) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { html.ks-open, html.ks-open * { cursor: none !important; } }   /* (a project open: the "close" button is the cursor, over the whole page: ks.js) */
.ks-snap .ks-row__panel, .ks-snap .ks-pp { transition: none !important; }
/* desktop: the open project's row stays pinned to the top of the screen, the project fills the rest of it, and its
   pictures scroll in their own column (the page stays where it is) */
@media (min-width: 1024px) {
  html.ks-open, html.ks-open body { overflow: hidden; }   /* a project open: the page itself can't be scrolled at all (only the project's columns), wherever the pointer is */
  .ks-row__panel { transition: none; }   /* (opens at its full height at once, so the row can glide straight up to the top; its contents fade in) */
  .ks-row.is-open > .ks-row__link { position: sticky; top: 0; z-index: 4; background: var(--ks-bg); }
  .ks-row.is-open .ks-row__line { padding-top: 14px; }   /* (as much room above the name as there is below it, down to the pictures) */
  .ks-pp { height: calc(100svh - var(--rowh, 33px)); grid-template-rows: minmax(0, 1fr); }   /* down to the bottom of the screen, less the page margin */
  .ks-pp__text { position: static; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .ks-pp__pics { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--ks-r); }
  .ks-pp__text::-webkit-scrollbar, .ks-pp__pics::-webkit-scrollbar { display: none; }
}
@media (max-width: 1023px) {
  .ks-pp { grid-template-columns: 1fr; gap: 10px; padding-top: 0; }   /* phones: the About box up close under its row, a little room below it */
  .ks-pp__text { position: static; margin-right: 0; max-width: none; }
  .ks-pp__text { display: block; padding: 9px 14px; }
  .ks-pp__text.is-about { padding-bottom: 16px; }   /* open: more room at the bottom */
  body.ks .ks-pp__toggle { position: relative; }
  .ks-pp__text.is-about .ks-pp__toggle { padding-bottom: 9px; }
  body.ks .ks-pp__toggle { display: flex; justify-content: space-between; width: 100%; text-align: left; }
  .ks-pp__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ks-ease); }
  .ks-pp__text.is-about .ks-pp__more { grid-template-rows: 1fr; }
  .ks-pp__more-in { min-height: 0; overflow: hidden; }
  .ks-pp__more-in > :first-child { padding-top: 14px; }
}

/* ---- footer ---- */
.ks-foot { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-top: 128px; padding: 0 var(--ks-side) var(--ks-top); }   /* (room above Back to top) */
body.ks .ks-top.is-hidden { visibility: hidden; }   /* (nothing much to scroll back up: ks.js) */
body.ks .ks-pill--info.is-hidden { display: none; }   /* (homepage: the whole page, Info and all, already on screen: ks.js) */

/* ---- phones and small tablets ---- */
@media (max-width: 1023px) {
  .ks-row__line { grid-template-columns: 34% 1fr auto; }
}
@media (max-width: 1023px) {
  .ks-head { grid-template-columns: 1fr auto; row-gap: 55px; column-gap: 12px; }   /* (the same as the space below the About text) */
  .ks-head .ks-time { grid-column: 1; grid-row: 1; }   /* phones: the time on the left of the header row… */
  .ks-head .ks-pills { grid-column: 2; grid-row: 1; }   /* …the buttons on the right */
  .ks-head .ks-about, .ks-head .ks-name { grid-row: 2; }
  .ks-head .ks-pills { align-self: flex-start; }   /* phones: the buttons on the left, over the About text */
  .ks-sec { margin-top: 62px; }
  body.ks .ks-label { padding-bottom: 10px; }   /* phones: "Work" / "Info" (and the project titles) sit closer to their lists */
  .ks-sec + .ks-sec { margin-top: 56px; }
  .ks-row__line { grid-template-columns: 1fr auto; column-gap: 12px; }
  .ks-row__name { grid-column: 1; }
  .ks-row__type { grid-column: 1; grid-row: 2; }
  .ks-row__meta { grid-column: 2; grid-row: 1 / span 2; }
  .ks-row:not(.ks-row--soon):not(.ks-row--info) .ks-row__meta { display: none; }   /* the services, on the project's page */
  .ks-row__line:has(.ks-row__mini) { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; }   /* phones: the small video on the left of a project's row… */
  .ks-row__line:has(.ks-row__mini) .ks-row__name { grid-column: 2; grid-row: 2; }   /* …its name and type beside it, close together, centred on it */
  .ks-row__line:has(.ks-row__mini) .ks-row__type { grid-column: 2; grid-row: 3; }
  body.ks .ks-row__mini { display: block; grid-column: 1; grid-row: 1 / -1; width: 80px; height: auto; aspect-ratio: 640 / 366; object-fit: cover; border-radius: var(--ks-r); background: var(--ks-pic); }   /* phones: the first thumbnail, small, on the right */
  .ks-row--info .ks-row__line { grid-template-columns: 1fr; align-items: start; }   /* phones: the Info rows stacked like the Work rows… */
  .ks-row--info .ks-row__meta { grid-row: 2; grid-column: 1; text-align: left; padding-left: 0; }   /* …the details under the label */
  .ks-row--info .ks-i { display: block; }   /* phones: each item on its own line… */
  .ks-i--icon { margin-left: 0; margin-top: 2px; }
  .ks-row--info .ks-i:not(:last-child), body.ks .ks-row--info .ks-award:not(:last-child) { margin-bottom: 3px; }   /* (the items close together, awards too) */
  .ks-row--info .ks-row__meta { margin-top: 6px; }   /* (a little room under each label) */
  .ks-row--info .ks-row__line { padding: 14px 0; }   /* phones: more room above and below each Info row */
  .ks-row--info .ks-sep { display: none; }   /* …no commas */
  .ks-foot { margin-top: 88px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); align-items: center; }   /* phones: room below Back to top, clear of where Safari's bar would open first */
  .ks-row--soon .ks-row__meta { display: none; }   /* phones: Coming Soon on the second line instead */
  .ks-row__type .ks-soon-m { display: inline; }
  .ks-row--soon .ks-row__type .ks-soon-d { display: none; }
}

/* ==========================================================================
   Project pages (on top of site.css, which draws the pictures). The same header as the homepage; the
   project's name sits where "work" does there, over a line the full width; under it the text on the left
   and the pictures on the right, starting where the homepage's second column does (20.6%)
   ========================================================================== */
body.ks-project .nav, body.ks-project .nav-backdrop { display: none !important; }   /* (site.js's old menu) */
.ks-proj { display: grid; grid-template-columns: var(--ks-col) minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 80px var(--ks-side) 0; }   /* (the same as the homepage's space above "work") */
body.ks .ks-proj__title { grid-column: 1 / -1; border-bottom: 1px solid var(--ks-line); }
.ks-side { display: flex; flex-direction: column; gap: 22px; padding: 16px 24px var(--ks-top) 0; min-width: 0; }
body.ks .ks-side__label { color: var(--ks-grey); margin-bottom: 8px; }
.ks-side__nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
body.ks-project .page.casestudy { padding: 16px 0 0; min-width: 0; }
/* the pictures: rounded, close together */
body.ks .casestudy__gallery { gap: var(--ks-gap); }
body.ks .casestudy__media, body.ks .casestudy__media img, body.ks .casestudy__media video { border-radius: var(--ks-r); }
body.ks .casestudy__media { background-color: var(--ks-pic); }
/* desktop: the page stays put; the pictures scroll in their own column under the line */
@media (min-width: 1024px) {
  html:has(body.ks-project), body.ks-project { height: 100svh; overflow: hidden; }
  body.ks-project .site { flex: 1 1 auto; min-height: 0; }
  body.ks-project .ks-proj { height: 100%; }
  .ks-side { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .ks-side::-webkit-scrollbar { display: none; }
  body.ks-project .page.casestudy { min-height: 0; margin-top: 16px; padding: 0; margin-bottom: var(--ks-top); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--ks-r); }
  body.ks-project .page.casestudy::-webkit-scrollbar { display: none; }
  body.ks-project .ks-foot { display: none; }   /* no footer on desktop project pages */
}
@media (max-width: 1023px) {
  .ks-proj { grid-template-columns: 1fr; grid-template-rows: none; }
  .ks-side { padding-right: 0; padding-bottom: 20px; }
  body.ks-project .page.casestudy { padding-top: 0; }
  .ks-side__nav { margin-top: 16px; }
  body.ks-project .ks-foot { margin-top: 56px; }
}
@media (max-width: 1023px) { .ks-proj { padding-top: 62px; } }   /* (as the homepage's "work") */

/* the header stays put from page to page: only the rest of the page changes (cross-page view transitions) */
@view-transition { navigation: auto; }
.ks-head { view-transition-name: ks-head; }
::view-transition-old(ks-head), ::view-transition-new(ks-head) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* the password box: the spacing of the previous live site, in these text styles. The blur behind it is a shade
   greyer (light mode) or lighter (dark mode) than the page, so the box stands out from it */
body.ks .gate-blur { background: rgba(200, 200, 200, 0.45); }
:root[data-theme="dark"] body.ks .gate-blur { background: rgba(70, 70, 70, 0.45); }
body.ks .gate__box { width: min(428px, 100%); padding: 36px 20px 12px; border-radius: var(--ks-r); background: var(--ks-bg); color: var(--ks-text); font-size: var(--ks-fs); line-height: var(--ks-lh); }
body.ks .gate__close { top: 6px; right: 6px; width: 28px; height: 28px; }
body.ks .gate__text { margin-bottom: 18px; padding-right: 24px; }
body.ks .gate__text, body.ks .gate__close, body.ks .gate__input, body.ks .gate__go { color: var(--ks-text); }
body.ks .gate__field { height: 36px; border-radius: 999px; background: var(--ks-box); }
body.ks .gate__input { padding: 0 12px; outline: none; }
body.ks .gate__input:focus, body.ks .gate__input:focus-visible { outline: none !important; box-shadow: none; }   /* (no black box around the field) */
body.ks .gate__go { width: auto; padding: 0 12px; }
body.ks .gate__error { margin-top: 8px; color: var(--ks-grey); font-size: 10px; line-height: 12px; height: 12px; }   /* small */
@media (max-width: 1023px) {
  body.ks .gate__box { padding: 32px 16px 10px; }
  body.ks .gate__close { top: 4px; right: 4px; }
  body.ks .gate__text { padding-right: 0; }
  body.ks .gate__field { height: 34px; }
}
@media (max-width: 1023px) {
  .ks-proj { grid-template-columns: 1fr; padding-top: 16px; }
}

/* page load: the content fades in (the header doesn't: it stays put from page to page) */
@keyframes ks-in { from { opacity: 0; } }   /* (a fade only, no slide up) */
.ks-foot, body.ks-project .ks-proj { animation: ks-in 1.1s var(--ks-ease) .12s both; }
/* the Work and Info lists come in one row at a time, quickly (each one's place in line, --k: ks.js) */
.ks-home .ks-label, .ks-home .ks-list, .ks-home .ks-row { animation: ks-in .6s var(--ks-ease) calc(.12s + var(--k, 0) * 45ms) both; }
.ks-home .ks-list { animation-duration: .3s; }   /* (its top line, with its label) */
/* the About text decoding into place (arriving from outside the site): each letter's own character holds its space,
   invisible, with a random one drawn over it until it settles */
html.ks-typing .ks-about { visibility: hidden; }
.ks-w { white-space: nowrap; }
.ks-sc { position: relative; color: transparent; }   /* (the random characters are picked to fit the letter's own width: ks.js) */
.ks-sc.is-on::before { content: attr(data-g); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--ks-text); }
/* while it decodes, the buttons and the page wait; once it settles they come in together */
html.ks-typing .ks-pills, html.ks-typing .ks-time, html.ks-typing .ks-home, html.ks-typing .ks-foot, html.ks-typing body.ks-project .ks-proj,
html.ks-intro .ks-pills, html.ks-intro .ks-time, html.ks-intro .ks-home, html.ks-intro .ks-foot, html.ks-intro body.ks-project .ks-proj { opacity: 0; animation: none; }
html.ks-intro-done .ks-pills, html.ks-intro-done .ks-time, html.ks-intro-done .ks-foot, html.ks-intro-done body.ks-project .ks-proj { animation: ks-in 1.9s var(--ks-ease) both; }   /* (right as the About text settles) */
html.ks-typing .ks-home .ks-label, html.ks-typing .ks-home .ks-list, html.ks-typing .ks-home .ks-row,
html.ks-intro .ks-home .ks-label, html.ks-intro .ks-home .ks-list, html.ks-intro .ks-home .ks-row { animation: none; }   /* (waiting for the About text) */
html.ks-intro-done .ks-home .ks-label, html.ks-intro-done .ks-home .ks-list, html.ks-intro-done .ks-home .ks-row { animation: ks-in .8s var(--ks-ease) calc(var(--k, 0) * 55ms) both; }
html.ks-intro-done .ks-home .ks-list { animation-duration: .4s; }
@keyframes ks-fade { from { opacity: 0; } }
html.ks-intro-done .ks-pills, html.ks-intro-done .ks-time { animation-name: ks-fade; }   /* the header buttons only fade in, they don't move */
.ks-about .ks-w--in { animation: ks-fade .6s ease both; }   /* the About text fades in line by line as it decodes (each line's delay: ks.js) */
@media (prefers-reduced-motion: reduce) { .ks-about .ks-w--in { animation: none; } }   /* slow, a moment after the text settles — the buttons and the page together */
@media (prefers-reduced-motion: reduce) { .ks-home .ks-label, .ks-home .ks-list, .ks-home .ks-row, html.ks-intro-done .ks-home .ks-label, html.ks-intro-done .ks-home .ks-list, html.ks-intro-done .ks-home .ks-row, .ks-foot, body.ks-project .ks-proj { animation: none; } }