/* fonts.css */
/* Kayz Island — webfonts, as the shipped finals render.
   Newsreader speaks (masthead, excerpts, standfirsts, titles at 800);
   Familjen Grotesk files (kickers, folios, running-head data). Google Fonts
   stand in for the Substack masthead serif — nearest match. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Familjen+Grotesk:wght@400..700&display=swap');

/* colors.css */
/* Kayz Island — colour. The manuscript's ink and thread. OKLCH throughout.
   LAW: purple is ink only. The thread accent is SILVER. Thread is NEVER running text,
   never a field. One richer cover moment per artefact is the ceiling. */
:root{
  /* field layer — dark grounds. #251131 is the Substack purple, verbatim. */
  --kz-field: #251131;        /* page ground; reads black at thumb speed */
  --kz-field-cover: #2e1540;   /* cover + closer only */
  --kz-field-deep: #1a0b24;    /* panels and scrims over photographs */

  /* ink layer — on field */
  --kz-ink: oklch(0.94 0.012 315);           /* speaking text */
  --kz-ink-2: oklch(0.82 0.025 315);         /* standfirsts, secondary voice */
  --kz-dim: oklch(0.68 0.03 315);            /* folios, running-head data, marginalia */
  --kz-hairline: oklch(0.94 0.012 315 / 0.18);
  --kz-hairline-strong: oklch(0.94 0.012 315 / 0.35);

  /* silver — THE accent (#c0c0c0, the Substack accent, verbatim), layered by job
     as gold is at The Renaissance. Silver carries ALL furniture: running-head data,
     kickers, folios, turn-lines, ticks. */
  --kz-silver: #c0c0c0;        /* bright silver — fills, ticks, accent on dark */
  --kz-silver-deep: #85858d;   /* working silver — rules, dim ticks. NEVER text on paper */
  --kz-silver-ink: #5d5d66;     /* silver as readable text on paper */
  --kz-thread: var(--kz-silver);             /* legacy alias — do not use in new work */

  /* paper layer — light artefacts (print, light-platform surfaces) */
  --kz-paper: oklch(0.965 0.008 315);
  --kz-paper-ink: oklch(0.24 0.03 315);
  --kz-paper-dim: oklch(0.47 0.028 315);
  --kz-paper-thread: var(--kz-silver-ink);   /* legacy alias */
  --kz-paper-hairline: oklch(0.24 0.03 315 / 0.2);

  /* semantic aliases */
  --surface-page: var(--kz-field);
  --surface-cover: var(--kz-field-cover);
  --surface-panel: var(--kz-field-deep);
  --text-body: var(--kz-ink);
  --text-standfirst: var(--kz-ink-2);
  --text-meta: var(--kz-dim);
  --accent-thread: var(--kz-silver);
}

/* typography.css */
/* Kayz Island — type. One family argues, one family files.
   Newsreader speaks (excerpts 400, titles 800, real italics); Familjen Grotesk
   files. Scale authored at 1080px social canvas. */
:root{
  --kz-font-serif: 'Newsreader', Georgia, serif;         /* speaks */
  --kz-font-grotesk: 'Familjen Grotesk', sans-serif;     /* files; never speaks */
  --kz-font-mono: var(--kz-font-grotesk);                /* alias — same functional layer */

  /* masthead + title */
  --kz-type-masthead: 48px;        --kz-ls-masthead: 0.3em;
  --kz-type-masthead-run: 26px;    --kz-ls-run: 0.24em;
  --kz-type-title: 126px;
  --kz-type-terminal: 176px;       /* the scalpel word: "Die full." */

  /* excerpts (Newsreader 400, italic Newsreader for emphasis, text-wrap pretty) */
  --kz-type-excerpt-xl: 100px;     /* ≤ 6 words */
  --kz-type-excerpt-l: 88px;       /* ≤ 10 words */
  --kz-type-excerpt-m: 76px;       /* ≤ 14 words */
  --kz-type-excerpt-s: 58px;       /* ≤ 26 words */
  --kz-type-excerpt-panel: 44px;   /* inside a photo side-panel */

  /* voice furniture */
  --kz-type-standfirst: 35px;      /* Newsreader italic */
  --kz-type-footnote: 42px;        /* italic secondary, ink-2 */

  /* functional layer (Spline Sans Mono) */
  --kz-type-kicker: 23px;          --kz-ls-kicker: 0.22em;
  --kz-type-folio: 20px;           --kz-ls-folio: 0.14em;
  --kz-type-data: 21px;            --kz-ls-data: 0.2em;
}

/* spacing.css */
/* Kayz Island — the page geometry (1080-wide canvas). */
:root{
  --kz-margin-x: 84px;      /* page side margins */
  --kz-margin-y: 76px;      /* page top/bottom margins */
  --kz-kicker-drop: 130px;  /* running head → excerpt drop on a typeset spread */
  --kz-stack: 36px;         /* heading → excerpt */
  --kz-plate-h: 560px;      /* inset plate height on a 1350 page */
  --kz-ticks-h: 14px;       /* the kente strip along the bottom edge */
}

/* effects.css */
/* Kayz Island — finish. The house grade lands any film-toned frame on-system. */
:root{
  --kz-grade-filter: saturate(0.84) contrast(0.97); /* @kind other */
  --kz-grade-wash: oklch(0.34 0.07 315);   /* soft-light @ 60% */
  --kz-grade-lift: oklch(0.2 0.035 315);   /* lighten @ 16% — plum shadow lift */
  --kz-grain-opacity: 0.16; /* @kind other */
  --kz-scrim-top: linear-gradient(oklch(0.13 0.025 315 / 0.7), transparent); /* @kind color */
  --kz-scrim-bottom: linear-gradient(transparent, oklch(0.13 0.025 315 / 0.86) 36%, oklch(0.13 0.025 315 / 0.97)); /* @kind color */
}

/* patterns.css */
/* Kayz Island — the page anatomy as shared classes.
   These are the same rules the React primitives render with.
   The page furniture of the finals: hairline under the running head, hairline above
   the folio. NO dash/rule stubs before kickers or captions — those are dead.
   Two decorative devices: the kente strip (.kz-ticks) — a woven purple/silver
   band along the bottom edge, in the house palette only — and the faint Adinkra
   doodle field (.kz-doodles) on plum text pages: Adinkrahene, Dwennimmen (ram's
   horns), Ananse Ntontan (spider's web), Akoma (heart), Dame Dame (checkers),
   Gye Nyame, Sankofa (bird), Fawohodie (wheel), Aya (fern), Nyame Dua (tree),
   and a nested diamond (Eban). */
.kz-page{position:relative;box-sizing:border-box;background:var(--kz-field);color:var(--kz-ink);font-family:var(--kz-font-serif);display:flex;flex-direction:column;padding:var(--kz-margin-y) var(--kz-margin-x);overflow:hidden}
.kz-page--cover{background:var(--kz-field-cover)}

.kz-runhead{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:22px;border-bottom:1px solid var(--kz-hairline)}
.kz-runhead-mast{font-family:var(--kz-font-serif);font-weight:700;font-size:var(--kz-type-masthead-run);letter-spacing:var(--kz-ls-run)}
.kz-runhead-data{font-family:var(--kz-font-mono);font-size:var(--kz-type-data);letter-spacing:var(--kz-ls-data);color:var(--kz-silver)}

.kz-kicker{font-family:var(--kz-font-mono);font-size:var(--kz-type-kicker);letter-spacing:var(--kz-ls-kicker);color:var(--kz-silver)}

.kz-excerpt{font-family:var(--kz-font-serif);font-weight:400;line-height:1.16;letter-spacing:-0.012em;text-wrap:pretty}
.kz-excerpt em,.kz-excerpt i{font-style:italic}
.kz-excerpt--xl{font-size:var(--kz-type-excerpt-xl);line-height:1.1}
.kz-excerpt--l{font-size:var(--kz-type-excerpt-l);line-height:1.14}
.kz-excerpt--m{font-size:var(--kz-type-excerpt-m);line-height:1.18}
.kz-excerpt--s{font-size:var(--kz-type-excerpt-s);line-height:1.3;letter-spacing:-0.008em}
.kz-excerpt--panel{font-size:var(--kz-type-excerpt-panel);line-height:1.34;letter-spacing:-0.005em}

.kz-standfirst{font-family:var(--kz-font-serif);font-style:italic;font-weight:400;font-size:var(--kz-type-standfirst);color:var(--kz-ink-2);text-wrap:pretty}
.kz-footnote{font-family:var(--kz-font-serif);font-style:italic;font-size:var(--kz-type-footnote);line-height:1.3;color:var(--kz-ink-2);text-wrap:pretty}

.kz-folio{display:flex;justify-content:space-between;align-items:baseline;padding-top:22px;border-top:1px solid var(--kz-hairline);font-family:var(--kz-font-mono);font-size:var(--kz-type-folio);letter-spacing:var(--kz-ls-folio);color:var(--kz-silver)}

.kz-turnline{font-family:var(--kz-font-mono);font-size:23px;letter-spacing:0.1em;color:var(--kz-silver)}

/* the house's smallest accent: every full stop in display type (titles, excerpts,
   terminal words, standfirsts, CTAs) is silver. Wrap it: <span class="kz-stop">.</span> */
.kz-stop{color:var(--kz-silver)}

/* the kente strip — a woven purple/silver band along the bottom edge of every
   finished page, quoting the cloth without leaving the house palette (field,
   field-cover, field-deep, silver, silver-deep only — never a third hue). */
.kz-ticks{position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--kz-field-deep) 0 18px,var(--kz-silver) 18px 23px,var(--kz-grade-wash) 23px 40px,var(--kz-silver-deep) 40px 46px,var(--kz-field-cover) 46px 61px,var(--kz-silver) 61px 64px,var(--kz-grade-wash) 64px 84px,var(--kz-silver-deep) 84px 90px)}

/* the Adinkra doodle field — the essential eleven, drawn faithfully: Adinkrahene,
   Dwennimmen, Ananse Ntontan (the spider's web — Kwaku Ananse, wisdom), Akoma,
   Dame Dame, Gye Nyame, Sankofa, Fawohodie, Aya, Nyame Dua, and a nested diamond
   (Eban). Faint (7%), silver only, on plum text pages. Do not add symbols; do
   not raise the opacity. */
.kz-doodles{position:absolute;inset:0;pointer-events:none;opacity:0.07;background-size:1000px 1000px;background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271000%27%20height%3D%271000%27%20fill%3D%27none%27%20stroke%3D%27silver%27%20stroke-width%3D%273%27%3E%3Cg%20transform%3D%27translate%28150%2C150%29%20rotate%2810%29%27%3E%3Ccircle%20r%3D%2742%27%2F%3E%3Ccircle%20r%3D%2726%27%2F%3E%3Ccircle%20r%3D%2711%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28560%2C150%29%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M-8%2C20%20C-8%2C4%20-22%2C-4%20-30%2C-16%20C-36%2C-25%20-28%2C-34%20-18%2C-30%20C-10%2C-27%20-8%2C-18%20-14%2C-14%27%2F%3E%3Cpath%20d%3D%27M8%2C20%20C8%2C4%2022%2C-4%2030%2C-16%20C36%2C-25%2028%2C-34%2018%2C-30%20C10%2C-27%208%2C-18%2014%2C-14%27%2F%3E%3Cpath%20d%3D%27M-8%2C20%20H8%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28870%2C180%29%20rotate%2815%29%27%3E%3Cpath%20d%3D%27M0%2C-34%20A17%2C17%200%201%200%2017%2C-17%20M0%2C34%20A17%2C17%200%201%200%20-17%2C17%20M-34%2C0%20A17%2C17%200%201%200%20-17%2C-17%20M34%2C0%20A17%2C17%200%201%200%2017%2C17%27%2F%3E%3Cpath%20d%3D%27M0%2C-42%20V42%20M-42%2C0%20H42%20M-30%2C-30%20L30%2C30%20M-30%2C30%20L30%2C-30%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20r%3D%274%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28160%2C440%29%20rotate%28-8%29%27%3E%3Cpath%20d%3D%27M0%2C42%20C-24%2C26%20-46%2C10%20-46%2C-14%20C-46%2C-36%20-24%2C-44%200%2C-24%20C24%2C-44%2046%2C-36%2046%2C-14%20C46%2C10%2024%2C26%200%2C42%20Z%27%2F%3E%3Ccircle%20cx%3D%27-24%27%20cy%3D%27-18%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%27-18%27%20r%3D%276%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28560%2C450%29%20rotate%28-15%29%27%3E%3Ccircle%20r%3D%2736%27%2F%3E%3Crect%20x%3D%27-10%27%20y%3D%27-10%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%27-30%27%20y%3D%27-10%27%20width%3D%2720%27%20height%3D%2720%27%2F%3E%3Crect%20x%3D%2710%27%20y%3D%27-10%27%20width%3D%2720%27%20height%3D%2720%27%2F%3E%3Crect%20x%3D%27-10%27%20y%3D%27-30%27%20width%3D%2720%27%20height%3D%2720%27%2F%3E%3Crect%20x%3D%27-10%27%20y%3D%2710%27%20width%3D%2720%27%20height%3D%2720%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28870%2C470%29%20rotate%288%29%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M-6%2C30%20C-6%2C10%20-30%2C6%20-34%2C-10%20C-37%2C-24%20-24%2C-34%20-12%2C-26%20C-4%2C-20%20-6%2C-10%20-14%2C-8%27%2F%3E%3Cpath%20d%3D%27M6%2C30%20C6%2C10%2030%2C6%2034%2C-10%20C37%2C-24%2024%2C-34%2012%2C-26%20C4%2C-20%206%2C-10%2014%2C-8%27%2F%3E%3Ccircle%20r%3D%273%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28170%2C700%29%20rotate%28-6%29%27%20stroke-linecap%3D%27round%27%3E%3Cellipse%20cx%3D%270%27%20cy%3D%2710%27%20rx%3D%2734%27%20ry%3D%2720%27%2F%3E%3Cpath%20d%3D%27M-20%2C-4%20C-30%2C-20%20-14%2C-38%204%2C-30%20C16%2C-25%2018%2C-14%208%2C-10%20C0%2C-7%20-4%2C-12%202%2C-16%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%27-14%27%20r%3D%274%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M-14%2C28%20L-20%2C40%20M10%2C30%20L14%2C42%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28560%2C720%29%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20r%3D%2736%27%2F%3E%3Ccircle%20r%3D%2710%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M0%2C-36%20V-46%20M0%2C36%20V46%20M-36%2C0%20H-46%20M36%2C0%20H46%20M-25%2C-25%20L-32%2C-32%20M25%2C-25%20L32%2C-32%20M-25%2C25%20L-32%2C32%20M25%2C25%20L32%2C32%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28870%2C730%29%20rotate%28-10%29%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M-25%2C-15%20C-21%2C-31%205%2C-39%2019%2C-29%20C31%2C-20%2025%2C-5%2011%2C-7%27%2F%3E%3Cpath%20d%3D%27M25%2C15%20C21%2C31%20-5%2C39%20-19%2C29%20C-31%2C20%20-25%2C5%20-11%2C7%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28320%2C900%29%20rotate%286%29%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M0%2C45%20V-45%20M0%2C-15%20C-12%2C-19%20-20%2C-29%20-20%2C-41%20M0%2C-15%20C12%2C-19%2020%2C-29%2020%2C-41%20M0%2C10%20C-14%2C6%20-24%2C-6%20-24%2C-20%20M0%2C10%20C14%2C6%2024%2C-6%2024%2C-20%20M0%2C-40%20C-8%2C-42%20-13%2C-49%20-13%2C-57%20M0%2C-40%20C8%2C-42%2013%2C-49%2013%2C-57%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28760%2C920%29%20rotate%2814%29%27%3E%3Cpath%20d%3D%27M0%2C-40%20L36%2C0%20L0%2C40%20L-36%2C0%20Z%27%2F%3E%3Cpath%20d%3D%27M0%2C-22%20L18%2C0%20L0%2C22%20L-18%2C0%20Z%27%2F%3E%3Ccircle%20r%3D%274%27%20fill%3D%27silver%27%20stroke%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)}

