/* Volodymyr Kolbasa — home page, version 10, 12 Oct 2026: the plan of a house.
   His words: "you are basically just repeating the spring design. do something new! be brave! push it far!
   ... deliver the narrative!"
   Idea, from the works themselves: every one of them happens inside somebody's home - a house a man will not
   leave, a child's room, flats after a siege, a writer's rooms, villages under water. So the home page is one
   floor plan drawn on white. Each work is a room; you walk in through the front door and from room to room;
   the last room is the one with a person in it; the back door is his address.
   Score: front door ... a quiet invitation | the rooms ... one life at a time | the long room ... dry wit,
   five objects | the corridor ... a plain record | the last room ... warmth | the back door ... "write to me".
   Walls are the 2px gaps of the grid; the outer wall is the border. Wording is untouched. */

.top--plan { padding-bottom: 28px; }
.plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; background: var(--ink); border: 5px solid var(--ink); }
.room { position: relative; background: var(--bg); padding: 52px 32px 32px; min-width: 0; transition: background-color 0.5s ease; }
.room:hover { background: #fbf9f5; }

/* a door: a gap in the wall, the leaf, and the arc it swings through */
.door { position: absolute; top: -3px; left: var(--door, 40px); width: 40px; height: 4px; background: var(--bg); z-index: 2; }
.door svg { position: absolute; top: 3px; left: 0; width: 40px; height: 40px; overflow: visible; fill: none; stroke: var(--ink); }
.door__arc { stroke-width: 1; stroke-dasharray: 2 3; }
.door__leaf { stroke-width: 2; transform-origin: 0 0; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .room.lit:not(.is-lit):not(:hover) .door__leaf { transform: rotate(-90deg); }
.door--front { top: -6px; height: 7px; }
.door--front svg { top: 6px; }
.door--back { top: auto; bottom: -6px; height: 7px; }
.door--back svg { top: auto; bottom: 6px; transform: scaleY(-1); }

/* the number of the room, as on a drawing */
.room__no { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 400 12px/1 "IBM Plex Mono", monospace; }

/* the hall */
.room--hall { grid-column: 1 / -1; padding: 64px 32px 44px; }
.hall__line { font: 400 clamp(28px, 3.1vw, 44px)/1.12 var(--serif); max-width: 26em; }
.hall__proof { font-size: 17px; margin-top: 16px; }

/* the rooms */
.room h2 { font: 400 clamp(32px, 3vw, 44px)/1.02 var(--serif); text-wrap: balance; padding-right: 30px; }
.room .entry__meta { margin-top: 8px; }
.room .entry__text { margin-top: 18px; font-size: 16.5px; }
.room .entry__text b { font-size: 24px; line-height: 1.18; }
.room figure img { width: 100%; height: 100%; object-fit: cover; }
.r-8 { grid-column: span 8; }
.r-7 { grid-column: span 7; }
.r-5 { grid-column: span 5; }
.r-4 { grid-column: span 4; }
.r-12 { grid-column: 1 / -1; }
/* picture as a window in the left wall, floor to ceiling */
.room--l { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; --door: calc(100% - 96px); }
.room--l > figure { margin: -52px 0 -32px -32px; min-height: 340px; position: relative; overflow: hidden; }
.room--l > figure img { position: absolute; inset: 0; }
.room--l .room__no { right: auto; left: calc(45.45% + 4px); }
/* picture as a window in the bottom wall */
.room--b { display: flex; flex-direction: column; }
.room--b > div { flex: 1 0 auto; }
.room--b > figure { margin: 28px -32px -32px; aspect-ratio: 3 / 2; overflow: hidden; }

/* the long room: five objects */
.room--shelf .shelf__meta { margin-top: 8px; }
.room--shelf .grid--3 { margin-top: 24px; }

/* the corridor */
.room--other h2 { font-size: 26px; }
.room--other .rows { margin-top: 18px; }
.room--other .rows li { grid-template-columns: 3.4em minmax(0, 1fr); padding: 13px 0; }
.room--other .rows b { font-size: 23px; }

/* the last room: the one with a person in it */
.room--about { background: var(--tint); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 44px; padding-bottom: 56px; --door: 62%; }
.room--about:hover { background: var(--tint); }
.room--about > figure { margin: -52px 0 -56px -32px; min-height: 420px; position: relative; overflow: hidden; }
.room--about > figure img { position: absolute; inset: 0; }
.room--about .first { font: 400 clamp(28px, 2.8vw, 38px)/1.12 var(--serif); max-width: 20em; }
.room--about p { font-size: 17px; max-width: 37em; }
.room--about p + p { margin-top: 1em; }
.room--about .door { background: var(--tint); }
.room--about .door--back { left: auto; right: 64px; }

.plan__dim { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 400 12px/1 "IBM Plex Mono", monospace; color: var(--soft); }
.plan__dim::before, .plan__dim::after { content: ""; flex: 1; height: 7px; border-top: 1px solid var(--soft); }
.plan__dim::before { border-left: 1px solid var(--soft); }
.plan__dim::after { border-right: 1px solid var(--soft); }
.foot--end { padding-top: 20px; }

@media (max-width: 1100px) {
  .r-8, .r-7, .r-5, .r-4 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .plan { border-width: 4px; }
  .room, .room--hall { padding: 52px 20px 22px; }
  .room--l, .room--about { display: flex; flex-direction: column; gap: 0; --door: 40px; }
  .room--l > figure, .room--b > figure, .room--about > figure { order: 2; margin: 24px -20px -22px; min-height: 0; aspect-ratio: 3 / 2; }
  .room--about { padding-bottom: 22px; }
  .room--about > figure { order: 0; margin: 0 0 24px; aspect-ratio: 1 / 1; max-width: 220px; }
  .room--l .room__no { left: auto; right: 16px; }
  .room--about .door--back { right: 40px; }
}
@media (prefers-reduced-motion: reduce) { .door__leaf { transition: none; } }

/* fixes after the first look */
#lionia { margin-top: 0; border-top: 0; padding-top: 52px; }
.room--b > figure { order: 2; }

/* ===== second pass after the outside critic: it must read as a house, not as a table =====
   Walls 6px everywhere, drawn by each room; the outline is stepped; the name and menu are the key of the
   drawing; pictures on outer walls get the window symbol; Neutralization is five alcoves; doors are wider. */
.plan { background: none; border: 0; gap: 6px; padding: 6px; margin-top: 40px; margin-bottom: 72px; }
.room { box-shadow: 0 0 0 6px var(--ink); padding-top: 80px; }
#lionia { padding-top: 80px; }
.room--hall { grid-column: 1 / span 9; padding: 92px 32px 44px; }
.plan__key { grid-column: span 3; padding: 0 0 0 34px; display: flex; flex-direction: column; justify-content: space-between; }
.plan__key .top__name { font: 400 clamp(38px, 3.4vw, 48px)/1 var(--serif); text-decoration: none; }
.plan__key nav { display: grid; gap: 7px; justify-items: start; font: 400 13px/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.plan__key nav a { text-decoration: none; color: var(--soft); }
.plan__key nav a:hover { color: var(--ink); }
.plan__key nav a.cv { color: var(--ink); text-decoration: underline; text-decoration-color: var(--warm); text-underline-offset: 4px; }
.plan__place { grid-column: span 2; display: flex; align-items: flex-end; padding: 0 12px 0 0; font: 400 12px/1.4 "IBM Plex Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.room--about { grid-column: span 10; padding-top: 80px; }
/* doors: an opening of 64, the leaf and its swing */
.door, .door--front { top: -6px; left: var(--door, 40px); width: 64px; height: 6px; }
.door svg, .door--front svg { top: 6px; width: 64px; height: 64px; }
.door--back { top: auto; bottom: -6px; height: 6px; }
.door--back svg { top: auto; bottom: 6px; }
.door__arc { stroke-width: 0.7; }
.door__leaf { stroke-width: 1.6; }
.room--l { --door: calc(100% - 112px); }
.room--l > figure { margin-top: -80px; }
.room--about > figure { margin-top: -80px; }
.room--about > figure img { object-position: 50% 20%; }
.room__no { top: 18px; right: 18px; }
/* a picture on an outer wall is a window: three lines in the wall */
.room--l::before, .room--about::before { content: ""; position: absolute; left: -6px; top: 56px; bottom: 56px; width: 6px; z-index: 1;
  background: linear-gradient(90deg, var(--ink) 0 1px, var(--bg) 1px 2.5px, var(--ink) 2.5px 3.5px, var(--bg) 3.5px 5px, var(--ink) 5px 6px); }
/* the long room: five alcoves */
.room--shelf .grid--3 { gap: 0; margin-top: 28px; margin-bottom: -32px; }
.room--shelf .card { padding: 0 20px 32px; }
.room--shelf .card:first-child { padding-left: 0; }
.room--shelf .card:last-child { padding-right: 0; }
.room--shelf .card + .card { border-left: 6px solid var(--ink); }
/* the last room: a floor, not a tint */
.room--about, .room--about:hover { background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(22, 21, 19, 0.07) 10px 11px) var(--tint); }
.room--about > div { background: var(--tint); padding: 20px 24px 24px; margin: -20px 0 0 -24px; align-self: start; }
@media (max-width: 1100px) {
  .room--hall, .plan__key, .room--about, .plan__place { grid-column: 1 / -1; }
  .plan__key { padding: 20px 0; flex-direction: row; align-items: baseline; }
  .plan__key nav { grid-auto-flow: column; gap: 18px; }
  .plan__place { padding: 8px 0; }
  .room--shelf .card:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 820px) {
  .plan { margin-top: 16px; margin-bottom: 40px; }
  .plan__key { order: -1; flex-direction: column; gap: 12px; padding: 0 0 14px; }
  .room, .room--hall, #lionia, .room--about { padding: 84px 20px 22px; }
  .room--l > figure, .room--b > figure { margin: 24px -20px -22px; }
  .room--about > figure { margin: 0 0 24px; }
  .room--l::before, .room--about::before { display: none; }
  .room--about > div { margin: 0; padding: 16px; }
  .room--shelf .grid--3 { margin-bottom: 0; gap: 28px 0; }
  .room--shelf .card { padding: 0 12px 0; }
  .room--shelf .card:nth-child(odd) { padding-left: 0; border-left: 0; }
  .room--shelf .card:nth-child(4) { border-left: 6px solid var(--ink); padding-left: 12px; }
}
.plan__key { padding-top: 12px; padding-bottom: 26px; }
@media (max-width: 1100px) { .plan__key { padding: 16px 0; } }

/* ===== third pass, 12 Oct 2026, his words: "door open more slowly as the page loads. once door opens
   annotation under project name appears. if you scroll down - the same. and connect all the rooms with doors" =====
   A room opens once, when the reader reaches it, and stays open. The title and the picture are there from
   the start; the lines under the title come in when the leaf has finished its swing. */
/* 12 Oct, later: "it feels like too much animation i guess before it was better" - the slow swing and the
   text that waited for the door are taken out; doors behave as in the second pass. The joining doors stay. */
/* every room is joined to its neighbours: a door in the side wall between two rooms of a row,
   and a second door where a room has two rooms above it */
.door--side { top: var(--side, 12px); left: -6px; width: 6px; height: 64px; }
.door--side svg { top: 0; left: 6px; }
.door--side .door__leaf { transform: rotate(-90deg); }
.js .room.lit:not(.is-lit):not(:hover) .door--side .door__leaf { transform: none; }
#dreams, #korolenko, .room--other { --door: 42%; }
#neutralization .door--2 { left: 76%; }
#about .door--2 { left: 38%; }
@media (max-width: 1100px) { .door--side, .door--2 { display: none; } }