/* Мобильная версия — вариант A «Original plus Stories» (design/mobile/CONTRACT.md, handoff/SPEC.md).
   Грузится после site.css. Всё, что меняет существующую раскладку, — под @media (max-width:820px).
   Вне медиазапроса только новые элементы, которых на десктопе нет или которые скрыты:
   кнопка Menu, лента обложек, панели (меню, контакты), просмотрщик сторис, блокировка фона.
   Панели начинаются под линейкой X (16px) и продолжают сетку листа — это тот же лист, а не новый экран. */

/* ===== новые элементы: по умолчанию выключены (десктоп — как был) ===== */
.menu-btn{display:none}
.covers{display:none}
.js-only{display:none}
html.js .js-only{display:revert}
/* без JS js-only не показывается ни при каком display у компонента (.contact__act{inline-flex} перебивал) */
html:not(.js) .js-only{display:none!important}

/* живой регион стоит после .page: в статичной позиции его 1px удлинял документ (1440: 5281 → 5282) — прибит к началу */
#live{top:0;left:0}

/* фон заблокирован, пока открыта панель: top ставит stories.js инлайном */
html.locked{overscroll-behavior:none}
html.locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ===== панели и просмотрщик — стили работают на любой ширине ===== */
.panel,.story{
  --padx:clamp(1.25rem,4vw,4rem);
  --pl:max(var(--padx),env(safe-area-inset-left));--pr:max(var(--padx),env(safe-area-inset-right));
  position:fixed;left:0;right:0;top:16px;bottom:0;z-index:60;box-sizing:border-box;
  color:var(--ink);background-color:var(--paper);
  /* та же сетка, что у листа (.grid), со сдвигом на высоту линейки — узлы совпадают с узлами страницы */
  background-image:radial-gradient(circle at 0 0,var(--dot) 1px,transparent 1.4px),linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:0 -16px;
  padding-top:env(safe-area-inset-top);
  -webkit-tap-highlight-color:rgba(236,235,230,.08)
}
@supports (height:100dvh){.panel,.story{bottom:auto;height:calc(100dvh - 16px)}}
.story{z-index:60}.panel--menu{z-index:61}.panel--contact{z-index:62} /* контакты открываются поверх сторис и меню */
.panel{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.story{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.panel[hidden],.story[hidden],.panel [hidden],.story [hidden],.covers [hidden]{display:none!important}
/* без JS: панель открывается якорем и закрывается ссылкой на #top; с JS управляет атрибут hidden */
html:not(.js) .panel:target{display:flex!important}

@keyframes lashch-fade{from{opacity:0}}
@keyframes lashch-rise{from{opacity:0;transform:translateY(8px)}}
.panel:not([hidden]),.story:not([hidden]),html:not(.js) .panel:target{animation:lashch-fade .2s cubic-bezier(.2,.7,.2,1)}
.story .frame:not([hidden]){animation:lashch-rise .2s cubic-bezier(.2,.7,.2,1)}

/* шапка панели стоит там же, где шапка страницы: заголовок — на месте имени, Close — на месте Menu */
.panel__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:8px var(--pr) 8px var(--pl);background:var(--paper)}
.panel__title{font-size:15px;font-variation-settings:"wdth" 100,"wght" 500}
.panel__close,.story__close{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin-right:-4px;padding:0 4px 0 12px;font-size:15px;white-space:nowrap}

/* меню: оглавление крупным кеглем */
.menu__list{display:flex;flex-direction:column;width:100%;max-width:44rem;box-sizing:border-box;padding:12px var(--pr) 32px var(--pl)}
.menu__list a{display:flex;align-items:baseline;gap:.9rem;min-height:44px;padding:12px 0 10px;border-bottom:1px solid var(--hair);font-size:clamp(1.9rem,9vw,2.6rem);line-height:1.08;letter-spacing:-.02em;font-variation-settings:"wdth" 100,"wght" 300}
.menu__list a:first-child{border-top:1px solid var(--hair)}
.menu__list a .mono{flex:none;width:2.4rem;letter-spacing:.02em}
.menu__list a:active{font-variation-settings:"wdth" 95,"wght" 500}
.menu__list .menu__hi{margin-top:28px;border:0;padding-left:0}
.menu__hi i.s{padding-right:.06em}

/* контакты */
/* контакты занимают всю высоту панели: подвал и «← Back to …» прижаты к низу экрана (референс 02);
   на низком экране панель прокручивается как раньше */
.contact{display:flex;flex:1 0 auto;flex-direction:column;width:100%;max-width:44rem;box-sizing:border-box;padding:8px var(--pr) 20px var(--pl)}
.contact__h{margin:14px 0 0;font-size:clamp(3.5rem,21vw,5.75rem);font-weight:300;line-height:.95;letter-spacing:-.035em;font-variation-settings:"wdth" 100,"wght" 300}
.contact__h:focus{outline:none} /* цель программного фокуса (tabindex=-1), не элемент управления */
.contact__p{margin:18px 0 30px;max-width:24ch;font-size:clamp(1.15rem,5vw,1.35rem);line-height:1.35;text-wrap:pretty}
.contact__row{border-top:1px solid var(--hair);padding:14px 0 6px}
.contact__k{display:block;text-transform:uppercase;letter-spacing:.06em}
.contact__email{display:block;margin-top:8px;font-size:clamp(1.15rem,5.2vw,1.35rem);line-height:1.3;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.contact__acts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;margin-top:4px}
.contact__act{display:inline-flex;align-items:center;min-height:44px;font:450 12px/1.2 var(--mono);font-variation-settings:"wdth" 90,"wght" 450;letter-spacing:.02em;color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--mute);text-decoration-thickness:1px;text-underline-offset:.4em}
html.js .contact__act.js-only{display:inline-flex}
.contact__status{min-height:14px;margin:0 0 6px;color:var(--ink)}
.contact__link{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:0;font-size:clamp(1.35rem,6vw,1.6rem);letter-spacing:-.01em;font-variation-settings:"wdth" 100,"wght" 350}
.contact__link+.contact__link{border-bottom:1px solid var(--hair)}
.contact__link:active{font-variation-settings:"wdth" 95,"wght" 550}
.contact__foot{margin:auto 0 0;padding-top:28px}
/* возврат — главное действие после чтения: санс того же кегля, что кнопки нижней панели сторис */
.panel__back{display:inline-flex;align-items:center;align-self:flex-start;min-height:52px;margin-top:6px;padding-right:12px;font:400 16px/1.2 var(--sans);font-variation-settings:"wdth" 100,"wght" 400;letter-spacing:0;color:var(--ink)}

