:root {
  --bg: #000000;
  --ink: #ffffff;
  --ink-muted: #9a9a9a;
  --ink-faint: #505050;
  --live: #22c55e;
  --gutter: clamp(20px, 5.95vw, 90px);
  --cv-text: rgba(255, 255, 255, 0.82);
  --cv-line: rgba(255, 255, 255, 0.16);
  --font-ui: "Inter", "Pretendard", system-ui, sans-serif;
  --font-body: "Pretendard", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- GNB ---------- */
.gnb {
  position: fixed;
  top: 33px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 48px;
  font-family: var(--font-ui);
  letter-spacing: -0.1px;
  pointer-events: none;
}
.gnb { transition: transform 0.35s ease; }
.gnb-scrolled-away .gnb { transform: translateY(calc(-100% - 33px)); }
.gnb-scrolled-away .gnb:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gnb { transition: none; }
}
.gnb-pill, .gnb-lang, .gnb-back { pointer-events: auto; }
.gnb-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(484px, 100%);
  height: 65px;
  padding: 0 36px;
  border-radius: 48px;
  /* clear glass, after Apple's: almost no tint, what is behind stays readable and only softens a little */
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.05),
    0 6px 24px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(5px) saturate(170%);
  backdrop-filter: blur(5px) saturate(170%);
}
/* the rim: light catches the top-left and bottom-right edges and fades out in between */
.gnb-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.04) 65%,
    rgba(255, 255, 255, 0.35)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.gnb-logo { display: block; line-height: 0; }
/* drawn as a mask so the logo can take any colour */
.gnb-logo-mark {
  display: block;
  width: 19px;
  height: 33px;
  background: var(--ink);
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
  mask: url(assets/logo.svg) center / contain no-repeat;
  transition: background-color 0.2s ease;
}
.gnb-links {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnb-links a, .gnb-lang button, .gnb-back {
  color: var(--ink-muted);
  transition: color 0.2s ease;
}
.gnb-links a:hover, .gnb-lang button:hover, .gnb-back:hover { color: var(--ink); }
.gnb-links a[aria-current] { color: var(--ink); }
.gnb-back {
  position: absolute;
  left: 48px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 65px;
  padding: 0 36px;
}
.gnb-lang {
  position: absolute;
  right: 48px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 65px;
  padding: 0 36px;
}
.gnb-lang button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.gnb-lang button[aria-pressed="true"] { color: var(--ink); }
/* over a light area the glass stays, only what sits on it turns dark */
.gnb-pill.is-on-light .gnb-logo-mark { background: #1e293b; }
.gnb-pill.is-on-light .gnb-links a, .gnb-lang button.is-on-light, .gnb-back.is-on-light { color: #8e9195; }
.gnb-pill.is-on-light .gnb-links a:hover, .gnb-lang button.is-on-light:hover, .gnb-back.is-on-light:hover,
.gnb-pill.is-on-light .gnb-links a[aria-current], .gnb-lang button.is-on-light[aria-pressed="true"] { color: #1e293b; }
.gnb-pill.is-on-light a:focus-visible, .gnb-lang button.is-on-light:focus-visible, .gnb-back.is-on-light:focus-visible { outline-color: #1e293b; }
.gnb a:focus-visible, .gnb button:focus-visible, .hero-contact a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}
/* the artwork runs in its own document, exactly as it was made */
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

.hero-info {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 10.2%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.hero-info a { pointer-events: auto; }
.hero-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  white-space: nowrap;
}
.hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
}
.hero-contact {
  display: grid;
  gap: 19px;
  margin: 0;
  text-align: right;
}
.hero-contact dt { color: var(--ink-faint); margin-bottom: 6px; }
.hero-contact dd { margin: 0; }
.hero-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- About ---------- */
.about {
  padding-bottom: 137px;
  overflow: hidden;
  background: var(--bg);
}
/* the 1512 x 800 artboard the title and keywords are placed on */
.about-stage {
  position: relative;
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  aspect-ratio: 1512 / 800;
}
.about-title {
  position: absolute;
  transform-origin: 50% 0;
  left: calc(397 / 1512 * 100%);
  top: calc(218 / 800 * 100%);
  width: calc(719 / 1512 * 100%);
  margin: 0;
  line-height: 0;
}
.about-title img { display: block; width: 100%; height: auto; }
.about-keywords {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-keywords li {
  position: absolute;
  left: calc(var(--x) / 1512 * 100%);
  top: calc(var(--y) / 800 * 100%);
  padding: 0.75em 1em;
  border-radius: 1.5em;
  background: var(--pill);
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.06vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.about-copy {
  position: relative;
  max-width: calc(960px + var(--gutter) * 2);
  margin: 59px auto 0;
  padding: 0 var(--gutter);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 46px;
  text-align: center;
}
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 46px; }
/* the set line breaks only hold while the longer second lines still fit on one line */
@media (max-width: 1100px) {
  .about-copy br { display: none; }
}

/* entrance: once the title has settled, one keyword pops in at a time */
.about-stage.is-waiting .about-keywords li {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.about-stage.is-in .about-keywords li {
  opacity: 1;
  transform: none;
  animation: keyword-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.4s + var(--i) * 0.45s);
}
/* pop: snaps straight out to full size, no bounce */
@keyframes keyword-pop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .about-stage.is-waiting .about-keywords li { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ---------- Projects ---------- */
.projects { background: var(--bg); }
.projects-inner {
  max-width: 1512px;
  margin: 0 auto;
  padding: 64px min(124px, 8.2vw) 104px;
}
.projects-title {
  margin: 64px 0 81px; /* left edge on the cards, row stays where it was */
  font-size: clamp(40px, 4.43vw, 67px);
  font-weight: 700;
  line-height: 80px;
}
/* one panel is open at a time; the rest fold down to strips */
.projects-row {
  --strip: 154px;
  --gap: 29px;
  container-type: inline-size;
  display: flex;
  gap: var(--gap);
  height: 485px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project {
  position: relative;
  flex: 0 0 var(--strip);
  min-width: 0;
  overflow: hidden;
  border-radius: 32px;
  background: var(--panel, #111111);
  cursor: pointer;
  transition: flex-grow 0.3s ease-in-out;
}
.project.is-active { flex-grow: 1; }
.project:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
/* media keeps the size of an open panel, so folding a panel crops it instead of squashing it */
.project-media {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100cqw - (var(--strip) + var(--gap)) * 2);
  height: 100%;
  /* --focus picks which part sits in the middle of a folded strip (0 = left edge, 1 = right edge) */
  transform: translateX(calc(var(--focus, 0.5) * -100%));
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
}
.project.is-active .project-media { transform: translateX(-50%); }
/* name and period, over a shadow that only darkens the bottom of the open panel */
.project-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 32px 28px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  font-family: var(--font-ui);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.project.is-active .project-caption { opacity: 1; }
/* the panel only leads to its page once it is open, so a first tap on a strip still just opens it */
.project-link { position: absolute; inset: 0; pointer-events: none; }
.project.is-active .project-link { pointer-events: auto; }
.project-caption h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.project-caption p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 1.4; }

/* ---------- CV ---------- */
.cv {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 900px;
  margin: 0 auto;
  padding: 168px 24px 96px;
  font-family: var(--font-ui);
}
.cv-header { display: flex; flex-direction: column; gap: 20px; }
.cv-name {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.cv-role { margin: -12px 0 0; color: var(--ink-muted); font-size: 16px; }
.cv-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--cv-text);
  font-size: 18px;
  line-height: 1.55;
}
.cv-summary p { margin: 0; text-wrap: pretty; }
.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 4px;
}
.cv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cv-text);
  font-size: 14px;
  line-height: 1.6;
}
.cv-contact li + li::before { content: "·"; margin: 0 10px; color: var(--ink-muted); }
.cv-contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cv-contact a:hover { color: var(--ink); }
.cv-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.cv-download:hover { opacity: 0.82; }
.cv-download svg { flex: none; }
.cv-contact a:focus-visible, .cv-download:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}
.cv-download:focus-visible { border-radius: 12px; }

.cv-section-title {
  margin: 0 0 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cv-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cv-entries { display: flex; flex-direction: column; gap: 36px; }
/* date on the left, everything about the entry on the right */
.cv-entry {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: start;
}
.cv-date {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 24px;
}
.cv-entry h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 24px;
}
.cv-detail { margin: 8px 0 0; color: var(--cv-text); font-size: 14px; line-height: 20px; }
.cv-detail + .cv-detail { margin-top: 2px; color: var(--ink-muted); }
.cv-entry ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--cv-text);
  font-size: 14px;
  line-height: 20px;
}
.cv-entry li + li { margin-top: 8px; }
.cv-inline { margin: 0; color: var(--cv-text); font-size: 15px; line-height: 1.7; }

