/* ==========================================================================
   DEEPMORROW — one stylesheet for the whole site.
   Concept: THE SEAM EMITS. One cold ground. One light event per page.
   On a house page the light event is the seam. Inside a world it is that
   world's own light (the limb at dawn) and the seam is structure only.
   Tokens: _TOKENS.md. Five colours, three faces, nothing else.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */
@font-face{
  font-family:"Young Serif";
  src:url("/static/fonts/young-serif.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Crimson Pro";
  src:url("/static/fonts/crimson-pro.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Crimson Pro";
  src:url("/static/fonts/crimson-pro-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("/static/fonts/dm-mono.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Знак № в DM Mono ОТСУТСТВУЕТ — проверено по таблице символов самого шрифта.
   До этой правки его рисовал шрифт операционной системы: на macOS и Windows
   незаметно, а там, где подходящего шрифта нет, читатель видел пустой
   прямоугольник — ровно на нумерации, на которой держится весь замысел
   («№ начинается заново в каждой вселенной»). Отдавать это на волю чужой
   системы нельзя, поэтому № берётся из НАШЕГО файла: та же семья, но диапазон
   ограничен одним символом, и его отдаёт Crimson Pro, где № есть.
   Ниже — единственное место, где гарнитуры смешиваются, и это осознанно:
   лучше засечный № рядом с моноширинными цифрами, чем квадрат вместо него. */
@font-face{
  font-family:"DM Mono";
  src:url("/static/fonts/crimson-pro.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+2116;
}

/* --------------------------------------------------------------- tokens --- */
:root{
  /* five named colours, nothing else */
  --void:#090D11;      /* ground where no light reaches */
  --hull:#131A1F;      /* ground where it does — cold, blue in the shadow */
  --frost:#DCE6E9;     /* the human voice */
  --signal:#93A8B1;    /* the machine voice: data, labels, state */
  --sodium:#D6A06A;    /* named, released — warmth only as emission */

  --rule:rgba(220,230,233,.11);
  --rule-strong:rgba(220,230,233,.20);
  --rule-control:rgba(220,230,233,.46);   /* controls only — must clear 3:1 */

  /* three roles */
  --human:"Young Serif",Georgia,serif;          /* what a person wrote */
  --prose:"Crimson Pro",Georgia,serif;          /* what a person said */
  --machine:"DM Mono",ui-monospace,monospace;   /* what the machine reports */

  --pad:64px;
  --maxw:1400px;
  --gut:64px;
  --h1:clamp(46px,6.4vw,98px);
  --seam-x:calc(58.333% - 5.33px);
  --seam-top:calc(42px + var(--h1) * .98 + 7px);

  color-scheme:dark;
}

/* --------------------------------------------------------------- ground --- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  min-height:100%;
  background-color:var(--void);
  background-image:
    radial-gradient(122% 46% at 64% -6%, rgba(41,55,64,.62) 0%, rgba(41,55,64,0) 66%),
    linear-gradient(180deg,#0C1216 0%, var(--hull) 26%, #101820 52%, #0C1216 76%, var(--void) 100%);
  /* A viewport-anchored ground is forbidden here: it would make every contrast
     ratio a function of window height and scroll position. Keeping the ground a
     property of the document lets contrast be measured once. */
  background-attachment:scroll;background-repeat:no-repeat;background-size:100% 100%;
}
body{
  margin:0;min-height:100%;
  color:var(--frost);
  font-family:var(--prose);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grain — one layer, over everything, readable through. σ ≈ 2.1/255 at .5 */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fadein 280ms 40ms ease-out both;
}
@keyframes fadein{from{opacity:0}to{opacity:.5}}
@keyframes rise{from{opacity:0}to{opacity:1}}
@keyframes drawseam{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ------------------------------------------------------- utility voices --- */
/* screen-reader-only text (external-link destinations, etc.) */
.sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* the visible leaving-the-house mark on every external link */
/* Знак ухода теперь SVG, а не символ: см. комментарий в base.html.
   vertical-align подобран так, чтобы он стоял на высоте прописных, а не съезжал
   на базовую линию, как это делает inline-svg по умолчанию. */
.ext{width:.62em;height:.62em;margin-left:.42em;vertical-align:.02em;overflow:visible}

/* skip link — first thing in <body> */
.skip{
  position:absolute;left:-9999px;top:0;z-index:80;
  font-family:var(--machine);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--void);background:var(--sodium);padding:12px 18px;text-decoration:none;
}
.skip:focus{left:16px;top:16px}
/* an explicit ring: the UA default is not guaranteed on a sodium plate */
.skip:focus-visible{outline:2px solid var(--void);outline-offset:3px}

/* ============================== the shell ================================ */
.masthead{position:relative;z-index:3}
.masthead .wrap{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:28px;padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.wordmark{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-family:var(--human);font-size:19px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--frost);text-decoration:none;line-height:1;padding:9px 0;
}
.wordmark .gl{flex:0 0 15px;margin-right:11px;overflow:visible}
.wordmark:focus-visible{outline:2px solid var(--sodium);outline-offset:6px}

.nav{display:flex;gap:32px}
.nav a{
  font-family:var(--machine);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);text-decoration:none;padding:8px 0 6px;
  border-bottom:1px solid transparent;transition:color 180ms ease,border-color 180ms ease;
}
.nav a:hover{color:var(--frost);border-bottom-color:var(--rule-strong)}
.nav a[aria-current="page"]{color:var(--frost);border-bottom-color:var(--rule-strong)}
.nav a:focus-visible{outline:2px solid var(--sodium);outline-offset:5px;color:var(--frost)}

.foot .wrap{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-top:22px;padding-bottom:40px;border-top:1px solid var(--rule);
  font-family:var(--machine);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--signal);
}

/* ====================== the signature: the seam ========================== */
.seamed{position:relative}
.gutterbox{
  position:absolute;top:0;bottom:0;pointer-events:none;
  left:max(var(--pad), calc((100% - var(--maxw))/2 + var(--pad)));
  right:max(var(--pad), calc((100% - var(--maxw))/2 + var(--pad)));
}
.seam{top:var(--seam-top);z-index:1}
/* the line: 1px, cold where the machine speaks, sodium where it hands the
   page over to the index */
.seam .ln{
  position:absolute;top:0;bottom:0;left:calc(var(--seam-x) - .5px);width:1px;display:block;
  background:linear-gradient(180deg,
    rgba(147,168,177,0) 0%,
    rgba(147,168,177,.16) 7%,
    rgba(147,168,177,.70) 26%,
    rgba(178,174,164,.64) 56%,
    rgba(214,160,106,.82) 86%,
    rgba(214,160,106,.94) 100%);
  transform-origin:top center;
  transform:scaleY(1);
  animation:drawseam 300ms 30ms cubic-bezier(.24,.72,.3,1) backwards;
}
/* perpendicular falloff — light leaves the line sideways, never through it,
   and always fades before its own box edge */
.seam .fc{
  position:absolute;top:0;bottom:0;left:calc(var(--seam-x) - 132px);width:264px;display:block;
  background:linear-gradient(90deg, rgba(84,118,138,0) 0%, rgba(84,118,138,.28) 50%, rgba(84,118,138,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 62%,transparent 100%);
  animation:rise 280ms 150ms ease-out both;
}
.seam .fw{
  position:absolute;bottom:0;height:44%;left:calc(var(--seam-x) - 68px);width:136px;display:block;
  background:linear-gradient(90deg, rgba(202,142,82,0) 0%, rgba(202,142,82,.34) 50%, rgba(202,142,82,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 44%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 44%,#000 74%,transparent 100%);
  animation:rise 280ms 210ms ease-out both;
}

/* the flare: an 86px band containing no glyphs. Its bottom rule is where
   light ends and the index begins — no emitted light below it, ever. */
.flare{position:relative;height:86px;z-index:1;pointer-events:none}
.flare .in{top:0;bottom:0}
.flare .tail{
  position:absolute;top:0;left:calc(var(--seam-x) - .5px);width:1px;height:38px;
  background:linear-gradient(180deg,rgba(214,160,106,.94),rgba(214,160,106,0));
}
.flare .pool{
  position:absolute;top:-66px;left:calc(var(--seam-x) - 170px);width:340px;height:196px;
  background:radial-gradient(closest-side, rgba(226,172,118,.32) 0%, rgba(210,156,108,.14) 22%, rgba(158,152,150,.045) 54%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%);
  animation:rise 300ms 250ms ease-out both;
}
.flare .ends{
  bottom:0;top:auto;height:1px;
  background:linear-gradient(90deg,rgba(220,230,233,.04),rgba(220,230,233,.18) 58%,rgba(220,230,233,.04));
}

/* ================================= hero ================================== */
.hero .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:42px;position:relative;z-index:2;
}
.thesis{display:contents;margin:0}
.said-1,.said-2{
  margin:0;font-family:var(--human);font-weight:400;font-size:var(--h1);
  line-height:.98;letter-spacing:-.021em;color:var(--frost);
}
.said-1{grid-column:1 / -1;grid-row:1;display:block}
/* the one swing of the page: the human half leans toward the seam */
.said-2{grid-column:1;grid-row:2;display:block;text-align:right;padding-right:12px;align-self:baseline}
.restored{grid-column:2;grid-row:2;display:block;align-self:baseline}
.word{
  display:block;margin:0;font-family:var(--machine);font-size:clamp(28px,3.4vw,52px);
  line-height:.98;letter-spacing:-.012em;color:var(--frost);white-space:nowrap;
}
.word .br{color:var(--signal)}
/* Точка — тот же знак, что в марке [.], логотип отсюда и происходит, поэтому
   цвет обязан совпадать. Скобки при этом остаются тише букв сознательно: в
   марке они держат 15 пикселей и потому frost, здесь — 52, и frost на этом
   размере перетянул бы слово на себя. Один смысл, разный вес. */
.word .pt{color:var(--sodium)}

.machine{grid-column:2;grid-row:3;padding-top:22px;display:flex;flex-direction:column;min-width:0}
.gloss{
  margin:0;font-family:var(--machine);font-size:11.5px;line-height:1.9;
  letter-spacing:.05em;color:var(--signal);border-top:1px solid var(--rule);padding-top:13px;
}
.gloss span{display:block}

.lede{grid-column:1;grid-row:3;padding-top:24px;padding-right:30px}
.lede .say{margin:0;font-size:20.5px;line-height:1.62;color:var(--frost);max-width:40ch}
.lede .say em{font-style:italic}
.manifest{
  margin:24px 0 0;font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--signal);line-height:1.9;
}
.manifest .w{color:var(--frost)}
.manifest .a{color:var(--sodium)}
.manifest .sep{color:#8A9EA6;padding:0 7px}

/* ====================== the letter — the seam crosses it ================= */
.subscribe .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);align-items:end;
  padding-top:32px;padding-bottom:34px;position:relative;z-index:2;
}
.invite{grid-column:1;padding-right:30px;text-align:right}
.invite .q{
  display:block;margin:0 0 11px;font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--signal);font-weight:400;
}
.invite p{margin:0;font-size:19px;line-height:1.5;color:var(--frost);max-width:27ch;margin-left:auto}
.letterbox{grid-column:2;min-width:0}
.signup{display:block}
/* Успешно отправленную форму убирает СКРИПТ (`f.hidden=true`), и строкой выше
   это скрытие МОЛЧА ОТМЕНЯЛОСЬ: авторское `display:block` перебивает `[hidden]`
   из таблицы браузера при любом весе — правила разных источников сравниваются
   не по весу. Поэтому «Check your inbox» печаталось под всё ещё открытой формой
   с прежним адресом в поле, и второе нажатие отправляло его заново. Скрытие
   объявлено здесь же, рядом с тем правилом, которое его ломало; касается всех
   трёх форм дома. Замечено на форме кода, где цена вдвое выше: там за успехом
   по второму нажатию идёт отказ, потому что код уже израсходован. */
.signup[hidden]{display:none}
.fieldrow{display:flex;align-items:flex-end;gap:20px}
.flabel{
  display:block;font-family:var(--machine);font-size:11px;letter-spacing:.19em;
  /* костяной, а не сигнальный: надпись стоит на тёплом спаде шва, и на нём
     сигнальный даёт 4.23 — ниже порога. Замерено, а не предположено. */
  text-transform:uppercase;color:var(--frost);margin:0 0 9px;
}
.signup input{
  flex:1 1 auto;min-width:0;
  background:rgba(220,230,233,.03);
  border:0;border-bottom:1px solid var(--rule-control);
  color:var(--frost);font-family:var(--machine);font-size:15px;letter-spacing:.04em;
  padding:13px 10px;min-height:46px;border-radius:0;
  transition:border-color 180ms ease,background-color 180ms ease;
}
.signup input:hover{border-bottom-color:var(--frost);background:rgba(220,230,233,.07)}
.signup input:focus{outline:none;border-bottom-color:var(--sodium);background:rgba(220,230,233,.08)}
.signup input:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.signup input[aria-invalid="true"]{border-bottom-color:var(--sodium)}
.signup button{
  flex:0 0 auto;background:transparent;border:0;cursor:pointer;color:var(--sodium);
  font-family:var(--machine);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 2px;min-height:46px;border-bottom:1px solid rgba(214,160,106,.78);border-radius:0;
  transition:color 180ms ease,border-color 180ms ease;
}
.signup button:hover{color:var(--frost);border-bottom-color:var(--frost)}
.signup button:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.lstat{
  margin:12px 0 0;font-family:var(--machine);font-size:12px;letter-spacing:.05em;
  line-height:1.7;color:var(--signal);min-height:0;
}
.lstat.ok{color:var(--sodium)}
.lstat.bad{color:var(--frost)}

/* ============ the sky: a world's one light event (world pages) =========== */
.sky{position:relative;overflow:hidden;min-height:clamp(430px,44vw,600px)}
.sky .stars,.sky .limb{position:absolute;left:0;right:0;pointer-events:none}
.sky .stars{top:0;bottom:0;
  /* поле — текстура, не должно оказаться под глифом: слева от колонки текста его нет */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 38%,#000 52%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 38%,#000 52%,#000 100%)}
.sky .stars svg{display:block;width:100%;height:100%}
.sky .limb{bottom:0;height:100%}
.sky .limb svg{display:block;width:100%;height:100%}
.skycontent{
  position:relative;z-index:2;padding-top:54px;
  /* The rim sits at ~73% of the section height and its atmosphere reaches far
     above it, so the text must be pushed clear of it. The prototype's flat
     200px only works while min-height (600px) exceeds the content — between
     390 and ~1400 the content wins and the caption landed ON the lit rim
     (measured 2.7:1 at 390, 4.3:1 at 900). Inverse-viewport padding keeps
     every text run >= 4.99:1 from 390 to 1600 and is a no-op at 1600, where
     min-height still decides the height. */
  padding-bottom:clamp(190px, calc(430px - 13.5vw), 380px);
}
.uni{
  margin:0 0 18px;font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal);
}
.wtitle{margin:0;font-weight:400}
.wtitle .nm{
  display:block;font-family:var(--human);font-size:clamp(48px,7vw,104px);line-height:.96;
  letter-spacing:-.022em;color:var(--frost);
}
.wsay{margin:34px 0 0;max-width:47ch;font-size:21px;line-height:1.6;color:var(--frost)}
.wcap{
  margin:26px 0 0;font-family:var(--machine);font-size:11.5px;letter-spacing:.05em;
  line-height:1.9;color:var(--signal);border-top:1px solid var(--rule);padding-top:12px;max-width:47ch;
}
/* everything under the lit rim is the planet's dark side coming back to ground */
.underlight{position:relative;background:linear-gradient(180deg,rgba(5,8,11,1) 0px,rgba(5,8,11,0) 320px)}

/* ================================ index ================================== */
.index .wrap{padding-top:14px;padding-bottom:60px}
.page-world .index .wrap{padding-top:44px;padding-bottom:56px}
.sect{
  margin:0 0 12px;font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
.page-world .sect{margin-bottom:6px}
.subnote{
  margin:0 0 20px;font-family:var(--machine);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);
}
.grouphead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 6px}
.world{
  margin:0;font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal);font-weight:400;
}
.world .n{color:var(--frost)}
.world .sep{color:#8A9EA6;padding:0 10px}
.allrel{
  font-family:var(--machine);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sodium);text-decoration:none;padding:6px 0;white-space:nowrap;
  border-bottom:1px solid rgba(214,160,106,.34);transition:color 180ms ease,border-color 180ms ease;
}
.allrel:hover{color:var(--frost);border-bottom-color:var(--frost)}
.allrel:focus-visible{outline:2px solid var(--sodium);outline-offset:5px}