/* the house grade — wrap any photograph */
.kz-grade{position:relative;filter:var(--kz-grade-filter)}
.kz-grade::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--kz-grade-lift);opacity:0.16;mix-blend-mode:lighten;z-index:1}
.kz-grade::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--kz-grade-wash);mix-blend-mode:soft-light;opacity:0.6;z-index:1}
.kz-grade>img{display:block;width:100%;height:100%;object-fit:cover}

/* film grain — absolute overlay child of a positioned page */
.kz-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:var(--kz-grain-opacity);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.55%22%20numOctaves=%223%22/%3E%3C/filter%3E%3Crect%20width=%22240%22%20height=%22240%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E)}

/* paper mode — flip a surface to the light layer */
.kz-paper-mode{background:var(--kz-paper);color:var(--kz-paper-ink)}
.kz-paper-mode .kz-runhead-data,.kz-paper-mode .kz-kicker,.kz-paper-mode .kz-folio{color:var(--kz-paper-dim)}
.kz-paper-mode .kz-runhead{border-bottom-color:var(--kz-paper-hairline)}
.kz-paper-mode .kz-folio{border-top-color:var(--kz-paper-hairline)}
.kz-paper-mode .kz-turnline,.kz-paper-mode .kz-runhead-data,.kz-paper-mode .kz-kicker,.kz-paper-mode .kz-folio{color:var(--kz-silver-ink)}
.kz-paper-mode .kz-standfirst,.kz-paper-mode .kz-footnote{color:var(--kz-paper-ink)}

/* base.css */
/* Kayz Island — base resets. */
body{margin:0;background:var(--kz-field);color:var(--kz-ink);font-family:var(--kz-font-serif);font-optical-sizing:auto}
a{color:var(--kz-thread);text-decoration:underline;text-underline-offset:0.14em}
a:hover{color:oklch(0.86 0.06 305)}
::selection{background:oklch(0.74 0.08 305 / 0.35)}

/* site.css */
/* Kayz Island site overrides — the KAYZWORLD dark rebase + statics */
:root{
  --kz-field:#1A1220; --kz-field-cover:#241A2E; --kz-field-deep:#120B18;
  --kz-silver:#C7C7D2; --kz-accent:#CBB3DE; --kz-scrim:18,11,24;
}
body{margin:0;background:var(--kz-field-deep);color:var(--kz-ink);font-family:var(--kz-font-serif)}
h1,h2,h3{text-wrap:balance}
a{color:var(--kz-ink);text-decoration:none}
a,button{transition:color .18s cubic-bezier(0.25,1,0.5,1),border-color .18s cubic-bezier(0.25,1,0.5,1)}
a:hover{color:var(--kz-silver)}
:focus-visible{outline:2px solid var(--kz-accent);outline-offset:3px}
.nav-link,.foot-link{padding:8px 0;margin:-8px 0}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion: reduce){a,button{transition:none}}
::selection{background:var(--kz-silver);color:#120B18}
.nav-link{color:var(--kz-dim)} .nav-link:hover{color:var(--kz-silver)}
.nav-link.active{color:var(--kz-silver)}
.cta{font-family:var(--kz-font-grotesk);font-size:13px;letter-spacing:0.18em;color:var(--kz-accent);border-bottom:1px solid var(--kz-hairline-strong);padding-bottom:7px}
.cta:hover{color:var(--kz-ink);border-bottom-color:var(--kz-accent)}
.cta-dim{font-family:var(--kz-font-grotesk);font-size:13px;letter-spacing:0.18em;color:var(--kz-dim);border-bottom:1px solid var(--kz-hairline);padding-bottom:7px}
.cta-dim:hover{color:var(--kz-silver);border-bottom-color:var(--kz-hairline-strong)}
.foot-link{color:var(--kz-dim)} .foot-link:hover{color:var(--kz-silver)}
.hl-row{scrollbar-width:none} .hl-row::-webkit-scrollbar{display:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion: reduce){.hero-video{display:none}}
.kz-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;background:var(--kz-field);border:1px dashed var(--kz-hairline-strong);color:var(--kz-dim);font-family:var(--kz-font-grotesk);font-size:10.5px;letter-spacing:0.2em;text-align:center;padding:20px}
.kz-stanza{border-top:1px solid var(--kz-hairline-strong);padding-top:22px}
.kz-stanza .kz-kicker{font-size:10.5px;margin-bottom:14px}
.kz-stanza p{margin:0;font-family:var(--kz-font-serif);font-style:italic;line-height:1.42;text-wrap:pretty}
.kz-stanza .cta-dim{display:inline-block;margin-top:18px}

/* mobile-first nav */
.site-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--kz-font-grotesk);font-size:11.5px;letter-spacing:0.2em}
@media (max-width:720px){
  .site-nav{flex-wrap:nowrap;overflow-x:auto;gap:0 20px;width:100%;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;font-size:11px;letter-spacing:0.16em}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;flex:0 0 auto}
}

