/* 11 · Moss Architecture — architects. Cool grey, graphite, steel blue; Manrope and Fraunces. Type
   that fills as you read, a word you zoom through, two columns passing each other, a plan that draws. */
.v-moss { --bg: #e9ecef; --bg2: #ffffff; --fg: #1b1f24; --mut: #5a6470; --acc: #3a6ea5; --edge: #cfd5dc; background: var(--bg); color: var(--fg); font-family: "Manrope", var(--sans); --btn-r: 0; --fx-veil-paper: #e9ecef; --fx-veil-font: "Manrope", sans-serif; --fx-ink-color: var(--fg); --fx-mark: var(--acc); }
.v-moss .mo-top { padding-block: clamp(56px, 7vw, 100px) clamp(32px, 4vw, 56px); }
.v-moss h2 { font: 800 clamp(40px, 6.4vw, 100px)/0.98 "Manrope", var(--sans); letter-spacing: -0.045em; max-width: 16ch; }
.v-moss .lede { margin-top: 22px; color: var(--mut); }
.v-moss .mo-zoom { background: var(--bg); }
.v-moss .mo-zoom [data-fx-veil] { font-weight: 800 !important; letter-spacing: -0.06em !important; }
.v-moss .mo-split { background: var(--bg2); padding-block: clamp(32px, 4vw, 56px); }
.v-moss .mo-split [data-fx-stage] { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); gap: clamp(16px, 3vw, 40px); }
.v-moss .mo-split .ph { aspect-ratio: 4 / 5; }
.v-moss .mo-split li:nth-child(odd) .ph { aspect-ratio: 4 / 3; }
.v-moss .mo-split figcaption { margin-top: 10px; font: 600 12px/1.4 "Manrope", var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.v-moss .mo-body { padding-block: clamp(56px, 7vw, 100px); }
.v-moss .mo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.v-moss .mo-draw { width: 100%; height: auto; display: block; background: var(--bg2); }
.v-moss .mo-cap { margin-top: 12px; font: italic 400 15px/1.4 var(--serif); color: var(--mut); }
.v-moss h3 { font: 800 clamp(30px, 3.6vw, 52px)/1 "Manrope", var(--sans); letter-spacing: -0.04em; }
.v-moss h3 em { font: italic 400 1em/1 var(--serif); color: var(--acc); }
.v-moss .mo-text > p { margin-top: 18px; color: var(--mut); max-width: 46ch; }
.v-moss .mo-list { margin-top: 28px; border-top: 1px solid var(--edge); }
.v-moss .mo-list li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--edge); font: 600 18px/1.3 "Manrope", var(--sans); }
.v-moss .mo-list a { text-decoration: none; }
.v-moss .mo-list span { color: var(--mut); font-weight: 500; }
.v-moss .btn { background: var(--fg); color: #fff; }
.v-moss .fxlist { color: var(--mut); }
@media (max-width: 900px) { .v-moss .mo-grid { grid-template-columns: 1fr; } }