.releaselist{list-style:none;margin:0;padding:0}
.releaselist li{border-top:1px solid var(--rule)}
.releaselist li:last-child{border-bottom:1px solid var(--rule)}
.releaselist+.grouphead{margin-top:38px}
.entry{
  display:grid;grid-template-columns:88px 46px 340px max-content minmax(0,1fr);
  align-items:center;gap:0 20px;padding:24px 6px 24px 0;
  text-decoration:none;color:inherit;
  transition:transform 200ms cubic-bezier(.24,.72,.3,1);
}
a.entry:hover{transform:translateX(7px)}
a.entry:hover .t{color:var(--sodium)}
a.entry:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.entry .no{font-family:var(--machine);font-size:12px;letter-spacing:.1em;color:var(--sodium)}
.entry.queued .no{color:var(--signal)}
.entry .mk{display:flex;gap:8px;color:var(--signal)}
.entry .mk svg{display:block;width:17px;height:17px}
.entry .t{
  font-family:var(--human);font-size:30px;line-height:1.12;color:var(--frost);
  letter-spacing:-.012em;transition:color 200ms ease;
}
/* three signals of state, not one tone: № · face · solid-or-dashed mark */
.entry.queued .t{font-family:var(--machine);font-size:22px;letter-spacing:-.01em;color:var(--signal)}
.entry.queued .mk svg{stroke-dasharray:2 2}
.entry .meta{
  font-family:var(--machine);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);
}
/* decorative separator — aria-hidden in the markup */
.dot{color:#8A9EA6;padding:0 8px}
.entry .st{
  font-family:var(--machine);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:right;color:var(--sodium);
}
.entry.queued .st{color:var(--signal)}

/* ========================== where to find it ============================= */
.where .wrap{padding-top:8px;padding-bottom:52px}
.where .sect{margin-bottom:20px}
.chans{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gut);
}
.chans li{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chan{
  display:flex;align-items:baseline;gap:18px;padding:22px 6px 22px 0;
  text-decoration:none;color:inherit;transition:transform 200ms cubic-bezier(.24,.72,.3,1);
}
.chan:hover{transform:translateX(7px)}
.chan:hover .cn{color:var(--sodium)}
.chan:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.chan .mk{color:var(--signal);align-self:center}
.chan .mk svg{display:block;width:17px;height:17px}
.chan .cn{font-family:var(--human);font-size:23px;color:var(--frost);transition:color 200ms ease}
.chan .cg{
  margin-left:auto;font-family:var(--machine);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sodium);white-space:nowrap;
}

