:root{--w:#faf9f6;--ink:#1b1a18;--soft:#8c8880;--rule:#e6e3dc;--tint:#f3f1ea;--brass:#9a7b4f}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--w);color:var(--ink);font-family:'Instrument Sans',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--w)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
header{position:sticky;top:0;background:rgba(250,249,246,.94);backdrop-filter:blur(6px);z-index:10}
.nav{display:flex;justify-content:space-between;align-items:baseline;padding:24px 32px;max-width:1180px;margin:0 auto;flex-wrap:wrap;gap:12px}
.logo{font-size:15px;font-weight:500;letter-spacing:.34em}
nav{display:flex;gap:28px;flex-wrap:wrap}
nav a{font-size:13px;color:var(--soft);transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--ink)}
/* return to the homepage, sits under the menu on every inner page */
.tohome{display:flex;justify-content:flex-end;padding-top:20px}
.tohome a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.tohome a:hover{color:var(--ink);border-color:var(--rule)}
.hero{padding:120px 0 90px}
.hero h1{font-size:clamp(28px,4.4vw,52px);font-weight:400;line-height:1.18;max-width:840px;letter-spacing:-.01em}
.hero h1 .q{color:var(--soft)}
.hero .now{margin-top:30px;color:var(--soft);font-size:16px}
.hero .now b{color:var(--ink);font-weight:500}
.hero .now a{border-bottom:1px solid var(--rule)}
.hero .now a:hover{border-color:var(--ink)}
section{padding:76px 0}
.lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:40px}
/* works */
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:76px 56px}
.wk img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--tint)}
.wk.big{grid-column:1/3}
.wk.big img{aspect-ratio:16/9}
.noimg{aspect-ratio:1;background:var(--tint);display:flex;align-items:center;justify-content:center}
.noimg.nl{aspect-ratio:3/2}
.noimg span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c2bdb2}
.cap{margin-top:15px;display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.cl h3{font-size:16px;font-weight:500;display:inline}
.cl .m{font-size:13px;color:var(--soft);margin-top:2px}
.st{font-size:12.5px;color:var(--soft);text-align:right;white-space:nowrap;flex-shrink:0}
.st.av{color:var(--brass)}
.st.tbc{font-style:italic;color:#b3ada0}
.note{font-size:13.5px;color:var(--soft);margin-top:10px;max-width:520px}
@media(max-width:700px){.wgrid{grid-template-columns:1fr}.wk.big{grid-column:auto}.wk.big img{aspect-ratio:1}.st{white-space:normal}}
/* series index — row list */
.sidx{border-top:1px solid var(--rule)}
.srow{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--rule);transition:background .25s ease}
.srow:hover{background:var(--tint)}
/* Diagonal tile strip. Every tile is cut on the same slant, including the two
   outer edges, so the whole strip reads as one parallelogram. Tiles overlap by
   the width of the cut; the strip keeps a fixed width whatever the photo count,
   so every row lines up on the same edge.
   On hover the tiles push apart and the cut straightens out at the same time,
   opening the picture up to a full rectangle. */
.tstrip{display:flex;width:478px;height:190px;flex:none}
.tstrip img,.tph{flex:1 1 0;min-width:0;height:100%;object-fit:cover;display:block;background:var(--tint);
  clip-path:polygon(46px 0px,100% 0px,100% 100%,0px 100%);
  transition:transform .75s cubic-bezier(.2,.7,.3,1),clip-path .75s cubic-bezier(.2,.7,.3,1)}
.tstrip img+img{margin-left:-46px}
.tstrip img:last-child,.tstrip .tph{clip-path:polygon(46px 0px,100% 0px,calc(100% - 46px) 100%,0px 100%)}
.rmeta{text-align:right}
.rmeta h3{font-size:26px;font-weight:400;line-height:1.2}
.rmeta .go{display:inline-block;margin-left:.4em;color:var(--brass);opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
.srow:hover .rmeta .go{opacity:1;transform:translateX(0)}
.rmeta .d{font-size:13px;color:var(--soft);margin-top:8px}
.rmeta .s{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:8px}
@media(hover:hover) and (pointer:fine){
  .srow:hover .tstrip img{clip-path:polygon(0px 0px,100% 0px,100% 100%,0px 100%)}
  .srow:hover .tstrip img:last-child{clip-path:polygon(0px 0px,100% 0px,calc(100% - 0px) 100%,0px 100%)}
  .srow:hover .tstrip img:first-child{transform:translateX(-72px)}
  .srow:hover .tstrip img:last-child{transform:translateX(72px)}
  /* narrower windows: keep the spread inside the viewport */
  @media(max-width:1280px){
    .srow:hover .tstrip img:first-child{transform:translateX(-40px)}
    .srow:hover .tstrip img:last-child{transform:translateX(40px)}
  }
}
@media(max-width:900px){
  .tstrip{width:360px;height:150px}
  .tstrip img,.tph{clip-path:polygon(34px 0px,100% 0px,100% 100%,0px 100%)}
  .tstrip img+img{margin-left:-34px}
  .tstrip img:last-child,.tstrip .tph{clip-path:polygon(34px 0px,100% 0px,calc(100% - 34px) 100%,0px 100%)}
}
@media(max-width:700px){.srow{grid-template-columns:1fr;gap:18px}.rmeta{text-align:left}.tstrip{width:100%;height:150px}}
@media(prefers-reduced-motion:reduce){
  .tstrip img,.rmeta .go{transition:none}
  .srow:hover .tstrip img{transform:none}
}
/* visual break between the series block and the about/press/contact cluster on the homepage */
.site-info{background:var(--tint);border-top:1px solid var(--rule)}
.site-info section+section{border-top:1px solid var(--rule)}
/* statement / bio */
.stmt{max-width:700px;font-size:clamp(19px,2.2vw,24px);line-height:1.55}
.stmt p+p{margin-top:1.2em}
.stmt em{font-style:italic}
.bio{max-width:640px;margin-top:64px;color:#5d594f;font-size:15px}
.bio h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);font-weight:500;margin-bottom:16px}
.bio p+p{margin-top:1em}
.bio a{border-bottom:1px solid var(--rule)}
.bio a:hover{border-color:var(--ink)}
.meta-note{margin-top:40px;font-size:13.5px;color:var(--soft);max-width:540px}
/* press */
.press{max-width:760px;border:1px solid var(--rule);padding:34px 32px}
.press+.press{margin-top:24px}
.press h3{font-size:19px;font-weight:500}
.press .m{font-size:13.5px;color:var(--soft);margin-top:12px;line-height:1.9}
/* documentation shots of the issue, inside the press card — reference, not works */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
/* the whole shot grows on hover — it lifts above its neighbours instead of
   being zoomed into and clipped by its own box */
.pshot{display:block;background:var(--tint);cursor:zoom-in;position:relative}
.pshot:hover{z-index:2}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--tint);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pshot:hover img{transform:scale(1.12)}
.pcredit{margin-top:14px;font-size:12px;color:var(--soft);letter-spacing:.02em}
.plink{margin-top:20px;font-size:13.5px}
.plink a{color:var(--brass);border-bottom:1px solid var(--rule);transition:border-color .2s}
.plink a:hover{border-color:var(--brass)}
@media(max-width:640px){.pgrid{grid-template-columns:1fr 1fr;gap:8px}}
/* lightbox — opens a press photo full size on the page */
.lbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(250,249,246,.70);padding:48px 32px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.lbox.open{opacity:1;pointer-events:auto}
.lbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lbox-close{position:absolute;top:22px;right:28px;background:none;border:none;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);padding:8px}
.lbox-close:hover{color:var(--ink)}
.lbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
  font:inherit;font-size:26px;line-height:1;color:var(--soft);padding:18px 16px;transition:color .2s}
