/* =====================================================================
   layout.css: the website shell shown after "Enter"
   ---------------------------------------------------------------------
   Desktop: a fixed side menu (.rail, partials/site/rail.html) on the
   left, with the main .content pushed right by --rail-w.
   Phone: the rail is swapped for .topbar + .dots (see responsive.css).
   .is-active on rail links is set by js/scroll-spy.js, and .is-entering
   (the fade-in) is set by js/router.js.
   ===================================================================== */

.site.is-entering { animation: fade-in .6s ease backwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* "Back to main page": the site fades out (js/router.js waits 350ms to match) */
.site.is-leaving { opacity: 0; transition: opacity .35s ease; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 10;
  display: flex; flex-direction: column; gap: 48px;
  /* bottom: room for the PT / EN switch (lang.css); 84px puts it 52px below
     "Back to main page", the same step as between the menu links */
  padding: 48px 32px 84px;
  background: var(--ivory); border-right: 1px solid var(--line);
}
.rail__brand { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.rail__monogram { width: 88px; height: 88px; }
.rail__names { font: 400 34px/1.2 var(--script); }
.rail__date { font-size: 11px; letter-spacing: .24em; color: var(--subtle); }
.rail__nav { display: flex; flex-direction: column; gap: 4px; }
.rail__link {
  display: flex; align-items: center; gap: 14px; height: 48px;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--subtle); text-decoration: none; transition: color .2s;
}
.rail__link:hover { color: var(--ink); }
.rail__bar { width: 2px; height: 20px; background: var(--olive); opacity: 0; transition: opacity .25s; }
.rail__link.is-active { color: var(--olive); }
.rail__link.is-active .rail__bar { opacity: 1; }
.rail__back {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--subtle); text-decoration: none;
}
.rail__back .icon { width: 16px; height: 16px; }
.rail__back:hover { color: var(--ink); }

.topbar, .dots { display: none; }
.content { margin-left: var(--rail-w); }