/* ============ what this is: the seam returns, as structure only ========== */
.about{position:relative}
.about .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:44px;padding-bottom:64px;position:relative;
}
/* structure, not light: flat cold rule, no falloff, no pool */
.seamrule{
  position:absolute;top:44px;bottom:64px;
  left:calc(var(--pad) + (100% - var(--pad)*2) * .58333 - 5.33px);width:1px;
  background:linear-gradient(180deg,rgba(147,168,177,0),rgba(147,168,177,.42) 18%,rgba(147,168,177,.42) 82%,rgba(147,168,177,0));
}
.about h2{
  margin:0 0 18px;font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
.about .col-h p{margin:0 0 16px;font-size:19px;line-height:1.62;color:var(--frost);max-width:44ch}
.about .col-h p:last-child{margin-bottom:0}
.about .col-m{padding-left:6px}
.about dl{margin:0;font-family:var(--machine);font-size:11.5px;line-height:1.9;letter-spacing:.05em}
.about dt{color:var(--frost);letter-spacing:.19em;text-transform:uppercase;margin-top:18px}
.about dt:first-of-type{margin-top:0}
.about dd{margin:2px 0 0;color:var(--signal)}
.about .creed{
  margin:26px 0 0;font-family:var(--machine);font-size:10.5px;letter-spacing:.155em;
  text-transform:uppercase;color:var(--signal);line-height:1.9;
}
.about .creed .w{color:var(--frost)}
.about .creed .a{color:var(--sodium)}
.about .creed .sep{color:#8A9EA6;padding:0 7px}

/* ============================== 1120 ===================================== */
@media (max-width:1120px){
  :root{--pad:44px;--gut:44px}
  .entry{grid-template-columns:76px 42px 300px max-content minmax(0,1fr)}
  .entry .t{font-size:26px}
}

/* ============================== 940 ====================================== */
@media (max-width:940px){
  .entry{grid-template-columns:76px 42px minmax(0,1fr) max-content}
  .entry .st{grid-column:1 / -1;text-align:left;padding-top:6px}
}

/* ==================== 760: the seam turns ================================ */
@media (max-width:760px){
  :root{--pad:24px;--gut:0px;--h1:clamp(34px,9.6vw,46px)}
  body{font-size:16px}

  .masthead .wrap{flex-direction:column;align-items:stretch;gap:12px;padding-top:22px;padding-bottom:10px}
  .wordmark{align-self:flex-start}
  .nav{flex-wrap:wrap;gap:2px 22px}
  .nav a{font-size:11px;line-height:1.3;letter-spacing:.12em;padding:16px 0 14px}

  .seam{display:none}
  .hero .wrap,.subscribe .wrap{grid-template-columns:1fr;padding-top:34px}
  .said-1,.said-2,.restored,.machine,.lede,.invite,.letterbox{grid-column:1;padding-right:0}
  .said-1{grid-row:auto}
  .said-2{grid-row:auto;text-align:left}
  .restored{grid-row:auto;margin-top:28px;padding-top:27px;position:relative}
  .machine{grid-row:auto;padding-top:16px}
  .lede{grid-row:auto;padding-top:30px}

  /* the seam, turned: a full-width rule between the human word and the
     machine one; the light still leaves it sideways — two soft radial
     falloffs, never a linear band (a band has hard vertical edges) */
  .restored::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,rgba(147,168,177,.10) 0%,rgba(147,168,177,.62) 26%,rgba(190,170,140,.6) 62%,rgba(214,160,106,.88) 96%,rgba(214,160,106,.2) 100%);
  }
  .restored::after{
    content:"";position:absolute;top:-31px;left:-21px;right:-21px;height:64px;pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(132,158,172,.22) 0%, rgba(132,158,172,0) 100%) 0% 50%/72% 100% no-repeat,
      radial-gradient(closest-side, rgba(206,152,102,.26) 0%, rgba(206,152,102,0) 100%) 100% 50%/72% 100% no-repeat;
    animation:rise 280ms 150ms ease-out both;
  }
  .word{font-size:clamp(28px,8.8vw,36px)}
  .gloss{margin-top:16px;font-size:11px;letter-spacing:.03em}
  .lede .say{font-size:18.5px;max-width:none}
  .manifest{font-size:11px;letter-spacing:.15em;margin-top:22px;line-height:2.05}
  .manifest .sep{display:none}
  .manifest span{display:block}

  .subscribe .wrap{padding-top:36px;padding-bottom:30px}
  .invite{text-align:left}
  .invite p{margin-left:0;max-width:none;font-size:18px}
  .letterbox{margin-top:22px}
  .fieldrow{gap:14px}
  /* exactly 16px: below it iOS Safari zooms on focus and never returns */
  .signup input{font-size:16px;padding:14px 10px;min-height:48px}
  .signup button{padding:15px 2px;min-height:48px}

  /* the flare, turned: a short horizontal last stroke, and its pool */
  .flare{height:104px}
  .flare .tail{
    left:0;top:0;width:56%;height:1px;
    background:linear-gradient(90deg,rgba(214,160,106,.9) 0%,rgba(214,160,106,.5) 62%,rgba(214,160,106,0) 100%);
  }
  .flare .pool{
    left:-1%;width:80%;top:-16px;height:104px;
    background:radial-gradient(closest-side, rgba(226,172,118,.24) 0%, rgba(206,152,106,.10) 38%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 96%);
    mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 96%);
  }

  .sky{min-height:0}
  .skycontent{padding-top:38px}
  .wsay{font-size:18.5px;margin-top:26px}

  .index .wrap{padding-top:24px;padding-bottom:40px}
  .page-world .index .wrap{padding-top:36px;padding-bottom:36px}
  .sect{margin-bottom:18px}
  .page-world .sect{margin-bottom:6px}
  .grouphead{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .world{font-size:10.5px;letter-spacing:.19em;line-height:1.7}
  .world .sep{padding:0 6px}
  .releaselist+.grouphead{margin-top:30px}
  .entry{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"no mark" "title title" "meta state";
    align-items:baseline;padding:19px 0 20px;row-gap:9px;gap:9px 14px;
  }
  .entry .no{grid-area:no}
  .entry .mk{grid-area:mark;justify-content:flex-end;align-self:center;gap:10px}
  .entry .t{grid-area:title;font-size:23px}
  .entry.queued .t{font-size:19px}
  .entry .meta{grid-area:meta;font-size:11px;letter-spacing:.1em}
  .entry .st{grid-area:state;font-size:11px;letter-spacing:.1em;text-align:right;white-space:nowrap;padding-top:0}
  a.entry:hover{transform:none}

  .chans{grid-template-columns:1fr}
  .chans li+li{border-top:0}
  .chan:hover{transform:none}

  .about .wrap{grid-template-columns:1fr;padding-top:34px;padding-bottom:40px}
  .seamrule{display:none}
  .about .col-m{padding-left:0;margin-top:32px;border-top:1px solid var(--rule);padding-top:26px}

  .foot .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:34px;font-size:10.5px}
}

/* ========================= reduced motion =============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .grain,.seam .ln,.seam .fc,.seam .fw,.flare .pool,.restored::after,.sky .limb,.sky .stars{animation:none}
}

/* ==========================================================================
   СТРАНИЦА ЭПИЗОДА (body.page-release) — перенос утверждённого прототипа
   ЕДИНЫЙ. Всё, что уже есть в доме, ПЕРЕИСПОЛЬЗУЕТСЯ и не повторяется здесь:
   гарнитуры и @font-face, пять цветов, земля, зерно, .wrap, .sr, .dot, .skip,
   .ext, шапка, подвал, марка, метки форм, подача № через unicode-range,
   .chans/.chan, .sect, .subnote, .allrel. Ниже — только то, чего в доме нет.

   Замысел: место (вертикаль) — правый край колонки чтения, единственная
   вертикаль страницы, и ровно один раз она становится тёплой и разорванной, на
   BULKHEAD; время (горизонталь) — затухающие вправо цезуры между частями и
   моноширинная ведомость SERVICE. Одно световое событие, пять цветов, три
   гарнитуры. Каждое правило ниже начинается с .page-release: главная и
   страница вселенной обязаны остаться в точности такими, как были.
   ========================================================================== */

.page-release{
  /* мера чтения: алфавит Crimson Pro на 21 px = 251 px, колонка = 2,2 алфавита
     = 64 знака. Мера задана ОТ КЕГЛЯ, поэтому держится до той ширины, где
     вьюпорт становится уже меры. */
  --read:21px;
  --measure:calc(var(--read) * 26.3);
  --lead:1.70;
  /* обрезанная мера канала: 38–41 знак. Быструю реплику нельзя принять за слова
     машины, потому что её строка кончается раньше. */
  --chan:300px;
  /* зазор между текстом и переборкой: столько, чтобы ни один глиф не встал на
     свет, и не больше — текст прижат к металлу */
  --wall:44px;
  /* якорь не меньше высоты закреплённой полосы (замер: 36,8 px) */
  --anchor:44px;
  --h1r:clamp(40px,5.6vw,82px);
}
/* якорь не должен приезжать под закреплённую полосу. Полоса есть только на
   странице эпизода, поэтому и отступ прокрутки только там. Если :has не
   поддержан, смещение всё равно даёт scroll-margin-top на самих целях. */
html:has(body.page-release){scroll-padding-top:44px}

/* стрелки — рисованные, не глифы: ни одной стрелки текстом (как и знак ухода,
   см. .ext и комментарий в base.html) */
.page-release .arw{width:.66em;height:.66em;margin-left:.5em;vertical-align:0;overflow:visible}

/* ------------------------------- голова ---------------------------------- */
/* Выше первой фразы текста нет ни одной внешней ссылки: пришедший из поиска
   пришёл за тем единственным, чего нет на площадках. */
.page-release .hd .wrap{position:relative;padding-top:44px;padding-bottom:0}
.page-release .hdcol{max-width:var(--measure)}
/* ось: правый край колонки чтения. Здесь она холодная и структурная — линия не
   есть световое событие. Дальше по странице она невидима, и ровно один раз, на
   BULKHEAD, становится тёплой и разорванной. */
.page-release .axis{
  position:absolute;top:54px;bottom:6px;width:1px;
  left:calc(var(--pad) + var(--measure));
  background:linear-gradient(180deg,rgba(147,168,177,0),rgba(147,168,177,.42) 16%,
    rgba(147,168,177,.42) 84%,rgba(147,168,177,0));
}
.page-release .eyebrow{
  margin:0 0 20px;font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal);
}
.page-release .eyebrow .no{color:var(--sodium);letter-spacing:.14em}
.page-release .rtitle{
  margin:0;font-family:var(--human);font-weight:400;font-size:var(--h1r);
  line-height:.99;letter-spacing:-.021em;color:var(--frost);
}
.page-release .rsay{margin:26px 0 0;font-size:21px;line-height:1.58;color:var(--frost)}
/* целое названо один раз. Знаменателя у частей нет: доля «N / 7» есть шкала
   остатка и врёт о позиции, потому что части не равны. */
.page-release .nota{
  margin:22px 0 0;font-family:var(--machine);font-size:11.5px;line-height:1.85;
  letter-spacing:.05em;color:var(--signal);
}
.page-release .nota span{display:block}
.page-release .nota .w{color:var(--frost)}
.page-release .down{
  display:inline-block;margin:22px 0 0;font-family:var(--machine);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sodium);text-decoration:none;
  padding:6px 0;border-bottom:1px solid rgba(214,160,106,.34);
  transition:color 180ms ease,border-color 180ms ease;
}
.page-release .down:hover{color:var(--frost);border-bottom-color:var(--frost)}
.page-release .down:focus-visible{outline:2px solid var(--sodium);outline-offset:5px}

/* закреплённая полоса живёт только на ≤760 */
.page-release .recbar{display:none}

/* -------------------------------- текст ---------------------------------- */
.page-release .record .wrap{padding-top:26px;padding-bottom:0}
.page-release .body{max-width:var(--measure);margin:0}
.page-release .body>p{margin:0 0 1.28em;font-size:var(--read);line-height:var(--lead);color:var(--frost)}

/* голова части: моношный порядковый номер, свой id, ссылка на себя */
.page-release .part{margin:0 0 30px;font-weight:400;line-height:1}
.page-release .part.cz{margin:66px 0 30px;position:relative}
/* цезура: горизонталь, затухающая вправо. Форма времени. */
.page-release .part.cz::before{
  content:"";position:absolute;top:-34px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(220,230,233,.22),rgba(220,230,233,.03));
}
.page-release .part .pl{
  display:inline-block;min-width:26px;font-family:var(--machine);font-size:11.5px;
  letter-spacing:.26em;color:var(--signal);text-decoration:none;padding:9px 12px 9px 0;
}
.page-release .part .pl:hover{color:var(--frost)}
.page-release .part .pl:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}
.page-release .part,.page-release .rec{scroll-margin-top:var(--anchor)}

/* запись: подпись — ссылка на своё место. Носитель даёт data-src, и НИ ОДНО
   правило ниже не обязательно: источник, которого мы не знаем, доезжает до
   разметки и печатается нейтрально — подпись сигнальная, абзацы прозой. */
.page-release .rec{position:relative;margin:44px 0}
.page-release .rec>figcaption{
  font-family:var(--machine);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;line-height:1.3;margin:0 0 12px;color:var(--signal);
}
.page-release .rec>figcaption a{
  color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none;
  display:inline-block;padding:5px 6px 5px 0;
}
.page-release .rec>figcaption a:hover{color:var(--frost)}
.page-release .rec>figcaption a:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}
.page-release .rec blockquote{margin:0}
.page-release .rec blockquote p{margin:0;color:var(--frost);font-size:var(--read);line-height:var(--lead)}

/* PERSONAL — прибор, которого не должно было быть. Курсив Crimson и ничего
   больше: носителя нет вовсе, потому что между читателем и человеком не стоит
   ни канал, ни форма. Курсив на странице занят этим и больше ничем. */
.page-release .rec[data-src="PERSONAL"]{margin-left:-30px}
.page-release .rec[data-src="PERSONAL"]>figcaption{color:var(--sodium)}
.page-release .rec[data-src="PERSONAL"] blockquote p{
  font-family:var(--prose);font-style:italic;
  font-size:calc(var(--read) + 2.5px);line-height:1.44;margin-bottom:.34em;
}
.page-release .rec[data-src="PERSONAL"] blockquote p:last-child{margin-bottom:0}

/* INTERCOM — человек, но его несёт канал, и канал режет речь на посылки:
   короткий холодный штрих у КАЖДОЙ реплики. Кегль на шаг ниже прозы,
   интерлиньяж 1.42, мера обрезана до 38–41 знака. Всё прямое. */
.page-release .rec[data-src="INTERCOM"] blockquote{max-width:var(--chan)}
.page-release .rec[data-src="INTERCOM"] blockquote p{
  position:relative;padding-left:22px;font-size:18.5px;line-height:1.42;margin-bottom:6px;
}
.page-release .rec[data-src="INTERCOM"] blockquote p:last-child{margin-bottom:0}
.page-release .rec[data-src="INTERCOM"] blockquote p::before{
  content:"";position:absolute;left:0;top:.30em;width:1px;height:.72em;
  background:rgba(147,168,177,.62);
}

/* SERVICE — разграфка-ведомость: строка на строку, моноширинная, сигнальная.
   Три дословно одинаковых записи обязаны быть видны как три, а в
   пропорциональном наборе они сливаются. На 390 не мельче 14 px. */
.page-release .rec[data-src="SERVICE"]>figcaption{
  margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--rule-strong);
}
.page-release .rec[data-src="SERVICE"] blockquote{border-bottom:1px solid var(--rule)}
.page-release .rec[data-src="SERVICE"] blockquote p{
  font-family:var(--machine);font-size:14.5px;line-height:1.72;letter-spacing:.01em;
  color:var(--signal);padding:10px 2px 11px;border-top:1px solid var(--rule);
}
.page-release .rec[data-src="SERVICE"] blockquote p:first-child{border-top:0}

/* BULKHEAD — голос из канала, дошедший до пломбы без канала. Регистр выведен из
   INTERCOM, а не из PERSONAL: тот же кегль, тот же интерлиньяж, та же обрезанная
   мера, прямой.
   ЕДИНСТВЕННОЕ СВЕТОВОЕ СОБЫТИЕ СТРАНИЦЫ: правый край колонки — та самая
   вертикаль — становится тёплым и разорванным. Один штрих на один абзац,
   границы штриха равны боксу абзаца; разрывы стены есть интервалы, в которые он
   не отвечает. Процентов высоты блока здесь нет: на 390 вторая реплика
   переносится, и любой процент разошёлся бы с ней.
   18 < 22: зазор после третьего вызова СТРОГО меньше зазоров между вызовами.
   Снизу блок не закрыт ничем: молчание не подводят итогом. */
.page-release .rec[data-src="BULKHEAD"]{margin:72px 0 18px;padding-right:var(--wall)}
.page-release .rec[data-src="BULKHEAD"]>figcaption{
  color:var(--sodium);letter-spacing:.26em;text-align:right;
}
.page-release .rec[data-src="BULKHEAD"] blockquote{
  max-width:var(--chan);margin-left:auto;text-align:right;
}
/* вертикальный паддинг абзаца — это высота штриха: стена должна быть стеной, а
   не тремя засечками */
.page-release .rec[data-src="BULKHEAD"] blockquote p{
  position:relative;font-size:18.5px;line-height:1.42;padding:10px 0;margin-bottom:22px;
}
.page-release .rec[data-src="BULKHEAD"] blockquote p:last-child{margin-bottom:0}
/* штрих: ровно бокс своего абзаца, на всех ширинах */
.page-release .rec[data-src="BULKHEAD"] blockquote p::after{
  content:"";position:absolute;right:calc(-1 * var(--wall));top:0;bottom:0;width:1px;
  background:rgba(214,160,106,.92);
}
/* свет уходит от штриха боком и гаснет внутри своей коробки со всех сторон; он
   существует только там, где есть штрих, поэтому источник виден всегда, а в
   разрывах стены темно. Ни один глиф на свете не стоит. */
.page-release .rec[data-src="BULKHEAD"] blockquote p::before{
  content:"";position:absolute;right:calc(-1 * var(--wall) - 36px);top:0;bottom:0;
  width:72px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(202,142,82,.26) 0%,rgba(202,142,82,.09) 46%,
    rgba(202,142,82,0) 100%);
  animation:rise 300ms 210ms ease-out both;
}

/* терминальная линия: свет кончился, чтение кончилось. Не цезура — цезура
   затухает вправо, эта симметрична и ничего не продолжает. */
.page-release .ends{
  height:1px;margin:56px 0 0;
  background:linear-gradient(90deg,rgba(220,230,233,.04),rgba(220,230,233,.18) 58%,
    rgba(220,230,233,.04));
}

/* ------------------- ключ и метаданные (после текста) -------------------- */
/* Ключ стоит здесь, а не до текста: до текста он стоил бы больше тысячи
   пикселей до первой фразы. Наверху от него осталась одна строка нотации. */
.page-release .cast .wrap{
  padding-top:38px;padding-bottom:0;
  display:grid;grid-template-columns:var(--measure) minmax(0,1fr);column-gap:44px;
}
.page-release .cast .kcol{grid-column:1;min-width:0}
.page-release .cast .fcol{grid-column:2;min-width:0;max-width:400px}
.page-release .sect{margin-bottom:18px}
.page-release .key{margin:0}
.page-release .key .r{
  position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 16px;
  padding:14px 0;border-top:1px solid var(--rule);
}
.page-release .key .r:last-child{border-bottom:1px solid var(--rule)}
.page-release .key dt{
  font-family:var(--machine);font-size:10.5px;letter-spacing:.22em;line-height:2.1;
  color:var(--signal);
}
.page-release .key dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--frost)}
.page-release .key .r-narr dt{letter-spacing:.03em;font-size:11.5px}
.page-release .key .r-pers dt,.page-release .key .r-bulk dt{color:var(--sodium)}
/* образцы носителя — те же, что в тексте, но НЕСВЕТЯЩИЕ: ключ называет
   нотацию, он не тратит свет страницы. Курсив здесь не ставится: он занят
   прибором, а ключ — служебное. */
.page-release .key .r-inter dd{padding-left:22px;position:relative}
.page-release .key .r-inter dd::before{
  content:"";position:absolute;left:0;top:.34em;width:1px;height:.72em;
  background:rgba(147,168,177,.62);
}
.page-release .key .r-serv dd{
  font-family:var(--machine);font-size:13.5px;line-height:1.8;color:var(--signal);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:3px 0;
}
.page-release .key .r-bulk dd{text-align:right;padding-right:22px;position:relative}
.page-release .key .r-bulk dd::before{
  content:"";position:absolute;right:0;top:1px;bottom:1px;width:1px;
  background:linear-gradient(180deg,
    rgba(214,160,106,.55) 0 26%,rgba(214,160,106,0) 26% 37%,
    rgba(214,160,106,.55) 37% 63%,rgba(214,160,106,0) 63% 74%,
    rgba(214,160,106,.55) 74% 100%);
}
.page-release .file{
  margin:0;font-family:var(--machine);font-size:11.5px;line-height:1.75;letter-spacing:.05em;
}
.page-release .file .r{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 14px;padding:9px 0;
  border-top:1px solid var(--rule);
}
.page-release .file .r:last-child{border-bottom:1px solid var(--rule)}
.page-release .file dt{color:var(--signal);letter-spacing:.19em;text-transform:uppercase}
.page-release .file dd{margin:0;color:var(--frost)}
.page-release .file dd.warm{color:var(--sodium);letter-spacing:.14em;text-transform:uppercase}
.page-release .file .mk{
  display:inline-flex;gap:8px;color:var(--signal);vertical-align:-3px;margin-right:11px;
}
.page-release .file .mk svg{display:block;width:17px;height:17px}
.page-release .file a{
  display:inline-block;padding:4px 0 3px;color:var(--sodium);text-decoration:none;
  border-bottom:1px solid rgba(214,160,106,.34);
  transition:color 180ms ease,border-color 180ms ease;
}
.page-release .file a:hover{color:var(--frost);border-bottom-color:var(--frost)}
.page-release .file a:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}

/* ------------------------------- площадки -------------------------------- */
/* Дом даёт .chans двумя колонками — там это реестр площадок вселенной. Здесь
   список один и стоит в мере чтения, поэтому колонки снимаются. */
.page-release .also .wrap{padding-top:44px;padding-bottom:0}
.page-release .also .subnote{margin-bottom:18px}
.page-release .chans{display:block;grid-template-columns:none;gap:0;max-width:var(--measure)}
.page-release .chans li{border-bottom:0}
.page-release .chans li:last-child{border-bottom:1px solid var(--rule)}

/* ----------------------------- возврат в мир ---------------------------- */
.page-release .back .wrap{padding-top:40px;padding-bottom:56px}
.page-release .allrel{display:inline-flex;align-items:center}
/* На 320 px строка «ALL RELEASES IN RECOVERED LIGHT» с разрядкой .2em не
   помещается и даёт 2 px переполнения — единственные во всём сайте.
   Первым решением был отрицательный отступ справа: он НЕ работает, потому что
   переполнение считается по границе элемента, а отступ двигает только то, что
   идёт следом. Проверено замером, а не рассуждением.
   Настоящая причина — запрет переноса. На самых узких экранах строке
   разрешается перенестись: две строки читаются, а горизонтальная прокрутка на
   телефоне ломает чтение целиком. Разрядка остаётся: она несёт машинный
   регистр, и жертвовать смыслом ради двух пикселей неправильно. */
@media (max-width:360px){
  .page-release .allrel{white-space:normal;text-align:left}
}

/* ==== выше 1000: имя единственного BULKHEAD уходит ЗА стену ==============
   Все остальные подписи остаются над своими блоками на всех ширинах: имена,
   уходящие за правый край у КАЖДОЙ записи, — столько же выходов глаза из меры.
   Исключение одно, и оно на месте: за стеной. */
@media (min-width:1001px){
  .page-release .rec[data-src="BULKHEAD"]>figcaption{
    position:absolute;top:1px;left:calc(100% + 58px);width:150px;margin:0;text-align:left;
  }
}

/* ==================== 1000: колонки ключа складываются =================== */
@media (max-width:1000px){
  .page-release .cast .wrap{grid-template-columns:minmax(0,1fr)}
  .page-release .cast .kcol,.page-release .cast .fcol{grid-column:1}
  .page-release .cast .fcol{max-width:var(--measure);margin-top:34px}
  .page-release .axis{display:none}
}

/* ================================= 760 =================================== */
@media (max-width:760px){
  .page-release{
    /* мера: 18 px / 1,66. Кегль выбран, мерой заплачено: 17 px Crimson на
       тёмном плывёт, 21 px дал бы 39 знаков. */
    --read:18px; --lead:1.66; --measure:100%;
    --chan:266px; --wall:40px;
    --h1r:clamp(32px,9.2vw,44px);
  }
  /* автоперенос запрещён (hyphens по умолчанию manual): он рвал бы двадцать с
     лишним слов раньше того единственного слова, которое в тексте рвёт прибор */
  body.page-release{text-wrap:pretty}

  .page-release .hd .wrap{padding-top:26px}
  .page-release .eyebrow{font-size:10.5px;letter-spacing:.19em;line-height:1.8;margin-bottom:16px}
  .page-release .rsay{font-size:18.5px;margin-top:20px}
  .page-release .nota{font-size:11px;line-height:1.9;margin-top:18px}
  .page-release .down{margin-top:18px}

  /* закреплённая полоса: № и заголовок, и больше ничего */
  .page-release .recbar{
    display:block;position:sticky;top:0;z-index:40;background:var(--void);
    border-bottom:1px solid var(--rule);
  }
  .page-release .record .recbar .wrap{
    display:flex;align-items:baseline;gap:0;padding-top:10px;padding-bottom:9px;
    font-family:var(--machine);font-size:10.5px;text-transform:uppercase;
  }
  .page-release .recbar .n{color:var(--sodium);letter-spacing:.18em;white-space:nowrap}
  .page-release .recbar .t{
    color:var(--frost);letter-spacing:.16em;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
  }

  .page-release .record .wrap{padding-top:14px}
  .page-release .part{margin-bottom:22px}
  .page-release .part.cz{margin:52px 0 26px}
  /* первая фраза эпизода — то, о чём эпизод: она обязана быть видна на 390 без
     прокрутки, поэтому над ней ничего лишнего */
  .page-release .part+.rec{margin-top:22px}
  .page-release .part.cz::before{top:-28px}

  .page-release .rec{margin:34px 0}
  /* выноса влево нет: на 390 он вытолкнул бы глиф за вьюпорт */
  .page-release .rec[data-src="PERSONAL"]{margin-left:0}
  .page-release .rec[data-src="INTERCOM"] blockquote p{font-size:16.5px;padding-left:18px}
  .page-release .rec[data-src="SERVICE"] blockquote p{font-size:14.5px;line-height:1.74;padding:9px 0 10px}
  /* стена стоит РОВНО на краю колонки записи, а не отступает внутрь:
     сторона — это и есть смысл блока */
  .page-release .rec[data-src="BULKHEAD"]{margin:56px 0 16px}
  .page-release .rec[data-src="BULKHEAD"] blockquote p{font-size:16.5px;padding:9px 0;margin-bottom:20px}
  /* свет остаётся ЦЕНТРИРОВАННЫМ на штрихе — иначе он сползает на глифы:
     правее стены его столько, сколько есть до края страницы, и не больше */
  .page-release .rec[data-src="BULKHEAD"] blockquote p::before{
    right:calc(-1 * var(--wall) - 22px);width:44px;
  }

  .page-release .ends{margin-top:44px}
  .page-release .cast .wrap{padding-top:30px}
  .page-release .key .r{grid-template-columns:minmax(0,1fr);gap:6px 0}
  .page-release .key dt{line-height:1.6}
  .page-release .key dd{font-size:16px}
  .page-release .file .r{grid-template-columns:82px minmax(0,1fr);gap:0 12px}
  .page-release .file{font-size:11px}
  .page-release .also .wrap{padding-top:34px}
  .page-release .back .wrap{padding-top:32px;padding-bottom:40px}
}

/* ===================== reduced motion: свет не всходит =================== */
@media (prefers-reduced-motion:reduce){
  .page-release .rec[data-src="BULKHEAD"] blockquote p::before{animation:none}
}

/* ==========================================================================
   ПОДВАЛ: пункт поддержки. Появляется в разметке только вместе с собранной
   страницей (build.py отдаёт support_url лишь тогда), поэтому здесь нет
   состояния «пункт есть, страницы нет». Отрицательные поля возвращают строке
   её визуальную высоту, оставляя цель нажатия 44 px.
   ========================================================================== */
.footlink{
  color:var(--signal);text-decoration:none;padding:15px 0;margin:-15px 0;
  border-bottom:1px solid transparent;
  transition:color 180ms ease,border-color 180ms ease;
}
.footlink:hover{color:var(--frost);border-bottom-color:var(--rule-strong)}
.footlink:focus-visible{outline:2px solid var(--sodium);outline-offset:5px;color:var(--frost)}

/* ==========================================================================
   СТРАНИЦА ПОДДЕРЖКИ (body.page-support).

   Всё домовое ПЕРЕИСПОЛЬЗУЕТСЯ и здесь не повторяется: земля, зерно, пять
   цветов, три гарнитуры, .wrap, .sr, .skip, шапка, подвал, марка, .sect,
   .subnote, .gloss, и — целиком — шов (.seamed/.seam/.flare) вместе с его
   поворотом на 760. Ниже только то, чего в доме нет.

   ОДНО СВЕТОВОЕ СОБЫТИЕ — шов, и он лежит на СМЕТЕ. Слева от него человеческим
   набором названа работа, справа машинным стоит сумма; каждая строка сметы
   пересекает свет — это и есть «деньги становятся работой». Кошелёк живёт ниже
   линии «свет кончился» и не светит ничем: подсветить адрес значило бы звать
   ему доверять, а его надо сверять. Плашка QR — плоская поверхность без спада
   и без свечения, машинная мишень, а не свет.

   Разграфка сметы и отпечатка — регистр «система о себе»: ведомость, строка на
   строку (_TOKENS.md, 4a). Итога у сметы нет: сумма читалась бы как цель.
   ========================================================================== */

/* ------------------------------- голова ---------------------------------- */
/* padding-top 42px обязателен: --seam-top отсчитывается от него, и шов встаёт
   на 7px ниже базовой линии первой строки — как на главной. */
.page-support .sup-hd .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:42px;position:relative;z-index:2;
}
.page-support .sup-h1{
  grid-column:1 / -1;grid-row:1;margin:0;
  font-family:var(--human);font-weight:400;font-size:var(--h1);
  line-height:.98;letter-spacing:-.021em;color:var(--frost);
}
.page-support .gloss{grid-column:2;grid-row:2;align-self:start;margin-top:30px}
.page-support .sup-lede{grid-column:1;grid-row:2;padding-top:28px;padding-right:30px}
.page-support .sup-lede .say{
  margin:0;font-size:20.5px;line-height:1.62;color:var(--frost);max-width:40ch;
}

/* -------------------------------- смета ---------------------------------- */
.page-support .est .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:34px;padding-bottom:38px;position:relative;z-index:2;
}
/* костяной, а не сигнальный: надпись прижата к шву и стоит на его холодном
   спаде, где сигнальный давал 4.98 — над порогом, но впритык. Замерено, а не
   предположено; та же причина, что у подписи поля письма. */
.page-support .q{
  grid-column:1;grid-row:1;margin:0 0 14px;text-align:right;padding-right:12px;
  font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
.page-support .ledger{grid-column:1 / -1;grid-row:2;margin:0;padding:0;list-style:none}
/* Строка перечня занимает ЛЕВУЮ колонку и прижата к шву — ровно там, где
   стояла работа, когда справа от неё стояла сумма. Правая колонка пуста
   намеренно: сумм нет, и подделывать их наполнением нечем. Разметка тех же
   7fr/5fr, что у дома, — шов не сдвинулся оттого, что одна его сторона молчит. */
.page-support .ledger li{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  align-items:baseline;padding:16px 0;border-top:1px solid var(--rule);
}
.page-support .ledger li:last-child{border-bottom:1px solid var(--rule)}
/* отступ до шва — у ТЕКСТА, а не у строки: рамка обязана идти во всю ширину,
   иначе разграфка перестаёт быть разграфкой */
.page-support .ledger li > span{
  grid-column:1;font-family:var(--human);font-size:26px;line-height:1.24;
  color:var(--frost);text-align:right;padding-right:12px;
}
/* костяной, а не сигнальный, и по той же причине, что подпись поля письма:
   строка стоит на тёплом спаде шва, где сигнальный уходит ниже порога.
   Замерено, а не предположено. */
.page-support .estnote{
  grid-column:2;grid-row:3;margin:16px 0 0;
  font-family:var(--machine);font-size:11.5px;line-height:1.8;letter-spacing:.05em;
  color:var(--frost);
}

/* --------------------------- чего вы не получаете ------------------------ */
/* Ниже отлива: ни одного светящегося элемента. Ведомость — та же, что ключ
   страницы эпизода: моношная подпись слева, прозаический ответ справа. */
.page-support .nots .wrap{padding-top:10px;padding-bottom:44px}
.page-support .notlist{list-style:none;margin:0;padding:0;max-width:1000px}
.page-support .notlist li{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 32px;
  padding:17px 0;border-top:1px solid var(--rule);
}
.page-support .notlist li:last-child{border-bottom:1px solid var(--rule)}
.page-support .notlist .k{
  margin:0;font-family:var(--machine);font-size:11px;letter-spacing:.19em;
  line-height:2;text-transform:uppercase;color:var(--signal);
}
.page-support .notlist .v{margin:0;font-size:18px;line-height:1.56;color:var(--frost)}
.page-support .onlyhere{
  margin:26px 0 0;font-size:18px;line-height:1.56;color:var(--frost);max-width:58ch;
}

/* ------------------------------- кошелёк --------------------------------- */
.page-support .purse .wrap{padding-top:12px;padding-bottom:64px}
.page-support .nets{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gut);row-gap:46px;margin-top:6px;
}
.page-support .net{min-width:0;border-top:1px solid var(--rule-strong);padding-top:22px}
.page-support .netname{
  margin:0;font-family:var(--human);font-weight:400;font-size:23px;color:var(--frost);
}
/* плашка кода: плоская поверхность, обычная полярность (тёмные модули на
   светлом). Инверсию читает не всякая камера, а нечитаемый код есть сломанный
   адрес. Ни тени, ни спада, ни скругления — это мишень, а не карточка. */
.page-support .qr{margin:20px 0 0;line-height:0}
.page-support .qrc{display:block;width:152px;height:152px}
/* Адрес: группы по четыре знака, промежутки рисует CSS. В разметке между
   группами нет НИ ОДНОГО символа, поэтому и выделение мышью, и кнопка дают
   строку целиком и без пробелов. inline-block — ради переносов: без пробелов
   иных возможностей перенести строку у браузера нет, и на 390 адрес вышел бы
   за вьюпорт. */
.page-support .addr{
  margin:20px 0 0;max-width:29ch;
  font-family:var(--machine);font-size:15px;line-height:1.9;letter-spacing:.02em;
  color:var(--frost);
  -webkit-user-select:all;user-select:all;
}
.page-support .addr .g{display:inline-block;margin-right:.7em}
.page-support .copy{
  display:inline-block;margin-top:18px;background:transparent;border:0;cursor:pointer;
  color:var(--sodium);font-family:var(--machine);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;padding:13px 2px;min-height:46px;border-radius:0;
  border-bottom:1px solid rgba(214,160,106,.78);
  transition:color 180ms ease,border-color 180ms ease;
}
.page-support .copy:hover{color:var(--frost);border-bottom-color:var(--frost)}
.page-support .copy:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.page-support .cstat{
  margin:12px 0 0;font-family:var(--machine);font-size:12px;line-height:1.7;
  letter-spacing:.05em;color:var(--signal);
}
.page-support .cstat.ok{color:var(--sodium)}
.page-support .cstat.bad{color:var(--frost)}
/* отпечаток: то, что сверяют глазами, набрано крупнее всего в этом блоке */
.page-support .fp{
  margin:24px 0 0;font-family:var(--machine);font-size:11.5px;line-height:1.75;
  letter-spacing:.05em;
}
.page-support .fp .r{
  display:grid;grid-template-columns:176px minmax(0,1fr);gap:0 14px;padding:9px 0;
  border-top:1px solid var(--rule);
}
.page-support .fp .r:last-child{border-bottom:1px solid var(--rule)}
.page-support .fp dt{color:var(--signal);letter-spacing:.19em;text-transform:uppercase}
.page-support .fp dd{margin:0;color:var(--frost);overflow-wrap:anywhere}
.page-support .fp dd.big{font-size:19px;letter-spacing:.14em;line-height:1.2}
.page-support .lastword{
  margin:40px 0 0;font-size:16.5px;line-height:1.55;color:var(--frost);max-width:62ch;
}

/* ============================== 940 ====================================== */
@media (max-width:940px){
  .page-support .nets{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .page-support .notlist li{grid-template-columns:200px minmax(0,1fr);gap:0 24px}
}

/* ==================== 760: шов поворачивается ============================= */
/* Домовое правило `.seam{display:none}` гасит вертикаль, и свет обязан
   вернуться горизонталью — иначе на узком экране страница остаётся без
   светового события, а свет без видимого источника запрещён на всех ширинах.
   Форма и числа — домовые, ровно те же, что у главной: 1px холодный→тёплый
   слева направо и два мягких радиальных спада (полоса линейным градиентом даёт
   жёсткие вертикальные края и читается как скелет загрузки). */
@media (max-width:760px){
  .page-support .sup-hd .wrap,.page-support .est .wrap{
    grid-template-columns:1fr;padding-top:34px;
  }
  .page-support .sup-h1,.page-support .gloss,.page-support .sup-lede,
  .page-support .q,.page-support .ledger,.page-support .estnote{
    grid-column:1;grid-row:auto;
  }
  .page-support .gloss{margin-top:20px}
  .page-support .sup-lede{padding-top:26px;padding-right:0}
  .page-support .sup-lede .say{font-size:18.5px;max-width:none}
  .page-support .est .wrap{padding-top:30px;padding-bottom:26px}
  .page-support .q{text-align:left;padding-right:0;margin-bottom:0}

  .page-support .ledger{position:relative;margin-top:30px;padding-top:27px}
  .page-support .ledger::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,rgba(147,168,177,.10) 0%,rgba(147,168,177,.62) 26%,rgba(190,170,140,.6) 62%,rgba(214,160,106,.88) 96%,rgba(214,160,106,.2) 100%);
  }
  .page-support .ledger::after{
    content:"";position:absolute;top:-31px;left:-21px;right:-21px;height:64px;pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(132,158,172,.22) 0%, rgba(132,158,172,0) 100%) 0% 50%/72% 100% no-repeat,
      radial-gradient(closest-side, rgba(206,152,102,.26) 0%, rgba(206,152,102,0) 100%) 100% 50%/72% 100% no-repeat;
    animation:rise 280ms 150ms ease-out both;
  }
  .page-support .ledger .r{
    grid-template-columns:minmax(0,1fr) auto;column-gap:18px;padding:15px 0;
  }
  .page-support .ledger dt{text-align:left;padding-right:0;font-size:21px}
  .page-support .ledger dd{font-size:17px}
  .page-support .estnote{margin-top:20px}

  .page-support .nots .wrap{padding-top:6px;padding-bottom:34px}
  .page-support .notlist li{grid-template-columns:minmax(0,1fr);gap:7px 0;padding:16px 0}
  .page-support .notlist .k{line-height:1.6}
  .page-support .notlist .v,.page-support .onlyhere{font-size:17px}
  .page-support .purse .wrap{padding-bottom:44px}
  .page-support .net{padding-top:20px}
  .page-support .qrc{width:140px;height:140px}
  .page-support .addr{font-size:15px;max-width:none}
  .page-support .fp .r{grid-template-columns:132px minmax(0,1fr);gap:0 12px}
  .page-support .fp dd.big{font-size:18px}
  .page-support .lastword{font-size:16.5px;max-width:none;margin-top:32px}
}

/* ===================== reduced motion: свет не всходит =================== */
@media (prefers-reduced-motion:reduce){
  .page-support .ledger::after{animation:none}
}

/* ==========================================================================
   СТРАНИЦА ВСЕЛЕННЫХ (body.page-worlds) — оглавление мест.

   Всё домовое ПЕРЕИСПОЛЬЗУЕТСЯ и здесь не повторяется: земля, зерно, пять
   цветов, три гарнитуры, .wrap, .sr, .skip, шапка, подвал, марка, .gloss,
   .sect, и — целиком — шов (.seamed/.seam/.flare) вместе с его поворотом на
   760. Ниже только то, чего в доме нет.

   ОДНО СВЕТОВОЕ СОБЫТИЕ — шов, и он лежит НА СПИСКЕ ВСЕЛЕННЫХ: слева от него
   человеческим набором названо место, справа машинным стоит то, что машина о
   нём знает, и каждая строка списка пересекает свет. Это тот же приём, что на
   странице поддержки (шов лежит на смете), применённый к другой паре: место и
   данные о нём.

   Сетки карточек нет: при одной вселенной сетка читается как ошибка. Список во
   всю меру закончен и при одной строке, и при пяти — растёт он вниз, вместе со
   швом.
   ========================================================================== */

/* ------------------------------- голова ---------------------------------- */
/* padding-top 42px обязателен: от него отсчитывается --seam-top, и шов встаёт
   на 7px ниже базовой линии первой строки — как на главной. */
.page-worlds .wl-hd .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:42px;position:relative;z-index:2;
}
.page-worlds .wl-h1{
  grid-column:1 / -1;grid-row:1;margin:0;
  font-family:var(--human);font-weight:400;font-size:var(--h1);
  line-height:.98;letter-spacing:-.021em;color:var(--frost);
}
.page-worlds .gloss{grid-column:2;grid-row:2;align-self:start;margin-top:30px}
.page-worlds .wl-lede{grid-column:1;grid-row:2;padding-top:28px;padding-right:30px}
.page-worlds .wl-lede .say{
  margin:0;font-size:20.5px;line-height:1.62;color:var(--frost);max-width:40ch;
}

/* ------------------------------- список ---------------------------------- */
.page-worlds .wl .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:34px;padding-bottom:40px;position:relative;z-index:2;
}
/* костяной, а не сигнальный, и по той же причине, что подпись поля письма и
   подпись сметы: надпись прижата к шву и стоит на его спаде, где сигнальный
   уходит под порог. Замерено, а не предположено. */
.page-worlds .q{
  grid-column:1;grid-row:1;margin:0 0 14px;text-align:right;padding-right:12px;
  font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
.page-worlds .wlist{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0}
/* строка списка повторяет домовые 7fr/5fr, поэтому шов проходит ровно между
   именем места и ведомостью о нём */
.page-worlds .wone{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding:30px 0 34px;border-top:1px solid var(--rule);
}
.page-worlds .wone:last-child{border-bottom:1px solid var(--rule)}

/* человеческая сторона: порядковый номер и имя прижаты к шву — единственный
   размах страницы, ровно как вторая половина тезиса на главной. Предложение
   вселенной набрано слева: четыре строки по правому краю нечитаемы. */
.page-worlds .word-ord{
  grid-column:1;grid-row:1;margin:0 0 12px;text-align:right;padding-right:12px;
  font-family:var(--machine);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--frost);
}
.page-worlds .wname{
  grid-column:1;grid-row:2;margin:0;text-align:right;padding-right:12px;font-weight:400;
}
.page-worlds .wname a{
  font-family:var(--human);font-size:clamp(34px,3.7vw,54px);line-height:1.02;
  letter-spacing:-.018em;color:var(--frost);text-decoration:none;
  transition:color 200ms ease;
}
.page-worlds .wname a:hover{color:var(--sodium)}
.page-worlds .wname a:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.page-worlds .wsent{
  grid-column:1;grid-row:3;margin:22px 0 0;
  font-size:19px;line-height:1.62;color:var(--frost);max-width:44ch;
}

/* машинная сторона: ведомость, строка на строку. Отступ слева 48px — не вкус:
   тёплый спад шва уходит вправо на 68px, а колонка начинается в 24–32px от
   линии. НИ ОДИН ГЛИФ НЕ СТОИТ НА СВЕТЕ, поэтому сигнальный здесь остаётся
   сигнальным и не приходится делать всю колонку костяной. */
.page-worlds .wledger{
  grid-column:2;grid-row:1 / span 3;align-self:start;margin:0;padding-left:48px;
  font-family:var(--machine);letter-spacing:.03em;
}
.page-worlds .wledger .r{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 14px;
  padding:10px 0;border-top:1px solid var(--rule);
}
.page-worlds .wledger .r:last-child{border-bottom:1px solid var(--rule)}
.page-worlds .wledger dt{
  font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--signal);
  line-height:1.9;
}
.page-worlds .wledger dd{
  margin:0;font-size:13px;line-height:1.62;color:var(--frost);overflow-wrap:anywhere;
}
.page-worlds .wledger dd.ad{letter-spacing:.02em}

/* ---------------------- ниже линии «свет кончился» ----------------------- */
.page-worlds .wl-tail .wrap{padding-top:12px;padding-bottom:60px}
.page-worlds .wl-tail .sect{margin-bottom:14px}
.page-worlds .wtail{margin:0;font-size:18px;line-height:1.56;color:var(--frost);max-width:64ch}

/* ============================== 1000 ===================================== */
/* Ведомость складывается раньше, чем шов поворачивается: в 5fr от 1000 px
   подпись и значение в одну строку дают меру в двадцать знаков. */
