@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(f/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(f/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(f/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(f/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;src:url(f/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Manrope — тонкий гротеск авторского блока (имя и манифест). Переменный по
   насыщенности 300..500: одним файлом на подмножество и Light, и Regular. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 500;font-display:swap;src:url(f/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 500;font-display:swap;src:url(f/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 500;font-display:swap;src:url(f/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 500;font-display:swap;src:url(f/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Елена Орешкина — имиджевое портфолио.

   Одна сплошная страница: единый фон без стыков, фотографии несут
   структуру, разделы не заперты в карточки. Всё, что подкручивают
   руками, вынесено в переменные ниже — менять надо ТОЛЬКО их.
   ============================================================ */
:root{
  color-scheme: dark;              /* запрещает браузеру самому «затемнять» сайт */

  /* --- бумага и чернила --- */
  --paper:    #191816;             /* глубокий графит с тёплым подтоном */
  --ink:      #E8E1D6;             /* тёплый молочный */
  --ink-soft: #B4ABA0;
  --ink-dim:  #877F74;
  --accent:   hsl(26 52% 72%);
  --line:     hsl(36 30% 95% / .14);

  /* --- фактура бумаги --- */
  --tex:      .05;                 /* непрозрачность зерна: 3–5% */
  --tex-size: 288px;               /* = сторона плитки: на обычном экране 1:1 */

  /* --- фильтр на сетках фотографий (в лайтбоксе его нет) --- */
  --filter:   #3E332A;             /* тёплый графитово-коричневый */
  --filter-a: .12;

  /* --- ритм страницы --- */
  --pad:  clamp(12px, 3.4vw, 56px);   /* поля по краям */
  --gap:  5px;                        /* интервал внутри фотосеток */
  --sp:   clamp(32px, 4.4vw, 72px);   /* между крупными смысловыми частями */
  --band: 3/2;                        /* пропорция полосы во всю ширину */
  --cols: 2;                          /* колонок в мозаике «Избранного» */
  --doc:  .66;                        /* пропорция плитки диплома */
  --sheet-cols: 6;                    /* колонок в контактном листе архива */

  --rail: 0px;
  --maxw: 1520px;
  --bar: 42px;                     /* высота закреплённого меню, уточняется из JS */

  /* совместимость: этими именами пользуются архив и политика */
  --bg: var(--paper);
  --bg-soft: #221F1C;
  --bg-deep: #141312;

  /* ============================================================
     АВТОРСКИЙ БЛОК — светлая хлопковая бумага.
     Пока это единственный светлый раздел: остальная страница остаётся
     тёмной до согласования этого экрана. Всё, что подкручивают руками,
     живёт здесь; в самом блоке ниже — только ссылки на эти имена.
     ============================================================ */
  --au-bg:      #C8BEB3;      /* фон: светлый тёплый серо-бежевый */
  --au-primary: #28231F;      /* имя — самый тёмный уровень */
  --au-body:    #403934;      /* ключевая часть манифеста */
  --au-muted:   #5E554E;      /* поясняющий текст */
  --au-faint:   #6D645C;      /* служебные подписи */
  --au-olive:   #73755E;      /* сложный оливковый: подписи и активное */
  --au-edge:    hsl(28 14% 18% / .16);   /* линии на светлом */

  --au-tex-grain:  .15;       /* сила зерна и волокон (плитка, repeat) */
  --au-tex-emboss: .14;       /* сила неоднородности и слепого тиснения */
  --au-tile:       512px;     /* сторона плитки = размеру файла: 1:1 без пересчёта */

  --au-name:       clamp(34px, 3.9vw, 58px);   /* имя: только широкий экран */
  --au-name-w:     300;
  --au-name-lh:    1.0;
  --au-name-track: .012em;    /* прописные стоят свободнее строчных */

  --au-col-photo:  52%;       /* доля портрета в развороте на широком экране */
  --au-creed-w:    620px;     /* предельная длина строки манифеста */
  --au-pad-x:      clamp(26px, 7.4vw, 44px);   /* боковые поля светлого экрана */

  /* --- манифест на светлой бумаге --- */
  --cr-size:  clamp(18px, 4.7vw, 19px);
  --cr-lead:  clamp(19px, 5.1vw, 20px);
  --cr-lh:    1.55;
  --cr-gap:   clamp(18px, 3.2vh, 26px);

  /* ============================================================
     ПЕРВЫЙ ЭКРАН — портрет во весь экран.
     Два самостоятельных файла: img/hero-m.jpg (9:16, телефон) и
     img/hero-d.jpg (16:9, компьютер); переключает <picture> в разметке.
     Здесь — только то, что подкручивают руками.
     ============================================================ */
  --hero-focus-m:   44% 40%;  /* что остаётся в кадре на телефоне: светлая
                                 стена уходит к самому краю, иначе на неё
                                 попадает последний пункт меню */
  --hero-focus-d:   100% 50%; /* компьютер: фигура и светлая стена у правого края */
  --hero-scrim:     .42;      /* сила затемнения ВНИЗУ кадра — под фразой */
  --hero-scrim-end: 52%;      /* докуда снизу оно доходит */
  /* затемнение обрывается раньше светлой стены: она справа переходит в
     светлый экран ниже, и потемневший низ стены рвал бы этот переход */
  /* Низ кадра затемнён во всю ширину: фраза идёт от края до края и последними
     словами заходит на светлую стену. Справа затемнение слабее — стена там
     остаётся стеной, но буквы на ней уже читаются (замер — look_hero.py). */
  --hero-cut:       linear-gradient(to right, #000 0 84%, hsl(0 0% 0% / .8) 100%);
  --hero-top:       .5;       /* тень под строкой меню: она идёт по светлой стене */
  --hero-lead:      clamp(17px, 5.05vw, 22px);   /* на ~30% мельче прежних 7.2vw */
  --hero-lead-w:    100%;     /* фраза во всю ширину экрана */

  /* имя и род занятий на телефоне: тот же тёплый молочный и то же светлое
     начертание Manrope 300, что на широком экране, только кегль свой */
  --hero-name-m:    clamp(23px, 7.2vw, 31px);
  /* разрядка .24em делает эту строку почти во всю ширину экрана: на 360 точках
     она при фиксированных 10px переламывается, и «С 2011 ГОДА» уезжает вниз
     отдельной строкой — поэтому кегль тянется от ширины */
  --hero-role-m:    clamp(9px, 2.55vw, 11px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.62; font-weight:400; overflow-x:hidden;
}

/* ---------- фактура матовой бумаги ----------
   Отдельным неподвижным слоем ПОД содержимым (.page и меню лежат выше по
   z-index), поэтому зерно ложится только на фон и не мутит ни текст, ни
   фотографии. Плитка бесшовная (см. make_texture.py), масштаб равен её
   собственному размеру — значит на обычном экране пересчёта пикселей нет
   вовсе, а на retina он ровно двукратный: муару не из чего возникнуть.  */
.paper{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url(f/paper.webp);
  background-repeat:repeat;
  background-size:var(--tex-size) var(--tex-size);
  opacity:var(--tex);
  mix-blend-mode:soft-light;
}
h1,h2,h3,.disp{
  font-family:"Onest", "Inter", ui-sans-serif, sans-serif;
  font-weight:500; line-height:1.06; letter-spacing:-.015em; margin:0;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}

/* ---------- левая рейка (только компьютер) ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:74px; z-index:60;
  display:none; flex-direction:column; align-items:center; justify-content:space-between;
  padding:26px 0; border-right:1px solid var(--line);
}
.rail .vname{
  writing-mode:vertical-rl; text-orientation:mixed; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft);
}
.dots{display:flex; flex-direction:column; gap:14px; align-items:center}
.dots a{width:7px; height:7px; border-radius:50%; background:var(--ink-soft); opacity:.35; transition:.3s}
.dots a.on{opacity:1; background:var(--accent); transform:scale(1.5)}
.rail .yr{writing-mode:vertical-rl; font-size:11px; letter-spacing:.2em; color:var(--ink-dim)}
.page{margin-left:var(--rail); position:relative; z-index:1}

/* ---------- верхнее меню: тонкая спокойная строка ----------
   Пять пунктов = пять разделов. Бургера нет и на узких экранах: спрятанное за
   иконку меню люди просто не открывают. Прописными пять слов в 360 точек уже
   не влезают одной строкой, поэтому на телефоне строка теряет капитель и
   разрядку — в нижнем регистре те же слова короче и на мелком кегле читаются
   лучше, чем капитель в 10px (см. телефонный блок ниже).  */
.top{
  position:fixed; top:0; left:var(--rail); right:0; z-index:55;
  padding:11px var(--pad);
  display:flex; justify-content:flex-end; align-items:center; gap:clamp(16px,3vw,34px);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.top.stuck{
  background:hsl(30 7% 8% / .82); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.top a{color:var(--ink-soft); padding:3px 0; border-bottom:1px solid transparent; transition:.3s; white-space:nowrap}
.top a:hover,.top a.on{color:var(--ink); border-color:var(--accent)}

/* Под строкой меню может оказаться СВЕТЛАЯ бумага второго экрана — светлые
   буквы на ней просто исчезли бы. Класс ставит nav() в app.js, и не «по
   близости блока», а по тому, накрывает ли бумага саму строку в том месте,
   где стоят буквы: на широком экране пункты справа, и бумага там появляется
   раньше, чем блок займёт полэкрана.
   Заливки у полосы в этом состоянии нет: слева под ней тёмная фотография, и
   светлая плашка во всю ширину легла бы на кадр чужой лентой. */
body.lit .top a{color:var(--au-body)}
body.lit .top a:hover,body.lit .top a.on{color:var(--au-primary); border-color:var(--au-olive)}
body.lit .top.stuck{background:none; backdrop-filter:none; border-bottom-color:transparent}
/* Рейку это не касается: она слева, а слева на всю высоту первого экрана
   лежит фотография — светлые буквы на ней читаются. */

/* Пока страница стоит на самом верху, полоса меню идёт по фотографии: своей
   заливки у неё нет, читаемость держит тень .hero::before */

/* ---------- секции: без однотонных экранов и карточек ---------- */
section{padding:0 0 var(--sp); position:relative}
/* Пункт меню обязан привести к НАЧАЛУ раздела: без этого отступа первая строка
   раздела уезжала под закреплённую полосу. Высоту полосы меряет barHeight()
   в app.js и кладёт в --bar; запас на случай, если стиль применился раньше
   скрипта. */
section[id],header[id]{scroll-margin-top:calc(var(--bar,44px) + 10px)}
.tag{
  font-family:inherit; font-weight:400;
  font-size:clamp(11px,1.1vw,13px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 14px;
}

/* ---------- кадры: общая плитка ---------- */
.ph{position:relative; overflow:hidden; background:var(--bg-soft)}
.ph img{width:100%; height:100%; object-fit:cover; display:block; object-position:var(--f,50% 50%)}
/* общий фильтр сеток: в лайтбоксе этого слоя нет — там авторский цвет */
.ph.dim::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--filter); opacity:var(--filter-a);
}

/* ============================================================
   Авторский блок = два экрана одной мысли

   (1) .hero — портрет во весь экран. Тёмный фотографический экран.
   (2) .creed-screen — светлая хлопковая бумага в тон той стены, что видна
       на портрете справа: текст ПРОДОЛЖАЕТ фотографию, а не спорит с ней.

   Разделителей между ними нет намеренно: стык держится на том, что светлая
   стена кадра доведена до правого края портрета (--hero-focus-d = 100%).
   ============================================================ */
.author{
  position:relative;
  color:var(--au-body);
  /* Первый экран идёт ДО КРАЯ экрана, под левую рейку: .page отодвинут на её
     ширину, и без выхода из этого отступа слева оставалась бы тёмная полоса
     страницы — на снимке она читается чужой деталью, хотя все проверки зелёные. */
  margin-left:calc(-1 * var(--rail));
}

/* ---------- экран 1: портрет ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;   /* svh: без прыжка от адресной строки */
  display:flex; align-items:flex-end;
  background:#151412;                    /* пока кадр не пришёл — не белая вспышка */
}
.hero picture{position:absolute; inset:0; z-index:0}
/* кадр заполняет экран целиком и не растягивается: что именно остаётся при
   обрезке, решает точка фокуса — своя для телефона и для компьютера */
.hero-ph{width:100%; height:100%; object-fit:cover; object-position:var(--hero-focus-m)}

/* мягкое затемнение ТОЛЬКО внизу и только под текстом: маска гасит его
   раньше, чем начинается светлая стена. Без маски низ стены темнел бы ровно
   там, где она переходит в светлый экран, и переход рвался бы. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
      hsl(26 12% 5% / var(--hero-scrim)) 0,
      hsl(26 12% 5% / 0) var(--hero-scrim-end));
  -webkit-mask-image:var(--hero-cut); mask-image:var(--hero-cut);
}
/* и такая же тень сверху, под строкой меню: на телефоне её правый край идёт
   по светлой стене, и светлые буквы там иначе пропадают */
.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:1; pointer-events:none;
  height:calc(var(--bar) + 60px);
  background:linear-gradient(to bottom, hsl(26 12% 5% / var(--hero-top)), hsl(26 12% 5% / 0));
}
.hero-txt{
  position:relative; z-index:2; width:100%;
  padding:0 var(--pad) clamp(26px,7vh,60px);
}
/* Телефон: на портрете стоит вся подпись автора — имя, род занятий и фраза,
   тем же порядком, что на широком экране. Стоит она внизу, ниже светлой
   стены и лица: на куртке тёплый молочный читается, а кадр остаётся кадром.
   Имя набрано светлым начертанием Manrope, а не жирным гротеском заголовков:
   крупная плашка на портрете смотрелась бы афишей. */
.hero-txt h1{
  font-family:"Manrope","Inter",ui-sans-serif,sans-serif;
  font-weight:var(--au-name-w); font-size:var(--hero-name-m);
  line-height:var(--au-name-lh); letter-spacing:var(--au-name-track);
  text-transform:uppercase; color:var(--ink);
  max-width:8em; text-wrap:balance;   /* «ЕЛЕНА» / «ОРЕШКИНА» — две строки */
  margin:0 0 clamp(9px,1.5vh,14px);
}
.hero-txt .hero-role{
  margin:0 0 clamp(15px,2.8vh,26px);   /* до фразы воздуха больше, чем до имени:
                                          имя с подписью — одна группа */
  font-size:var(--hero-role-m); color:var(--ink);
  white-space:nowrap;                  /* одной строкой: перелом «С 2011 ГОДА»
                                          вниз читается обрывком, а не подписью */
}
.hero-lead{
  margin:0; max-width:var(--hero-lead-w);
  font-family:"Manrope","Inter",ui-sans-serif,sans-serif;
  font-weight:350; letter-spacing:-.004em;
  font-size:var(--hero-lead); line-height:1.3;   /* фраза дышит: строки не слипаются */
  color:var(--ink); text-wrap:pretty;
}

/* ---------- экран 2: светлая бумага ---------- */
.creed-screen{
  position:relative; isolation:isolate;
  background-color:var(--au-bg);
  color:var(--au-body);
  padding:clamp(30px,6.4vh,54px) 0 clamp(26px,4vh,40px);
}
/* Фактура двумя слоями, и разделение принципиальное (см. make_paper_light.py):
   зерно и волокна — плиткой, а крупная неоднородность и слепое тиснение —
   ОДНИМ слоем на весь блок. Держи низкие частоты в плитке — и на широком
   экране она читалась бы повторяющимся орнаментом. */
.creed-screen::before,
.creed-screen::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none}
.creed-screen::before{
  background:url(f/cotton.webp) repeat;
  background-size:var(--au-tile) var(--au-tile);
  opacity:var(--au-tex-grain); mix-blend-mode:soft-light;
}
.creed-screen::after{
  background:url(f/emboss.webp) no-repeat 50% 50%;
  background-size:100% 100%;
  opacity:var(--au-tex-emboss); mix-blend-mode:soft-light;
}
.creed{
  position:relative; z-index:1;
  max-width:var(--au-creed-w); margin:0 auto;
  padding:0 var(--au-pad-x);
}
.creed p{
  margin:0 0 var(--cr-gap);
  font-size:var(--cr-size); line-height:var(--cr-lh); font-weight:380;
  color:var(--au-muted); text-align:left; text-wrap:pretty;
}
.creed p:last-child{margin-bottom:0}
/* ключевая мысль тем же кеглем-плюс: два уровня, а не колонки и не карточка */
.creed .lead{
  font-family:"Manrope","Inter",ui-sans-serif,sans-serif;
  font-weight:400; letter-spacing:-.004em;
  font-size:var(--cr-lead); line-height:1.46; color:var(--au-body);
}

/* ============================================================
   Избранное: полоса во всю ширину + асимметричная мозаика
   ============================================================ */
/* лента начинается сразу за светлым экраном манифеста: разделителя между ними
   нет, воздух даёт только этот отступ — чтобы заголовок не лип к бумаге */
#works{padding-top:clamp(14px,2vh,24px)}
.feed{display:flex; flex-direction:column; gap:var(--gap)}
.shot{margin:0; cursor:zoom-in; position:relative}
/* полоса: единственное место, где кадр подрезается — все полосы одной
   пропорции, поэтому лента не «прыгает»; что именно останется в кадре,
   решает точка фокуса --f из data.js, а не середина картинки */
.wide .ph{aspect-ratio:var(--band)}
/* мозаика: колонки набирает app.js по высоте, кадры держат СВОИ пропорции —
   ни одинаковых плиток, ни дыр в сетке */
.mos{display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:var(--gap); align-items:start}
.col{display:flex; flex-direction:column; gap:var(--gap); min-width:0}
.col .ph{aspect-ratio:var(--r)}
@media (hover:hover){
  .shot .ph{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .shot:hover .ph img{transform:none}
  .shot:hover .ph{transform:scale(1.02)}
}

/* ============================================================
   Дипломы и сертификат — документы целиком, без рамок и подписей
   ============================================================ */
.note{
  margin:0 0 14px; font-size:12.5px; letter-spacing:.02em; color:var(--ink-dim);
}
.docs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap)}
.doc{margin:0; cursor:zoom-in}
.doc .ph{aspect-ratio:var(--doc); background:none}
.doc .ph img{object-fit:contain}     /* документ читают — не обрезаем */

/* ============================================================
   Архив: контактный лист, весь блок — ссылка на страницу архива
   ============================================================ */
.sheet{display:grid; grid-template-columns:repeat(var(--sheet-cols),1fr); gap:3px}
.sheet .ph{aspect-ratio:1}
.more{
  display:inline-flex; align-items:center; gap:10px; margin-top:13px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.more::after{content:"→"; transition:transform .35s}
a.arch:hover .more::after{transform:translateX(7px)}

/* ============================================================
   Контакты и подвал — на том же фоне, отдельным экраном не отделяются
   ============================================================ */
.contact .lead{
  font-family:"Onest",sans-serif; font-weight:500; letter-spacing:-.01em;
  font-size:clamp(20px,3.2vw,34px); line-height:1.18; max-width:24ch; margin:0 0 clamp(18px,2.6vw,28px);
}
.msgr{display:flex; gap:9px; flex-wrap:nowrap}
.msg{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px;
  border:1px solid var(--line); border-radius:999px; font-size:14px; white-space:nowrap;
  color:var(--ink-soft); transition:border-color .3s, color .3s;
}
.msg::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55}
.msg:hover{border-color:var(--accent); color:var(--accent)}

footer{padding:0 0 26px; font-size:12px; color:var(--ink-dim); letter-spacing:.02em}
.foot{
  border-top:1px solid var(--line); padding-top:18px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:22px; flex-wrap:wrap;
}
.foot .lgl{display:flex; flex-direction:column; gap:6px; max-width:64ch}
.foot .lgl a{border-bottom:1px solid var(--line); padding-bottom:1px; transition:.3s}
.foot .lgl a:hover{color:var(--accent); border-color:var(--accent)}
.oreyna{
  display:inline-flex; align-items:center; gap:9px; opacity:.5; transition:opacity .35s;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; white-space:nowrap;
}
.oreyna:hover{opacity:.9}
.oreyna::before{content:""; width:22px; height:1px; background:currentColor}

/* ============================================================
   Полосы — раскладка страницы архива (осталась прежней)
   ============================================================ */
.bands{--g:var(--gap); display:flex; flex-direction:column; gap:var(--g)}
.band{display:flex; gap:var(--g); align-items:flex-start}
.band .shot{
  flex-grow:var(--r); flex-shrink:1; flex-basis:0; min-width:0; margin:0;
  position:relative; cursor:zoom-in;
}
.band .shot .ph{aspect-ratio:var(--r)}
.band .shot figcaption{display:none}

/* ---------- лайтбокс со стрелками ---------- */
.lb{
  position:fixed; inset:0; z-index:100; background:#0F0E0D;
  display:none; align-items:center; justify-content:center; padding:min(6vmin,54px);
  -webkit-user-select:none; user-select:none;
}
.lb.on{display:flex}
.lb-stage{position:relative; display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%}
.lb-stage .ph{background:#1B1917; box-shadow:0 30px 70px hsl(30 30% 4% / .6)}
.lb-stage .ph img{object-fit:contain; object-position:50% 50%}
.lb-cap{
  position:absolute; left:0; right:0; bottom:-34px; text-align:center;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.lb-btn{
  position:absolute; z-index:2; background:hsl(36 30% 95% / .09); border:1px solid var(--line);
  color:var(--ink); cursor:pointer; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s, transform .25s;
  backdrop-filter:blur(6px);
}
.lb-btn:hover{background:hsl(36 30% 95% / .2); border-color:var(--accent)}
.lb-btn:active{transform:scale(.92)}
.lb-prev,.lb-next{width:54px; height:54px; top:50%; margin-top:-27px; font-size:22px; line-height:1}
.lb-prev{left:max(10px,2vw)} .lb-next{right:max(10px,2vw)}
.lb-close{width:44px; height:44px; top:max(10px,2vw); right:max(10px,2vw); font-size:17px}
.lb-count{
  position:absolute; top:max(16px,2.4vw); left:max(16px,2.4vw); z-index:2;
  font-size:11.5px; letter-spacing:.2em; color:var(--ink-dim); font-variant-numeric:tabular-nums;
}

/* ============================================================
   Планшет
   ============================================================ */
@media (min-width:641px){
  :root{--gap:6px; --band:16/9; --cols:3}
  .docs{grid-template-columns:repeat(3,1fr)}
  .sheet{--sheet-cols:8}
}

/* ============================================================
   Компьютер: появляется рейка, мозаика в три колонки,
   авторский блок собирается редакционной композицией
   ============================================================ */
@media (min-width:1025px){
  :root{--rail:74px; --band:2/1}
  .rail{display:flex}
  body{font-size:17px}

  /* Разворот: фотография и текст стоят рядом и вплотную, без просвета и без
     линии между ними. Мобильная композиция сюда НЕ растягивается — у широкого
     экрана свой файл 16:9 и своя точка фокуса. */
  .author{
    display:grid;
    grid-template-columns:var(--au-col-photo) calc(100% - var(--au-col-photo));
    align-items:stretch;
  }
  .hero{
    /* низ кадра темнее и обрывается раньше: имя и фраза лежат на стене слева,
       а справа кадр обязан остаться светлым — он переходит в бумагу */
    --hero-scrim:.55; --hero-scrim-end:60%;
    --hero-cut:linear-gradient(to right, #000 0 58%, transparent 86%);
  }
  .hero-ph{object-position:var(--hero-focus-d)}
  .hero::before{display:none}   /* сверху слева тёмная стена — тень не нужна */
  .hero-txt{padding:0 var(--pad) clamp(40px,8vh,86px) calc(var(--rail) + var(--pad))}
  /* имя и род занятий встают на свободное поле стены слева от фигуры — то
     самое, ради которого кадр 16:9 снят именно так; крупнее, чем на телефоне,
     и с большим воздухом до фразы */
  .hero-txt h1{margin:0 0 clamp(10px,1.1vw,16px); font-size:var(--au-name)}
  .hero-txt .hero-role{margin:0 0 clamp(22px,3.2vh,42px); font-size:11px}
  .hero-lead{max-width:min(440px, 62%); font-size:clamp(22px,1.85vw,27px); line-height:1.3}

  .creed-screen{display:flex; align-items:center; padding:calc(var(--bar) + 3vh) 0 3vh}
  .creed{max-width:var(--au-creed-w); padding:0 clamp(34px,3.4vw,64px)}
  /* на широком экране ключевая мысль заметно крупнее двух следующих абзацев:
     разница кегля здесь и есть иерархия — карточек и линий в блоке нет */
  .creed .lead{font-size:clamp(24px,2vw,30px); line-height:1.3}
  .creed p{font-size:clamp(17px,1.3vw,19px)}
  .contact .lead{max-width:30ch}
}

/* ============================================================
   Телефон
   ============================================================ */
@media (max-width:640px){
  body{font-size:16px}
  /* пять пунктов в одну строку: без капители и разрядки, интервал тянется от
     ширины экрана — на 360 точках он сжимается, на 430 расходится */
  .top{
    gap:clamp(6px,2.4vw,13px); justify-content:space-between;
    font-size:12.5px; letter-spacing:.005em; text-transform:none;
  }
  .msgr{gap:6px}
  .msg{flex:1; padding:11px 4px; font-size:13px; gap:6px}
  .foot{flex-direction:column; align-items:flex-start; gap:16px}
  .lb{padding:12px}
  .lb-prev,.lb-next{width:46px; height:46px; margin-top:-23px}
  .lb-prev{left:6px} .lb-next{right:6px}
  /* мелкое зерно на плотном экране телефона слабее — иначе оно читается шумом */
  :root{--tex:.035}
}
@media (max-width:380px){
  .top{font-size:11.5px; gap:5px}
  .msg{font-size:12px; padding:10px 3px}
}

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