/* ===== просмотрщик ===== */
.story__top{padding:12px var(--pr) 10px var(--pl)}
.story__prog{display:flex;gap:4px;height:2px;margin:0;padding:0;list-style:none}
.story__prog li{flex:1 1 0;height:2px;background:var(--hair)}
.story__prog li.on{background:var(--ink)}
.story__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:10px}
.story__title{display:flex;flex-direction:column;gap:3px;min-width:0}
.story__h{margin:0;font:500 15px/1.25 var(--mono);font-variation-settings:"wdth" 90,"wght" 500;letter-spacing:.01em}
.story__count{margin:2px 0 0;letter-spacing:.06em}
.story__body{position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px var(--pr) 20px var(--pl)}
.frame{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}
.story .frame[hidden]{display:none!important}
.frame__t{margin:0;font-size:clamp(1.9rem,9vw,2.5rem);font-weight:400;line-height:1.04;letter-spacing:-.025em;font-variation-settings:"wdth" 100,"wght" 350;text-wrap:balance;overflow-wrap:break-word}
.frame--now .frame__t{font-size:clamp(1.5rem,7vw,2rem);line-height:1.15;text-wrap:pretty}
/* About, Writing, Notes: заголовок — плакат кадра (референсы 01, 03); на низких экранах кегль ограничен высотой,
   чтобы действие не выталкивалось за нижнюю панель. Work и Now — длинные роли и фразы, кегль прежний */