/* ---------- Case study ---------- */
/* laid out on the 1512-wide Figma frame: --u is one Figma pixel, so the page scales as a whole */
.cs {
  --u: calc(min(100vw, 1210px) / 1512); /* content tops out at 80% of its Figma size */
  --cs-ink: #eaeff6;
  --cs-accent: #789eff;
  --font-serif: "Source Serif Pro", "Source Serif 4", Georgia, serif;
  overflow-x: clip;
  background: var(--bg);
  color: var(--cs-ink);
  font-family: var(--font-ui);
}
.cs-stage {
  position: relative;
  width: calc(1512 * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0 auto;
}
.cs-at {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}
.cs-media {
  height: calc(var(--ht) * var(--u));
  border-radius: calc(var(--r, 0) * var(--u));
  background: #111;
  object-fit: cover;
}
.cs-right { text-align: right; }
.cs-center { text-align: center; }
.cs em { color: var(--cs-accent); font-style: normal; }

.cs-p, .cs-col p:last-child {
  text-wrap: pretty;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(-0.1 * var(--u));
  line-height: calc(var(--lh, 40) * 22 / 18 * var(--u));
}
.cs-p p { margin: 0; }
.cs-p p + p { margin-top: calc(var(--lh, 40) * 22 / 18 * var(--u)); }
.cs-h { margin: 0; font-size: calc(32 * var(--u)); font-weight: 500; }
.cs-h--lg { font-size: calc(42.762 * var(--u)); }
.cs-h--xl { font-size: calc(61.676 * var(--u)); }
.cs-display {
  color: var(--cs-ink);
  font-size: calc(226.803 * var(--u));
  font-weight: 600;
  line-height: calc(212 * var(--u));
  text-align: center;
}
.cs-display--left {
  font-size: calc(144.833 * var(--u));
  line-height: calc(135.38 * var(--u));
  text-align: left;
  white-space: nowrap;
}
.cs-sub { color: #909197; font-size: calc(22 * var(--u)); }
.cs-lead {
  color: var(--ink);
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: calc(var(--lh, 56) * var(--u));
}
.cs-lead--semi { font-weight: 600; white-space: nowrap; }

/* hero */
.cs-hero-title h1 {
  margin: 0;
  font-size: calc(67 * var(--u));
  font-weight: 700;
  line-height: 1.21;
}
.cs-hero-title small { font-size: calc(24 * var(--u)); font-weight: 300; }
.cs-period { margin: 0; color: var(--ink); font-size: calc(16 * var(--u)); line-height: 1.21; }
.cs-meta { display: grid; gap: calc(25 * var(--u)); }
.cs-meta div { display: grid; gap: calc(14 * var(--u)); }
.cs-meta dt {
  color: #6e7276;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  letter-spacing: calc(1.1 * var(--u));
}
.cs-meta dd {
  margin: 0;
  font-size: calc(15 * var(--u));
  letter-spacing: calc(-0.1 * var(--u));
  line-height: calc(23 * var(--u));
}

/* business goal: pinned for six screens of scrolling. The composition is drawn on a
   2000 x 1091 board, --g is one board pixel, so it always fits the window whole. */
.cs-goal { position: relative; height: 700vh; }
.cs-goal-pin {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.cs-goal-box {
  --g: min(min(100vw, 1210px) / 2000, 100vh / 1091);
  position: relative;
  flex: none;
  width: calc(2000 * var(--g));
  height: calc(1091 * var(--g));
}
.cs-goal-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--cs-ink);
  font-size: calc(315 * var(--g));
  font-weight: 600;
  line-height: calc(295 * var(--g));
  text-align: center;
  opacity: var(--title, 0.3);
}
.cs-goal-item {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateY(calc(var(--rise, 0) * 120vh));
  will-change: transform;
}
.cs-goal-item video, .cs-goal-item p {
  position: absolute;
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(var(--w) * var(--g));
  margin: 0;
}
.cs-goal-item video { height: calc(var(--ht) * var(--g)); object-fit: cover; }
.cs-goal-item .cs-p { font-size: calc(22 * var(--u)); letter-spacing: calc(-0.14 * var(--g)); line-height: calc(42 / 25); }

/* the recording sits behind the monitor frame, in its screen */
.cs-monitor { height: calc(var(--ht) * var(--u)); }
.cs-monitor img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-monitor video {
  position: absolute;
  left: calc(3 * var(--u));
  top: calc(5 * var(--u));
  width: calc(600 * var(--u));
  height: calc(337 * var(--u));
  object-fit: cover;
}

/* app window */
.cs-window {
  height: calc(var(--ht) * var(--u));
  overflow: hidden;
  border-radius: calc(var(--r) * var(--u));
  background: #f8f8f8;
}
.cs-window video { display: block; width: 100%; }
.cs-titlebar {
  display: flex;
  gap: calc(8 * var(--u));
  align-items: center;
  height: calc(32 * var(--u));
  padding-left: calc(9 * var(--u));
  background: var(--ink);
}
.cs-titlebar i { width: calc(11.6 * var(--u)); height: calc(11.6 * var(--u)); border-radius: 50%; background: #ff736a; }
.cs-titlebar i:nth-child(2) { background: #febc2e; }
.cs-titlebar i:nth-child(3) { background: #19c332; }
/* the window stays centred on screen and travels down behind the text, stopping before the flow video */
.cs-about-track { position: absolute; inset: 0; }
.cs-about-window {
  position: sticky;
  top: calc(50vh - var(--ht) / 2 * var(--u));
  width: calc(var(--w) * var(--u));
  margin: calc(var(--y) * var(--u)) 0 0 calc(var(--x) * var(--u));
  opacity: 0.5;
}
.cs-about-window .cs-titlebar { height: calc(28 * var(--u)); padding-left: calc(8 * var(--u)); }
.cs-shot { height: auto; }

/* three columns: problems and conclusion */
.cs-columns { position: absolute; top: calc(var(--y) * var(--u)); left: 0; right: 0; }
.cs-col { position: absolute; left: calc(var(--x) * var(--u)); width: calc(380 * var(--u)); }
.cs-col h3 { margin: 0 0 calc(47 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; line-height: calc(31 * var(--u)); }
.cs-col p:last-child { margin: 0; }
.cs-num {
  margin: 0;
  color: var(--cs-accent);
  font-family: var(--font-serif);
  font-size: calc(26 * var(--u));
  line-height: calc(33 * var(--u));
}
.cs-icon { position: relative; width: calc(126 * var(--u)); height: calc(126 * var(--u)); margin-bottom: calc(78 * var(--u)); }
.cs-icon img { position: absolute; left: calc(15 * var(--u)); top: calc(15 * var(--u)); width: calc(96 * var(--u)); }
.cs-icon .cs-eye { left: calc(10 * var(--u)); top: 0; width: calc(88 * var(--u)); }
.cs-icon .cs-glass { left: calc(20 * var(--u)); top: calc(30 * var(--u)); }

/* one problem */
.cs-problem-head { text-align: center; }
.cs-problem-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc(42.762 * var(--u));
  font-weight: 400;
  line-height: 1.26;
}
.cs-num--lg { color: #6d6d6d; font-size: calc(37.026 * var(--u)); line-height: calc(46.33 * var(--u)); }
.cs-statement { text-align: center; }
.cs-statement .cs-p { letter-spacing: calc(-0.3 * var(--u)); }
.cs-label {
  margin: 0 0 calc(19 * var(--u));
  color: #76a4db;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: calc(2.16 * var(--u));
  line-height: calc(22 * var(--u));
}

/* held screens: the screen holds in the middle of the window, darkens, and its text rises over it */
.cs-held { height: calc(var(--h) * var(--u) + 130vh); }
.cs-finding-track {
  position: absolute;
  top: calc(var(--t, 534) * var(--u));
  bottom: calc(var(--b) * var(--u));
  left: 0;
  right: 0;
}
.cs-finding {
  --shown: 0;
  position: sticky;
  top: calc(50vh - var(--ht) / 2 * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--ht) * var(--u));
  margin: 0 0 0 calc(var(--l, 154) * var(--u));
  overflow: hidden;
  border-radius: calc(17.47 * var(--u));
  background: #000;
}
.cs-finding-shot {
  display: block;
  width: 100%;
  height: 100%;
  opacity: calc(1 - var(--shown) * 0.8);
}
.cs-finding-copy {
  position: absolute;
  left: calc(519 * var(--u));
  top: calc(233 * var(--u));
  width: calc(581 * var(--u));
  color: var(--ink);
  font-size: calc(22 * var(--u));
  line-height: calc(32 * var(--u));
  opacity: var(--shown);
  transform: translateY(calc((1 - var(--shown)) * 150 * var(--u)));
}
.cs-finding-copy p { margin: 0; }
/* solutions stay bright: only the callout comes in */
.cs-finding--callout .cs-finding-shot { opacity: 1; }
.cs-callout {
  position: absolute;
  left: 0;
  top: calc(32 * var(--u));
  opacity: var(--shown);
}
.cs-finding-screen { position: relative; background: #f8f8f8; }
.cs-finding-screen img, .cs-finding-screen video { display: block; width: 100%; }
.cs-finding-copy .cs-label { margin-bottom: calc(45 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
  .cs-finding-copy { transform: none; }
}

/* friction table: Figma's block scaled by 22/18 so its text keeps the same two lines at the 22 floor */
.cs-friction {
  display: grid;
  grid-template-columns: calc(430 * var(--u)) calc(34 * var(--u)) calc(430 * var(--u));
  gap: calc(29 * var(--u));
  align-items: center;
}
.cs-friction img { width: 100%; }
.cs-friction-label {
  margin: 0;
  color: #8e9296;
  font-size: calc(22 * var(--u));
  font-weight: 500;
  letter-spacing: calc(1.3 * var(--u));
  text-align: center;
}
.cs-card {
  margin: 0;
  padding: calc(40 * var(--u)) calc(32 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #333;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fafafa;
  font-size: calc(22 * var(--u));
  letter-spacing: calc(-0.1 * var(--u));
  line-height: calc(30 * var(--u));
  text-align: center;
}

/* solution heads */
.cs-solution h3 {
  margin: 0 0 calc(39 * var(--u));
  font-family: var(--font-serif);
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: calc(45 * var(--u));
}
.cs-solution .cs-p { letter-spacing: calc(-0.3 * var(--u)); }
.cs-solution--tight h3 { margin-bottom: calc(49 * var(--u)); line-height: calc(40 * var(--u)); }
.cs-solution--inset h3, .cs-solution--inset .cs-num { padding-right: calc(14 * var(--u)); }
.cs-num--sm { margin-bottom: calc(8 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }

/* Figma's bubble scaled by 22/18 so its text stays inside on the same two lines at the 22 floor;
   top is lifted so the bottom edge stays where Figma has it */
.cs-quote {
  position: absolute;
  left: calc(77 * var(--u));
  top: calc(513 * var(--u));
  width: calc(530 * var(--u));
  padding: calc(20 * var(--u)) calc(31.5 * var(--u));
  border: calc(1.43 * var(--u)) solid var(--cs-accent);
  border-radius: calc(23 * var(--u));
  background: var(--ink);
  color: #020508;
  font-size: calc(22 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.117 * var(--u));
  line-height: calc(31.5 * var(--u));
  white-space: nowrap;
  opacity: var(--shown);
}
.cs-quote b {
  position: absolute;
  left: calc(31.3 * var(--u));
  top: calc(-12.5 * var(--u));
  width: calc(24.5 * var(--u));
  height: calc(24.5 * var(--u));
  border-radius: calc(5 * var(--u));
  background: #0048ff;
  color: var(--ink);
  font-size: calc(17 * var(--u)); /* a marker, not reading text: keeps Figma's 14:20 digit to badge */
  font-weight: 600;
  line-height: calc(24.5 * var(--u));
  text-align: center;
}

/* evidence */
/* rows come in from the top down the first time they are seen; after that a dot shrinks by --near,
   0 to 1, as the pointer comes close. The colours never change, so the share stays readable. */
.cs-dots {
  --dot: calc(89 * var(--u));
  display: grid;
  grid-template-columns: repeat(17, var(--dot));
  grid-auto-rows: var(--dot);
  width: 100%;
  height: calc(var(--dot) * 5);
  overflow: hidden;
}
.cs-dots i {
  --near: 0;
  border-radius: 50%;
  background: #607ecc;
  transform: scale(calc(1 - var(--near) * 0.45));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.cs-dots i.is-empty { background: #191919; }
.cs-dots.is-waiting i { opacity: 0; transform: translateY(-100%); }
.cs-dots:not(.is-settled) i {
  transition-duration: 0.8s, 0.6s;
  transition-delay: calc(var(--row) * 160ms + var(--column) * 14ms);
}
@media (prefers-reduced-motion: reduce) {
  .cs-dots.is-waiting i { opacity: 1; transform: none; }
  .cs-dots:not(.is-settled) i { transition: none; }
}
.cs-stat {
  color: var(--cs-accent);
  font-family: var(--font-serif);
  font-size: calc(241.921 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.cs-stat--md { font-size: calc(187.197 * var(--u)); }
/* the figure's characters rise one after another out of a clipped line, the first time it is seen */
.cs-stat { overflow: hidden; }
.cs-stat span {
  display: inline-block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.cs-stat.is-waiting span { opacity: 0; transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .cs-stat span { transition: none; }
  .cs-stat.is-waiting span { opacity: 1; transform: none; }
}
.cs-stat-copy {
  font-size: calc(26.325 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.146 * var(--u));
  line-height: calc(48.5 * var(--u));
}
.cs-trend { display: flex; align-items: center; justify-content: center; height: calc(var(--ht) * var(--u)); }
.cs-trend div { position: relative; flex: none; width: calc(353.26 * var(--u)); height: calc(165.025 * var(--u)); transform: rotate(8.06deg); }
.cs-trend svg { position: absolute; left: -2.44%; top: -6.08%; width: 104.88%; height: 111.31%; overflow: visible; }
/* the arrow draws itself along its line from tail to tip, then the head opens out from the tip */
.cs-trend mask path {
  fill: none;
  stroke: #fff;
  stroke-dasharray: 1;
  stroke-linecap: round;
  stroke-width: 30;
}
.cs-trend:not(.is-waiting) .cs-trend-shaft { transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0, 0.3, 1) 0.2s; }
.cs-trend:not(.is-waiting) .cs-trend-head { transition: stroke-dashoffset 0.3s ease-out 1s; }
.cs-trend.is-waiting svg { opacity: 0; }
.cs-trend.is-waiting mask path { stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) {
  .cs-trend:not(.is-waiting) mask path { transition: none; }
  .cs-trend.is-waiting svg { opacity: 1; }
  .cs-trend.is-waiting mask path { stroke-dashoffset: 0; }
}

/* final notes: the page ends on this held screen, with a screen of scrolling from one note to the next */
.cs-notes { height: 400vh; }
.cs-notes-pin {
  position: sticky;
  top: 0;
  width: calc(1512 * var(--u));
  height: 100vh;
  margin: 0 auto;
}
.cs-notes-pin .cs-h {
  position: absolute;
  left: calc(133 * var(--u));
  top: 50%;
  transform: translateY(-50%);
}
.cs-notes-list {
  position: absolute;
  left: calc(790 * var(--u));
  top: 50%;
  width: calc(630 * var(--u));
}
/* notes share one spot, each centred on the middle of the window whatever its length */
.cs-note {
  position: absolute;
  inset: 0 0 auto;
  transform: translateY(-50%);
  font-size: calc(22 * var(--u));
  letter-spacing: calc(-0.1 * var(--u));
  line-height: calc(40 * var(--u));
  text-align: center;
  visibility: hidden;
}
.cs-note.is-current { visibility: visible; }
.cs-note h3 { margin: 0 0 calc(56 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: 0; line-height: calc(31 * var(--u)); }
.cs-note p { margin: 0; }
.cs-note p + p { margin-top: calc(40 * var(--u)); }
.cs-note h3, .cs-note p {
  opacity: var(--fade, 1);
  transform: translateY(calc(var(--drift, 0) * var(--u)));
}
@media (prefers-reduced-motion: reduce) {
  .cs-note h3, .cs-note p { transform: none; }
}

/* ---------- LYNC mobile ---------- */
.cs-overview-media { height: calc(var(--ht) * var(--u)); background: #000; }
.cs-overview-media video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.cs-overview-copy { font-size: calc(22 * var(--u)); letter-spacing: calc(-0.1 * var(--u)); line-height: calc(39 * var(--u)); }
.cs-overview-copy i { font-weight: 500; }
.cs-overview-note { display: flex; align-items: flex-start; color: #8c8c8c; font-size: calc(22 * var(--u)); font-style: italic; font-weight: 500; line-height: calc(32 * var(--u)); }
.cs-overview-note span { margin-top: calc(14 * var(--u)); color: var(--cs-accent); font-size: calc(22 * var(--u)); font-style: normal; font-weight: 400; }
.cs-overview-note img { width: calc(18 * var(--u)); margin: calc(17 * var(--u)) calc(3 * var(--u)) 0 calc(15 * var(--u)); }
.cs-overview-note em { color: inherit; font-style: italic; white-space: nowrap; }

.cs-tag {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border: calc(1.5 * var(--u)) solid #6a6a6a;
  border-radius: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: calc(29 * var(--u));
}
.cs-intro { text-align: center; }
.cs-intro h2 {
  margin: calc(18 * var(--u)) 0 calc(20 * var(--u));
  font-size: calc(40 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.1 * var(--u));
  line-height: calc(58 * var(--u));
}
.cs-intro--wide h2 { margin: calc(48 * var(--u)) 0 calc(27 * var(--u)); }
.cs-fade {
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent 100%);
  mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent 100%);
}
.cs-intro h2 + p { margin: 0; color: #999ea8; font-size: calc(24 * var(--u)); line-height: calc(38 * var(--u)); }

.cs-word { color: #bdc1c6; font-size: calc(190.359 * var(--u)); font-weight: 500; line-height: 1.21; opacity: 0.6; }
.cs-goal-note { font-size: calc(22 * var(--u)); letter-spacing: calc(-0.1 * var(--u)); line-height: calc(34 * var(--u)); }
.cs-goal-note b { color: var(--cs-accent); font-weight: 600; }

.cs-pull { color: var(--cs-ink); font-family: "Source Serif 4", var(--font-serif); font-variation-settings: "opsz" 60; font-size: calc(88 * var(--u)); font-style: italic; font-weight: 400; letter-spacing: calc(-1.76 * var(--u)); line-height: 1.02; }
.cs-discovery { font-size: calc(22 * var(--u)); line-height: calc(42 * var(--u)); }
.cs-discovery em, .cs-discovery b { font-weight: 600; }

.cs-audit-lead { color: #999ea8; font-size: calc(22 * var(--u)); line-height: calc(27 * var(--u)); text-align: center; }
.cs-audit-title { font-size: calc(24 * var(--u)); font-weight: 600; line-height: calc(29 * var(--u)); text-align: center; }
.cs-audit-hint { color: #6e7276; font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); text-align: center; }

.cs-problem-note h3 { margin: 0 0 calc(16 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 500; letter-spacing: calc(-0.1 * var(--u)); line-height: calc(58 * var(--u)); }
.cs-problem-note h3 span { margin-left: calc(6 * var(--u)); color: #7c7c7c; font-size: calc(24 * var(--u)); }
.cs-problem-note p { margin: 0; color: #999ea8; font-size: calc(24 * var(--u)); line-height: calc(38 * var(--u)); }
.cs-key p { margin: 0; color: var(--ink); font-size: calc(26 * var(--u)); line-height: calc(38 * var(--u)); }
.cs-key p:first-child { margin-bottom: calc(19 * var(--u)); color: #76a4db; font-family: "Source Serif 4", var(--font-serif); font-variation-settings: "opsz" 30; font-size: calc(30 * var(--u)); font-style: italic; font-weight: 500; line-height: calc(41 * var(--u)); }

/* phone: the screen sits inside the frame at the same place at any size */
.cs-phone { aspect-ratio: 353 / 736.556; scale: .92; }
.cs-phone--solution { scale: .84; transform-origin: 50% 100%; }
.cs-phone > img { display: block; width: 100%; height: 100%; }
.cs-phone-screen {
  position: absolute;
  left: 4.25%;
  top: 2.17%;
  width: 91.8%;
  height: 95.6%;
  border-radius: calc(55 * var(--u));
  background: #fff;
  object-fit: cover;
}
.cs-compare {
  --split: 50%;
  position: absolute;
  left: 3.12%;
  top: 1.43%;
  width: 93.77%;
  height: 97.2%;
  overflow: hidden;
  border-radius: calc(50 * var(--u));
  background: #fff;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.cs-compare:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-compare-layer { position: absolute; inset: 0; }
.cs-compare-layer img, .cs-compare-layer video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cs-compare img { -webkit-user-drag: none; pointer-events: none; user-select: none; }
.cs-compare-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.cs-compare-line {
  position: absolute;
  left: var(--split);
  top: 0;
  bottom: 0;
  width: calc(2 * var(--u));
  background: var(--ink);
  box-shadow: 0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.15);
  transform: translateX(-50%);
}
.cs-compare-handle {
  position: absolute;
  left: var(--split);
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}
.cs-compare-handle img { width: calc(20 * var(--u)); }
.cs-compare-island {
  position: absolute;
  left: 50%;
  top: calc(9 * var(--u));
  width: calc(103 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(15 * var(--u));
  background: #000;
  transform: translateX(-50%);
}

.cs-map {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #121214;
}
.cs-map p { margin: 0; color: #999ea8; font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); }
.cs-map p:first-child { color: var(--cs-accent); font-family: "Source Serif 4", var(--font-serif); font-variation-settings: "opsz" 28; font-size: calc(28 * var(--u)); font-style: italic; line-height: normal; }
.cs-map h3 { margin: 0; color: var(--ink); font-size: calc(28 * var(--u)); font-weight: 500; line-height: normal; }
.cs-map small { color: #80858f; font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: calc(1.1 * var(--u)); line-height: normal; }

.cs-caption-lg {
  display: flex;
  align-items: center;
  height: calc(var(--ht) * var(--u));
  font-size: calc(35 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.25 * var(--u));
  line-height: 1.25;
}
.cs-steps { display: flex; flex-wrap: nowrap; gap: calc(14 * var(--u)); justify-content: center; }
.cs-step {
  --step-ease: cubic-bezier(.45, .05, .25, 1);
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: calc(28 * var(--u));
  background: linear-gradient(140deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  color: #cbd5e1;
  font: 500 calc(22 * var(--u)) var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: padding .8s var(--step-ease), background-color .5s ease, border-color .5s ease, color .5s ease;
}
/* the name opens out of the number at its real width, so the pill eases instead of snapping */
.cs-step-num, .cs-step-label { display: grid; transition: grid-template-columns .8s var(--step-ease), opacity .4s ease; }
.cs-step-num > span, .cs-step-label > span { min-width: 0; overflow: hidden; }
.cs-step-num { grid-template-columns: 1fr; }
.cs-step-label { grid-template-columns: 0fr; opacity: 0; }
.cs-step[aria-pressed="true"] { padding: 0 calc(26 * var(--u)); border-color: rgba(160, 188, 255, .45); background-color: rgba(120, 158, 255, .2); color: #fff; cursor: default; }
.cs-step[aria-pressed="true"] .cs-step-num { grid-template-columns: 0fr; opacity: 0; }
.cs-step[aria-pressed="true"] .cs-step-label { grid-template-columns: 1fr; opacity: 1; transition-delay: 0s, .3s; }
.cs-step:hover:not([aria-pressed="true"]) { background-color: rgba(255, 255, 255, .08); }
.cs-step:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cs-step, .cs-step-num, .cs-step-label { transition: none; }
}
/* the caption is built letter by letter for its reveal; this is the copy screen readers get */
.cs-caption-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cs-caption-word { display: inline-block; white-space: pre; }
.cs-compare-layer img.cs-compare-next { position: absolute; inset: 0; }
.cs-state-caption { font-size: calc(27.5 * var(--u)); line-height: calc(44 * var(--u)); text-align: center; }
.cs-state-caption p { margin: 0; }
.cs-state-caption p:first-child { color: #6d6d6d; font-family: var(--font-serif); }

.cs-changed { margin: 0; font-size: calc(120 * var(--u)); font-weight: 500; letter-spacing: calc(-4.8 * var(--u)); line-height: 1.21; }
.cs-standfirst { font-family: "Source Serif 4", var(--font-serif); font-variation-settings: "opsz" 34; font-size: calc(34 * var(--u)); letter-spacing: calc(-0.34 * var(--u)); line-height: calc(46 * var(--u)); }
.cs-rules div { display: grid; grid-template-columns: calc(303 * var(--u)) 1fr 1fr; gap: calc(24 * var(--u)); align-items: center; height: calc(97 * var(--u)); padding: 0 calc(32 * var(--u)); border-top: 1px solid #30343a; font-size: calc(22 * var(--u)); letter-spacing: calc(-0.1 * var(--u)); }
.cs-rules div:last-child { border-bottom: 1px solid #30343a; }
.cs-rules .cs-rules-head { height: calc(72 * var(--u)); align-items: end; padding-bottom: calc(16 * var(--u)); border-top: 0; color: #8e9296; }
.cs-rules [role="rowheader"] { display: flex; gap: calc(24 * var(--u)); align-items: center; color: #cbd5e1; font-family: "Source Serif 4", var(--font-serif); font-variation-settings: "opsz" 26; font-size: calc(26 * var(--u)); letter-spacing: calc(-0.3 * var(--u)); }
.cs-rules b { width: calc(24 * var(--u)); color: var(--cs-accent); font-family: var(--font-ui); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: calc(1.1 * var(--u)); }
.cs-closing { color: #a1a1a1; font-size: calc(40 * var(--u)); letter-spacing: calc(-0.8 * var(--u)); line-height: 1.45; }
.cs-final { font-size: calc(226.803 * var(--u)); font-weight: 600; line-height: calc(212 * var(--u)); }
/* closing notes: the title holds and dims, and the notes come up one at a time in the same spot,
   each centred on the middle of the window whatever its length */
.cs-closer { height: calc(100vh + var(--notes, 4) * 150vh); } /* the same unhurried scroll per note on every page */
.cs-closer-pin {
  position: sticky;
  top: 0;
  width: calc(1512 * var(--u));
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
.cs-closer-pin .cs-final {
  position: absolute;
  left: calc(127 * var(--u));
  top: 50%;
  margin: 0;
  opacity: var(--title, 1);
  transform: translateY(-50%);
}
.cs-closer-notes { position: absolute; left: calc(862 * var(--u)); top: 50%; }
.cs-closer-note { position: absolute; left: 0; top: 0; width: calc(var(--w) * var(--u)); transform: translateY(-50%); }
.cs-closer-note > * {
  margin: 0;
  opacity: var(--fade, 1);
  transform: translateY(calc(var(--drift, 0) * 1px));
}
.cs-closer-note h3 { margin-bottom: calc(87 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 500; letter-spacing: calc(-1 * var(--u)); line-height: calc(39 * var(--u)); white-space: nowrap; }
.cs-closer-note p { font-size: calc(22 * var(--u)); letter-spacing: calc(-0.1 * var(--u)); line-height: calc(37 * var(--u)); }
.cs-closer-note h3 + p { text-indent: calc(43 * var(--u)); }

/* design system journal, on its 560 x 700 Figma frame: --j is one unit of it. It rests open, and on hover
   the pages slide a little further out from behind the cover */
.jn { --ease: cubic-bezier(.3, 1.25, .5, 1); container-type: inline-size; }
.jn-box { --j: calc(100cqw / 560); position: relative; display: block; aspect-ratio: 560 / 700; }
.jn-back, .jn-pages, .jn-cover { position: absolute; display: block; box-sizing: border-box; }
.jn-pages { transition: transform .7s var(--ease); }
.jn-back {
  left: calc(440 * var(--j));
  top: calc(70 * var(--j));
  width: calc(90 * var(--j));
  height: calc(560 * var(--j));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: calc(30 * var(--j));
  background: rgba(120, 158, 255, .1);
  transform: translateX(calc(14 * var(--j)));
}
.jn-pages {
  left: calc(76 * var(--j));
  top: calc(101 * var(--j));
  width: calc(430 * var(--j));
  height: calc(500 * var(--j));
  overflow: hidden;
  border-radius: calc(18 * var(--j));
  background: #f2f2f5 repeating-linear-gradient(to bottom, transparent 0 calc(27 * var(--j)), rgba(120, 158, 255, .25) calc(27 * var(--j)) calc(28 * var(--j))) 0 calc(5 * var(--j));
  color: #1a1a1f;
  font: 400 calc(16 * var(--j)) "IBM Plex Mono", monospace;
  text-align: left;
  white-space: pre;
  transform: translateX(calc(14 * var(--j))) rotate(3deg);
}
.jn-pages span { position: absolute; left: calc(40 * var(--j)); }
.jn-pages span:nth-child(1) { top: calc(88 * var(--j)); }
.jn-pages span:nth-child(2) { top: calc(144 * var(--j)); }
.jn-pages span:nth-child(3) { top: calc(200 * var(--j)); }
.jn-pages span:nth-child(4) { top: calc(256 * var(--j)); }
.jn-pages b {
  position: absolute;
  right: calc(18 * var(--j));
  top: 50%;
  font-size: calc(20 * var(--j));
  font-weight: 400;
  letter-spacing: calc(1.2 * var(--j));
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.jn-cover {
  left: calc(60 * var(--j));
  top: calc(50 * var(--j));
  width: calc(440 * var(--j));
  height: calc(600 * var(--j));
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: calc(30 * var(--j));
  background: linear-gradient(160deg, rgba(58, 60, 66, .62), rgba(40, 42, 50, .56) 50%, rgba(44, 52, 84, .54));
  -webkit-backdrop-filter: blur(calc(18 * var(--j)));
  backdrop-filter: blur(calc(18 * var(--j)));
  transform: perspective(calc(1500 * var(--j))) rotateY(-42deg);
  transform-origin: 0 50%;
}
.cs-open .jn-cover img { position: absolute; left: calc(220 * var(--j)); top: calc(292 * var(--j)); width: calc(172 * var(--j)); }
.jn:hover .jn-pages, .jn:focus-visible .jn-pages { transform: translateX(calc(52 * var(--j))) rotate(5deg); }
@media (prefers-reduced-motion: reduce) {
  .jn-pages { transition: none; }
}
.cs-open { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.cs-open img { display: block; width: 100%; height: auto; }
.cs-open:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; border-radius: 16px; }

/* glass folder, laid out on its 640 x 560 Figma frame: --fd is one unit of it */
.fd { --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .5, 1); --px: 0; --py: 0; container-type: inline-size; }
.fd-box { --fd: calc(100cqw / 640); position: relative; aspect-ratio: 640 / 560; }
.fd-body {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--px) * .6deg)) translate(calc(var(--px) * var(--fd) * 4), calc(var(--py) * var(--fd) * 3));
  transition: transform .9s var(--ease);
}
/* the files sit in the pocket between the back and the glass: this box ends at the rim, so whatever
   has not risen out of the folder is simply not there */
.fd-sheets {
  position: absolute;
  left: calc(-60 * var(--fd));
  right: calc(-60 * var(--fd));
  top: calc(-220 * var(--fd));
  height: calc(292 * var(--fd));
  overflow: hidden;
}
.fd-sheet {
  position: absolute;
  width: calc(260 * var(--fd));
  height: calc(330 * var(--fd));
  translate: var(--in-x) var(--in-y);
  transition: translate .62s var(--spring), rotate .62s var(--spring);
}
.fd-sheet--audit { --in-x: calc(-62 * var(--fd)); --in-y: calc(236 * var(--fd)); left: calc(249.13 * var(--fd)); top: calc(62.91 * var(--fd)); }
.fd-sheet--research { --in-x: calc(52 * var(--fd)); --in-y: calc(204 * var(--fd)); left: calc(48.89 * var(--fd)); top: calc(94.61 * var(--fd)); transition-delay: 50ms; }
/* a little closer together than the Figma frame, so both stay inside the pocket's width at the rim */
.fd[data-peek] .fd-sheet--audit, .fd:has(.fd-hit:focus-visible) .fd-sheet--audit { translate: calc(-24 * var(--fd)) 0; }
.fd[data-peek] .fd-sheet--research, .fd:has(.fd-hit:focus-visible) .fd-sheet--research { translate: calc(22 * var(--fd)) 0; }
.fd[data-peek] .fd-sheet--audit, .fd:has(.fd-hit:focus-visible) .fd-sheet--audit { rotate: -7deg; }
.fd[data-peek] .fd-sheet--research, .fd:has(.fd-hit:focus-visible) .fd-sheet--research { rotate: 7deg; }
/* the folder is drawn, not a picture: a dark back, one sheet of paper, and frosted glass in front that
   really blurs whatever is behind it */
.fd-folder {
  position: absolute;
  left: calc(100 * var(--fd));
  top: calc(210 * var(--fd));
  width: calc(440 * var(--fd));
  height: calc(317.7 * var(--fd));
  transition: translate 1s var(--ease), opacity 1s var(--ease);
}
.fd-folder-back { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fd-paper {
  position: absolute;
  left: calc(24 * var(--fd));
  right: calc(41 * var(--fd));
  top: calc(36 * var(--fd));
  height: calc(40 * var(--fd));
  border-radius: calc(6 * var(--fd)) calc(6 * var(--fd)) 0 0;
  background: linear-gradient(180deg, rgba(190, 196, 206, .82), rgba(150, 156, 168, .72));
  box-shadow: inset 0 calc(.8 * var(--fd)) 0 rgba(235, 240, 248, .5);
  rotate: -.8deg;
}
.fd-front {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(65 * var(--fd));
  bottom: 0;
  overflow: hidden;
  border-radius: calc(22 * var(--fd));
  background: rgba(34, 43, 58, .74);
  -webkit-backdrop-filter: blur(calc(16 * var(--fd))) saturate(1.3);
  backdrop-filter: blur(calc(16 * var(--fd))) saturate(1.3);
  transform-origin: 50% 100%;
  transition: transform .6s var(--spring);
}
/* the light inside the glass, blurred so it has no edges */
.fd-front::before {
  content: "";
  position: absolute;
  inset: calc(-30 * var(--fd));
  background:
    radial-gradient(22% 24% at 9% 88%, #9fd8ff 0%, rgba(120, 190, 250, .75) 45%, rgba(120, 190, 250, 0) 100%),
    radial-gradient(20% 22% at 92% 88%, rgba(70, 125, 215, .85), rgba(70, 125, 215, 0) 100%),
    radial-gradient(16% 42% at 7% 40%, rgba(125, 165, 210, .8), rgba(125, 165, 210, 0) 100%),
    radial-gradient(10% 50% at 95% 34%, rgba(170, 210, 255, .75), rgba(170, 210, 255, 0) 100%),
    radial-gradient(42% 26% at 34% 20%, rgba(150, 175, 205, .8), rgba(150, 175, 205, 0) 100%),
    radial-gradient(30% 32% at 74% 24%, rgba(190, 200, 215, .72), rgba(190, 200, 215, 0) 100%);
  filter: blur(calc(14 * var(--fd)));
}
/* the bevel: a thin bright edge, brightest along the bottom, with a soft glow just inside it */
.fd-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 calc(1.2 * var(--fd)) 0 rgba(205, 225, 250, .9),
    inset calc(1.4 * var(--fd)) 0 0 rgba(215, 232, 252, .75),
    inset calc(-1.4 * var(--fd)) 0 0 rgba(215, 232, 252, .8),
    inset 0 calc(-2.4 * var(--fd)) 0 rgba(245, 250, 255, .95),
    inset 0 calc(6 * var(--fd)) calc(9 * var(--fd)) rgba(190, 215, 245, .42),
    inset calc(5 * var(--fd)) 0 calc(9 * var(--fd)) rgba(190, 220, 250, .32),
    inset calc(-5 * var(--fd)) 0 calc(9 * var(--fd)) rgba(190, 220, 250, .36),
    inset 0 calc(-8 * var(--fd)) calc(11 * var(--fd)) rgba(165, 215, 255, .6);
}
.fd[data-peek] .fd-front { transform: scaleY(.985); }
.fd-hit {
  position: absolute;
  left: calc(100 * var(--fd));
  top: calc(180 * var(--fd));
  width: calc(440 * var(--fd));
  height: calc(348 * var(--fd));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fd[data-peek] .fd-hit { top: calc(40 * var(--fd)); height: calc(488 * var(--fd)); }
.fd-hit:focus-visible { outline: 2px solid #789eff; outline-offset: 4px; border-radius: calc(24 * var(--fd)); }
.fd[data-pre] .fd-folder { translate: 0 calc(22 * var(--fd)); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fd * { transition: none !important; }
  .fd-body { transform: none; }
}

/* this section always fits one window: the folder takes whatever height the text leaves */
.cs-fit {
  --fw: min(640 * var(--u), (100svh - 290px) * 640 / 490);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  min-height: 560px;
  padding: 96px 0 28px;
}
.cs-fit > .cs-at { position: static; width: auto; }
.cs-fit > .fd { width: var(--fw); margin: calc(var(--fw) * -.03) 0 calc(var(--fw) * -.03); }
.cs-fit .cs-audit-title { margin-top: 18px; }
.cs-fit .cs-audit-hint { margin-top: 8px; }

/* files that open over the page; the page stays put behind them */
html:has(.cs-dialog[open]) { overflow: hidden; }
.cs-dialog {
  width: min(1200px, 100vw - 32px);
  max-width: none;
  height: min(820px, 100dvh - 32px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #0a0a0d;
  color: var(--cs-ink, #eaeff6);
  font-family: var(--font-ui);
}
.cs-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.cs-dialog[open] { overflow: hidden; }
.cs-dialog-box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 40px 30px;
}
.cs-dialog-title { margin: 0 56px 27px 0; font-size: 22px; font-weight: 600; line-height: 27px; }
.cs-dialog-close {
  position: absolute;
  right: 36px;
  top: 28px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #1c1c1f;
  color: #eaeff6;
  font: 500 16px var(--font-ui);
  cursor: pointer;
}
.cs-tabs { display: flex; flex: none; gap: 8px; margin-bottom: 17px; overflow-x: auto; }
.cs-tab {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: #1c1c1f;
  color: #999ea8;
  font: 500 14px/17px var(--font-ui);
  cursor: pointer;
}
.cs-tab[aria-current="true"] { background: #eaeff6; color: #000; }
.cs-dialog-close:focus-visible, .cs-tab:focus-visible, .cs-dialog-panel:focus-visible { outline: 2px solid #789eff; outline-offset: 2px; }
.cs-tab { transition: background-color .2s ease, color .2s ease; }
.cs-dialog-panel { flex: 1; min-height: 0; overflow: auto; border-radius: 16px; background: #000; }
.cs-dialog-panel--spaced img { padding-top: 80px; } /* each part's heading sits clear of the frame */
.cs-dialog-panel img { display: block; width: 100%; height: auto; }

/* on wide windows the dialogs come down to 80% with the content they belong to */
@media (min-width: 901px) {
  .cs-hero { --u: calc(min(100vw, 1512px) / 1512); } /* the first screen keeps its full size */
  .cs-dialog { width: min(960px, 100vw - 32px); height: min(656px, 100dvh - 32px); border-radius: 20px; }
  .cs-dialog-box { padding: 26px 32px 24px; }
  .cs-dialog-title { margin-bottom: 20px; font-size: 18px; line-height: 22px; }
  .cs-dialog-close { right: 28px; top: 20px; width: 32px; height: 32px; font-size: 13px; }
  .cs-tabs { margin-bottom: 14px; }
  .cs-tab { padding: 7px 13px; font-size: 12px; line-height: 15px; }
  .cs-dialog-panel { border-radius: 13px; }
}

/* below this the type would be too small to scale with the page, so the sections stack instead */
@media (max-width: 900px) {
  .cs { --u: 1px; }
  .cs-stage {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: auto;
    padding: 56px 20px;
  }
  .cs-at, .cs-columns, .cs-col { position: static; width: auto; }
  .cs-hero { padding-top: 104px; }
  .cs-hero-media { order: 1; }
  .cs-meta { order: 2; }
  .cs-media, .cs-monitor, .cs-window { width: 100%; height: auto; }
  .cs-media { aspect-ratio: var(--w) / var(--ht); max-height: 70vh; }
  .cs-monitor { position: relative; left: 0; top: 0; aspect-ratio: 603 / 439; }
  .cs-monitor video { left: 0.5%; top: 1.14%; width: 99.5%; height: 76.8%; }
  .cs-window { aspect-ratio: auto; }
  .cs-p, .cs-col p:last-child { font-size: 16px; line-height: 1.75; }
  .cs-p p + p { margin-top: 1.75em; }
  .cs-p br, .cs-col p br { display: none; }
  .cs-right { text-align: left; }
  .cs-center, .cs-statement, .cs-problem-head { text-align: left; }
  .cs-display { font-size: clamp(64px, 20vw, 140px); line-height: 0.95; text-align: left; }
  .cs-display--left { font-size: clamp(48px, 15vw, 120px); line-height: 1; }
  .cs-h--lg { font-size: 32px; }
  .cs-h--xl { font-size: 40px; }
  .cs-lead { font-size: 20px; line-height: 1.5; }
  .cs-open { position: relative; left: 0; top: 0; width: 100%; max-width: 480px; margin: 0 auto; }
  .cs-fit { height: auto; min-height: 0; padding: 56px 20px; align-items: stretch; }
  .cs-fit > .fd { position: relative; width: min(100%, 480px); margin: 0 auto; }
  .cs-dialog { border-radius: 18px; }
  .cs-dialog-box { padding: 20px 16px 16px; }
  .cs-dialog-title { margin-bottom: 16px; font-size: 18px; line-height: 40px; }
  .cs-dialog-close { right: 12px; top: 16px; }
  .cs-dialog-panel { border-radius: 12px; }
  .cs-dialog-panel img { width: 760px; max-width: none; } /* too small to read at the window's width; pan sideways */
  .cs-overview-media, .cs-words .cs-media { width: auto; height: auto; }
  .cs-overview-media { aspect-ratio: 16 / 9; margin: 0 -20px; }
  .cs-overview-copy, .cs-discovery, .cs-goal-note { font-size: 16px; line-height: 1.75; }
  .cs-overview-note { display: none; }
  .cs-tag { align-self: flex-start; font-size: 16px; line-height: 1.2; padding: 8px 16px; border-radius: 12px; }
  .cs-intro { text-align: left; }
  .cs-intro h2, .cs-intro--wide h2 { margin: 16px 0 12px; }
  .cs-intro h2, .cs-audit-title { font-size: 26px; line-height: 1.3; }
  .cs-intro h2 + p, .cs-problem-note p { font-size: 17px; line-height: 1.6; }
  .cs-intro br, .cs-problem-note br, .cs-key br, .cs-caption-lg br, .cs-state-caption br, .cs-discovery br { display: none; }
  .cs-word { font-size: clamp(72px, 24vw, 160px); line-height: 1; }
  .cs-pull { font-size: 44px; letter-spacing: -0.8px; }
  .cs-audit-lead, .cs-audit-title, .cs-audit-hint { text-align: left; }
  .cs-audit-lead { font-size: 16px; line-height: 1.5; }
  .cs-problem-note h3 { margin-bottom: 8px; font-size: 26px; line-height: 1.3; }
  .cs-key p { font-size: 18px; line-height: 1.6; }
  .cs-key p:first-child { margin-bottom: 8px; font-size: 22px; line-height: 1.3; }
  .cs-phone { position: relative; left: 0; top: 0; width: min(100%, 300px); margin: 0 auto; scale: none; }
  .cs-map { width: 100%; }
  .cs-changed { font-size: 56px; letter-spacing: -2px; }
  .cs-standfirst { font-size: 20px; line-height: 1.5; }
  .cs-caption-lg { display: block; height: auto; font-size: 20px; line-height: 1.35; }
  .cs-steps { gap: 8px; }
  .cs-step { min-width: 38px; height: 38px; padding: 0 12px; font-size: 13px; border-radius: 19px; }
  .cs-scene { display: block; min-height: 0; }
  .cs-step[aria-pressed="true"] { padding: 0 14px; }
  .cs-state-caption { font-size: 15px; line-height: 1.6; }
  .cs-rules div { grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; height: auto; min-height: 60px; padding: 8px 0; font-size: 14px; }
  .cs-rules .cs-rules-head { min-height: 32px; }
  .cs-rules [role="rowheader"] { gap: 8px; font-size: 15px; }
  .cs-rules b { width: 20px; font-size: 12px; }
  .cs-closing { font-size: 24px; letter-spacing: -0.4px; }
  .cs-final { font-size: clamp(72px, 24vw, 160px); line-height: 1; }
  .cs-closer-note h3 { margin-bottom: 16px; font-size: 24px; line-height: 1.3; white-space: normal; }
  .cs-closer-note p { font-size: 16px; line-height: 1.75; }
  .cs-notes { height: auto; padding: 56px 20px; }
  .cs-notes-pin { position: static; width: auto; height: auto; }
  .cs-notes-pin .cs-h { position: static; transform: none; }
  .cs-notes-list { position: static; width: auto; margin-top: 32px; }
  .cs-note { position: static; transform: none; margin-bottom: 40px; font-size: 16px; line-height: 1.75; text-align: left; visibility: visible; }
  .cs-note h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.3; }
  .cs-note p + p { margin-top: 1.75em; }
  .cs-note br { display: none; }
  .cs-note h3, .cs-note p { opacity: 1; transform: none; }
  .cs-held { height: auto; }
  .cs-finding-track { position: static; }
  .cs-finding { position: static; width: 100%; height: auto; margin: 0; overflow: visible; background: none; }
  .cs-finding-shot { height: auto; opacity: 1; }
  .cs-finding-copy { position: static; width: auto; margin-top: 24px; font-size: 16px; line-height: 1.75; opacity: 1; transform: none; }
  .cs-finding-copy .cs-label { margin-bottom: 8px; }
  .cs-callout, .cs-quote { opacity: 1; }
  .cs-about-track { position: static; }
  .cs-about-window { position: static; width: 100%; margin: 0; }
  .cs-goal { height: auto; padding: 56px 20px; }
  .cs-goal-pin { position: static; display: block; height: auto; overflow: visible; }
  .cs-goal-box { display: flex; flex-direction: column; gap: 32px; width: auto; height: auto; }
  .cs-goal-title { position: static; display: block; font-size: clamp(64px, 20vw, 140px); line-height: 0.95; text-align: left; opacity: 1; }
  .cs-goal-item { position: static; transform: none; will-change: auto; }
  .cs-goal-item video, .cs-goal-item p { position: static; width: 100%; }
  .cs-goal-item video { height: auto; aspect-ratio: var(--w) / var(--ht); max-height: 70vh; }
  .cs-goal-item .cs-p { margin-top: 16px; font-size: 16px; line-height: 1.75; }
  .cs-lead--semi { white-space: normal; }
  .cs-col h3 { margin-bottom: 12px; }
  .cs-columns { display: grid; gap: 40px; }
  .cs-icon { margin-bottom: 24px; }
  .cs-friction { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px; }
  .cs-friction-label { font-size: 11px; }
  .cs-card { padding: 16px 10px; font-size: 14px; line-height: 1.4; }
  .cs-card br, .cs-solution h3 br, .cs-quote br { display: none; }
  .cs-quote { position: relative; left: 0; top: 0; width: auto; margin: 8px; padding: 12px 14px 12px 40px; background: var(--ink); font-size: 14px; line-height: 1.4; white-space: normal; }
  .cs-quote b { left: 12px; top: 12px; }
  .cs-solution--inset h3, .cs-solution--inset .cs-num { padding-right: 0; }
  .cs-solution--tight h3 { line-height: 1.35; margin-bottom: 16px; }
  .cs-solution h3 { font-size: 26px; line-height: 1.35; margin-bottom: 16px; }
  .cs-dots { --dot: 12.5vw; margin: 0 -20px; width: 100vw; }
  .cs-stat { font-size: 112px; }
  .cs-stat--md { font-size: 88px; }
  .cs-stat-copy { font-size: 20px; line-height: 1.6; }
  .cs-trend { align-self: center; width: 220px; height: 120px; }
  .cs-trend div { width: 208px; height: 97px; }
  .cs-note h3 { margin-bottom: 20px; font-size: 22px; }
}

@media (max-width: 760px) {
  .gnb { top: 16px; padding: 0 16px; justify-content: space-between; gap: 8px; }
  .gnb-pill { width: auto; flex: 1; height: 52px; padding: 0 20px; }
  .gnb-back { position: static; flex: none; height: 52px; padding: 0 6px; }
  .gnb-back span { display: none; }
  .gnb-lang { position: static; height: 52px; padding: 0 8px; gap: 12px; }
  .hero-info { flex-direction: column-reverse; align-items: flex-start; bottom: 8%; gap: 20px; }
  .hero-status { padding: 0; }
  .hero-contact { text-align: left; gap: 12px; }
  .about { padding-bottom: 80px; }
  .about-stage { aspect-ratio: auto; padding: 96px var(--gutter) 0; }
  .about-title { position: static; width: min(78%, 420px); margin: 0 auto 32px; }
  .about-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .about-keywords li { position: static; font-size: 13px; }
  .about-copy { margin-top: 48px; font-size: 16px; line-height: 34px; }
  .about-copy p + p { margin-top: 34px; }
  .projects-inner { padding: 48px var(--gutter) 96px; }
  .projects-title { margin: 0 0 40px; line-height: 1.2; }
  .projects-row { --strip: 56px; --gap: 10px; height: 320px; }
  .project { border-radius: 20px; }
  .project-caption { padding: 72px 20px 18px; }
  .project-caption h3 { font-size: 16px; }
  .project-caption p { font-size: 12px; }
  .cv { gap: 44px; padding: 116px 20px 64px; }
  .cv-name { font-size: 28px; }
  .cv-summary { font-size: 16px; }
  .cv-actions { flex-direction: column; align-items: stretch; }
  .cv-download { justify-content: center; }
  .cv-section-title { margin-bottom: 20px; }
  .cv-entries { gap: 28px; }
  .cv-entry { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- KNOT ---------- */
.kf { height: calc(var(--ht) * var(--u)); }
/* the Error toggle: Figma stacks an off and an on drawing 15px apart, so the on one is lined up with the off
   one, the off one goes once it is covered, and the knob slides across while they swap */
.g115.kn-toggle-on { left: 15px; }
.kn-toggle-off { animation: kn-toggle-off 13s linear infinite; }
.kn-thumb-off { animation: kn-thumb-off 13s linear infinite; }
.kn-thumb-on { animation: kn-thumb-on 13s linear infinite; }
@keyframes kn-toggle-off { 0%, 87.691% { opacity: 1; } 87.692%, 100% { opacity: 0; } }
@keyframes kn-thumb-off { 0%, 84.615% { animation-timing-function: ease-in-out; translate: 0 0; } 87.692%, 100% { translate: 22px 0; } }
@keyframes kn-thumb-on { 0%, 84.615% { animation-timing-function: ease-in-out; translate: -22px 0; } 87.692%, 100% { translate: 0 0; } }
.kn-grid { height: auto; pointer-events: none; }
.kn-copy { font-size: calc(22 * var(--u)); letter-spacing: calc(-0.1 * var(--u)); line-height: calc(36.67 * var(--u)); white-space: nowrap; }
.kn-copy p { margin: 0; }
.kn-copy p + p { margin-top: calc(36.67 * var(--u)); }
.kn-knot { font-size: calc(190.36 * var(--u)); font-weight: 500; line-height: calc(230 * var(--u)); color: #d4d4d4; }
.kn-rope { background: none; rotate: -45.66deg; transform-origin: 0 0; }
.kn-clip { overflow: clip; }
.kn-screen { height: calc(var(--ht) * var(--u)); object-fit: cover; }
.kn-monitor { height: calc(1099 * var(--u)); max-width: none; object-fit: cover; }
.kn-orbit { height: auto; }
.kn-rise { position: absolute; inset: 0; translate: 0 calc((1 - var(--rise, 1)) * max(0px, 72vh - 676 * var(--u))); } /* starts with its top edge 72% down the window */
.kn-note h3 { margin-bottom: calc(47 * var(--u)); }
.kn-note h3 + p { text-indent: 0; }
.kn-note p { white-space: nowrap; }
.kn-note .kn-gap { margin-top: calc(37 * var(--u)); }

.kn-board { height: calc(420 * var(--u)); }
.kn-stage {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: 0;
  width: calc(244 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #0f1012;
  color: #8c9199;
  font-size: calc(13 * var(--u));
  line-height: calc(40 * var(--u));
}
.kn-board i {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: calc(52 * var(--u));
  width: 1px;
  height: calc(360 * var(--u));
  background: #1c1d20;
}
.kn-bar {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: calc(var(--by) * var(--u));
  width: calc(var(--bw) * var(--u));
  height: calc(67 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--c);
  color: #fff;
  font-size: calc(15 * var(--u));
  line-height: calc(18 * var(--u));
}
.kn-board.is-armed .kn-bar {
  opacity: 0;
  translate: calc(107 * var(--u)) 0; /* the reference's 120 on its 1120-wide board */
}
.kn-board.is-armed .kn-bar.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 2.4s cubic-bezier(.22, 1, .36, 1) .2s, translate 2.4s cubic-bezier(.22, 1, .36, 1) .2s;
}
.kn-bar b {
  display: block;
  width: fit-content;
  margin-bottom: calc(8 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #fff;
  color: #333338;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: calc(17 * var(--u));
}
.kn-bar--dashed { height: calc(69 * var(--u)); border: 1px dashed rgba(255, 255, 255, 0.35); background: none; color: #d9dee5; }

.kn-badge {
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border: calc(1 * var(--u)) solid #24262a;
  border-radius: calc(8 * var(--u));
  background: #151619;
  color: #999ea8;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: calc(24 * var(--u));
}
.kn-title { font-size: calc(40 * var(--u)); font-weight: 500; line-height: calc(58 * var(--u)); }
.kn-title--sm { font-size: calc(32 * var(--u)); }
.kn-num { color: #6e7276; font-size: calc(24 * var(--u)); font-weight: 500; line-height: calc(29 * var(--u)); }
.kn-body { color: #999ea8; font-size: calc(24 * var(--u)); line-height: calc(38 * var(--u)); }

.kn-journal-head { text-align: center; }
.kn-journal-head h2 { margin: 0 0 calc(16 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 400; line-height: calc(39 * var(--u)); }
.kn-journal-head p { margin: 0; color: #8c9199; font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); }
.kn-journal-panel { position: relative; }
.kn-sheet { position: relative; width: 100%; aspect-ratio: 1120 / var(--ht); overflow: clip; } /* clip, so its sticky stack still sees the dialog scroll */
.kn-stack { position: absolute; left: 0; width: 100%; }
.kn-stack-pin { position: sticky; top: 0; overflow: hidden; }
.kn-anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.kn-peek {
  translate: -50% 0; /* centred, so it stays under the folder whatever the label's length */
  height: calc(46 * var(--u));
  padding: 0 calc(28 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: #1e1e20;
  color: #fff;
  font: 500 calc(15 * var(--u)) var(--font-ui);
  cursor: pointer;
}
.kn-peek:focus-visible { outline: 2px solid #789eff; outline-offset: 4px; }

/* the section holds still while the scroll runs the panel's timeline */
.kn-pin { position: relative; height: calc(var(--h) * var(--u) + var(--scroll, 260vh)); }
/* held with its heading and panel centred in the window; a short window keeps the panel whole instead */
.kn-pin > .cs-stage {
  position: sticky;
  top: min(calc((100vh - (var(--bottom) - var(--top)) * var(--u)) / 2 - var(--top) * var(--u)), calc(100vh - (var(--bottom) + 24) * var(--u)));
}
.kn-pin[data-rise] > .cs-stage { top: 0; }

@media (max-width: 900px) {
  .kf { position: relative; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1000 / var(--ar, var(--ht)); }
  .kn-rope { rotate: none; }
  .kn-pin { height: auto; }
  .kn-pin > .cs-stage { position: relative; top: 0; }
  .kn-orbit { width: 100%; height: auto; }
  .kn-grid, .kn-monitor { display: none; }
  .kn-copy { font-size: 16px; line-height: 1.75; white-space: normal; }
  .kn-copy p + p { margin-top: 1.75em; }
  .kn-copy br, .kn-body br { display: none; }
  .kn-knot { font-size: clamp(72px, 26vw, 160px); line-height: 1; }
  .kn-screen { width: 100%; height: auto; }
  .kn-clip .cs-intro { order: -1; }
  .kn-board { --u: calc((100vw - 40px) / 1000); position: relative; left: 0; top: 0; width: 100%; height: calc(420 * var(--u)); }
  .kn-badge { width: fit-content; }
  .kn-title { font-size: 32px; line-height: 1.3; }
  .kn-body { font-size: 18px; line-height: 1.6; text-align: left; }
  .kn-journal-head h2 { font-size: 24px; line-height: 1.3; }
  .kn-journal-head p { font-size: 15px; line-height: 1.5; }
  .kn-rise { display: contents; }
  .kn-sheet { width: 760px; } /* too small to read at the window's width; pan sideways */
  .kn-note p { white-space: normal; }
  .kn-note br { display: none; }
  .fd { position: relative; left: 0; top: 0; width: min(100%, 480px); margin: 0 auto; }
  .kn-peek { align-self: center; height: 46px; font-size: 15px; translate: none; }
}

/* without the pinned scroll, the closing notes simply follow one another */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cs-closer { height: auto; padding: 56px 20px; }
  .cs-closer-pin { position: static; width: auto; height: auto; overflow: visible; }
  .cs-closer-pin .cs-final, .cs-closer-notes, .cs-closer-note { position: static; width: auto; transform: none; }
  .cs-closer-notes { margin-top: 40px; }
  .cs-closer-note + .cs-closer-note { margin-top: 48px; }
}

/* Korean: Hangul has no italic and the serifs have no Hangul, so those voices move to Pretendard, upright,
   and lines break between words */
html[lang="ko"] body { word-break: keep-all; }
html[lang="ko"] .cs { --font-serif: var(--font-body); }
html[lang="ko"] :is(.cs-pull, .cs-key p:first-child, .cs-map p:first-child, .cs-standfirst) { font-family: var(--font-body); }
html[lang="ko"] .cs * { font-style: normal; }

/* ---------- first-landing greeting ---------- */
.is-greeting { overflow: hidden; }
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  transition: translate .8s cubic-bezier(.76, 0, .24, 1);
}
.preloader-word { margin: 0; font-size: clamp(30px, 5vw, 60px); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; transition: opacity .35s ease; }
.preloader-word.is-out { opacity: 0; }
.preloader-curve { /* the edge bows down as it starts to lift, then flattens */
  position: absolute;
  left: -10%;
  right: -10%;
  top: calc(100% - 1px);
  height: 20vh;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: inherit;
  transform-origin: top;
  transition: scale .8s cubic-bezier(.76, 0, .24, 1);
}
.preloader.is-lifting { translate: 0 -120vh; }
.preloader.is-lifting .preloader-curve { scale: 1 0; }

/* ---------- phones: the portfolio is shown on larger screens only ---------- */
.mobile-gate { display: none; }
@media (max-width: 900px) {
  body > :not(.mobile-gate) { display: none !important; }
  .mobile-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100dvh;
    padding: 24px;
    text-align: center;
  }
  .mobile-gate .gnb-logo-mark { margin-bottom: 16px; }
  .mobile-gate p { margin: 0; font-size: 17px; line-height: 1.6; word-break: keep-all; }
  .mobile-gate p[lang="en"] { color: var(--ink-muted); font-size: 15px; }
}

/* KNOT Composition: Cell, Row and Grid are one recording, filling the panel */
.kn-accordion-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }