/* Pianist Katrina - staging. Tokens come straight from the Design export. */
/* Pianist Katrina: токены облика.
   СГЕНЕРИРОВАНО из tokens.json скриптом scripts/build-tokens.mjs. Руками не править.
   Источник истины: Obsidian Vault / Projects/KATRINA/_inbox/from-claude-ai/2026-09-10-directive-design-system-source-katrina-v1.md */

/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Поверхности */
  --pk-color-bg:          #FFFFFF;                                                 /* доминирует подавляюще */
  --pk-color-surface:     #F9F8F4;                                                 /* тёплая бумага, вторая поверхность */
  --pk-color-pearl:       #F2E9DC;                                                 /* перламутр: клавиши, детали знака */
  --pk-color-blush:       #DCC0B5;                                                 /* тёплая подложка, скупо и крупно */

  /* Текст */
  --pk-color-text:        #2F2F2F;                                                 /* тёплый угольный, вместо самого тёмного тона */
  --pk-color-text-muted:  #707070;                                                 /* только на bg и surface, канон §10 */

  /* Линии */
  --pk-color-hairline:    #E7DFD3;                                                 /* декоративная волосяная линия, смысла не несёт */
  --pk-color-border:      #AC9067;                                                 /* функциональная граница, 3:1 */

  /* Действие */
  --pk-color-accent:      #BDA756;                                                 /* латунь: ТОЛЬКО заливка действия */
  --pk-color-accent-text: #2F2F2F;                                                 /* текст НА латуни, 5,63 */
  --pk-color-accent-ink:  #877535;                                                 /* латунь как ЦВЕТ ТЕКСТА, 4,54 */

  /* Гарнитуры */
  --pk-font-display:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pk-font-text:         'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* Ритм */
  --pk-measure:           680px;                                                   /* колонка текста, коридор 640-720 */
  --pk-page-max:          1120px;                                                  /* максимальная ширина страницы */
  --pk-space-1:           8px;
  --pk-space-2:           16px;
  --pk-space-3:           24px;
  --pk-space-4:           32px;
  --pk-space-5:           48px;
  --pk-space-6:           64px;
  --pk-space-section:     128px;                                                   /* между разделами: 1,5-2x обычного */
  --pk-radius:            4px;                                                     /* потолок, не отправная точка */
}


:root {
  --pk-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pk-hero-h1: clamp(38px, 7vw, 72px);   /* first-screen heading on one line from 1280, CC-TASK-025 */
  --pk-hero-photo-curve: 32%;   /* the P bowl of the mark (464/1466 wide, 560/1731 tall), top-right of the first-screen portrait only; owner 15.10, CC-TASK-025 */
  --pk-golden-minor: 38.2%;   /* golden section, the smaller part: the first-screen portrait's share of the desktop row, CC-TASK-026 */
  --pk-hero-photo-frame: 427.84 / 495;   /* desktop portrait frame: 0.382 of the 1120 px container wide, the 025 height (495 px) tall, CC-TASK-026 */
  --pk-hero-mark-w: 468px;   /* the logo video beside the portrait keeps its 025 width, centred in the 0.618 zone, CC-TASK-026 */

  /* Canon section 8: "neighbouring sections do not repeat their density:
     air, dense, air". The export shipped one value on every section, so the
     page had no rhythm at all.

     The scale sits ABOVE the export's flat 128px at the wide end, not below
     it: canon 11 forbids borders, cards and rules, so on this site air is
     not decoration, it is the separator, and a separator has to be felt.
     Fluid, so a narrow screen collapses it without a media query. */
  --pk-air-tight:   clamp(48px,  6vw,  88px);
  --pk-air-default: clamp(72px,  9vw, 128px);
  --pk-air-wide:    clamp(96px, 13vw, 184px);
}

[data-air="tight"]   { padding-top: var(--pk-air-tight);   padding-bottom: var(--pk-air-tight) }
[data-air="default"] { padding-top: var(--pk-air-default); padding-bottom: var(--pk-air-default) }
[data-air="wide"]    { padding-top: var(--pk-air-wide);    padding-bottom: var(--pk-air-wide) }