/* интерлиньяж 1.04, не 1: при 1 глифы Archivo выходят за строку (scrollHeight > clientHeight на 2px) */
.frame--about .frame__t,.frame--writing .frame__t,.frame--notes .frame__t{font-size:clamp(2rem,min(12vw,6.2vh),3.25rem);font-size:clamp(2rem,min(12vw,6.2dvh),3.25rem);line-height:1.04;letter-spacing:-.03em}
.frame__p{margin:14px 0 0;max-width:36ch;font-size:17px;line-height:1.45;text-wrap:pretty;overflow-wrap:break-word}
/* превью статьи: волосная линия между заголовком и описанием, описание крупнее (референс 03) */
.frame--writing .frame__p{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);font-size:19px;line-height:1.4}
/* технические строки — капсом, как «6 MIN / INTERACTIVE / REV 1»: отделены от текста и регистром */
.frame__meta{margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase}
.frame__p+.frame__meta{margin:18px 0 0}
.frame__when{margin:10px 0 0;letter-spacing:.06em;text-transform:uppercase}
.story .frame__fig{align-self:center;margin:4px 0 26px;justify-self:auto;padding-bottom:.6rem}
/* подпись в потоке, а не absolute: на низком экране портрет уже, подпись переносится в две строки и не наезжает на глифы */
.story .frame__fig figcaption{position:static;margin-top:.75rem;font-size:11px;letter-spacing:.06em}
/* базовый кегль портрета; --fig-fs ставит stories.js (fitFigures), если самый полный кадр About иначе не помещается */
.story .frame__fig pre{font-size:clamp(4.2px,min(1.6vw,.78vh),7px);font-size:var(--fig-fs,clamp(4.2px,min(1.6vw,.78dvh),7px))}
.story .frame--nofig .frame__fig{display:none} /* кадр About после первого на низком экране: без портрета (stories.js) */
.frame__actions{display:flex;flex-direction:column;margin-top:auto;padding-top:26px}
/* вторичная строка без основной кнопки («Full About →», «Full Now →») — сразу под текстом, как в референсе 01;
   основная кнопка по-прежнему прижата к низу (референс 03) */
.frame__actions:not(:has(.frame__act--primary)){margin-top:0}
.frame__act{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:48px;box-sizing:border-box;border-top:1px solid var(--hair);font-size:17px;line-height:1.25;text-align:left;color:var(--ink)}
.frame__act:last-child{border-bottom:1px solid var(--hair)}
.frame__act:active{background:rgba(236,235,230,.06)}
.frame__act--primary,.frame__act--primary:last-child{justify-content:center;min-height:52px;padding:0 16px;border:1px solid var(--ink);text-align:center}
.frame__act--primary~.frame__act,.frame__act--primary~.frame__act:last-child{justify-content:center;margin-top:8px;padding:0 16px;border:1px solid var(--hair);text-align:center}
button.frame__act[data-panel]::after{content:"→";content:"→"/"";margin-left:.35em} /* стрелка декоративна: скринридер читает только «Say hi» */
.story__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 1rem;padding:0 var(--pr) env(safe-area-inset-bottom) var(--pl);border-top:1px solid var(--hair);background:var(--paper)}
.story__bar button{display:inline-flex;align-items:center;min-width:44px;min-height:52px;font-size:16px;white-space:nowrap}
.story__prev{margin-left:-2px}
.story__next,.story__home{margin-left:auto;margin-right:-2px}
.story__prev:disabled{color:var(--mute);opacity:.5;cursor:default}

