/*
 * Галерея .m1kle Studios. Облик 2008 года, снятый со страниц 2026-09-15:
 * прежде он лежал в атрибутах <font>, <table> и bgcolor, теперь — здесь.
 * Цвета, кегли и шрифты те же; на широком экране страницы совпадают
 * со снимками до переписывания. Ниже 700 точек ширины плитки и работы
 * переносятся строками — раньше страница уезжала за край экрана.
 */

/* Палитра 2008 года — по имени, чтобы цвет назывался один раз. */
:root {
    --fon: #CCC9B7;
    --fon-shapki: #CC5F5F;
    --fon-ramki: #CCB966;
    --fon-razdela: #CC6C6C;
    --fon-podpisi: #2D2D2D;
    --fon-raboty-o: #915832;
    --fon-vse: #519943;
    --ssylka: #0000EE;
    --ssylka-byla: #551A8B;
    --shrift: Tahoma, Verdana, sans-serif;
    --shrift-zagolovka: Cambria, Georgia, serif;
    --shrift-ssylok: Arial, Helvetica, sans-serif;
    --prevyu: 230px;
    --shirina: 1180px;
    --plitka: 228px;
    --promezhutok: 10px;
}

/* ------------------------------------------------------------- общее */
body {
    margin: 8px;
    background-color: var(--fon);
    font-family: var(--shrift);
    font-size: 13px;
    color: #000;
}
body.rabota { background-color: #fff; }
/* «Высказаться» — на белом, шрифтом браузера, как была. */
body.belaya { background-color: #fff; font-family: initial; font-size: initial; }
body.noch { background-color: #000; color: #fff; font-size: 15px; }
a { color: var(--ssylka); }
a:visited { color: var(--ssylka-byla); }
img { border: 0; vertical-align: middle; }
.logotip img { vertical-align: top; }

/* Шапка главной: полоса на всю ширину, логотип по центру. */
.shapka {
    background-color: var(--fon-shapki);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}
.shapka img { max-width: 100%; height: auto; }

/* Шапка выставочных страниц: логотип слева, число работ справа. */
.shapka-vystavki {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.shapka-vystavki .vsego { font-style: italic; }

/* Подпись внизу выставочных страниц. */
.podpis {
    font-family: var(--shrift-ssylok);
    font-size: 14px;
    font-style: italic;
    margin-top: 6em;
}
body.rabota .podpis { font-style: normal; margin-top: 2em; }
.podpis .nomer { font-size: 7px; display: block; }

/* Страница «такого нет». */
.net { padding: 2em; font-family: var(--shrift-ssylok); font-size: 14px; }

/* ---------------------------------------------------------- главная */
.glavnaya { width: var(--shirina); max-width: 100%; margin: 0 auto; }

.razdel-zagolovok {
    background-color: var(--fon-ramki);
    border: 3px double gray;
    text-align: center;
    font-family: var(--shrift-zagolovka);
    font-size: 15px;
    font-weight: bold;
}

/* Плитки выставок: пять в ряд по 228 точек. Верх — цвет выставки,
   картинка 104×78 и имя; ниже автор с популярностью и полоса вида. */
.plitki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--promezhutok);
    margin-top: 6px;
}
.plitka {
    width: var(--plitka);
    flex: 0 0 var(--plitka);
    display: flex;
    flex-direction: column;
}
.plitka-verh {
    height: 92px;
    padding: 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--shrift-ssylok);
    font-size: 15px;
    line-height: 1.2;
}
.plitka-verh a:first-child { flex: 0 0 auto; line-height: 0; }
.plitka-verh img { width: 104px; height: 78px; }
.plitka-imya, .plitka-imya:visited { color: #fff; text-decoration: none; }
.plitka-avtor {
    background-color: #000;
    color: #fff;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 2px 0 2px 5px;
    white-space: nowrap;
}
.plitka-pop { background-color: #919191; padding: 2px 5px; }
.plitka-vid { font-size: 11px; text-align: center; padding: 2px 0; }
.vid-foto { background-color: #58A551; }
.vid-risunki { background-color: #D8923C; }
.vid-kartiny { background-color: #81AFE8; }
/* В «Все выставки» цвета полос были именованные — оставлены. */
.vse-vystavki .vid-risunki { background-color: orange; }
.vse-vystavki .vid-kartiny { background-color: lightblue; }

/* Подписи под плитками: две первые плитки — студийные фотографии.
   Все одной высоты, текст по центру. */
.razdely {
    display: flex;
    flex-wrap: wrap;
    gap: var(--promezhutok);
    margin: var(--promezhutok) 0;
}
.razdel {
    flex: 0 0 var(--plitka);
    width: var(--plitka);
    min-height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--fon-razdela);
    border: 1px dotted black;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
}
.razdel-shirokij { flex-basis: calc(var(--plitka) * 2 + var(--promezhutok)); width: calc(var(--plitka) * 2 + var(--promezhutok)); }

/* О галерее и новость. */
.o-galeree {
    display: flex;
    border: 3px double gray;
    background-color: var(--fon-ramki);
    text-align: justify;
    margin-top: 1em;
    min-height: 100px;
    box-sizing: border-box;
}
.o-galeree > div { padding: 1px; }
.o-galeree .tekst { flex: 1 1 auto; }
.o-galeree .novost { flex: 0 0 300px; border-left: 1px solid black; margin-left: 5px; padding-left: 3px; }
.o-galeree h2 {
    display: inline;
    font-family: var(--shrift-zagolovka);
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

/* Две афиши в родном размере 450×200 — они нарисованы под него,
   и растягивать их владелец запретил (15.09.2026). Стоят по центру. */
.afishi { display: flex; justify-content: center; margin-top: 1em; gap: 40px; }
.afishi a { flex: 0 0 auto; line-height: 0; }
.afishi img { max-width: 100%; height: auto; }

/* Контакты. */
.kontakty {
    border: 1px dashed black;
    background-color: var(--fon-razdela);
    margin-top: 1em;
    padding: 1px;
}
.kontakty-verh { display: flex; justify-content: space-between; }
.kontakty h2 { font-family: var(--shrift-zagolovka); font-size: 15px; font-weight: bold; margin: 0; display: inline; }
.kontakty img { width: 10px; height: 10px; }

/* ------------------------------------------------------------ выставка */
.vystavka-imya {
    width: var(--shirina);
    max-width: 100%;
    margin: 2.5em auto 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-family: var(--shrift-ssylok);
    font-size: 15px;
    padding: 1px;
}
.vystavka-imya .stranica { font-style: italic; font-size: 13px; }

.vystavka {
    display: flex;
    width: var(--shirina);
    max-width: 100%;
    margin: 1em auto 0;
    gap: 0;
    align-items: flex-start;
}
.vystavka-raboty { flex: 0 0 952px; max-width: 952px; }
.vystavka-bok { flex: 0 0 220px; max-width: 220px; margin-left: auto; }

/* Работы: четыре в ряд, превью 230 — чтобы картину было видно,
   а не угадывать. Карточка одной ширины и высоты, ряды ровные. */
.raboty {
    display: grid;
    grid-template-columns: repeat(4, calc(var(--prevyu) + 2px));
    gap: 8px;
    justify-content: start;
}
.rabota-kartochka {
    justify-self: center;
    align-self: start;
    width: calc(var(--prevyu) + 2px);
    border: 1px solid gray;
    box-sizing: border-box;
    text-align: center;
}
.rabota-kartochka a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--prevyu);
    line-height: 0;
}
.prevyu {
    max-width: var(--prevyu);
    max-height: var(--prevyu);
    width: auto;
    height: auto;
}
/* Подпись: имя до двух строк, год ниже; высота у всех одна. */
.rabota-podpis {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 52px;
    box-sizing: border-box;
    padding: 4px 6px;
    background-color: var(--fon-podpisi);
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
}
.rabota-podpis b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.rabota-podpis .god { color: #C8C8C8; font-size: 10px; }
.stranicy {
    font-family: var(--shrift-ssylok);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 1em;
}
.stranicy a, .stranicy span { margin-right: 0.6em; }

/* Боковая колонка. */
.o-vystavke {
    border: 1px solid black;
    background-color: lightyellow;
    font-size: 12px;
}
.o-vystavke h2, .pokazat h2 {
    background-color: black;
    color: white;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    margin: 0;
    padding: 1px;
}
.o-vystavke p { margin: 0; padding: 1px; }
.pokazat { margin-top: 1em; font-size: 12px; text-align: center; }
.pokazat > a, .pokazat details {
    display: block;
    border: 1px solid black;
    border-top: 0;
    padding: 1px;
}
.pokazat > a { background-color: lightblue; font-weight: bold; }
.pokazat details.cvet-1, .pokazat details.cvet-3 { background-color: lightgreen; }
.pokazat details.cvet-2 { background-color: lightyellow; }
.pokazat summary { cursor: pointer; font-weight: bold; color: var(--ssylka); text-decoration: underline; }
.pokazat summary::-webkit-details-marker { display: none; }
.pokazat summary { list-style: none; }
.pokazat details a { display: block; border: 1px solid black; text-align: left; color: black; font-weight: bold; margin-top: 1px; }

/* ------------------------------------------------------------- работа */
.rabota-ekran {
    display: grid;
    grid-template-columns: 10% 25% 1fr 25% 10%;
    align-items: center;
    min-height: 60vh;
}
.rabota-ekran .domoj { align-self: start; text-align: center; }
.rabota-ekran .domoj img { border: 1px solid gray; }
.rabota-ekran .strelka { text-align: center; }
.rabota-ekran > div { min-width: 0; }
.rabota-ekran .polotno { text-align: center; }
.rabota-ekran .polotno img { max-width: 100%; height: auto; }
.rabota-o {
    width: 250px;
    max-width: 100%;
    margin: 10px 0 0 auto;
    background-color: var(--fon-raboty-o);
    border: 1px solid black;
    text-align: left;
    font-family: var(--shrift-zagolovka);
    font-size: 14px;
    padding: 1px;
}

.mnenie-i-pechat { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 2em; }
.mnenie {
    width: 500px;
    max-width: 100%;
    border: 1px dotted black;
    box-sizing: border-box;
    padding: 5px;
    font-family: var(--shrift-ssylok);
}
.mnenie h2 {
    background-color: black;
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 0 5px;
}
.ocenki { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.ocenki form { display: contents; }
.ocenka {
    min-width: 100px;
    flex: 0 0 auto;
    text-align: center;
    padding: 1px;
    box-sizing: border-box;
}
.ocenka-shedevr { background-color: lightgreen; }
.ocenka-tak-sebe { background-color: #FFF091; }
.ocenka-koshmar { background-color: #FF857F; }
/* Кнопка голоса выглядит ссылкой: кегль — доля голосов, задаётся страницей. */
.ocenka button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--ssylka);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--shrift-ssylok);
    line-height: 1.1;
}
.ocenka small { font-size: 10px; }
.vyskazatsya, .vyskazatsya:visited { color: darkgreen; font-size: 13px; }
.otzyv { border-top: 1px dotted black; margin-top: 5px; padding-top: 3px; font-size: 14px; font-style: italic; }
.otzyv .kogda { display: block; text-align: right; font-size: 12px; font-weight: bold; font-style: normal; }
.pechat { font-family: var(--shrift-ssylok); font-size: 14px; font-weight: bold; padding: 5px; }

/* Версия для печати: одна картинка на листе. */
body.pechat-lista { margin: 0; background: #fff; }
body.pechat-lista img { max-width: 100%; height: auto; }

/* ------------------------------------------------------ все выставки */
.vse-zagolovok {
    width: 500px;
    max-width: 100%;
    margin: 3em auto 2em;
    background-color: var(--fon-vse);
    font-family: Georgia, serif;
    font-size: 40px;
    text-align: center;
    padding: 1px;
    box-sizing: border-box;
}
.vse-vystavki .plitki { width: var(--shirina); max-width: 100%; margin: 0 auto; gap: 40px var(--promezhutok); }

/* ---------------------------------------------------------- о художнике */
.o-hudozhnike { display: flex; justify-content: center; gap: 0; margin-top: 8em; align-items: flex-start; }
.o-hudozhnike section, .o-napravlenii {
    border: 3px double gray;
    background-color: var(--fon-ramki);
    box-sizing: border-box;
    padding: 1px;
}
.o-hudozhnike .zhizn { flex: 0 0 600px; max-width: 600px; font-size: 12px; }
.o-hudozhnike .kratko { flex: 0 0 300px; max-width: 300px; font-size: 13px; }
.o-hudozhnike h1, .o-napravlenii h1 {
    font-family: var(--shrift-zagolovka);
    font-size: 2em;
    margin: 0.67em 0 0.67em 5%;
}
.o-napravlenii { width: 70%; margin: 8em auto 0; font-size: 16px; font-family: "Times New Roman", serif; }
.o-napravlenii h1 { margin-left: 0; }

/* ---------------------------------------------------------- высказаться */
.skazat { text-align: center; margin-top: 4em; }
.skazat p { font-size: 18px; margin: 0; }
.skazat .primechanie { font-size: 16px; font-style: italic; }
.skazat textarea { font-size: 15px; font-family: var(--shrift-ssylok); width: 400px; height: 200px; max-width: 100%; margin-top: 2em; }
.skazat button { font-size: 30px; display: block; margin: 0.3em auto; }
.skazat .oshibka { font-weight: bold; }
.spasibo { text-align: center; }
.spasibo p { font-size: 48px; margin: 0 0 8em; }

/* ---------------------------------------------------------------- ночь */
.noch-shapka { background-color: gray; min-height: 100px; text-align: center; }
.noch-telo { text-align: center; margin-top: 30vh; }
.noch-zagolovok { font-size: 24px; font-weight: bold; }
.noch-tekst { font-size: 12px; }
body.noch a { color: var(--ssylka); }
.noch-podval { text-align: center; font-family: var(--shrift-ssylok); font-size: 14px; margin-top: 30vh; }

/* --------------------------------------------------------- узкий экран */
@media screen and (max-width: 700px) {
    .plitki, .razdely { justify-content: center; }
    .razdel, .razdel-shirokij { flex-basis: 48%; width: 48%; }
    .plitka { flex-basis: 100%; width: 100%; max-width: 360px; }
    .o-galeree { flex-direction: column; }
    .o-galeree .novost { flex-basis: auto; border-left: 0; border-top: 1px solid black; margin: 5px 0 0; padding: 3px 0 0; }
    .afishi { flex-direction: column; align-items: stretch; }
    .vystavka { flex-direction: column; }
    .vystavka-raboty, .vystavka-bok { flex-basis: auto; max-width: 100%; width: 100%; margin-left: 0; }
    .vystavka-bok { margin-top: 1em; }
    .raboty { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); justify-content: center; }
    .rabota-kartochka { width: 100%; max-width: calc(var(--prevyu) + 2px); }
    .rabota-kartochka a { height: 180px; }
    .prevyu { max-width: 100%; max-height: 180px; }
    .rabota-ekran { grid-template-columns: 1fr 1fr; }
    .rabota-ekran .domoj { grid-column: 1 / 3; text-align: left; }
    .rabota-ekran .polotno { grid-column: 1 / 3; grid-row: 2; }
    .rabota-ekran .strelka { grid-row: 3; }
    .rabota-ekran .pusto { display: none; }
    .rabota-o { margin: 10px auto 0; }
    .mnenie-i-pechat { flex-direction: column; }
    .ocenki { flex-wrap: wrap; }
    .o-hudozhnike { flex-direction: column; align-items: stretch; margin-top: 2em; }
    .o-hudozhnike .zhizn, .o-hudozhnike .kratko { flex-basis: auto; max-width: 100%; }
    .o-napravlenii { width: 100%; margin-top: 2em; }
    .o-hudozhnike h1, .o-napravlenii h1 { font-size: 1.5em; overflow-wrap: anywhere; }
    .podpis { margin-top: 2em; }
    .skazat { margin-top: 2em; }
}