/* ===== 1.6.0 Арт-дирекция =====
   Проблема: вся страница жила в одном тоне — кремовый фон, тёпло-серый текст,
   приглушённое золото. Тёмная живопись Лены на этом фоне повисала в воздухе,
   а подписи под картинами читались как один серый блок.
   Решение: тёмный якорь в палитре, честная иерархия в подписи, подписи по центру
   картины (музейный шильдик), крупнее сами работы. ============================ */

:root{
	--ink-deep:#141110;
	--gold-deep:#7A5522;
}

/* Текст перестаёт быть серым. */
body{color:#2b2522}
.lede{color:#3a322d}

/* Работы крупнее: три в ряд на большом экране вместо четырёх. */
.works{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:72px 56px}
.card figure{height:clamp(300px,30vw,440px)}

/* Картина как физический объект: тонкий тёмный кант и глубокая тень. */
.card img{
	box-shadow:0 0 0 1px rgba(20,17,16,.18),
	           0 2px 4px rgba(20,17,16,.10),
	           0 22px 44px -20px rgba(20,17,16,.45);
}
.card:hover img{transform:translateY(-3px)}

/* Подпись — по центру под картиной, а не по левому краю ячейки. */
.card .cap{text-align:center;margin-top:22px;padding:0 6px}
.card h3{font-size:clamp(21px,1.7vw,26px);line-height:1.15;margin:0;color:var(--ink-deep)}
.card .meta{font-size:13px;line-height:1.6;margin-top:7px;color:#6b625d}
.card .meta .price{
	display:inline-block;margin-top:4px;
	font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;color:#2b2522;
}
.card .meta .status{font-style:italic;color:#6b625d}

/* Награда читается: не 10,5 px золотом по крему, а строка нормального кегля
   с золотой линией сверху. Текст берётся из поля «Награды» как есть. */
.card .awarded{
	display:block;position:static;
	max-width:26ch;margin:0 auto 10px;
	padding-top:11px;border-top:1px solid rgba(122,85,34,.45);
	font-family:"Cormorant Garamond",Georgia,serif;
	font-size:15px;line-height:1.35;letter-spacing:0;text-transform:none;
	color:var(--gold-deep);background:none;
}

/* Страница работы: награды-ссылки видно, что это ссылки. */
.awards a{color:var(--gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.awards a:hover{color:var(--ink-deep)}

@media (max-width:700px){
	.works{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:44px 24px}
	.card figure{height:clamp(210px,44vw,300px)}
	.card .awarded{font-size:13px}
}


/* Блок «In the studio» остался без картинки: там стояла работа, которую Лена
   убрала из публичного доступа. По смыслу там должна быть фотография Лены за
   работой — её пока нет в исходниках (единственное фото 303×459, для сайта мало).
   Пока фото не появилось, не показываем пустую рамку: текст занимает всю ширину. */
.grid2:has(figure:not(:has(img))){grid-template-columns:1fr}
.grid2 figure:not(:has(img)){display:none}

/* Миниатюры работ рядом с наградами на странице Awards & press. */
.award-thumb{float:left;margin:4px 18px 6px 0;display:block}
.award-thumb img{
	display:block;width:62px;height:auto;
	box-shadow:0 0 0 1px rgba(20,17,16,.18),0 6px 14px -8px rgba(20,17,16,.5);
}
.award-thumb:hover img{box-shadow:0 0 0 1px rgba(20,17,16,.3),0 8px 18px -8px rgba(20,17,16,.6)}
ul li{overflow:hidden}


/* Фотография Лены в блоке «In the studio». Кадр небольшой (525x478), поэтому
   не растягиваем его на всю колонку, а держим в естественном размере. */
.studio-photo{
	display:block;width:100%;max-width:420px;height:auto;
	box-shadow:0 0 0 1px rgba(20,17,16,.14),0 18px 36px -18px rgba(20,17,16,.4);
}

/* Фотография меньше прежней картины, поэтому у рамки в блоке «In the studio»
   не должно быть ни фиксированной пропорции, ни бежевой заливки. */
.grid2 figure:has(.studio-photo){aspect-ratio:auto;height:auto;min-height:0;background:none;overflow:visible}

/* Пара фотографий на странице About. Кадры мелкие, поэтому держим их
   в скромном размере: выглядит как разворот в каталоге, а не как растянутый JPEG. */
.about-photos{
	display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;
	margin:44px 0 8px;
}
.about-photos figure{margin:0}
.about-photos img{
	display:block;height:auto;
	box-shadow:0 0 0 1px rgba(20,17,16,.14),0 16px 32px -18px rgba(20,17,16,.4);
}
.about-photos figure:first-child img{width:min(100%,360px)}
.about-photos figure:last-child img{width:min(100%,208px)}
@media (max-width:700px){
	.about-photos{gap:16px}
	.about-photos figure:first-child img{width:min(100%,230px)}
	.about-photos figure:last-child img{width:min(100%,132px)}
}

/* Признание под метаданными. Раньше строка награды стояла над названием, и у работ
   без наград приходилось резервировать пустой слот, иначе названия в ряду разъезжались.
   Теперь над названием нет ничего переменного, выравнивание получается само,
   а пустоты в карточке не остаётся. */
.works .card .recognition{
	max-width:34ch;
	margin:10px auto 0;
	padding-top:8px;
	border-top:1px solid var(--gold);
	font-family:var(--display);
	font-size:11.5px;
	line-height:1.35;
	color:var(--gold-deep);
	text-wrap:balance;
}

/* Доступность: мелкий золотой текст на светлом фоне не проходил WCAG AA.
   Замерено на живой странице: #A07B49 при 12.5px даёт 3.41:1 на ivory и 3.06:1
   на песочном фоне, норма для мелкого текста 4.5:1. Берём уже существующий
   --gold-deep. На тёмных секциях надписей этого класса нет, проверено. */
.eyebrow{color:var(--gold-deep)}
.awards h3{color:var(--gold-deep)}

/* Навигация была 12.5-13px. Поднимаем до 14px там, где в шапке заведомо есть
   место: ниже 900px шрифт остаётся прежним, чтобы пункты не начали переноситься,
   а на 700px управление всё равно уходит в бургер. */
@media (min-width:900px){
	nav.main a{font-size:14px}
}

/* Зона нажатия в мобильном меню: пункты были ниже рекомендованных 44px. */
@media (max-width:700px){
	nav.main a{min-height:44px;display:flex;align-items:center}
}

/* Мобильная доводка. Проверено в iframe шириной 320, 375, 390 и 430: горизонтального
   переполнения нет ни на одной странице, поля формы 17px (iOS не зумит), бургер
   подменяет меню. Оставались две вещи. */
@media (max-width:700px){
	/* Строка признания была 11.5px — мелко для телефона. */
	.works .card .recognition{font-size:12.5px}

	/* Зоны нажатия: ссылки подвала были высотой 18px, часть шириной 28px.
	   Кегль не меняем, увеличиваем только область попадания до ~44px. */
	footer a{display:inline-block;padding:11px 3px}
	a.more{display:inline-block;padding:9px 0}
	.awards a{display:inline-block;padding:7px 0}
}