/* фокус в новых элементах — виден и не обрезается контейнерами прокрутки */
.panel a:focus-visible,.panel button:focus-visible,.story a:focus-visible,.story button:focus-visible,.covers a:focus-visible,.covers button:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ===== мобильная раскладка ===== */
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

  /* шапка: имя и Menu, закреплена под линейкой, фон непрозрачный; 16 + 64 = отступ якорей (--navh) */
  .nav{position:sticky;top:16px;padding-top:8px;padding-bottom:8px;background:var(--paper)}
  .nav__row{flex-wrap:nowrap;align-items:center;gap:1rem;min-height:48px}
  .nav__name{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
  .nav__links,.hud{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin-right:-4px;padding:0 4px 0 12px;font-size:15px;font-variation-settings:"wdth" 100,"wght" 450;color:var(--ink);-webkit-tap-highlight-color:rgba(236,235,230,.08)}
  .sec__h[tabindex="-1"]:focus{outline:none}

  /* hero: вторая строка имени прижата вправо */
  .hero{padding-top:clamp(1.5rem,5vh,3rem);padding-bottom:1.75rem}
  .name span.w~span.w{margin-left:0;text-align:right}
  /* одна колонка: 12 колонок с зазорами 1.5rem требуют 264px минимум — при ~200% масштаба (195px) строка вылезала */
  .hero__row{margin-top:2rem;padding-top:1rem;grid-template-columns:minmax(0,1fr)}
  /* имя — обмерный чертёж, как в референсе 01: уголки по габариту и размерная линия без числа.
     Псевдоэлементы масштабируются вместе с именем (transform из site.js); десктопный .box здесь скрыт */
  .name::after{content:"";position:absolute;inset:-.06em -.04em -.1em;pointer-events:none;opacity:.55;
    background:linear-gradient(var(--ink),var(--ink)) 0 0/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 100% 0/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 0 100%/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 100% 100%/10px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 10px no-repeat}
  .name::before{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.34em;height:7px;box-sizing:border-box;border-left:1px solid var(--ink);border-right:1px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 50%/100% 1px no-repeat;opacity:.35;pointer-events:none}
  .hero__row p{max-width:40ch;font-size:17px;line-height:1.45} /* на телефоне во всю ширину, на 600–820 строка не длиннее ~70 знаков */
  .tele{grid-template-columns:repeat(4,auto);justify-content:space-between;justify-self:stretch;gap:.5rem 0;max-width:27rem}
  .tele>span{padding-left:12px;border-left:1px solid var(--hair)}
  .tele>span:first-child{padding-left:0;border-left:0}

  /* About: трек 1fr = minmax(auto,1fr) раздувался до max-width:24ch у .big (316px) и на 320 вылезал за край */
  .about{grid-template-columns:minmax(0,1fr)}

  /* основной текст разделов — не мельче 16px */
  .row__d,.work .role p,.now div p,.earlier{font-size:1rem;line-height:1.5}

  /* мелкие ссылки ленты заметок, строки под разделами и штампа подвала (второй путь к контактам):
     зона касания ≥44×44 невидимым псевдоэлементом — ритм текста не меняется */
  .stamp a,.post__more,main .sec p.mono>a{position:relative}
  .stamp a::after,.post__more::after,main .sec p.mono>a::after{content:"";position:absolute;inset:-16px -11px}

  /* ===== лента обложек THE SHORT VERSION ===== */
  .covers{
    --cw:clamp(88px,calc((100vw - 50px) / 3.4),104px); /* видны три обложки и край четвёртой */
    --ch:156px; /* высота карточки; из неё считается кегль мини-портрета */
    --padx:clamp(1.25rem,4vw,4rem);
    display:block;position:relative;overflow:hidden;padding-top:4px;padding-bottom:8px
  }
  .covers__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;border-top:1px solid var(--hair)}
  html.js .covers__nav{display:flex;margin-right:-11px}
  .covers__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:17px;line-height:1;color:var(--ink)}
  .covers__btn:active{color:var(--mute)}
  .covers__btn[aria-disabled="true"]{color:var(--mute);opacity:.5;cursor:default}
  .covers__list{display:flex;gap:10px;margin:0 calc(-1 * var(--padx));padding:6px var(--padx) 6px;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--padx);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  /* выглядывающая обложка затухает маской (не цветом): видны рамка и номер, обрубки слов — нет.
     --fade (правый край последней целой обложки) ставит stories.js; у конца ленты маски нет */
  html.js .covers__list:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 var(--fade,calc(100% - 40px)),rgba(0,0,0,.14) calc(var(--fade,calc(100% - 40px)) + 18px),transparent);mask-image:linear-gradient(90deg,#000 var(--fade,calc(100% - 40px)),rgba(0,0,0,.14) calc(var(--fade,calc(100% - 40px)) + 18px),transparent)}
  .covers__list::-webkit-scrollbar{display:none}
  .cover{position:relative;flex:0 0 auto;width:var(--cw);scroll-snap-align:start}
  html.js .cover{padding-bottom:44px} /* место под «Start again»: появление ссылки не сдвигает страницу */
  .cover__a{display:flex;flex-direction:column;width:100%;min-height:var(--ch);box-sizing:border-box;padding:8px 8px 9px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent}
  .cover__a:active{border-color:var(--ink)}
  .cover__no{line-height:1;color:var(--ink)}
  /* «CONTINUE ·» / «2/3» — две строки по 11px (SPEC: подписи 11–12px), вместо ужатой в одну строку 8–9.6px;
     высота под две строки зарезервирована всегда — появление подписи не двигает медиа */
  .cover__sub{display:block;min-height:24px;margin-top:4px;font-size:11px;line-height:12px;letter-spacing:0;font-variation-settings:"wdth" 90,"wght" 500;color:var(--ink);white-space:normal;overflow:hidden}
  .cover__media{display:flex;flex-direction:column;justify-content:center;flex:1 1 0px;min-height:0;margin:4px 0 6px;overflow:hidden}
  /* мини-портрет 40 × 37 глифов (глиф с разрядкой .76em, строка 1.02em) — целиком, без обрезки:
     кегль — меньшее из «по ширине» и «по высоте поля» (карточка минус номер, подпись в две строки, название и отступы ≈ 84px) */
  .cover__fig{flex:none;align-self:center;margin:0;font:400 min(calc((var(--cw) - 18px) / 30.4),calc((var(--ch) - 84px) / 37.74))/1.02 var(--mono);font-variation-settings:"wdth" 100,"wght" 400;letter-spacing:.06em;white-space:pre;color:var(--ink);-webkit-user-select:none;user-select:none}
  .cover__line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:2px;font:450 11px/1.25 var(--mono);font-variation-settings:"wdth" 90,"wght" 450;letter-spacing:.01em;overflow-wrap:break-word}
  .cover__line.s{font:italic 400 15px/1.08 var(--serif);font-variation-settings:normal;letter-spacing:0}
  .cover__hatch{display:block;flex:none;width:82%;height:11px;margin:8px 0 auto;background-image:repeating-linear-gradient(90deg,transparent 0 1px,var(--paper) 1px 3px),repeating-linear-gradient(180deg,var(--dot) 0 1px,transparent 1px 4px)}
  .cover__t{display:block;font:500 12px/1.2 var(--mono);font-variation-settings:"wdth" 90,"wght" 500;letter-spacing:.01em}
  html.js .cover__again{display:flex}
  .cover__again{position:absolute;left:0;right:0;bottom:0;height:44px;align-items:center;justify-content:center;color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--mute);text-decoration-thickness:1px;text-underline-offset:.4em}
  .covers+.sec{padding-top:clamp(2.5rem,7vh,5rem)}
  html.js .covers+.sec{padding-top:.5rem} /* под лентой уже 44px, зарезервированных под «Start again»: они и есть зазор */
}
/* ~200% масштаба (≈195px): «Yaroslav» помещается в строку; на 320–359 кегль прежний (16.5vw > нижней границы).
   Сетка секций .g — одна колонка: на ≤820 все её дети и так 1/-1, а 12 колонок с зазорами 1.5rem требуют 264px */
