/* Layout: a shelf of labelled boxes — each project is a box with a coloured tag, its address stamped on the bottom edge.
   Theme "y2012" restyles the same HTML into the 2012 site: Bootstrap 2.3.2, logo picture, bordered link table. */
:root {
  --bg: #eef1ec;
  --paper: #fbfcf8;
  --ink: #1c2420;
  --muted: #56615a;
  --line: #c9d1c8;
  --t1: #d6336c; --t2: #1c7ed6; --t3: #e8590c; --t4: #2b8a3e;
  --focus: #1c7ed6;
  --link: #0088cc; --link-hover: #005580;
  --btn-top: #ffffff; --btn-bottom: #e6e6e6; --btn-border: #cccccc;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Golos Text", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="y2012"]) {
  --bg: #121614; --paper: #1b211e; --ink: #e9eee9; --muted: #a3ada6; --line: #333d37;
  --t1: #f06595; --t2: #4dabf7; --t3: #ff922b; --t4: #51cf66; --focus: #74c0fc; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121614; --paper: #1b211e; --ink: #e9eee9; --muted: #a3ada6; --line: #333d37;
  --t1: #f06595; --t2: #4dabf7; --t3: #ff922b; --t4: #51cf66; --focus: #74c0fc; color-scheme: dark }
:root[data-theme="y2012"] {
  --bg: #ffffff; --paper: #ffffff; --ink: #333333; --muted: #999999; --line: #dddddd; --focus: #0088cc;
  --f-body: "Helvetica Neue", Helvetica, Arial, sans-serif; color-scheme: light }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--f-body); }
.wrap { max-width: 82rem; margin: 0 auto; padding-inline: 1rem; padding-block: 2rem 3rem; display: grid; gap: 2.5rem; }
a { color: inherit }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px }

header { display: grid; gap: .9rem; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap }
.domain { font: 500 .85rem var(--f-mono); color: var(--muted); letter-spacing: .02em }
.themes { display: flex; flex-wrap: wrap; gap: .25rem; border: 1px solid var(--line); border-radius: 999px; padding: .2rem }
.themes button { font: 500 .85rem var(--f-body); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: .45rem .85rem; min-height: 44px; cursor: pointer }
.themes button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }

h1 { font: 800 clamp(2.4rem, 8vw, 5.2rem)/1 var(--f-display); margin: 0; letter-spacing: -.02em; text-wrap: balance }
.txt span:nth-child(1) { color: var(--t1) } .txt span:nth-child(2) { color: var(--t2) }
h1 .logo { display: none; max-width: 100%; height: auto }
.lead { margin: 0; max-width: 40rem; color: var(--muted); font-size: 1.15rem }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0 }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; overflow: hidden }
.cover { margin: 0; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg) }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block }
/* No screenshot: the project icon (or the title's first letter) on a ground tinted with the tag colour, so every card keeps the same cover height */
.cover-icon { display: grid; place-items: center; background: var(--bg); background: color-mix(in srgb, var(--c) 14%, var(--paper)) }
.cover-icon img { width: 72px; height: 72px; object-fit: contain }
.cover-icon span { font: 800 3rem/1 var(--f-display); color: var(--c) }
.tag { align-self: flex-start; margin: 0 0 0 1.25rem; padding: .3rem .7rem .35rem; font: 600 .72rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--c); border-radius: 0 0 4px 4px }
.title { display: flex; align-items: center; gap: .75rem; margin: 1rem 1.25rem .5rem }
.title img { width: 44px; height: 44px; border-radius: 10px; flex: none }
.title h2 { font: 600 1.35rem/1.2 var(--f-display); margin: 0; text-wrap: balance; min-width: 0 }
.title h2 a { text-decoration: none } .title h2 a:hover { text-decoration: underline }
.body { flex: 1 }
.body p { margin: 0 1.25rem 1rem; color: var(--muted) }
.figure { margin: 0 1.25rem 1rem; font: 500 .9rem var(--f-mono); font-variant-numeric: tabular-nums }
.figure b { font: 800 1.6rem var(--f-display); color: var(--c); margin-right: .35rem }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 1.25rem 1rem; padding: 0; list-style: none }
.chips li { font: 500 .75rem var(--f-body); border: 1px solid var(--line); border-radius: 3px; padding: .1rem .45rem; color: var(--muted) }
.foot { border-top: 1px dashed var(--line); padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap }
.addr { font: 400 .8rem var(--f-mono); color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
.open { font: 600 .95rem var(--f-body); text-decoration: none; background: var(--c); color: var(--paper); padding: .6rem 1.1rem; border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center }
.open:hover { filter: brightness(1.08) }

footer { border-top: 1px solid var(--line); padding-top: 1.25rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem }
footer a { font-weight: 600; color: var(--ink) }
@media (prefers-reduced-motion: no-preference) { .box { transition: transform .15s } .box:hover { transform: translateY(-2px) rotate(-.3deg) } }

/* ---- Theme "Как в 2012": Bootstrap 2.3.2 look of the old hitty-missy.ru ---- */
:root[data-theme="y2012"] body { font: 14px/20px var(--f-body) }
:root[data-theme="y2012"] .wrap { max-width: 940px; padding-block: 3em 2em; gap: 3em }
:root[data-theme="y2012"] header { gap: 10px }
:root[data-theme="y2012"] .top { order: 2; justify-content: flex-end }
:root[data-theme="y2012"] .domain { font: inherit; color: var(--muted); letter-spacing: 0 }
:root[data-theme="y2012"] .themes { border: 0; padding: 0; gap: 0; border-radius: 0 }
:root[data-theme="y2012"] .themes button { font: 14px/20px var(--f-body); color: var(--ink); min-height: 30px; padding: 4px 12px; border: 1px solid var(--btn-border); margin-left: -1px; border-radius: 0; text-shadow: 0 1px 1px rgba(255,255,255,.75); background-image: linear-gradient(to bottom, var(--btn-top), var(--btn-bottom)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05) }
:root[data-theme="y2012"] .themes button:first-child { border-radius: 4px 0 0 4px; margin-left: 0 }
:root[data-theme="y2012"] .themes button:last-child { border-radius: 0 4px 4px 0 }
:root[data-theme="y2012"] .themes button[aria-pressed="true"] { background: var(--btn-bottom); background-image: none; color: var(--ink); box-shadow: inset 0 2px 4px rgba(0,0,0,.15) }
:root[data-theme="y2012"] h1 { font-size: 0; order: 1 }
:root[data-theme="y2012"] h1 .txt { display: none }
:root[data-theme="y2012"] h1 .logo { display: block }
:root[data-theme="y2012"] .lead { order: 3; max-width: none; font-size: 21px; font-weight: 200; line-height: 30px; color: var(--ink) }
:root[data-theme="y2012"] .shelf { display: block; border: 1px solid var(--line); border-left: 0; border-radius: 4px }
:root[data-theme="y2012"] .box { display: grid; grid-template-columns: 12em minmax(0, 1fr); grid-template-areas: "title tag" "title body"; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--paper); transform: none; transition: none }
:root[data-theme="y2012"] .box:first-child { border-top: 0 }
:root[data-theme="y2012"] .cover, :root[data-theme="y2012"] .title img, :root[data-theme="y2012"] .figure,
:root[data-theme="y2012"] .chips, :root[data-theme="y2012"] .foot { display: none }
:root[data-theme="y2012"] .title { grid-area: title; margin: 0; padding: 8px; border-left: 1px solid var(--line); align-items: flex-start }
:root[data-theme="y2012"] .title h2 { font: bold 14px/20px var(--f-body) }
:root[data-theme="y2012"] .title h2 a { color: var(--link) }
:root[data-theme="y2012"] .title h2 a:hover { color: var(--link-hover) }
:root[data-theme="y2012"] .tag { grid-area: tag; margin: 0; padding: 8px 8px 0; border-left: 1px solid var(--line); background: none; color: var(--ink); font: bold 14px/20px var(--f-body); letter-spacing: 0; text-transform: none; border-radius: 0; align-self: stretch }
:root[data-theme="y2012"] .body { grid-area: body; padding: 0 8px 8px; border-left: 1px solid var(--line) }
:root[data-theme="y2012"] .body p { margin: 0; color: var(--ink) }
:root[data-theme="y2012"] main { order: 2 }
:root[data-theme="y2012"] footer { order: 4; border-top: 0; padding-top: 0; font-size: 14px; color: var(--ink) }
:root[data-theme="y2012"] footer a { font-weight: normal; color: var(--link) }
@media (max-width: 480px) { :root[data-theme="y2012"] .box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tag" "body" } }