:root {
  --ink: #0c0c0c;
  --rail: #161616;
  --panel: #1e1e1e;
  --fg: #f4f1ea;
  --quiet: #b3aa98;
  --moss: #43a047;
  --brass: #c9a227;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
html, body { margin: 0; }
body {
  min-height: 100%;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  background: var(--ink);
  color: var(--fg);
  font: 16px/1.7 "Literata", Georgia, serif;
  overflow-x: clip;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.folio-rail {
  background: var(--rail);
  border-right: 1px solid #2a2a2a;
  padding: 28px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
}
.folio-rail .mark { font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: .12em; text-decoration: none; }
.folio-rail .mark i { font-style: normal; color: var(--moss); }
.folio-rail nav { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.folio-rail nav a { text-decoration: none; color: var(--quiet); font-family: "Manrope", sans-serif; font-size: 14px; }
.folio-rail nav a:hover { color: var(--fg); }
.folio-go {
  display: block;
  margin-top: 32px;
  text-align: center;
  text-decoration: none;
  background: var(--moss);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  padding: 12px 10px;
  border-radius: 2px;
}

.folio-main { padding: 40px 7vw 72px; max-width: 880px; min-width: 0; }
.folio-kicker { font-family: "Manrope", sans-serif; color: var(--brass); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }
.folio-main h1 { font-size: clamp(26px, 7vw, 46px); line-height: 1.2; margin: 8px 0 16px; }
.folio-main h2 { font-size: clamp(22px, 5vw, 28px); margin: 40px 0 10px; }
.folio-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 20px 0;
  border: 1px solid #333;
}
.folio-compare div { padding: 18px; min-width: 0; }
.folio-compare .a { background: #142016; }
.folio-compare .b { background: #221d10; }
.folio-scenes { display: grid; gap: 14px; }
.folio-scenes article { background: var(--panel); padding: 16px 18px; }
.folio-scenes h3 { margin: 0 0 6px; font-size: 20px; color: var(--brass); }
.folio-figure { margin: 18px 0; }
.folio-figure img { width: 100%; max-width: 540px; display: block; }
.folio-figure figcaption { color: var(--quiet); font-size: 13px; margin-top: 6px; }
.folio-foot { margin-top: 48px; color: var(--quiet); font-size: 13px; font-family: "Manrope", sans-serif; }

@media (max-width: 840px) {
  body { grid-template-columns: 1fr; }
  .folio-rail {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid #2a2a2a;
    padding: 18px 16px;
  }
  .folio-rail nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
  }
  .folio-go { margin-top: 14px; width: min(280px, 100%); }
  .folio-main { padding: 24px 16px 48px; margin: 0 auto; }
  .folio-compare { grid-template-columns: 1fr; }
  .folio-figure img { margin-left: auto; margin-right: auto; }
  .folio-foot { text-align: center; }
}