@media (max-width:359px){
  .name{font-size:clamp(2.2rem,16.5vw,21rem)}
  .g{grid-template-columns:minmax(0,1fr)}
  /* портрет в About: 52 глифа по .76em + поля рамки ≈ 39.5em + 31px; на 320 остаётся 5.2px, на 195 ≈ 3.1px */
  .about .fig pre{font-size:min(5.2px,calc((100vw - 72px) / 39.5))}
}
@media (max-width:260px){
  .tele{grid-template-columns:auto}
  .tele>span:nth-child(odd){padding-right:0}
  .tele>span:nth-child(even){padding-left:0;border-left:0}
}
/* самые узкие телефоны: координаты в две колонки */
@media (max-width:359px){
  .tele{grid-template-columns:auto auto;justify-content:start;gap:.5rem 0}
  .tele>span:nth-child(odd){padding-left:0;border-left:0}
  .tele>span:nth-child(even){padding-right:0}
  .tele>span:nth-child(odd){padding-right:24px}
}
/* низкий экран: компактнее верх просмотрщика */
@media (max-width:820px) and (max-height:560px){
  .story__top{padding-top:8px;padding-bottom:6px}
  .story__head{margin-top:4px}
  .story__bar button{min-height:46px}
}

@media (prefers-reduced-motion:reduce){
  .panel,.story,.story .frame,html:not(.js) .panel:target{animation:none!important}
  .covers__list{scroll-behavior:auto}
}