/* The language switch is a tap target on a phone; canon section 10 puts the
   floor at 44px and the export shipped 19px links. */
[data-pk-lang] a, [data-pk-lang] span {
  display: inline-flex; align-items: center; min-height: 44px;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pk-color-bg); color: var(--pk-color-text); }
img, video { max-width: 100%; }

/* Form field focus: brass border plus a visible ring (canon section 8).
   An outline, not a shadow - section 11 forbids shadows and glows. */
input:focus, textarea:focus, select:focus {
  border-color: var(--pk-color-accent);
  outline: 2px solid var(--pk-color-accent-ink);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pk-color-accent-ink);
  outline-offset: 2px;
}
input, textarea, select {
  transition: border-color 150ms var(--pk-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Consultant widget (brief v2, section 6). Colours, fonts, spacing: this
   brand's tokens only. No shadow, no gradient, radius 4px, no `transition: all`. */
.pkc { position: fixed; z-index: 60; font-family: var(--pk-font-text) }
.pkc[hidden] { display: none }
.pkc :focus-visible { outline: 2px solid var(--pk-color-accent-ink); outline-offset: 2px }

/* launcher */
.pkc-launch { right: 24px; bottom: 24px }
.pkc-pill { display: flex; align-items: center; gap: 12px;
  padding: 6px 22px 6px 6px; min-height: 52px; text-align: left;
  background: var(--pk-color-bg); border: 1px solid var(--pk-color-border);
  border-radius: 9999px; cursor: pointer; color: var(--pk-color-text);
  font-family: var(--pk-font-text);
  transition: border-color 150ms var(--pk-ease-out) }
.pkc-mark { display: block; width: 40px; height: 40px; flex: none; border: 0;
  box-sizing: border-box; padding: 6px; border-radius: 50%;
  background: var(--pk-color-pearl); object-fit: contain }
.pkc-label { display: grid; gap: 2px }
.pkc-label-t { font-weight: 400; font-size: 15px; line-height: 1.2 }
.pkc-label-s { font-weight: 300; font-size: 12px; line-height: 1.2;
  color: var(--pk-color-text-muted) }

/* dialog: 380 x 560 bottom right on a desktop */
.pkc-dlg { right: 24px; bottom: 24px; width: 380px;
  height: min(560px, calc(100dvh - 48px));
  display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  background: var(--pk-color-surface); border: 1px solid var(--pk-color-border);
  border-radius: 4px; color: var(--pk-color-text);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 200ms var(--pk-ease-out), transform 200ms var(--pk-ease-out) }
.pkc-dlg[data-open] { opacity: 1; transform: none; pointer-events: auto;
  transition-duration: 300ms }
.pkc-head { display: flex; align-items: center; gap: 12px; flex: none;
  padding: 10px 6px 10px 16px; border-bottom: 1px solid var(--pk-color-hairline) }
.pkc-head .pkc-mark { width: 36px; height: 36px }
.pkc-head-t { flex: 1; min-width: 0; display: grid; gap: 1px }
.pkc-title { font-family: var(--pk-font-display); font-weight: 500; font-size: 24px;
  line-height: 1.1; color: var(--pk-color-text) }
.pkc-sub { font-weight: 300; font-size: 12px; letter-spacing: 0.04em; line-height: 1.3;
  color: var(--pk-color-text-muted) }
.pkc-x { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0; background: none; border: 0;
  border-radius: 4px; cursor: pointer; color: var(--pk-color-text-muted);
  transition: color 150ms var(--pk-ease-out) }
.pkc-x svg { display: block }

/* thread */
.pkc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 14px }
.pkc-body:focus { outline: 0 }
.pkc-thread { display: flex; flex-direction: column; gap: 16px }
.pkc-msg { max-width: 88%; display: flex; flex-direction: column; gap: 8px }
.pkc-msg--bot { align-self: flex-start; align-items: flex-start }
.pkc-msg--you { align-self: flex-end; max-width: 82%; padding: 10px 14px;
  background: var(--pk-color-pearl); border-radius: 4px }
.pkc-text { margin: 0; font-family: var(--pk-font-text); font-weight: 300;
  font-size: 15px; line-height: 24px; color: var(--pk-color-text);
  overflow-wrap: anywhere; white-space: pre-wrap }
.pkc-src { font-weight: 300; font-size: 13px; line-height: 1.4;
  color: var(--pk-color-text-muted); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px }
.pkc-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 18px; background: var(--pk-color-accent);
  color: var(--pk-color-accent-text); border: 1px solid var(--pk-color-accent);
  border-radius: 4px; font-family: var(--pk-font-text); font-weight: 400;
  font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: filter 150ms var(--pk-ease-out) }
.pkc-cta .pk-ico { width: 18px; height: 18px }
.pkc-chips { display: grid; gap: 8px }
.pkc-chip { display: block; width: 100%; text-align: left; min-height: 44px;
  padding: 10px 14px; background: var(--pk-color-bg);
  border: 1px solid var(--pk-color-hairline); border-radius: 4px;
  font-family: var(--pk-font-text); font-weight: 300; font-size: 14px; line-height: 1.45;
  color: var(--pk-color-text); cursor: pointer;
  transition: border-color 150ms var(--pk-ease-out) }
.pkc-chips[hidden] { display: none }

/* waiting: three dots, opacity only, 500ms; a still ellipsis when motion is off */
.pkc-wait { display: flex; align-items: center; gap: 5px; min-height: 24px }
.pkc-wait i { display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pk-color-text-muted); opacity: 0.2;
  animation: pkc-dot 500ms var(--pk-ease-out) infinite alternate }
.pkc-wait i:nth-child(2) { animation-delay: 166ms }
.pkc-wait i:nth-child(3) { animation-delay: 333ms }
.pkc-wait b { display: none; font-weight: 300; font-size: 15px; line-height: 24px;
  color: var(--pk-color-text-muted) }
@keyframes pkc-dot { to { opacity: 1 } }

/* input row */
.pkc-foot { display: flex; gap: 8px; flex: none; padding: 12px;
  border-top: 1px solid var(--pk-color-hairline) }
.pkc-in { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 10px 12px;
  font-family: var(--pk-font-text); font-weight: 300; font-size: 15px;
  color: var(--pk-color-text); background: var(--pk-color-bg);
  border: 1px solid var(--pk-color-hairline); border-radius: 4px; outline: none;
  transition: border-color 150ms var(--pk-ease-out) }
.pkc-in:focus { border-color: var(--pk-color-accent-ink) }
.pkc-in::placeholder { color: var(--pk-color-text-muted); opacity: 1 }
.pkc-send { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; padding: 0; background: var(--pk-color-accent);
  color: var(--pk-color-accent-text); border: 1px solid var(--pk-color-accent);
  border-radius: 4px; cursor: pointer; transition: filter 150ms var(--pk-ease-out) }
.pkc-send svg { display: block }

@media (hover: hover) and (pointer: fine) {
  .pkc-pill:hover, .pkc-chip:hover { border-color: var(--pk-color-border) }
  .pkc-x:hover { color: var(--pk-color-text) }
  .pkc-cta:hover, .pkc-send:hover { filter: brightness(0.94) }
  .pkc-src:hover { color: var(--pk-color-text) }
}
@media (prefers-reduced-motion: reduce) {
  .pkc-dlg, .pkc-dlg[data-open] { transition: none }
  .pkc-wait i { display: none }
  .pkc-wait b { display: inline }
}

/* phone: a round mark, a full-screen sheet. --pkc-h and --pkc-top are set by
   the widget script from window.visualViewport so the input row stays above
   the keyboard; 100dvh is the value before the script has run. */
@media (max-width: 820px) {
  .pkc-launch { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) }
  .pkc-dlg { left: 0; right: 0; bottom: auto; width: auto; border: 0; border-radius: 0;
    top: var(--pkc-top, 0px); height: var(--pkc-h, 100dvh);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px) }
  .pkc-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)) }
  .pkc-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }
  .pkc-dlg[data-kb] .pkc-foot { padding-bottom: 12px }
  .pkc-in { font-size: 16px }
  .pkc-msg { max-width: 92% }
  /* once the page has moved, the launcher is the 52px mark alone */
  html[data-pk-scrolled] .pkc-pill { width: 52px; height: 52px; padding: 0; gap: 0;
    justify-content: center; border-color: transparent; background: transparent }
  html[data-pk-scrolled] .pkc-pill .pkc-mark { width: 52px; height: 52px }
  html[data-pk-scrolled] .pkc-pill .pkc-label { display: none }
}

/* ---------------------------------------------------------------------
   Phone (up to 700px), CC-TASK-KATRINA-005. Desktop is untouched: every
   rule below sits inside this one media query.
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* first screen: less air above and below the heading block, so the
     photo enters the first screen (canon rhythm kept: still the widest) */
  .pk-stage > .pk-pin > section { --pk-first-pad: 40px;
    padding-top: var(--pk-first-pad) !important; padding-bottom: var(--pk-first-pad) !important }
  .pk-stage > .pk-pin > section > div > div[style*="gap:34px"] { gap: 20px !important }
  .pk-stage > .pk-pin > section p { margin-top: 0.66em; margin-bottom: 0.66em }
  /* photos and video beside text: edge to edge; captions stay in the margin */
  .pk-bleed { margin-left: calc(-1 * var(--pk-space-4)) !important;
    margin-right: calc(-1 * var(--pk-space-4)) !important;
    width: calc(100% + 2 * var(--pk-space-4)) !important; max-width: none !important;
    justify-self: stretch !important }
  .pk-bleed figcaption { padding: 0 var(--pk-space-4) }
  .pk-bleed img, .pk-bleed video { width: 100% !important; height: auto !important;
    max-height: none !important; object-fit: cover !important; border-radius: 0 !important }
  .pk-bleed--portrait img, .pk-bleed--video-v video { aspect-ratio: 4 / 5 !important }
  .pk-bleed--land img { aspect-ratio: 3 / 2 !important }
  .pk-bleed--square img { aspect-ratio: 1 / 1 !important }
  .pk-bleed--video video { aspect-ratio: 16 / 9 !important }
  /* full-width strips (21:9 on desktop) are 167px tall on a phone: 3:2 */
  img.pk-strip { aspect-ratio: 3 / 2 !important; max-height: none !important }
  /* air between paragraphs about a third tighter; the section rhythm
     (air, dense, air) is untouched */
  main p { margin-top: 0.66em; margin-bottom: 0.66em }
  main [style*="gap:26px"], main [style*="gap:28px"] { gap: 18px !important }
  main [style*="gap:22px"], main [style*="gap:24px"] { gap: 16px !important }
  /* student stories as a stack of cards (results page) */
  .pk-cards { display: block }
  .pk-story-src { display: none !important }
  .pk-card-stage { display: contents }
  /* Owner, 02.10 evening: cards were all stretched to the tallest one and
     followed by empty pauses, so each showed a large blank under its text.
     Now a card is as tall as its text and the next one comes right after it.
     A shorter card stuck over a taller one would let the bottom of the one
     beneath peek out, so every card carries a skirt of paper below itself;
     the stack clips the skirts so they never reach the page after it. */
  .pk-cards { overflow: clip }
  .pk-card { position: sticky; top: 72px; box-sizing: border-box;
    padding: var(--pk-space-4) var(--pk-space-4) var(--pk-space-5) }
  .pk-card::after { content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 100vh; background-color: var(--pk-color-bg); pointer-events: none }
  .pk-card-stage:last-child .pk-card::after { content: none }
  .pk-card[data-pk-tall] { position: relative }
  .pk-card[data-pk-tall]::after { content: none }
  .pk-card-gap { display: none }
  /* one text size across the stack, the size of the "2023, fifth grade" card */
  .pk-card p { font-size: 21px !important; font-weight: 400 !important;
    line-height: 1.6 !important; margin: 0 !important }
  /* home first-screen photo: edge to edge, the frame chosen by the owner */
  figure[data-pk-photo] img[data-pk-hero-photo] { aspect-ratio: var(--pk-hero-frame, 4 / 5) !important;
    max-height: none !important; object-position: 50% 50% !important }
}

@media (min-width: 701px) { .pk-cards { display: none } }

/* Frosted header (CC-TASK-KATRINA-004 for phones; desktop added 02.10 by the owner, owner 02.10, the
   solution-optimal.com technique in this site's light look). At the top of
   the page: paper, no line. Once the page has moved: paper at 0.82 with the
   text behind softly blurred, and a 1px line. The line is a pseudo-element so
   the header stays 72px in both states. The state is set by an
   IntersectionObserver on a 1px sensor at the top of <body>: no scroll
   handler. Desktop (1000px and up) is untouched. */
:root { --pk-header-glass-alpha: 0.82; --pk-header-blur: 16px }
[data-pk-head-wrap] { background-color: var(--pk-color-bg) }
/* every width since 02.10 (owner): the header stays and frosts on desktop too */
[data-pk-head-wrap] { position: sticky; top: 0; z-index: 30;
  transition: background-color 300ms var(--pk-ease-out) }
[data-pk-head-wrap]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background-color: transparent; pointer-events: none;
  transition: background-color 300ms var(--pk-ease-out) }
[data-pk-head-wrap][data-pk-scrolled] {
  background-color: rgba(255, 255, 255, 0.82);
  background-color: color-mix(in srgb, var(--pk-color-bg) calc(var(--pk-header-glass-alpha) * 100%), transparent);
  -webkit-backdrop-filter: saturate(140%) blur(var(--pk-header-blur));
  backdrop-filter: saturate(140%) blur(var(--pk-header-blur)) }
[data-pk-head-wrap][data-pk-scrolled]::after {
  background-color: color-mix(in srgb, var(--pk-color-border) 50%, transparent) }
/* anchors land below the header; the pinned first screen stands below it */
[id] { scroll-margin-top: var(--pk-head-h) }
:root { --pk-head-h: 127px }
.pk-stage > .pk-pin { --pk-pin-top: var(--pk-head-h) }
@media (max-width: 999px) { :root { --pk-head-h: 72px } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-pk-head-wrap][data-pk-scrolled] {
    background-color: rgba(255, 255, 255, 0.96);
    background-color: color-mix(in srgb, var(--pk-color-bg) 96%, transparent) }
}

/* Header on a phone and a tablet: ONE row, the mark on the left and a menu
   button on the right, no taller than 72px (CC-TASK-KATRINA-002, 4.2). The
   export stacked the bar and a two-row menu, about 200px before any content.
   116px of lock-up is 64px tall; 4px above and below makes the 72. */
.pk-logo { display: block; width: 150px; height: auto; border: 0 }
.pk-menu { display: none }
@media (min-width: 1000px) { [data-pk-menu-open] { display: none !important } }
@media (max-width: 999px) {
  .pk-logo { width: 116px }
  [data-pk-header] { gap: 0 !important }
  [data-pk-bar] { padding: 4px 20px !important }
  [data-pk-nav] { display: none !important }
  /* The layer stays in the box tree so opacity can carry it in; visibility
     takes it out of the tab order and the accessibility tree when closed,
     switched at the END of the fade out and at the START of the fade in. */
  .pk-menu { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70;
    box-sizing: border-box; padding: 0 32px var(--pk-space-5); overflow-y: auto;
    background: var(--pk-color-bg); opacity: 0; visibility: hidden;
    transition: opacity 300ms var(--pk-ease-out), visibility 0s linear 300ms }
  .pk-menu[data-open="true"] { opacity: 1; visibility: visible;
    transition: opacity 300ms var(--pk-ease-out), visibility 0s linear 0s }
  .pk-menu-bar { display: flex; align-items: center; justify-content: space-between;
    gap: var(--pk-space-2); padding: 4px 0 }
  .pk-menu-nav { display: flex; flex-direction: column; padding-top: var(--pk-space-5) }
  .pk-menu-lang { margin-top: auto; padding-top: var(--pk-space-5) }
}

/* Contacts (owner's data, 02.10). Glyphs are one-colour line icons in the
   text colour; brass ink on hover. Every one is a 44px target. */
.pk-ico { display: block; flex: none }
.pk-social, .pk-menu-social { display: flex; flex-wrap: wrap; gap: 4px }
.pk-social { margin: var(--pk-space-1) 0 0 -11px }
.pk-social a, .pk-menu-social a, .pk-head-wa { display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; color: var(--pk-color-text);
  text-decoration: none; transition: color 150ms var(--pk-ease-out) }
.pk-head-wa { order: 0 }
@media (min-width: 1000px) { [data-pk-head-actions] { order: 2 } }
@media (hover: hover) and (pointer: fine) {
  .pk-social a:hover, .pk-menu-social a:hover, .pk-head-wa:hover,
  .pk-foot-col a:hover { color: var(--pk-color-accent-ink) }
}

/* Contact block on the apply page: the footer's contact rows at text size */
.pk-contact { display: flex; flex-direction: column; align-items: flex-start }
.pk-contact > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--pk-font-text); font-weight: 300; font-size: 17px; letter-spacing: 0.5px;
  color: var(--pk-color-text); text-decoration: none; transition: color 150ms var(--pk-ease-out) }
.pk-contact .pk-social { margin-top: var(--pk-space-1) }
@media (hover: hover) and (pointer: fine) { .pk-contact > a:hover { color: var(--pk-color-accent-ink) } }

/* Footer: brand, contact, pages; the base line carries the copyright and
   the language switch. Canon 11 forbids rules, so air does the dividing. */
.pk-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--pk-space-5) }
.pk-foot-brand { display: flex; flex-direction: column; gap: 10px }
.pk-foot-col { display: flex; flex-direction: column; align-items: flex-start }
.pk-foot-label { margin-bottom: var(--pk-space-1); font-weight: 300; font-size: 13px;
  letter-spacing: 2.5px; color: var(--pk-color-text-muted) }
.pk-foot-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 300; font-size: 15px; letter-spacing: 0.5px; color: var(--pk-color-text);
  text-decoration: none; transition: color 150ms var(--pk-ease-out) }
.pk-foot-col a .pk-ico { width: 18px; height: 18px }
.pk-foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pk-space-2); margin-top: var(--pk-space-6); font-weight: 300; font-size: 13px;
  letter-spacing: 0.5px; color: var(--pk-color-text-muted) }
/* Credit under the copyright (CC-TASK-KATRINA-011): the copyright's own size
   and colour, the link only takes the footer's brass ink on hover */
.pk-foot-legal { display: flex; flex-direction: column; gap: 6px }
.pk-foot-legal a { color: inherit; text-decoration: none; transition: color 150ms var(--pk-ease-out) }
@media (hover: hover) and (pointer: fine) { .pk-foot-legal a:hover { color: var(--pk-color-accent-ink) } }
@media (max-width: 820px) {
  .pk-foot-grid { grid-template-columns: 1fr; gap: var(--pk-space-4) }
}
.pk-menu-social { margin: auto 0 0 -11px; padding-top: var(--pk-space-5) }
.pk-menu .pk-menu-lang { margin-top: var(--pk-space-1); padding-top: 0 }

/* Certificate carousel (owner's request 02.10; canon 10 rules carousels out,
   so this is the quietest form of one): native horizontal scroll with snap,
   no autoplay, arrows and a counter, swipe and keyboard for free. One slide
   per view, framed like every right-hand photo. */
.pk-carousel { width: 100%; min-width: 0 }
.pk-car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain }
.pk-car-track::-webkit-scrollbar { display: none }
.pk-car-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start }
/* A certificate is a document, not a photograph (owner, 02.10): it sits in a
   passe-partout of the brand's pearl, the document ringed by one brass fillet
   set off its edge, the way a framer does it. No shadow, no radius, no
   gradient. The outer box keeps the size of every right-hand photo. */
.pk-car-mat { display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; aspect-ratio: 4 / 5; max-height: 560px;
  padding: var(--pk-space-5) var(--pk-space-4); background: var(--pk-color-pearl) }
/* landscape documents (competition diplomas) sit in a 4:3 mat, the same
   proportion as the landscape photo beside the ABRSM text on the home page */
.pk-car-mat--wide { aspect-ratio: 4 / 3; max-height: none }
/* square photographs (CC-TASK-KATRINA-020, the royal-families line on About)
   sit in a 1:1 mat as wide as the documents' one beside them */
.pk-car-mat--square { aspect-ratio: 1 / 1; max-height: none }
.pk-car-doc { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  border: 0; outline: 1px solid var(--pk-color-accent); outline-offset: 8px }
@media (max-width: 640px) { .pk-car-mat { padding: var(--pk-space-4) var(--pk-space-3) } }
.pk-car-nav { display: flex; align-items: center; justify-content: center;
  gap: var(--pk-space-2); margin-top: var(--pk-space-2) }
.pk-car-btn { width: 44px; height: 44px; padding: 0; background: none;
  border: 1px solid var(--pk-color-hairline); border-radius: 4px;
  font-family: var(--pk-font-text); font-size: 18px; line-height: 1;
  color: var(--pk-color-text); cursor: pointer;
  transition: border-color 150ms var(--pk-ease-out) }
.pk-car-btn[disabled] { color: var(--pk-color-hairline); cursor: default }
.pk-car-count { min-width: 48px; text-align: center; font-family: var(--pk-font-text);
  font-weight: 300; font-size: 13px; letter-spacing: 0.5px; color: var(--pk-color-text-muted) }
@media (hover: hover) and (pointer: fine) {
  .pk-car-btn:not([disabled]):hover { border-color: var(--pk-color-border) }
}
@media (prefers-reduced-motion: reduce) { .pk-car-track { scroll-behavior: auto } }

/* Pinned stage. Not an animation: the block stands still while the next one
   travels up over it, and an empty spacer decides for how long.
   Canon 9 allows this precisely because nothing moves on a timer. */
.pk-stage > .pk-pin { position: sticky; top: var(--pk-pin-top, 24px) }
.pk-stage > .pk-gap { height: var(--pk-dwell, 40vh) }
@media (max-width: 820px) {
  .pk-stage > .pk-pin { position: static }
  .pk-stage > .pk-gap { height: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .pk-stage > .pk-pin { position: static }
  .pk-stage > .pk-gap { height: 0 }
}
/* the home first screen with the portrait (CC-TASK-KATRINA-025) is taller
   than the screen, so it is not pinned; on a desktop it starts close under
   the header, so the whole portrait fits the first screen at 1440x900 */
.pk-stage--still > .pk-pin { position: static }
.pk-stage--still > .pk-gap { height: 0 }
@media (min-width: 1024px) {
  .pk-stage--still > .pk-pin > section { padding-top: var(--pk-space-3) }
}
/* the portrait closes the block, so the next section starts right under it,
   as it did under the photo that stood there before 025; on a phone the
   photo keeps the old one's place, the block's own padding above it */
.pk-stage--still > .pk-pin > section { padding-bottom: 0 !important }
@media (max-width: 700px) {
  .pk-stage--still .pk-hero-photo { margin-top: var(--pk-first-pad) }
}

/* ---------------------------------------------------------------------
   Text motion after capital.com (CC-TASK-KATRINA-006; measurements in
   Projects/KATRINA/katrina-references-capital-motion-2026-10-02.md).
   --------------------------------------------------------------------- */

/* 1. Roll-out heading, home page, ABRSM block. Second take after the
   owner's look on 02.10: a full-screen pinned stage left half the screen
   empty. Now the three facts travel WITH the photographs.
   Desktop (>= 1000px): the lines stand on the left, pinned under the header,
   while the photo and the video go by on the right, and turn from the light
   tone to the dark one, one per step (third take, see below). The steps are
   switched by three empty sensors in the photo column and an
   IntersectionObserver in pk-motion.js: no scroll handler.
   Phone and tablet: nothing is pinned. Each line slides in from the side as
   it reaches the screen, the rest of the text comes up under it, then the
   photographs.
   --pk-roll-duration is the ONE exception to the 500ms ceiling of canon 9,
   granted for the roll lines only (owner's request, 02.10.2026); since the
   third take only the phone slide uses it. */
:root { --pk-roll-duration: 900ms; --pk-roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pk-roll-rise: 56px; --pk-roll-side: 48px; --pk-roll-gap: 20px }
.pk-roll__line { font-family: var(--pk-font-display); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; color: var(--pk-color-text);
  max-width: var(--pk-measure); margin: 0 }
.pk-abrsm { display: grid; grid-template-columns: 1fr; gap: var(--pk-space-5) }
.pk-abrsm__left { order: 1 }
.pk-abrsm__rest { order: 2; display: flex; flex-direction: column; gap: 26px; align-items: flex-start }
.pk-abrsm__media { order: 3; position: relative; display: flex; flex-direction: column;
  gap: var(--pk-space-3) }
.pk-roll__mask { display: flex; flex-direction: column; gap: var(--pk-roll-gap) }
.pk-roll__sensor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none }
@media (min-width: 1000px) {
  .pk-abrsm { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: var(--pk-space-6);
    align-items: start }
  /* the cell stretches to the row, so the pinned lines stop at the end of
     the photographs instead of riding over the text below (a sticky box is
     bounded by its parent: without this cell it was the whole grid) */
  .pk-abrsm__left { grid-column: 1; grid-row: 1; align-self: stretch }
  .pk-abrsm__media { grid-column: 2; grid-row: 1 }
  .pk-abrsm__rest { grid-column: 1 / -1; grid-row: 2; display: grid;
    grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start }
  .pk-abrsm__rest > a { grid-column: 1 }
}
/* desktop: third take (owner, 02.10 evening: lines rising out of a mask and
   fading to grey were unreadable). Nothing moves now. The three lines stand
   in place, pinned beside the photographs, readable from the first moment in
   the light tone; as the photographs go by they turn dark one by one, the
   two-tone language of the home heading told as a sentence being written.
   Colour only, 500ms, inside canon 9. */