.lbox-nav:hover{color:var(--ink)}
.lbox-prev{left:14px}
.lbox-next{right:14px}
.lbox-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.18em;color:var(--soft);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .lbox{padding:56px 12px 64px}
  .lbox-nav{font-size:22px;padding:14px 10px}
  .lbox-prev{left:0}
  .lbox-next{right:0}
}
@media(prefers-reduced-motion:reduce){.pgrid img,.lbox{transition:none}.pshot:hover img{transform:none}}
/* contact */
.clinks{display:flex;flex-direction:column;gap:10px}
/* Адрес почты: латунный блик проходит по буквам через секунду после
   загрузки и дальше раз в двадцать секунд — четыре с половиной секунды
   медленного движения, потом покой. Достаточно, чтобы взгляд
   зацепился, недостаточно, чтобы это выглядело как реклама.
   Сам блик — градиент, обрезанный по форме букв: цвет текста прозрачный,
   а «краска» — движущийся фон под ним. */
.clinks a{font-size:clamp(20px,3vw,28px);width:fit-content;
  border-bottom:1px solid var(--rule);
  background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 42%,var(--brass) 50%,var(--ink) 58%,var(--ink) 100%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sheen 20s ease-in-out 1s infinite;
  transition:border-color .25s}
@keyframes sheen{0%{background-position:100% 0}22.5%,100%{background-position:0 0}}
/* при наведении — целиком латунный и подчёркивание в тон */
.clinks a:hover{background-image:linear-gradient(var(--brass),var(--brass));border-color:var(--brass);animation:none}
/* тем, кто попросил систему не анимировать, — просто спокойный адрес */
@media (prefers-reduced-motion:reduce){.clinks a{animation:none}}
/* series page */
.sv{padding:64px 32px 110px;max-width:900px}
.sv.wide{max-width:1180px}
.back{font-size:13px;color:var(--soft);display:inline-block;margin-bottom:52px;letter-spacing:.06em}
.back:hover{color:var(--ink)}
.sv h2{font-size:clamp(30px,4.5vw,44px);font-weight:400}
.sv-d{font-size:13px;color:var(--soft);margin-top:8px}
.sv-stmt{margin-top:32px;font-size:18px;max-width:640px}
.sv-extra{margin-top:14px;font-size:14px;color:var(--soft);font-style:italic}
.wlist{margin-top:70px;display:flex;flex-direction:column;gap:84px}
.wk.wl img{aspect-ratio:auto;height:auto}
.crucible{margin-top:60px;border:1px solid var(--rule);padding:32px}
.crucible .lbl{margin-bottom:14px}
.cr-text{font-size:14px;color:var(--soft);max-width:540px}
.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}
.cr-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--tint)}
@media(max-width:560px){.cr-grid{grid-template-columns:1fr 1fr}}
footer{border-top:1px solid var(--rule);padding:32px 0 60px;color:var(--soft);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ── подписка ───────────────────────────────────────────────────────────
   Кнопка латунная — это единственный насыщенный цвет на сайте, поэтому
   она заметна на монохромной странице без всякого нажима. */
.sub{margin-top:64px;padding-top:40px;border-top:1px solid var(--rule);max-width:560px}
.sub-line{font-size:16px;color:var(--soft);margin-bottom:24px}
.sub-open{font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w);background:var(--brass);border:1px solid var(--brass);
  padding:14px 26px;cursor:pointer;position:relative;overflow:hidden;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .15s}
