/* ==========================================================================
   EDITORIAL MODERNISM — Build with it. The board is a spread: two pages, a
   fold, a running head; Oswald capitals, Literata text, ink on paper,
   hairlines drawn as inset shadows. Faces come from the room's own
   @font-face ("Literata X", "Oswald X"). Prefix: gem-.
   ========================================================================== */
.gm--editorial-modernism {
  --gm-tag-inverse: var(--gm-color-paper);
  --gem-cond: var(--gm-font);
  --gem-text: var(--gm-font-text);
  max-width: 1280px;
  background: var(--gm-color-paper); color: var(--gm-color-ink);
  font: 400 var(--gm-size-text)/var(--gm-leading-text) var(--gem-text);
  box-shadow: inset 0 -1px 0 var(--gm-color-ink);
}
.gm--editorial-modernism .gm__title { font: 700 clamp(34px, 4.4vw, 56px)/1 var(--gem-cond); text-transform: uppercase; }
.gm--editorial-modernism .gm__lede { font-style: italic; font-weight: 300; }
.gm--editorial-modernism .gm-t { font-family: var(--gem-cond); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.gm--editorial-modernism .gm-more summary { font: 500 12px/28px var(--gem-cond); letter-spacing: .12em; text-transform: uppercase; }
.gm--editorial-modernism .gm-ls li { border-top: 0; box-shadow: inset 0 1px 0 #C9C9C2; }
.gm--editorial-modernism a { color: inherit; text-underline-offset: 3px; }

.gem-spread { position: relative; }
.gem-run { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 28px; font: 500 11px/28px var(--gem-cond); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--gm-color-ink); }
.gem-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gm-column-gap); row-gap: 56px; }
.gem-f { grid-column: span 6; padding-top: 14px; box-shadow: inset 0 1px 0 var(--gm-color-ink); }
.gem-f--wide { grid-column: 1 / -1; }
.gem-fold { position: absolute; top: 56px; bottom: 0; left: var(--gm-fold); border-left: 1px dashed #4A4A45; opacity: .45; pointer-events: none; }
.gem-f .gm-f__head { gap: 10px; }
.gem-f .gm-f__n { font: 500 12px/1 var(--gem-cond); letter-spacing: .14em; color: var(--gm-color-grey); }
.gem-f .gm-f__name { font: 700 26px/1.1 var(--gem-cond); text-transform: uppercase; }
.gem-f .gm-f__note { font-style: italic; }
.gem-cap { margin: 10px 0 0; font: 400 13px/1.6 var(--gem-cond); letter-spacing: .04em; color: var(--gm-color-grey); }

/* 1 colour */
.gem-sws { display: grid; grid-template-columns: 3fr 2fr 1fr; }
.gem-swatch span { display: block; height: 96px; box-shadow: inset 0 0 0 1px var(--gm-color-ink); }
.gem-swatch--paper span { background: var(--gm-color-paper); }
.gem-swatch--ink span { background: var(--gm-color-ink); }
.gem-swatch--grey span { background: var(--gm-color-grey); }
.gem-swatch b { display: block; margin-top: 6px; font: 600 12px/1.4 var(--gem-cond); letter-spacing: .1em; text-transform: uppercase; }
.gem-swatch code { font-size: 11px; }

/* 2 type */
.gem-word { margin: 0; font: 700 clamp(72px, 12vw, 150px)/.85 var(--gem-cond); text-transform: uppercase; letter-spacing: -.01em; }
.gem-deck { margin: 14px 0 0; max-width: 34ch; font: italic 300 22px/28px var(--gem-text); }

/* 3 the spread, in miniature */
.gem-mini { position: relative; aspect-ratio: 2 / 1.3; max-height: 360px; width: 100%; overflow: hidden; background: var(--gm-color-paper); box-shadow: inset 0 0 0 1px #C9C9C2; }
.gem-mini__img { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.7) 40% 45%, transparent 45%), linear-gradient(#3a3a36, #0c0c0b 75%); }
.gem-mini__word { position: absolute; left: 34%; top: 8%; font: 700 clamp(40px, 8vw, 110px)/.85 var(--gem-cond); text-transform: uppercase; color: #fff; mix-blend-mode: difference; }
.gem-mini__txt { position: absolute; right: 8%; bottom: 10%; width: 18%; height: 18%; background: repeating-linear-gradient(var(--gm-color-grey) 0 2px, transparent 2px 9px); }
.gem-mini__fold { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed #8E8E88; }

/* 4 shape */
.gem-plates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gm-column-gap); }
.gem-plates figure { margin: 0; }
.gem-pl { display: block; height: 120px; background: linear-gradient(160deg, #3a3a36, #0c0c0b); }
.gem-pl--framed { margin: 10px; height: 100px; outline: 1px solid var(--gm-color-ink); outline-offset: 8px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.gem-plates figcaption { margin-top: 8px; font: 400 13px/1.5 var(--gem-cond); letter-spacing: .04em; box-shadow: inset 0 1px 0 var(--gm-color-ink); padding-top: 4px; }
.gem-no figcaption { color: var(--gm-color-grey); text-decoration: line-through; }

/* 5 imagery */
.gem-crop { position: relative; height: 180px; margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); overflow: hidden; background: #d8d8d2; }
.gem-crop span { position: absolute; left: 38%; top: -30%; width: 90%; height: 170%; border-radius: 50%; background: radial-gradient(circle at 30% 40%, #f4f4f0 0 8%, #2a2a27 9%, #0c0c0b 70%); filter: contrast(1.2); }

/* 6 components */
.gem-ui { display: grid; gap: 28px; }
.gem-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; box-shadow: inset 0 -1px 0 var(--gm-color-ink); }
.gem-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1 var(--gem-cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gm-color-grey); }
.gem-nav a[aria-current="page"] { color: var(--gm-color-ink); }
.gem-nav a:hover { background: var(--gm-color-ink); color: var(--gm-color-paper); }
.gem-folio { margin-left: auto; font: 500 13px/44px var(--gem-cond); letter-spacing: .14em; }
.gem-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gm-column-gap); align-items: end; }
.gem-card { display: block; text-decoration: none; }
.gem-card__img { display: block; height: 200px; background: radial-gradient(circle at 72% 30%, #f4f4f0 0 7%, transparent 8%), linear-gradient(100deg, #1f1f1d 0 55%, #4a4a45 55% 57%, #141412 57%); }
.gem-card__cap { display: block; margin-top: 8px; padding-top: 4px; font: 500 13px/1.5 var(--gem-cond); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 1px 0 var(--gm-color-ink); }
.gem-card:hover .gem-card__cap { text-decoration: underline; }
.gem-form { display: grid; gap: 8px; }
.gem-form label { font: 500 12px/1.4 var(--gem-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gm-color-grey); }
.gm .gem-form input { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--gm-color-ink); border-radius: 0; background: transparent; color: var(--gm-color-ink); font: 400 17px/1.4 var(--gem-text); }
.gem-form input:focus { border-bottom-width: 3px; }
.gm .gem-btn { justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--gm-color-ink); background: var(--gm-color-paper); color: var(--gm-color-ink); font: 500 12px/1 var(--gem-cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.gem-btn:hover, .gem-btn:active { background: var(--gm-color-ink); color: var(--gm-color-paper); }
.gm--editorial-modernism :focus-visible { outline: 2px solid var(--gm-color-ink); outline-offset: 3px; }

/* 7 motion, in black space */
.gem-f--black { padding: 14px 20px 20px; background: var(--gm-color-ink); color: var(--gm-color-paper); --gm-tag-inverse: var(--gm-color-ink); }
.gem-f--black .gm-f__n, .gem-f--black .gem-cap { color: #C9C9C2; }
.gem-f--black :focus-visible { outline-color: var(--gm-color-paper); }
.gem-still { margin: 0; font: 700 clamp(28px, 4vw, 44px)/1 var(--gem-cond); text-transform: uppercase; }

/* 8 pacing */
.gem-seq { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gem-seq li { position: relative; aspect-ratio: 2 / 1.3; box-shadow: inset 0 0 0 1px #C9C9C2; display: flex; align-items: flex-end; padding: 6px; }
.gem-seq li::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed #C9C9C2; }
.gem-seq span { position: relative; z-index: 1; font: 500 11px/1 var(--gem-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gm-color-grey); }
.gem-s--loud { background: linear-gradient(#3a3a36, #0c0c0b); }
.gem-s--loud span, .gem-s--mid span { color: var(--gm-color-paper); }
.gem-s--mid { background: linear-gradient(90deg, #3a3a36 0 40%, transparent 40%); }
.gem-s--black { background: var(--gm-color-ink); }

@media (max-width: 900px) {
  .gem-f, .gem-f--wide { grid-column: 1 / -1; }
  .gem-fold { display: none; }
  .gem-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gem-seq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gem-sws { grid-template-columns: 2fr 1fr 1fr; }
  .gem-run span + span { display: none; }
}