[data-estate="public"]{
  --kz-field:#1E0E11; --kz-field-cover:#2C1217; --kz-field-deep:#140809;
  --kz-ink:#F2E8E6; --kz-ink-2:oklch(0.82 0.03 40); --kz-dim:oklch(0.68 0.035 40);
  --kz-hairline:oklch(0.94 0.014 40 / 0.18); --kz-hairline-strong:oklch(0.94 0.014 40 / 0.35);
  --kz-silver:#D8C491; --kz-accent:#E3B957; --kz-seal:#C8303C; --kz-scrim:20,8,9;
}
[data-estate="private"]{ --kz-seal:#CBB3DE; }
.estate-mark[data-seal="public"]{--kz-seal:#C8303C}
.estate-mark[data-seal="private"]{--kz-seal:#CBB3DE}

.estate-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--kz-font-grotesk);
  font-size:10px;letter-spacing:0.2em;color:var(--kz-dim)}
.estate-mark::before{content:"";width:7px;height:7px;background:var(--kz-seal);
  border-radius:50%;flex:0 0 auto}

.doors{display:flex;flex-wrap:wrap;gap:10px;background:transparent;border:0}
.door{flex:1 1 clamp(230px,28%,360px);display:block;background:var(--kz-field-deep);border-radius:14px;padding:clamp(24px,3.4vw,38px);
  position:relative;transition:background .3s ease}
.door:hover{background:var(--kz-field-cover)}
.door h3{margin:16px 0 0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(22px,2.6vw,31px);line-height:1.08;letter-spacing:-0.015em}
.door p{margin:12px 0 0;font-family:var(--kz-font-serif);font-size:clamp(15px,1.7vw,17px);
  line-height:1.45;color:var(--kz-ink-2)}
.door .go{display:block;margin-top:22px;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.2em;color:var(--kz-silver)}
.door:hover .go{color:var(--kz-accent)}

.stack{margin:0;font-family:var(--kz-font-serif);font-weight:800;line-height:1.04;
  letter-spacing:-0.015em;font-size:clamp(26px,4.4vw,52px)}
.stack > span{display:block}

.crossing{position:relative;overflow:hidden;background:var(--kz-field-cover)}
.crossing::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kz-seal)}

.world-stage{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;flex-direction:column;background:var(--kz-field-deep)}
.world-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:35% 30%;opacity:0.42;transition:opacity 1.1s ease}
.world-stage[data-world-ready] .world-backdrop{opacity:0}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.1s ease;cursor:grab;touch-action:pan-y}
.world-stage[data-world-ready] #world{opacity:1}
.world-stage[data-world-lost] #world{opacity:0}
.world-stage[data-world-lost] .world-backdrop{opacity:0.42}
.world-stage[data-world-lost]{height:auto;min-height:0}
#world:active{cursor:grabbing}
.world-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,var(--kz-field-deep) 0%,rgba(var(--kz-scrim),0.42) 13%,rgba(var(--kz-scrim),0) 34%)}
.world-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.world-preview{position:absolute;top:0;left:0;width:min(268px,62vw);border-radius:18px;overflow:hidden;
  background:rgba(18,11,24,0.82);border:1px solid var(--kz-hairline-strong);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transform-origin:50% 100%;transition:opacity .22s ease;will-change:transform,opacity}
.world-preview.is-on{opacity:1}
.wp-shot{aspect-ratio:3/2;overflow:hidden;background:var(--kz-field)}
.wp-shot[hidden]{display:none}
.wp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wp-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px}
.wp-kicker{font-family:var(--kz-font-grotesk);font-size:9.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--kz-silver)}
.wp-title{font-family:var(--kz-font-serif);font-size:15px;line-height:1.3;color:var(--kz-ink);
  text-wrap:pretty}
@media (max-width:560px){.world-preview{width:min(230px,66vw)}}

.world-hud{position:relative;z-index:3;margin-top:auto;
  padding:0 clamp(20px,5vw,72px) clamp(28px,4.5vh,56px);pointer-events:none}
.world-hud .cta,.world-hud .cta-dim{pointer-events:auto}
.world-cue{position:absolute;z-index:3;left:clamp(20px,5vw,72px);top:50%;
  transform:translateY(-50%);font-family:var(--kz-font-grotesk);font-size:10px;
  letter-spacing:0.22em;color:var(--kz-dim);writing-mode:vertical-rl}
.world-xr{position:absolute;z-index:4;right:clamp(20px,5vw,72px);top:50%;
  transform:translateY(-50%);background:transparent;cursor:pointer;
  border:1px solid var(--kz-hairline-strong);padding:14px 22px;
  font-family:var(--kz-font-grotesk);font-size:11px;letter-spacing:0.22em;color:var(--kz-silver)}
.world-xr:hover{color:var(--kz-ink);border-color:var(--kz-accent)}
@media (max-width:720px){.world-cue{display:none}}
.world-mark{position:absolute;z-index:4;top:clamp(18px,3.2vw,34px);left:clamp(20px,5vw,72px);
  font-family:var(--kz-font-serif);font-weight:700;font-size:clamp(13px,1.4vw,15px);
  letter-spacing:0.28em;color:var(--kz-ink);opacity:0.85}
.world-mark:hover{opacity:1}

.gate{position:absolute;inset:0;z-index:8;overflow:hidden;
  transition:opacity 1.5s ease,visibility 1.5s ease}
.gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-veil{position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 52%,rgba(48,30,70,0.6) 0%,var(--kz-field-deep) 70%),var(--kz-field-deep);
  transition:opacity 1.1s ease}
.gate.is-opening .gate-veil{opacity:0}
.gate-ghost{position:absolute;left:50%;top:50%;width:min(430px,70vw);
  transform:translate(-50%,-46%);opacity:0.34;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,0.35) 80%,transparent 99%),
    linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,0.35) 80%,transparent 99%),
    linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect;
  transition:opacity 1.2s ease,transform 2.2s cubic-bezier(0.22,1,0.36,1)}
.gate.is-opening .gate-ghost{opacity:0;transform:translate(-50%,-62%) scale(1.14)}
canvas.gate-smoke{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gate-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(20px,3.4vh,34px);
  padding:clamp(28px,6vh,70px) clamp(20px,5vw,72px);text-align:center;
  transition:opacity .75s ease,transform 1.5s cubic-bezier(0.22,1,0.36,1)}
.gate.is-opening .gate-inner{opacity:0;transform:scale(1.06)}
.gate{--pull:0}
.gate-cue{appearance:none;background:none;border:0;padding:10px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--kz-font-grotesk);font-size:10.5px;letter-spacing:0.3em;
  color:var(--kz-silver);opacity:calc(0.85 - var(--pull) * 0.85);
  transition:color .3s ease}
.gate-cue:hover,.gate-cue:focus-visible{color:var(--kz-ink)}
.gate-cue:focus-visible{outline:1px solid var(--kz-hairline-strong);outline-offset:8px}
.gc-arrow{display:block;font-size:14px;animation:gc-rise 2.6s ease-in-out infinite}
@keyframes gc-rise{0%,100%{transform:translateY(3px);opacity:0.5}50%{transform:translateY(-5px);opacity:1}}
.gate-inner{transform:translateY(calc(var(--pull) * -34px))}
.gate.is-pulling .gate-inner{transition:none}
.gate.is-pulling{cursor:grabbing}
.gate{cursor:grab;touch-action:none}
@media (prefers-reduced-motion:reduce){
  .gc-arrow,.kw-lockup{animation:none}
  .gate-ghost,.gate-inner,.gate-veil,.gate{transition-duration:.3s}
}

.world-index{position:relative;padding:clamp(44px,7vh,86px) clamp(20px,5vw,72px) clamp(30px,4vh,50px)}
.world-index h1{margin:0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(26px,4.4vw,52px);line-height:1;letter-spacing:-0.02em}
.world-index > p{margin:14px 0 clamp(26px,4vh,40px);font-family:var(--kz-font-grotesk);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--kz-silver)}
.world-index .door h2{margin:0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(19px,2.2vw,26px);line-height:1.1;letter-spacing:-0.015em}
.world-index .door{padding:clamp(20px,2.6vw,30px)}
.world-index .door .go{margin-top:16px}
.door.is-crossing h2{color:var(--kz-accent)}

