/* ===== 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)}
}