/* ========================
   ROOMS LINE
   ======================== */

/* "publishing / workshop" under the Polden wordmark. polden.gg carries the same line with publishing
   marked; here workshop is marked, so the two sites read as two rooms of one house.

   It has a file of its own on purpose. Cloudflare keeps the workshop's CSS in browsers for four hours,
   so a returning visitor gets new HTML with the styles.css or site.css they already hold, and the line
   then sat in the header row as bare text that squeezed both marks on a phone. A file no browser has
   seen arrives with the HTML that names it, so the header lays out right whichever copy of the main
   stylesheet is cached. The selectors outrank the main sheets' header rules for the same reason.

   Home puts its header in `.canvas`, the guide pages directly in `.page`; they differ only in where
   the phone layout starts (760px and 1000px, the breakpoints of styles.css and site.css). */

/* The line is exactly as wide as the wordmark: untracked 11px mono fits it, and `contain` keeps it
   from widening the wordmark's column. Flush with the wordmark's first column of ink. The divider and
   the logo centre on the whole lockup. Mono 500 because the site ships no 700. */
.canvas > .header .header__brand,
.page > .header .header__brand {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
}
.header .header__brand > a:first-child {
  grid-area: 1 / 1;
}
.header .header__divider {
  grid-area: 1 / 2 / 3 / 3;
}
.header .header__brand > a:nth-child(3) {
  grid-area: 1 / 3 / 3 / 4;
}
.header__rooms {
  grid-area: 2 / 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  contain: inline-size;
  /* 10px с разрядкой, а не 11px без неё: это была единственная прописная моношрифтовая подпись на
     сайте без letter-spacing — кикеры идут с 0.18em, шаг-метки с 0.14em, табы карточки с 0.08em, —
     и под крупным вордмарком она читалась сжатым комком. Размер уменьшен, потому что строка обязана
     остаться шириной ровно с вордмарк (137px): 11px+0.06em уже переливается на 1px, 10px+0.1em
     оставляет 4px запаса. Маркер активной комнаты — квадрат из легенды доски — не влез бы вовсе. */
  font: 500 10px/1 'IBM Plex Mono';
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}
.header__room {
  /* Тонкая линия с отступом, а не 2px вплотную: вплотную это читалось мазком маркера во всю ширину
     слова, а не указателем «ты здесь». */
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.header__room[aria-current] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
a.header__room:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.header__rooms-slash {
  color: var(--line-2);
}

/* On a phone the wordmark is 81px wide and the line 138px, so the line runs under both marks. The
   columns are the marks' own widths at phone height (26px × 560/180, 28px × 440/92) as fractions: at
   natural size nothing changes, and when the header runs short both marks shrink in proportion, as
   they did when this row was flex. */
@media (max-width: 759.98px) {
  .canvas > .header .header__brand {
    grid-template-columns: minmax(0, 80.89fr) auto minmax(0, 133.91fr);
    column-gap: 12px;
  }
  .canvas > .header .header__divider,
  .canvas > .header .header__brand > a:nth-child(3) {
    grid-row: 1;
  }
  .canvas > .header .header__rooms {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 8px;
    contain: none;
  }
}
@media (max-width: 999.98px) {
  .page > .header .header__brand {
    grid-template-columns: minmax(0, 80.89fr) auto minmax(0, 133.91fr);
    column-gap: 12px;
  }
  .page > .header .header__divider,
  .page > .header .header__brand > a:nth-child(3) {
    grid-row: 1;
  }
  .page > .header .header__rooms {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 8px;
    contain: none;
  }
}