.o-layout {
  position: relative;
  width: 100%;
}

.o-layout__header { position: relative; }

.o-layout__body {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  align-items: start;
  width: 100%;
}

.o-layout__body--solo { grid-template-columns: 1fr; }

.o-layout__sidebar {
  position: sticky;
  top: calc(var(--bar-h) + 3vh);
  padding: var(--fluid-band) 0 var(--fluid-band) var(--fluid-gap);
  border-right: var(--hairline);
  min-height: 60vh;
}

.o-layout__main { position: relative; min-width: 0; overflow-x: clip; }

.o-layout__content {
  position: relative;
  width: 100%;
}

.o-layout__footer { position: relative; }


.o-band {
  position: relative;
  width: 100%;
  padding: var(--fluid-band) var(--fluid-gap);
}

.o-band--wide { padding-top: var(--fluid-band-wide); padding-bottom: var(--fluid-band-wide); }
.o-band--flush { padding-top: 0; }

.o-hospitality-wrap {
  width: min(var(--measure), 100%);
  margin-left: auto;
  margin-right: auto;
}

.o-hospitality-wrap--narrow { width: min(var(--measure-narrow), 100%); }


.o-plate {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  border: var(--hairline);
}

.o-plate--framed {
  border: none;
  box-shadow: 0 1.4vh 4vh rgba(12, 34, 27, 0.18);
}

.o-plate--quiet {
  border: none;
  background-image:
    radial-gradient(60% 55% at 30% 28%, rgba(127, 182, 154, 0.55) 0%, rgba(127, 182, 154, 0) 70%),
    linear-gradient(155deg, var(--tone-paper-deep) 0%, var(--tone-paper) 45%, var(--tone-soft) 140%);
  box-shadow: inset 0 0 0 1px rgba(29, 70, 54, 0.12);
}


.o-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-gap);
}

.o-rail--pairs { grid-template-columns: repeat(2, 1fr); }


.page-transition {
  animation: sheetIn var(--turn) both;
}

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(1.6vh); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes railIn {
  from { opacity: 0; transform: translateX(-1.2vw); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1024px) {
  :root { --rail: 19vw; }
}

@media (max-width: 900px) {
  .o-layout__body { grid-template-columns: 1fr; }
  .o-layout__sidebar { display: none; }
  .o-rail, .o-rail--pairs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { animation: none; }
  html { scroll-behavior: auto; }
}