.kw-lockup{display:flex;align-items:baseline;justify-content:center;gap:clamp(3px,0.9vw,10px);
  font-family:var(--kz-font-serif);font-weight:700;color:var(--kz-ink);
  font-size:clamp(30px,8.2vw,88px);line-height:1;letter-spacing:0.06em;
  animation:kw-breathe 8s ease-in-out infinite}
.kw-lockup span{display:block}
.kw-meridian{height:0.72em;height:1cap;width:auto;display:block;align-self:baseline}
.kw-ring{height:0.72em;height:1cap;width:auto;display:block;align-self:baseline}
@keyframes kw-breathe{0%,100%{opacity:0.93;filter:drop-shadow(0 0 26px rgba(203,179,222,0.2))}
  50%{opacity:1;filter:drop-shadow(0 0 42px rgba(203,179,222,0.4))}}

/* book.css */
.book-band{position:relative;background:var(--kz-field-cover);
  padding:clamp(56px,9vh,110px) clamp(20px,5vw,72px) clamp(28px,4vh,44px);
  border-top:1px solid var(--kz-hairline)}
.book-grid{display:grid;gap:clamp(30px,5vw,60px);align-items:start;max-width:1180px;margin:0 auto}
@media(min-width:861px){.book-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}

.bk-stage{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:2/3;
  perspective:1700px;touch-action:pan-y;outline:none}
.bk-stage:focus-visible{box-shadow:0 0 0 2px var(--kz-accent);border-radius:4px}
.bk-page{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;
  transform-style:preserve-3d;transition:transform .72s cubic-bezier(.46,.03,.52,.96);
  border-radius:3px;overflow:hidden;background:var(--kz-field-deep);
  box-shadow:0 18px 44px rgba(0,0,0,.52),0 0 0 1px var(--kz-hairline)}
.bk-page img{display:block;width:100%;height:100%;object-fit:cover}
.bk-page.is-turned{transform:rotateY(-174deg)}
.bk-spine{position:absolute;inset:0 auto 0 0;width:9px;pointer-events:none;z-index:6;
  background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}

.bk-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.bk-nav{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 16px;border:1px solid var(--kz-hairline);border-radius:999px;background:transparent;
  color:var(--kz-ink);font-family:var(--kz-font-grotesk);font-size:12px;letter-spacing:0.16em;
  cursor:pointer;transition:border-color .25s ease,color .25s ease}
.bk-nav:hover:not(:disabled){border-color:var(--kz-accent);color:var(--kz-accent)}
.bk-nav:disabled{opacity:.34;cursor:default}
.bk-count{font-family:var(--kz-font-grotesk);font-size:11px;letter-spacing:0.18em;
  color:var(--kz-silver);min-width:104px;text-align:center}
.bk-hint{margin:14px 0 0;text-align:center;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--kz-silver)}

.book-copy{max-width:560px}
.book-copy h2{margin:18px 0 0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(30px,5vw,56px);line-height:1.04;letter-spacing:-0.015em}
.book-buy{margin-top:clamp(26px,4vh,38px)}

.bk-event-line{display:block;font-family:var(--kz-font-serif);font-weight:700;font-size:17px;line-height:1.3}
.bk-event-meta{display:block;margin-top:8px;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.16em;line-height:2;color:var(--kz-silver)}

.bk-get{display:block;max-width:560px;margin-top:clamp(22px,3.5vh,32px);
  padding:clamp(18px,2.6vw,26px);border:1px solid var(--kz-hairline);border-radius:4px;
  transition:border-color .25s ease}
.bk-get:hover{border-color:var(--kz-accent)}
.bk-get h3{margin:0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(18px,2.2vw,24px);line-height:1.15;letter-spacing:-0.012em}
.bk-get .go{display:inline-block;margin-top:12px;font-family:var(--kz-font-grotesk);
  font-size:11px;letter-spacing:0.2em;color:var(--kz-accent)}

.dl-wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:clamp(40px,8vh,90px) clamp(20px,5vw,72px);text-align:center}
.dl-words{max-width:620px;font-family:var(--kz-font-serif);font-weight:700;
  font-size:clamp(22px,3.6vw,38px);line-height:1.3;letter-spacing:-0.01em}
.dl-sign{margin-top:18px;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--kz-silver)}
.dl-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(32px,5vh,48px)}

@media(max-width:720px){
  .bk-stage{max-width:300px}
  .book-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .bk-page{transition:opacity .3s ease;transform:none}
  .bk-page.is-turned{transform:none;opacity:0}
  .bk-cta:hover{transform:none}
}

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

/* The night: the posters carry it */
.bk-event{display:block;margin-top:clamp(26px,4vh,36px);padding-top:20px;
  border-top:1px solid var(--kz-hairline);max-width:560px}
.bk-posters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.bk-posters img{display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--kz-hairline);transition:border-color .25s ease,transform .25s ease}
.bk-posters:hover img{border-color:var(--kz-accent)}

/* Buying the book is a door into it, so it is built like the door cards:
   the system's own 14px radius and hairline, not an imported pill. The
   serif carries the invitation, the grotesk carries the facts, and the
   price sits on the control so there is no hidden step. */
.bk-buy{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:460px;padding:18px 22px;border-radius:14px;
  border:1px solid var(--kz-accent);background:rgba(203,179,222,0.06);
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.bk-buy:hover{background:rgba(203,179,222,0.13);border-color:var(--kz-ink);transform:translateY(-1px)}
.bk-buy-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.bk-buy-label{font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(19px,2.4vw,23px);line-height:1.1;letter-spacing:-0.012em;color:var(--kz-ink)}
.bk-buy-meta{font-family:var(--kz-font-grotesk);font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--kz-silver)}
.bk-buy-price{flex:0 0 auto;font-family:var(--kz-font-grotesk);font-weight:600;
  font-size:17px;letter-spacing:0.04em;color:var(--kz-accent)}
.bk-buy:hover .bk-buy-price{color:var(--kz-ink)}

/* The night is the quieter of the two asks, so it speaks in the system's
   default action voice: a grotesk label over a hairline. */
.bk-ticket{grid-column:1 / -1;justify-self:start;margin-top:10px;
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--kz-font-grotesk);font-size:13px;letter-spacing:0.18em;
  color:var(--kz-accent);border-bottom:1px solid var(--kz-hairline-strong);
  padding-bottom:7px;transition:color .25s ease,border-color .25s ease}
.bk-posters:hover .bk-ticket{color:var(--kz-ink);border-bottom-color:var(--kz-accent)}

/* ---- The press: two books, on the homepage and on their own page ---- */
.books-band{position:relative;padding:clamp(44px,7vh,86px) clamp(20px,5vw,72px)}
.books-head{margin:18px 0 clamp(28px,4vh,40px);font-family:var(--kz-font-serif);
  font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1;letter-spacing:-0.02em}
.books-grid{display:grid;gap:clamp(26px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));max-width:860px}

.bk-card{display:flex;flex-direction:column;gap:14px}
.bk-card-cover{display:block;width:100%;max-width:272px;border-radius:6px;overflow:hidden;
  border:1px solid var(--kz-hairline);transition:border-color .3s ease,transform .3s ease}