.pk-roll[data-mode="fill"] { position: sticky; top: calc(var(--pk-head-h) + 40px) }
.pk-roll[data-mode="fill"] .pk-roll__line { color: var(--pk-color-text-muted);
  transition: color 500ms var(--pk-ease-out) }
.pk-roll[data-mode="fill"] .pk-roll__line[data-state="on"] { color: var(--pk-color-text) }
/* phone: one line at a time slides in from the side, in the normal flow */
.pk-roll[data-mode="slide"] .pk-roll__line { opacity: 0; transform: translateX(calc(-1 * var(--pk-roll-side)));
  transition: transform var(--pk-roll-duration) var(--pk-roll-ease),
              opacity 350ms var(--pk-ease-out) }
.pk-roll[data-mode="slide"] .pk-roll__line[data-state="in"] { opacity: 1; transform: none }

/* 2. Two-tone phrase, about page: the heading of the biography (lead light,
   main dark, the way the home heading is built) stays on the left while the
   biography with its photograph goes by on the right. Desktop only. */
@media (min-width: 1000px) {
  .pk-bio { grid-template-columns: 5fr 7fr !important }
  .pk-bio__head { position: sticky; top: calc(var(--pk-head-h) + 40px) }
}

/* 3. Pinned column, lessons page, desktop only: the photograph of the hands
   stays on the left (5/12) while the text of the lessons goes by on the
   right, and leaves with its block. Below 1000px nothing changes: the
   wrapper is a plain block and the photo is the edge-to-edge strip of 005. */
@media (min-width: 1000px) {
  .pk-pair { display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px;
    align-items: start; background: var(--pk-color-surface);
    padding: var(--pk-air-default) max(var(--pk-space-4), calc((100% - var(--pk-page-max)) / 2)) }
  .pk-pair > figure { grid-column: 1; grid-row: 1 / span var(--pk-pair-rows, 1);
    position: sticky; top: calc(var(--pk-head-h) + 40px) }
  .pk-pair > figure img { aspect-ratio: 4 / 5 !important; height: auto !important;
    max-height: calc(100vh - var(--pk-head-h) - 80px) !important; object-position: 45% 50% !important }
  .pk-pair > section { grid-column: 2; background: transparent !important;
    padding: 0 !important }
  .pk-pair > section + section { margin-top: var(--pk-air-default) }
  .pk-pair > section > div { max-width: none !important }
}