/* наведение: светлее и с мягким ореолом — не только подъём */
.sub-open:hover{background:#a8895a;border-color:#a8895a;transform:translateY(-1px);
  box-shadow:0 0 0 5px rgba(154,123,79,.16),0 6px 18px -8px rgba(154,123,79,.55)}
.sub-open:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.sub-form{margin-top:0}
/* Латунь переходит с первой кнопки на Send: цвет всегда отмечает следующий
   шаг. Если оставить Send бледной надписью, взгляд теряет, куда идти
   дальше, и человек бросает форму заполненной. */
.sub-row{display:flex;gap:14px;max-width:460px;align-items:stretch}
.sub-field{flex:1;display:flex;border-bottom:1px solid var(--ink)}
.sub-row input[type=email]{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:none;border:0;padding:10px 0;outline:none}
.sub-row input[type=email]::placeholder{color:#b9b4aa}
.sub-row input[type=email]:focus{outline:none}
.sub-field:focus-within{border-bottom-color:var(--brass)}
.sub-send{font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w);background:var(--brass);border:1px solid var(--brass);
  padding:12px 30px;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .15s}
.sub-send:hover{background:#a8895a;border-color:#a8895a;transform:translateY(-1px);
  box-shadow:0 0 0 5px rgba(154,123,79,.16),0 6px 18px -8px rgba(154,123,79,.55)}
