/* layout.css — loader, masthead, menu, chapter rail, footer. Ported from v3.2. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  animation: loader-failsafe .7s cubic-bezier(.2, .8, .18, 1) 2.2s forwards;
  transition: opacity .8s cubic-bezier(.2, .8, .18, 1), visibility .8s;
}
.loader.is-hidden { display: none; opacity: 0; visibility: hidden; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

.loader__grid {
  width: min(560px, calc(100vw - 48px));
  display: grid;
  gap: 22px;
}
.loader__grid strong {
  display: block;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: clamp(72px, 15vw, 160px);
  line-height: .78;
}
.loader__bar { height: 3px; background: rgba(242, 237, 227, .16); }
.loader__bar span {
  display: block;
  width: var(--loader, 0%);
  height: 100%;
  background: var(--oxide);
}
.loader__copy { color: rgba(242, 237, 227, .72); }

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 16px var(--page-x);
  color: var(--paper);
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 24, 30, .84), rgba(20, 24, 30, .08));
  pointer-events: none;
}
.masthead__brand { width: 154px; display: block; filter: brightness(0) invert(1); }

.masthead__status {
  min-width: 260px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.masthead__status i { grid-column: 1 / -1; height: 2px; background: rgba(242, 237, 227, .18); }
.masthead__status b { display: block; width: var(--progress); height: 100%; background: var(--oxide); }

.masthead__nav {
  justify-self: end;
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.masthead__nav a { text-decoration: none; color: rgba(242, 237, 227, .74); }
.masthead__nav a:hover { color: var(--paper); }

.menu-toggle {
  display: grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(242, 237, 227, .36);
  border-radius: 4px;
  background: rgba(20, 24, 30, .36);
  color: var(--paper);
  cursor: pointer;
}
.menu-toggle span {
  grid-column: 1;
  height: 1px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.2, .8, .18, 1);
}
.menu-toggle span + span { margin-top: -8px; }
.menu-toggle em {
  grid-column: 2;
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(24deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-24deg); }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  padding: 96px var(--page-x) var(--page-x);
  background: rgba(20, 24, 30, .97);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease, transform .55s cubic-bezier(.2, .8, .18, 1);
}
.menu-open .site-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.site-menu__panel {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.site-menu__links,
.site-menu__aside { background: var(--ink); }

.site-menu__links { display: grid; align-content: center; padding: clamp(24px, 5vw, 64px); }
.site-menu__links a {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 20px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px solid rgba(242, 237, 227, .12);
  text-decoration: none;
}
.site-menu__links span { color: var(--brass); font-family: var(--mono); font-size: 11px; }
.site-menu__links strong {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 400;
  line-height: .9;
}
.site-menu__links a:hover strong { color: var(--oxide-bright); }

.site-menu__aside {
  display: grid;
  align-content: end;
  gap: 24px;
  padding: clamp(24px, 4vw, 48px);
  background:
    linear-gradient(rgba(20, 24, 30, .55), rgba(20, 24, 30, .94)),
    url("../assets/images/menu/menu.1280.webp") center / cover no-repeat;
}
.site-menu__aside p:not(.mono) {
  max-width: 440px;
  color: rgba(242, 237, 227, .78);
  font-size: 20px;
  line-height: 1.45;
}

.chapter-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 90;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}
.chapter-rail a { position: relative; width: 28px; height: 28px; display: grid; place-items: center; text-decoration: none; }
.chapter-rail span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(242, 237, 227, .5);
  box-shadow: 0 0 0 1px rgba(20, 24, 30, .3);
}
.chapter-rail a.is-active span { width: 12px; height: 12px; background: var(--oxide); }
.chapter-rail a::before {
  content: attr(data-rail);
  position: absolute;
  right: 34px;
  width: max-content;
  padding: 5px 7px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: .25s ease;
}
.chapter-rail a:hover::before { opacity: 1; transform: translateX(0); }

.footer {
  padding: 26px var(--page-x);
  background: var(--ink);
  color: rgba(242, 237, 227, .58);
  border-top: 1px solid var(--line-light);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }

@media (max-width: 1120px) {
  .masthead { grid-template-columns: minmax(120px, 1fr) auto; }
  .masthead__status,
  .masthead__nav,
  .chapter-rail { display: none; }
  .site-menu__panel { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .masthead__brand { width: 132px; }
  .menu-toggle { width: 52px; min-height: 42px; grid-template-columns: 1fr; padding: 0 10px; }
  .menu-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle span { grid-column: 1; }
  .site-menu { padding: 78px 16px 16px; }
  .site-menu__links a { grid-template-columns: 42px minmax(0, 1fr); }
  .site-menu__links strong { font-size: 38px; }
}