.bk-card-cover:hover{border-color:var(--kz-accent);transform:translateY(-2px)}
.bk-card-cover img{display:block;width:100%;height:auto}
.bk-card-title{margin:0;font-family:var(--kz-font-serif);font-weight:800;
  font-size:clamp(20px,2.4vw,25px);line-height:1.12;letter-spacing:-0.012em}
.bk-card-tag{margin:0;font-family:var(--kz-font-serif);font-style:italic;
  font-size:clamp(15px,1.8vw,17px);line-height:1.45;color:var(--kz-ink-2)}
.bk-card-format{margin:0;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--kz-silver)}
.bk-card-author{margin:0;font-family:var(--kz-font-grotesk);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--kz-dim)}

/* The buy control, in the same grammar as the book band's: the system's
   14px radius and accent hairline over a wash, never an imported pill. */
.bk-get{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  align-self:flex-start;min-height:52px;padding:14px 24px;border-radius:14px;
  border:1px solid var(--kz-accent);background:rgba(203,179,222,0.06);
  font-family:var(--kz-font-serif);font-weight:800;font-size:18px;
  letter-spacing:-0.008em;color:var(--kz-ink);
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.bk-get:hover{background:rgba(203,179,222,0.14);border-color:var(--kz-ink);transform:translateY(-1px)}
.bk-get-sep{color:var(--kz-silver)}
.bk-get-price{font-family:var(--kz-font-grotesk);font-weight:600;font-size:16px;
  letter-spacing:0.04em;color:var(--kz-accent)}
.bk-get:hover .bk-get-price{color:var(--kz-ink)}

.books-all{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(24px,3.5vh,34px);
  font-family:var(--kz-font-grotesk);font-size:13px;letter-spacing:0.18em;
  color:var(--kz-accent);border-bottom:1px solid var(--kz-hairline-strong);padding-bottom:7px;
  transition:color .25s ease,border-color .25s ease}
.books-all:hover{color:var(--kz-ink);border-bottom-color:var(--kz-accent)}

/* A band per book on the books page */
.book-entry{padding:clamp(40px,6vh,72px) clamp(20px,5vw,72px);
  border-top:1px solid var(--kz-hairline)}
.book-entry-grid{display:grid;gap:clamp(26px,4vw,52px);align-items:start;max-width:1140px}
@media(min-width:861px){.book-entry-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr)}}
.book-entry-copy{max-width:560px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.book-entry-lines{margin:0;font-family:var(--kz-font-serif);
  font-size:clamp(17px,2.1vw,21px);line-height:1.45;color:var(--kz-ink-2)}
.bk-also{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;
  font-family:var(--kz-font-grotesk);font-size:12px;letter-spacing:0.18em;
  color:var(--kz-dim);border-bottom:1px solid var(--kz-hairline);padding-bottom:7px;
  transition:color .25s ease,border-color .25s ease}
.bk-also:hover{color:var(--kz-silver);border-bottom-color:var(--kz-hairline-strong)}

/* Fashion's rate list: a dt may carry more than one dd, which is valid where a
   nested div is not. The browser's default dd indent is not wanted here. */
.rate dd{margin:0}

/* The gallery shows a dozen frames, then sends you to the archive. */
.work-more { margin: clamp(26px, 4vh, 38px) 0 0; }
.work-more .cta { display: inline-block; }

/* A kicker that opens a section is now an h2, so it must not inherit
   heading margins or weight and change how the page has always looked. */
h2.kz-kicker { margin: 0; font-weight: inherit; }

/* Contact's question was an h3 under the h1, which broke the outline.
   It is an h2 now and keeps the size it has always had on the page. */
h2.kz-ask { font-size: 1.17em; margin: 1em 0; }
/* This one link now stands in for the hundred that used to repeat below
   it, so it gets the weight of a destination rather than a footnote. */
.work-more { margin: clamp(32px, 5vh, 48px) 0 0; text-align: center; }
.work-more .cta { display: inline-block; padding: 14px 26px; border: 1px solid var(--kz-hairline-strong); border-radius: 12px; }
.work-more .cta:hover { border-color: var(--kz-accent); }

/* map.css */
.map-stage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#191330}
.map-stage[data-map-failed]{height:auto;min-height:0}
.map-stage[data-map-failed] .map-cue{display:none}
.map-frame{position:absolute;inset:0;display:grid;place-items:center}
.mp-svg{width:100%;height:100%;display:block}

/* The chart */
.mp-sea{fill:#191330}
.mp-waves{fill:none;stroke:#9FB4D0;stroke-opacity:.13;stroke-width:1;stroke-linecap:round}
.mp-swell{fill:none;stroke:#8EA6C8;stroke-opacity:.08;stroke-width:1.4;stroke-linecap:round}
.mp-rake{fill:none;stroke:#8E80A6;stroke-opacity:.55;stroke-width:1;stroke-linecap:round}
.mp-rhumb{fill:none;stroke:#C9BCDE;stroke-opacity:.05;stroke-width:.8}
.mp-trail{fill:none;stroke:var(--kz-accent);stroke-opacity:.42;stroke-width:2;
  stroke-dasharray:2 11;stroke-linecap:round}

/* Water drawn as contours round every coast */
.mp-water{fill:none;stroke:#8FA8C6;stroke-opacity:.16;stroke-width:.9}
.mp-shelf{fill:#24304E;opacity:.5}
.mp-lagoon{fill:#3C5E82;opacity:.42}
.mp-cast{fill:#0C0A17;opacity:.4}

/* Land */
.mp-sand{fill:#CBBFDC}
.mp-sandgrain{fill:none;stroke:#6E6183;stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}
.mp-coast{fill:none;stroke:#F2ECFA;stroke-opacity:.92;stroke-width:1.9;stroke-linejoin:round}
.mp-jungle{fill:#3C4E42}


/* Relief: strokes running downhill, weighted away from the light */
.mp-hach-dark{fill:none;stroke:#101A14;stroke-opacity:.62;stroke-width:1.5;stroke-linecap:round}
.mp-hach-mid{fill:none;stroke:#1E2C22;stroke-opacity:.46;stroke-width:1.2;stroke-linecap:round}
.mp-hach-lit{fill:none;stroke:#C6D8C1;stroke-opacity:.26;stroke-width:.9;stroke-linecap:round}

.mp-canopyshadow{fill:#141D18;opacity:.5}
.mp-crown{fill:#4E6950;stroke:#C2D7BD;stroke-opacity:.5;stroke-width:.8;stroke-linejoin:round}
.mp-frond{fill:none;stroke:#1C2A1F;stroke-opacity:.5;stroke-width:.8;stroke-linecap:round}

/* Compass and the places built on each island */
.mp-rose-ring{fill:none;stroke:var(--kz-silver);stroke-opacity:.4;stroke-width:1}
.mp-rose-t{fill:none;stroke:var(--kz-silver);stroke-opacity:.5;stroke-width:1.1;stroke-linecap:round}
.mp-rose-star{fill:var(--kz-accent);opacity:.75;stroke:#EDE6F2;stroke-opacity:.5;stroke-width:.8}
.mp-rose-n{fill:var(--kz-silver);font-family:var(--kz-font-grotesk);font-size:15px;letter-spacing:.2em;opacity:.75}

.mp-river{fill:none;stroke:#9FD2E2;stroke-opacity:.72;stroke-width:3;stroke-linecap:round}
.mp-stone{fill:#D8CDE8;stroke:#1A1428;stroke-opacity:.5;stroke-width:.8}
.mp-sring{fill:none;stroke:#DCCFEE;stroke-opacity:.3;stroke-width:1}
.mp-strata{fill:none;stroke:#CFC3E0;stroke-opacity:.45;stroke-width:1.2;stroke-linecap:round}
.mp-obelisk{fill:#E8DEF4;stroke:#1A1428;stroke-opacity:.45;stroke-width:.9}
.mp-tier{fill:none;stroke:#DCD0EC;stroke-opacity:.6;stroke-width:1.4}
.mp-podium{fill:var(--kz-accent)}
.mp-carry{fill:none;stroke:var(--kz-accent);stroke-opacity:.38;stroke-width:1.3;stroke-linecap:round}
.mp-runway{fill:#DCCFEE;opacity:.8;stroke:#1A1428;stroke-opacity:.4;stroke-width:.9}
.mp-spire{fill:#CFC0E4;stroke:#1A1428;stroke-opacity:.4;stroke-width:.8}
.mp-jetty{fill:none;stroke:#D6C9E8;stroke-opacity:.85;stroke-width:4;stroke-linecap:round}
.mp-harbour{fill:none;stroke:#D6C9E8;stroke-opacity:.55;stroke-width:3;stroke-linecap:round}
.mp-tower{fill:#EDE6F2;stroke:#1A1428;stroke-opacity:.45;stroke-width:.9}
.mp-lamp{fill:#FFF6D8}
.mp-signal{fill:none;stroke:#FFF0C4;stroke-opacity:.3;stroke-width:1.1}
.mp-islet{fill:#CBBFDC;stroke:#F2ECFA;stroke-opacity:.7;stroke-width:1.4}
.mp-ray{fill:none;stroke:var(--kz-accent);stroke-opacity:.45;stroke-width:1.4;stroke-linecap:round}
.mp-halo{fill:none;stroke:var(--kz-accent);stroke-opacity:.22;stroke-width:1.1}
.mp-meridian line{stroke:#EDE6F2;stroke-linecap:round}
.mp-meridian circle{stroke:#EDE6F2;fill:none}
.mp-meridian .mp-orb{fill:var(--kz-accent);stroke:none}

.mp-label{fill:var(--kz-ink);font-family:var(--kz-font-serif);font-weight:700;
  font-size:21px;letter-spacing:.16em;paint-order:stroke;
  stroke:#191330;stroke-width:5px;stroke-linejoin:round}
.is-crossing .mp-label{fill:var(--kz-accent)}

.mp-place{cursor:pointer;outline:none}
.mp-place .mp-sand,.mp-place .mp-coast,.mp-place .mp-label,.mp-place .mp-lagoon{
  transition:fill .35s ease,stroke .35s ease,opacity .35s ease}
.mp-place:hover .mp-sand,.mp-place:focus-visible .mp-sand{fill:#DED3EC}
.mp-place:hover .mp-label,.mp-place:focus-visible .mp-label{fill:var(--kz-accent)}
.mp-place:hover .mp-lagoon,.mp-place:focus-visible .mp-lagoon{opacity:.62}
.mp-place:focus-visible .mp-coast{stroke:var(--kz-accent);stroke-width:3}

.map-cue{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vh,30px);
  font-family:var(--kz-font-grotesk);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kz-silver);opacity:.7;pointer-events:none;z-index:4}
.map-preview{position:absolute;z-index:5;pointer-events:none;opacity:0;
  transform:translate(-50%,-112%) scale(.96);transform-origin:50% 100%;
  transition:opacity .28s ease,transform .28s ease;width:min(280px,72vw);
  padding:14px 16px;border-radius:5px;background:rgba(18,12,26,.94);
  border:1px solid var(--kz-hairline);box-shadow:0 20px 48px rgba(0,0,0,.55)}
.map-preview.is-on{opacity:1;transform:translate(-50%,-120%) scale(1)}
.map-preview .mv-kicker{display:block;font-family:var(--kz-font-grotesk);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--kz-silver)}
.map-preview .mv-title{display:block;margin-top:7px;font-family:var(--kz-font-serif);
  font-weight:700;font-size:15px;line-height:1.3;color:var(--kz-ink)}

@media (max-aspect-ratio: 95/100){
  /* Portrait: the trail is taller than the screen and the page scrolls it.
     max-height must be released explicitly, or an inherited cap clips it. */
  .map-stage{height:auto;min-height:0;max-height:none;overflow:visible}
  .map-frame{position:static}
  .mp-svg{height:auto}
  .map-cue{position:static;padding:18px clamp(16px,5vw,32px) 0}
  .mp-label{font-size:34px;stroke-width:8px}
  .mp-trail{stroke-width:3.4}
}
@media (prefers-reduced-motion: reduce){ .mp-place *,.map-preview{transition:none} }

/* Volume: a cast shadow, a shaded face, a lit face. */
.mp-cshadow{fill:#0D1210;opacity:.42}
.mp-stone-lit{fill:#E4DAF0;stroke:#241C33;stroke-opacity:.5;stroke-width:.8;stroke-linejoin:round}
.mp-stone-dark{fill:#9A8DB4;stroke:#241C33;stroke-opacity:.5;stroke-width:.8;stroke-linejoin:round}
.mp-edge{fill:none;stroke:#2A2140;stroke-opacity:.5;stroke-width:.8}
.mp-rock{fill:none;stroke:#CBB9DE;stroke-opacity:.3;stroke-width:.85;stroke-linecap:round}

/* The river, banked and running */
.mp-riverbed{fill:none;stroke:#141A30;stroke-opacity:.92;stroke-width:12;stroke-linecap:round}
.mp-river{fill:none;stroke:#2F4A70;stroke-opacity:.95;stroke-width:8;stroke-linecap:round}
.mp-rivershine{fill:none;stroke:#7E9CC4;stroke-opacity:.42;stroke-width:2.2;stroke-linecap:round}
.mp-current{fill:none;stroke:#A8C2DE;stroke-opacity:.34;stroke-width:1.2;
  stroke-dasharray:6 15;stroke-linecap:round}

/* The amphitheatre */
.mp-amph-wall{fill:#B6A8CC;stroke:#241C33;stroke-opacity:.55;stroke-width:1}
.mp-amph-top{fill:#D6CBE6;stroke:#241C33;stroke-opacity:.45;stroke-width:.9}
.mp-amph-arch{fill:#3A3050;stroke:#1C1529;stroke-opacity:.5;stroke-width:.6}
.mp-amph-step{fill:#9389AE;fill-rule:evenodd;stroke:#2A2140;stroke-opacity:.45;stroke-width:.7}
.mp-amph-step.is-alt{fill:#7E7399}
.mp-amph-stair{fill:none;stroke:#3A3050;stroke-opacity:.7;stroke-width:1.1}
.mp-amph-arena{fill:#8F8AA6;stroke:#241C33;stroke-opacity:.4;stroke-width:.9}

/* The runway, raised */
.mp-runway-side{fill:#8E81A8;stroke:#241C33;stroke-opacity:.5;stroke-width:.8}
.mp-post{fill:none;stroke:#CFC3E0;stroke-opacity:.7;stroke-width:1.2;stroke-linecap:round}
.mp-lampline{fill:#FFF4D4;stroke:none}

/* The jetty on its piles */
.mp-jetty-shadow{fill:none;stroke:#0D1210;stroke-opacity:.45;stroke-width:4;stroke-linecap:round}
.mp-pile{fill:none;stroke:#6E6183;stroke-opacity:.8;stroke-width:1.4;stroke-linecap:round}
.mp-band{fill:none;stroke:#241C33;stroke-opacity:.55;stroke-width:1.1}
.mp-gallery{fill:#CFC3E0;stroke:#241C33;stroke-opacity:.5;stroke-width:.8}

/* Writing: plateaux stacked like pages */
.mp-terrace-riser{fill:#27362B;stroke:#121A14;stroke-opacity:.5;stroke-width:.8}
.mp-terrace-top{fill:#445B48;stroke:#C2D7BD;stroke-opacity:.35;stroke-width:.9}
.mp-stair{fill:none;stroke:#D6CBE6;stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}

/* KAYZWORLD: the hub, its causeways and the plinth the mark stands on */
.mp-causeway{fill:none;stroke:#C2B6D8;stroke-opacity:.45;stroke-width:3;stroke-linecap:round}
.mp-islet-shadow{fill:#0D1210;opacity:.45}
.mp-islet-crown{fill:#445B48;stroke:#C2D7BD;stroke-opacity:.35;stroke-width:.8}
.mp-step-riser{fill:#8B7FA6;fill-rule:evenodd;stroke:#241C33;stroke-opacity:.5;stroke-width:.8}
.mp-step-top{fill:#CFC3E0;stroke:#241C33;stroke-opacity:.45;stroke-width:.8}

/* The press: volumes stacked on a plinth, and the ring above them */
.mp-vol-top{fill:#D8CCE8;stroke:#241C33;stroke-opacity:.5;stroke-width:.8}
.mp-vol-side{fill:#8B7FA6;stroke:#241C33;stroke-opacity:.5;stroke-width:.8}
.mp-vol-edge{fill:#B3A6C9;stroke:#241C33;stroke-opacity:.45;stroke-width:.8}
.mp-press-ring{fill:none;stroke:var(--kz-accent);stroke-width:2.6}
.mp-press-stem{stroke:var(--kz-accent);stroke-opacity:.75;stroke-width:2}

/* mobile.css */
/* Phone. Nothing cut off, nothing under 44px to tap, nothing under 12px to read. */
@media (max-width: 720px) {

  /* The nav wraps instead of hiding its tail in a scroller. */
  .site-nav{flex-wrap:wrap;overflow-x:visible;gap:2px 18px;width:100%;
    padding-bottom:4px;font-size:12px;letter-spacing:0.14em}
  .site-nav a{white-space:nowrap;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}

  /* Anything tappable is at least 44px tall. */
  header a,.nav-link,.cta,.cta-dim,.go,.foot-link,.door,.bk-cta,.bk-buy,.bk-ticket,.bk-nav,
  a[href^="mailto:"],a[href^="tel:"]{min-height:44px;display:inline-flex;
    align-items:center;flex-wrap:wrap}
  .door{display:block;padding-top:18px;padding-bottom:18px}
  button,input[type="submit"]{min-height:44px}
  input,select,textarea{min-height:44px;font-size:16px}   /* 16px stops iOS zooming on focus */

  /* Nothing drops below 12px. */
  body,p,li,span,div,a,td,th,label,figcaption{font-size:max(12px,1em)}
  .kz-kicker,.nav-link,.go,.foot-link,.bk-fine,.bk-hint,.map-cue{font-size:12px !important;letter-spacing:0.14em}
  [style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"],
  [style*="font-size:10px"],[style*="font-size:9.5px"]{font-size:12px !important}
  /* small labels that come from the stylesheet rather than inline */
  .peek,.who,.kz-placeholder,.kz-stanza .kz-kicker,.wp-kicker,.mv-kicker,
  .door .go,.bk-event-meta,.dl-sign,.bk-count,.bk-posters-go,
  i,em,small,figcaption{font-size:12px !important}

  /* inline links inside prose still need a tappable box */
  p a,li a,span a,div > a:not([class]){min-height:44px;display:inline-flex;
    align-items:center;padding:2px 0}

  /* The rate table becomes one card per format, every price labelled. */
  .rate-table{min-width:0 !important;max-width:100% !important}
  .rate-table,.rate-table *{overflow-x:visible !important}
  .rate-head{display:none !important}
  .rate-row{grid-template-columns:1fr !important;gap:4px 0 !important;
    padding:16px 0 !important;align-items:stretch !important}
  .rate-row > *{text-align:left !important}
  .rate-row > *:first-child{font-size:17px !important;margin-bottom:6px}
  .rate-row > *:nth-child(n+2){display:flex;justify-content:space-between;
    align-items:baseline;gap:16px;font-size:13px !important;
    padding:5px 0;border-top:1px solid var(--kz-hairline)}
  .rate-row > *:nth-child(2)::before{content:"Corporate"}
  .rate-row > *:nth-child(3)::before{content:"Big charity"}
  .rate-row > *:nth-child(4)::before{content:"Education, public, small orgs"}
  .rate-row > *:nth-child(n+2)::before{font-family:var(--kz-font-grotesk);
    font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--kz-silver);flex:1 1 auto}

  /* Media never pushes the page sideways. */
  img,video,iframe,table,pre{max-width:100%;height:auto}
  iframe{width:100%}

  /* The book band stacks, posters side by side. */
  .book-grid{grid-template-columns:1fr !important}
  .bk-stage{max-width:300px}
  .bk-posters{gap:10px}
  .bk-buy{max-width:none;padding:16px 18px}
  .bk-buy-label{font-size:20px}
}

/* Arrows are glyphs, not emoji, on every platform. */
.door .go,.go,.nav-link,.cta,.cta-dim{font-variant-emoji:text}

/* Nothing anywhere may scroll the page sideways. */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width: 720px) {

  /* The flip controls were flex-nowrap with a 104px counter, so their
     min-content was 309px and they pushed the whole preview past a 320px
     screen. They shrink now, and wrap as a last resort. */
  .bk-controls{flex-wrap:wrap;gap:8px}
  .bk-count{min-width:0}
  .bk-nav{padding:0 12px}

  /* Labels the 12px floor had missed. */
  .det,.bk-card-format,.bk-card-author,.world-index > p{font-size:12px !important}

  /* HOME is the shortest nav word and was the one link under 44px wide. */
  .nav-link{min-width:44px;justify-content:center}
}

/* A tablet in portrait is a touch device at 768px, which is above the
   720px phone breakpoint, so its links kept desktop hit areas. Size the
   targets by what is pointing at them rather than by viewport width.
   Same declarations the phone query already uses, so the behaviour is
   proven; .door is left out because it has its own block rule there. */
@media (pointer: coarse) and (max-width: 1024px) {
  header a,.nav-link,.cta,.cta-dim,.go,.foot-link,.bk-cta,.bk-buy,.bk-ticket,
  .bk-nav,.bk-also,.bk-get,a[href^="mailto:"],a[href^="tel:"]{
    min-height:44px;display:inline-flex;align-items:center;flex-wrap:wrap}
}