.sub-send:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.sub-send[disabled]{opacity:.55;cursor:default;transform:none}
.sub-note{font-size:12.5px;color:var(--soft);margin-top:14px;max-width:420px;line-height:1.55}
.sub-note a{border-bottom:1px solid var(--rule)}
.sub-note a:hover{border-color:var(--ink)}
.sub-done,.sub-fail{font-size:16px;margin-top:4px}
.sub-done{color:var(--ink)}
.sub-fail{color:#a4453a}
/* поле-ловушка для роботов: убрано с глаз, но доступно программам */
.sub-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── правовые страницы ─────────────────────────────────────────────── */
.legal{max-width:640px}
.legal-lead{font-size:17px;margin-bottom:44px;line-height:1.6}
.legal h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--soft);margin:34px 0 10px}
.legal p{margin-bottom:10px}
.legal ul{list-style:none;margin:6px 0 10px}
.legal li{padding-left:18px;position:relative;margin-bottom:4px}
.legal li:before{content:"—";position:absolute;left:0;color:var(--soft)}
.legal a{border-bottom:1px solid var(--rule)}
.legal a:hover{border-color:var(--ink)}
.legal-date{margin-top:44px;font-size:12.5px;color:var(--soft)}
/* второй вопрос: появляется, когда форма раскрыта */
.sub-ask{font-size:17px;color:var(--ink);margin-bottom:18px}

/* ── превью инстаграма ──────────────────────────────────────────────────
   Своё, а не встроенный виджет Meta: их код ставит cookie и сообщает
   о каждом посетителе сайта, даже о том, кто на блок не смотрел.
   Кадры берутся из data/instagram.json. */
.ig{display:block;max-width:760px;margin-top:64px;padding-top:40px;
  border-top:1px solid var(--rule)}
.ig-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ig-mark{color:var(--soft);display:flex;transition:color .25s}
.ig-handle{font-size:15px;font-weight:500;letter-spacing:.01em}
.ig-go{margin-left:auto;font-size:14px;color:var(--soft);transition:transform .25s,color .25s}
/* Лента 4×3: двенадцать последних кадров профиля. */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* height:auto обязателен: в разметке у картинок есть атрибут height,
   и без этого он перебивает aspect-ratio — плитки вытягиваются. */
.ig-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--tint);filter:grayscale(.12);transition:filter .35s,transform .35s}
.ig-line{margin-top:16px;font-size:13.5px;color:var(--soft)}
/* оживает целиком при наведении на любую часть */
.ig:hover .ig-mark{color:var(--brass)}
.ig:hover .ig-go{color:var(--brass);transform:translate(2px,-2px)}
.ig:hover .ig-grid img{filter:grayscale(0)}
.ig:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
/* На телефоне четыре в ряд — это плитки по 80 пикселей, мелко.
   Три в ряд читаются, а нижний ряд остаётся полным. */
@media (max-width:560px){.ig-grid{grid-template-columns:repeat(3,1fr);gap:4px}}

/* ── контакты ───────────────────────────────────────────────────────────
   Адрес сам по себе не объясняет, можно ли писать по делу. Строка над
   ним называет повод, строка под ним — обещает живого человека. */
.clead{font-size:17px;line-height:1.55;max-width:520px;margin-bottom:28px}
.cnote{font-size:13.5px;color:var(--soft);margin-top:16px}

/* ── блик на латунных кнопках ─────────────────────────────────────────
   Светлая полоса медленно проходит по кнопке слева направо, 4.5 секунды.
   Расписание неравномерное, поэтому его ведёт скрипт (subscribe.js),
   а не CSS: первый раз через 3 секунды после загрузки, второй через 8,
   дальше — раз в десять секунд: пять с половиной секунд покоя между проходами.
   Чаще нельзя: при проходе в 4.5 секунды интервал в 5 дал бы паузу
   в полсекунды, то есть непрерывное мерцание. */
.sub-open::after,.sub-send::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:55%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-200%) skewX(-12deg);pointer-events:none}
.sheen-run::after{animation:btn-sheen 4.5s ease-in-out forwards}
@keyframes btn-sheen{from{transform:translateX(-200%) skewX(-12deg)}to{transform:translateX(320%) skewX(-12deg)}}
/* пока курсор на кнопке — блик не спорит со свечением */
.sub-open:hover::after,.sub-send:hover::after{opacity:0}