@media (max-width:1000px){
  .page-worlds .wledger{padding-left:44px}
  .page-worlds .wledger .r{grid-template-columns:minmax(0,1fr);gap:5px 0}
  .page-worlds .wname a{font-size:clamp(30px,4.4vw,40px)}
}

/* ==================== 760: шов поворачивается ============================= */
/* Домовое правило `.seam{display:none}` гасит вертикаль, и свет обязан
   вернуться горизонталью: свет без видимого источника запрещён на всех
   ширинах. Форма и числа домовые — те же, что у главной и у страницы
   поддержки: 1px холодный→тёплый слева направо и два мягких радиальных спада
   (полоса линейным градиентом даёт жёсткие вертикальные края и читается как
   скелет загрузки). */
@media (max-width:760px){
  .page-worlds .wl-hd .wrap,.page-worlds .wl .wrap{grid-template-columns:1fr;padding-top:34px}
  .page-worlds .wl-h1,.page-worlds .gloss,.page-worlds .wl-lede,
  .page-worlds .q,.page-worlds .wlist{grid-column:1;grid-row:auto}
  .page-worlds .gloss{margin-top:20px}
  .page-worlds .wl-lede{padding-top:26px;padding-right:0}
  .page-worlds .wl-lede .say{font-size:18.5px;max-width:none}
  .page-worlds .wl .wrap{padding-top:30px;padding-bottom:26px}
  .page-worlds .q{text-align:left;padding-right:0;margin-bottom:0}

  .page-worlds .wlist{position:relative;margin-top:30px;padding-top:27px}
  .page-worlds .wlist::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,rgba(147,168,177,.10) 0%,rgba(147,168,177,.62) 26%,rgba(190,170,140,.6) 62%,rgba(214,160,106,.88) 96%,rgba(214,160,106,.2) 100%);
  }
  .page-worlds .wlist::after{
    content:"";position:absolute;top:-31px;left:-21px;right:-21px;height:64px;pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(132,158,172,.22) 0%, rgba(132,158,172,0) 100%) 0% 50%/72% 100% no-repeat,
      radial-gradient(closest-side, rgba(206,152,102,.26) 0%, rgba(206,152,102,0) 100%) 100% 50%/72% 100% no-repeat;
    animation:rise 280ms 150ms ease-out both;
  }

  .page-worlds .wone{grid-template-columns:1fr;padding:22px 0 26px}
  .page-worlds .word-ord,.page-worlds .wname,.page-worlds .wsent,.page-worlds .wledger{
    grid-column:1;grid-row:auto;text-align:left;padding-right:0;
  }
  .page-worlds .word-ord{font-size:10.5px;letter-spacing:.19em;margin-bottom:10px}
  .page-worlds .wname a{font-size:clamp(30px,8.6vw,38px)}
  .page-worlds .wsent{margin-top:18px;font-size:17.5px;max-width:none}
  /* свет ушёл в горизонталь, тёплого спада у колонки больше нет — отступ,
     который держал глифы вне света, здесь не нужен и только резал бы меру */
  .page-worlds .wledger{margin-top:24px;padding-left:0}
  .page-worlds .wledger dt{font-size:10.5px;line-height:1.7}
  .page-worlds .wledger dd{font-size:14px}

  .page-worlds .wl-tail .wrap{padding-top:8px;padding-bottom:40px}
  .page-worlds .wtail{font-size:17px;max-width:none}
}

/* ===================== reduced motion: свет не всходит =================== */
@media (prefers-reduced-motion:reduce){
  .page-worlds .wlist::after{animation:none}
}

/* ==========================================================================
   СТРАНИЦА «О ДОМЕ» (body.page-about).

   Домовое переиспользуется целиком, как и на прочих страницах. Ниже — только
   два регистра и форма.

   ДВА РЕГИСТРА, И РАЗЛИЧАЕТ ИХ АППАРАТ, А НЕ ЦВЕТ (_TOKENS.md, 4a):
     claim — человек о своей работе: линеек нет НИ ОДНОЙ, набор человеческий и
             прозаический, воздуха много;
     rule  — система о себе: ведомость, строка на строку, моноширинная, каждая
             строка в своей линейке.
   Разница переживает оттенки серого, дальтонизм и 390 px, потому что это
   присутствие или отсутствие линейки, а не тон.

   ОДНО СВЕТОВОЕ СОБЫТИЕ — шов, и он лежит РОВНО МЕЖДУ регистрами. Форма стоит
   ниже линии «свет кончился»: она не предмет страницы, а выход из неё.
   ========================================================================== */

/* ------------------------------- голова ---------------------------------- */
.page-about .ab-hd .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:42px;position:relative;z-index:2;
}
.page-about .ab-h1{
  grid-column:1 / -1;grid-row:1;margin:0;
  font-family:var(--human);font-weight:400;font-size:var(--h1);
  line-height:.98;letter-spacing:-.021em;color:var(--frost);
}
.page-about .gloss{grid-column:2;grid-row:2;align-self:start;margin-top:30px}
.page-about .ab-lede{grid-column:1;grid-row:2;padding-top:28px;padding-right:30px}
.page-about .ab-lede .say{
  margin:0;font-size:20.5px;line-height:1.62;color:var(--frost);max-width:40ch;
}
.page-about .ab-lede .say em{font-style:italic}

/* ------------------- два регистра по обе стороны шва --------------------- */
.page-about .ab-body .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:40px;padding-bottom:46px;position:relative;z-index:2;
}
.page-about .claims{grid-column:1;min-width:0}
/* костяной, а не сигнальный: подпись прижата к шву — та же причина и тот же
   замер, что у подписи сметы. */
.page-about .q{
  margin:0 0 26px;text-align:right;padding-right:12px;
  font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
/* АППАРАТА НЕТ ВОВСЕ: ни линейки, ни разграфки, ни колонки-подписи. Между
   читателем и человеком, написавшим это, не стоит ничего. */
.page-about .claim{margin:0 0 42px;max-width:46ch}
.page-about .claim:last-child{margin-bottom:0}
.page-about .claim h3{
  margin:0 0 12px;font-family:var(--human);font-weight:400;font-size:27px;
  line-height:1.16;letter-spacing:-.012em;color:var(--frost);
}
.page-about .claim p{margin:0 0 12px;font-size:19px;line-height:1.62;color:var(--frost)}
.page-about .claim p:last-child{margin-bottom:0}

/* ВЕДОМОСТЬ: строка на строку. Отступ слева 48px — не вкус: тёплый спад шва
   уходит вправо на 68px, а колонка начинается в 24–32px от линии. Ни один глиф
   не стоит на свете, поэтому подпись остаётся сигнальной. */
.page-about .rules{grid-column:2;min-width:0;padding-left:48px}
.page-about .rules .sect{margin:0 0 14px}
.page-about .rulelist{margin:0}
.page-about .rulelist .r{padding:15px 0;border-top:1px solid var(--rule)}
.page-about .rulelist .r:last-child{border-bottom:1px solid var(--rule)}
.page-about .rulelist dt{
  font-family:var(--machine);font-size:11px;letter-spacing:.19em;line-height:1.9;
  text-transform:uppercase;color:var(--signal);
}
/* 14,5 px — тот же кегль, что у ведомости на странице эпизода: это голос
   машины о себе, а не подпись под чужими словами, и мельче 14 на 390 он не
   бывает. */
.page-about .rulelist dd{
  margin:5px 0 0;font-family:var(--machine);font-size:14.5px;line-height:1.72;
  letter-spacing:.01em;color:var(--frost);
}

/* --------------------- форма: ниже «свет кончился» ----------------------- */
.page-about .write .wrap{padding-top:12px;padding-bottom:60px}
.page-about .write .sect{margin-bottom:14px}
.page-about .writenote{
  margin:0 0 28px;font-size:18px;line-height:1.56;color:var(--frost);max-width:56ch;
}
/* Форма берёт домовые органы управления (.signup input, .signup button) и
   добавляет к ним только то, чего в доме нет: раскладку в столбец и поле
   сообщения. Второй копии правил поля здесь нет. */
.page-about .wform{max-width:56ch}
.page-about .wform .ftop{margin-top:24px}
.page-about .wform input[type=email]{width:100%;display:block}
.page-about .wform textarea{
  display:block;width:100%;
  background:rgba(220,230,233,.03);
  border:1px solid var(--rule-control);
  color:var(--frost);font-family:var(--machine);font-size:15px;letter-spacing:.04em;
  line-height:1.6;padding:12px 10px;border-radius:0;resize:vertical;
  transition:border-color 180ms ease,background-color 180ms ease;
}
.page-about .wform textarea:hover{border-color:var(--frost);background:rgba(220,230,233,.07)}
.page-about .wform textarea:focus{outline:none;border-color:var(--sodium);background:rgba(220,230,233,.08)}
.page-about .wform textarea:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}
.page-about .wform textarea[aria-invalid="true"]{border-color:var(--sodium)}
.page-about .wform .send{margin-top:20px}
/* Поле-ловушка: человек его не видит, вспомогательные технологии его не видят
   (aria-hidden), табуляция до него не доходит (tabindex=-1). Геометрия та же,
   что у .sr — без отрицательных смещений, поэтому переполнения оно не даёт ни
   на одной ширине. `display:none` здесь нельзя: половина роботов на него
   смотрит и поле пропускает. */
.page-about .trap{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================== 1000 ===================================== */
@media (max-width:1000px){
  .page-about .rules{padding-left:44px}
  .page-about .claim{max-width:none}
}

/* ==================== 760: шов поворачивается ============================= */
@media (max-width:760px){
  .page-about .ab-hd .wrap,.page-about .ab-body .wrap{
    grid-template-columns:1fr;padding-top:34px;
  }
  .page-about .ab-h1,.page-about .gloss,.page-about .ab-lede,
  .page-about .claims,.page-about .rules{grid-column:1;grid-row:auto}
  .page-about .gloss{margin-top:20px}
  .page-about .ab-lede{padding-top:26px;padding-right:0}
  .page-about .ab-lede .say{font-size:18.5px;max-width:none}
  .page-about .ab-body .wrap{padding-top:30px;padding-bottom:28px}
  .page-about .q{text-align:left;padding-right:0;margin-bottom:22px}
  .page-about .claim{margin-bottom:32px}
  .page-about .claim h3{font-size:24px}
  .page-about .claim p{font-size:17.5px}

  /* свет ушёл в горизонталь: он лежит на границе между регистрами и там же,
     где на широком экране — на переходе от человека к машине */
  .page-about .rules{padding-left:0;position:relative;margin-top:34px;padding-top:27px}
  .page-about .rules::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,rgba(147,168,177,.10) 0%,rgba(147,168,177,.62) 26%,rgba(190,170,140,.6) 62%,rgba(214,160,106,.88) 96%,rgba(214,160,106,.2) 100%);
  }
  .page-about .rules::after{
    content:"";position:absolute;top:-31px;left:-21px;right:-21px;height:64px;pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(132,158,172,.22) 0%, rgba(132,158,172,0) 100%) 0% 50%/72% 100% no-repeat,
      radial-gradient(closest-side, rgba(206,152,102,.26) 0%, rgba(206,152,102,0) 100%) 100% 50%/72% 100% no-repeat;
    animation:rise 280ms 150ms ease-out both;
  }
  .page-about .rulelist dt{font-size:10.5px;line-height:1.7}
  .page-about .rulelist dd{font-size:14.5px}

  .page-about .write .wrap{padding-top:8px;padding-bottom:44px}
  .page-about .writenote{font-size:17px;max-width:none}
  .page-about .wform{max-width:none}
  /* ровно 16px: ниже iOS Safari увеличивает страницу на фокусе и не возвращает */
  .page-about .wform textarea{font-size:16px;padding:13px 10px}
}

