/* Заглушка titry.agency: знак, «сайт в разработке» и бегущие титры с составом. Чёрный экран, как конец фильма. */
:root{--screen:#0B0B0C;--title:#F4F4F1;--dim:#8E9095;--rule:#26272A;
  --cond:"Oswald","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--screen);color:var(--title);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--title);color:var(--screen)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:1.5px solid currentColor;outline-offset:3px}

.t{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;max-width:1280px;margin:0 auto;
  padding:max(40px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(40px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));position:relative}
.side{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding-block:24px}
.mark{margin:0;color:var(--title)}
.mark svg{display:block;height:clamp(120px,17vw,200px);width:auto}
.soon{font-family:var(--cond);font-weight:300;text-transform:uppercase;font-size:clamp(44px,6.4vw,92px);line-height:.92;letter-spacing:-.005em;margin:0 0 28px;text-wrap:balance}
.about{max-width:42ch;margin:0 0 32px;color:#C9CACD;font-size:17px}
.mail{font-family:var(--mono);font-size:14px;letter-spacing:.08em;margin:0}
.mail span{color:var(--dim);text-transform:uppercase;font-size:12px;letter-spacing:.12em;margin-right:14px}
.mail a{text-decoration:none;border-bottom:1px solid var(--dim);padding-bottom:2px}
.mail a:hover{border-color:var(--title)}

.lang{position:absolute;top:max(40px,env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));display:flex;gap:6px;z-index:2}
.lang a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-decoration:none;color:var(--dim);border:1px solid var(--rule);height:34px;min-width:44px;display:inline-grid;place-items:center;padding:0 10px;transition:color .15s ease,border-color .15s ease}
.lang a:hover{color:var(--title);border-color:var(--dim)}
.t .to-en{color:var(--title);border-color:var(--title)}
.t:not(:target) .to-ru{pointer-events:none}
.t:not(:target) .to-ru{color:var(--title);border-color:var(--title)}
.t:not(:target) .to-en{color:var(--dim);border-color:var(--rule)}
.t:target .to-en{pointer-events:none}

/* языки без скрипта: адрес #en делает main целью :target */
.en{display:none}
.t:target .en{display:revert}
.t:target .ru{display:none}
.t:target .roll .en{display:block}

.roll{position:relative;height:calc(100vh - 80px);min-height:520px;overflow:hidden;border-left:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.track{animation:roll 64s linear infinite;padding-left:40px}
.roll:hover .track{animation-play-state:paused}
@keyframes roll{to{transform:translateY(-50%)}}
.roll dl{margin:0;padding-block:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px 22px;align-items:baseline}
.roll dt{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.roll dd{margin:0;font-family:var(--cond);font-size:clamp(22px,2.3vw,30px);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.roll .gap{grid-column:1/-1;height:36px}
@media (prefers-reduced-motion:reduce){.track{animation:none}}

@media (max-width:860px){
  .t{grid-template-columns:minmax(0,1fr);gap:24px}
  .side{gap:40px;padding-block:0}
  .mark svg{height:96px}
  .roll{height:420px;min-height:0;border-left:0;border-top:1px solid var(--rule)}
  .track{padding-left:0}
}