/* ===================== reduced motion: свет не всходит =================== */
@media (prefers-reduced-motion:reduce){
  .page-about .rules::after{animation:none}
}

/* ==========================================================================
   СТРАНИЦА КОДА ПОДТВЕРЖДЕНИЯ (body.page-confirm).

   Домовое ПЕРЕИСПОЛЬЗУЕТСЯ целиком и здесь не повторяется: земля, зерно, пять
   цветов, три гарнитуры, .wrap, .sr, .skip, шапка, подвал, марка, .gloss,
   .sect, органы управления формы (.signup input / .signup button / .lstat) и —
   целиком — шов (.seamed/.seam/.flare) вместе с его поворотом на 760. Ниже
   только то, чего в доме нет.

   ОДНО СВЕТОВОЕ СОБЫТИЕ — шов, и он лежит МЕЖДУ ДЕЛОМ И ПРАВИЛОМ: слева
   человек вводит адрес и шесть цифр, справа машинной ведомостью напечатано,
   что она с этим сделает. Тот же приём, что на смете страницы поддержки и
   между двумя регистрами страницы «о доме», применённый к третьей паре.

   Текст «почему ответ один» стоит НИЖЕ линии «свет кончился»: это условие
   работы страницы, а не её предмет, и света он не получает.
   ========================================================================== */

/* ------------------------------- голова ---------------------------------- */
/* padding-top 42px обязателен: от него отсчитывается --seam-top, и шов встаёт
   на 7px ниже базовой линии первой строки — как на главной. */
.page-confirm .cf-hd .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:42px;position:relative;z-index:2;
}
.page-confirm .cf-h1{
  grid-column:1 / -1;grid-row:1;margin:0;
  font-family:var(--human);font-weight:400;font-size:var(--h1);
  line-height:.98;letter-spacing:-.021em;color:var(--frost);
}
.page-confirm .gloss{grid-column:2;grid-row:2;align-self:start;margin-top:30px}
.page-confirm .cf-lede{grid-column:1;grid-row:2;padding-top:28px;padding-right:30px}
.page-confirm .cf-lede .say{
  margin:0;font-size:20.5px;line-height:1.62;color:var(--frost);max-width:40ch;
}

/* --------------------------- дело и правила ------------------------------ */
.page-confirm .cf-body .wrap{
  display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);
  padding-top:38px;padding-bottom:46px;position:relative;z-index:2;
}
.page-confirm .cf-form{grid-column:1;min-width:0}
/* костяной, а не сигнальный, и по той же причине, что подпись сметы и подпись
   списка вселенных: надпись прижата к шву и стоит на его спаде, где сигнальный
   уходит под порог. Замерено, а не предположено. */
.page-confirm .q{
  margin:0 0 14px;text-align:right;padding-right:12px;
  font-family:var(--machine);font-size:11px;letter-spacing:.23em;
  text-transform:uppercase;color:var(--frost);font-weight:400;
}
.page-confirm .codenote{
  margin:0 0 26px;font-size:18px;line-height:1.56;color:var(--frost);max-width:52ch;
}

/* ФОРМА берёт домовые органы управления и добавляет к ним только то, чего в
   доме нет: раскладку в столбец и поле кода. Второй копии правил поля нет. */
.page-confirm .cform{max-width:52ch}
.page-confirm .cform input[type=email]{width:100%;display:block}
.page-confirm .cform .ftop{margin-top:24px}
/* Поле кода — единственное место на сайте, где человек переносит цифры глазами
   из другого окна, и набор здесь работает на сверку, а не на плотность: кегль
   крупнее домовых 15px, шаг между знаками разведён, цифры табличные, чтобы
   шесть знаков стояли в шести одинаковых местах. Правило «ровно 16px на 760»
   это не нарушает: оно поставлено против увеличения страницы в iOS Safari на
   фокусе, то есть оно ПОЛ, а не потолок. Ширина в ch, а не в px: поле обязано
   быть ровно по коду и не притворяться, что ждёт большего. */
.page-confirm .cform .codein{
  /* 7.4em, а не «сколько дадут»: шесть знаков по 0,6em с разведкой 0,34em дают
     5,64em, плюс поля 24px. Поле ровно по коду и не притворяется, что ждёт
     большего — его ширина такая же подпись, как надпись над ним. */
  display:block;width:7.4em;max-width:100%;
  font-size:21px;letter-spacing:.34em;font-variant-numeric:tabular-nums;
  padding:12px 12px;min-height:52px;
}
.page-confirm .cform .send{margin-top:26px}
/* мера ответа считается в ЕГО СОБСТВЕННОМ знаке — моноширинном 12px, — а не в
   знаке прозы: 52ch формы это 52 знака Crimson и 72 знака DM Mono. Отсюда 66:
   домовые 64 знака меры, с запасом на пробел. */
.page-confirm .lstat{max-width:66ch}

/* ВЕДОМОСТЬ: система о себе, строка на строку. Отступ слева 48px — не вкус:
   тёплый спад шва уходит вправо на 68px, а колонка начинается в 24–32px от
   линии. Ни один глиф не стоит на свете, поэтому подпись остаётся сигнальной. */
.page-confirm .cf-rules{grid-column:2;min-width:0;padding-left:48px}
.page-confirm .cf-rules .sect{margin:0 0 14px}
.page-confirm .clist{margin:0;font-family:var(--machine);letter-spacing:.03em}
.page-confirm .clist .r{padding:13px 0;border-top:1px solid var(--rule)}
.page-confirm .clist .r:last-child{border-bottom:1px solid var(--rule)}
.page-confirm .clist dt{
  font-size:11px;letter-spacing:.19em;line-height:1.9;
  text-transform:uppercase;color:var(--signal);
}
/* 14,5 px — тот же кегль, что у ведомости страницы «о доме» и страницы
   эпизода: это голос машины о себе, и мельче 14 на 390 он не бывает. */
.page-confirm .clist dd{
  margin:4px 0 0;font-size:14.5px;line-height:1.72;color:var(--frost);
}

/* ---------------------- ниже линии «свет кончился» ----------------------- */
.page-confirm .cf-tail .wrap{padding-top:12px;padding-bottom:60px}
.page-confirm .cf-tail .sect{margin-bottom:14px}
.page-confirm .cwhy{margin:0 0 16px;font-size:18px;line-height:1.56;color:var(--frost);max-width:64ch}
.page-confirm .cwhy:last-child{margin-bottom:0}
.page-confirm .cwhy a{color:var(--sodium);text-decoration:none;border-bottom:1px solid rgba(214,160,106,.5)}
.page-confirm .cwhy a:hover{color:var(--frost);border-bottom-color:var(--frost)}
.page-confirm .cwhy a:focus-visible{outline:2px solid var(--sodium);outline-offset:3px}

/* ============================== 1000 ===================================== */
@media (max-width:1000px){
  .page-confirm .cf-rules{padding-left:44px}
  .page-confirm .codenote,.page-confirm .cform,.page-confirm .lstat{max-width:none}
}

/* ==================== 760: шов поворачивается ============================= */
/* Домовое правило `.seam{display:none}` гасит вертикаль, и свет обязан
   вернуться горизонталью: свет без видимого источника запрещён на всех
   ширинах. Форма и числа домовые — те же, что на главной, на странице
   поддержки и на странице «о доме». */
@media (max-width:760px){
  .page-confirm .cf-hd .wrap,.page-confirm .cf-body .wrap{
    grid-template-columns:1fr;padding-top:34px;
  }
  .page-confirm .cf-h1,.page-confirm .gloss,.page-confirm .cf-lede,
  .page-confirm .cf-form,.page-confirm .cf-rules{grid-column:1;grid-row:auto}
  .page-confirm .gloss{margin-top:20px}
  .page-confirm .cf-lede{padding-top:26px;padding-right:0}
  .page-confirm .cf-lede .say{font-size:18.5px;max-width:none}
  .page-confirm .cf-body .wrap{padding-top:30px;padding-bottom:28px}
  .page-confirm .q{text-align:left;padding-right:0;margin-bottom:16px}
  .page-confirm .codenote{font-size:17px}
  /* ровно 16px: ниже iOS Safari увеличивает страницу на фокусе и не возвращает */
  .page-confirm .cform input[type=email]{font-size:16px;padding:13px 10px;min-height:48px}
  .page-confirm .cform .codein{font-size:20px;letter-spacing:.3em;min-height:52px}

  /* свет ушёл в горизонталь и лежит там же, где на широком экране: на переходе
     от дела человека к правилам машины */
  /* 46px, а не 34: ответ формы стоит прямо над этой линией и бывает в пять строк,
     а спад света поднимается на 31px выше неё. Отступ меньше — и последняя
     строка ответа встала бы НА свет, где её контраст никто не мерил: пустой
     ответ замеру не виден. Ни один глиф не стоит на свете — то же правило, что
     держит машинную колонку в 48px от линии на широком экране. */
  .page-confirm .cf-rules{padding-left:0;position:relative;margin-top:46px;padding-top:27px}
  .page-confirm .cf-rules::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,rgba(147,168,177,.10) 0%,rgba(147,168,177,.62) 26%,rgba(190,170,140,.6) 62%,rgba(214,160,106,.88) 96%,rgba(214,160,106,.2) 100%);
  }
  .page-confirm .cf-rules::after{
    content:"";position:absolute;top:-31px;left:-21px;right:-21px;height:64px;pointer-events:none;
    background:
      radial-gradient(closest-side, rgba(132,158,172,.22) 0%, rgba(132,158,172,0) 100%) 0% 50%/72% 100% no-repeat,
      radial-gradient(closest-side, rgba(206,152,102,.26) 0%, rgba(206,152,102,0) 100%) 100% 50%/72% 100% no-repeat;
    animation:rise 280ms 150ms ease-out both;
  }
  .page-confirm .clist dt{font-size:10.5px;line-height:1.7}
  .page-confirm .clist dd{font-size:14.5px}

  .page-confirm .cf-tail .wrap{padding-top:8px;padding-bottom:44px}
  .page-confirm .cwhy{font-size:17px;max-width:none}
}

/* ===================== reduced motion: свет не всходит =================== */
@media (prefers-reduced-motion:reduce){
  .page-confirm .cf-rules::after{animation:none}
}