/* FarStar: Battlestations info site. Akkardian civic information board. */

@font-face {
  font-family: "Marcellus SC";
  src: url("fonts/MarcellusSC.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --board: #0B0A10;
  --panel: #15131D;
  --porcelain: #E8E7E2;
  --porcelain-dim: #B9B8C2;
  --ink: #1D1B24;
  --oxblood: #6B1E2C;
  --field: #A68BDB;     /* field violet, lightened for dark panels */
  --heat: #D0663A;      /* heat rust, lightened for dark panels */
  --gold: #B89545;      /* valor: rank pages only */

  --display: "Marcellus SC", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --text: "Space Grotesk", "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;

  --gutter: 20px;
  --step: 12px;
}

* { box-sizing: border-box; }
html { background: var(--board); }

body {
  margin: 0;
  background: var(--board);
  color: var(--porcelain);
  font: 400 18px/1.6 var(--text);
}
:lang(zh-CN) body { line-height: 1.75; }
:lang(zh-CN) em { font-style: normal; }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; }
:lang(zh-CN) h1, :lang(zh-CN) h2 { font-weight: 700; }
:focus-visible { outline: 3px solid var(--field); outline-offset: 3px; }

/* ---------- poster: the art owns the screen, type sits at its edges ---------- */

.poster {
  position: relative;
  min-height: 88svh;   /* leaves the premise peeking below the fold */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding: 20px var(--gutter) 40px;
  isolation: isolate;
}

/* The poster is composed on the page from separate layers inside a 16:9 stage.
   The stage covers the poster area like background-size: cover; every layer is
   positioned in percent of the stage, so the layers keep their relation to each other.
   Layers live in art/layers/ (source pieces in art-source/poster/). */
.poster__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(ellipse at 50% 45%, #2A2140 0%, #14111F 55%, var(--board) 100%);
}
/* darkens the top (logo) and bottom (tagline) edges */
.poster__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,10,16,.7) 0, rgba(11,10,16,0) 180px, rgba(11,10,16,0) 52%, rgba(11,10,16,.6) 74%, rgba(11,10,16,.94) 100%);
}
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}
.layer { position: absolute; display: block; height: auto; max-width: none; }
.layer--bg { inset: 0; width: 100%; height: 100%; animation: drift 90s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05) translate(-.5%, .5%); } }
/* The Pride runs up the picture toward the sun, pushed below the bottom edge; it fades out just above the edge. */
.layer--pride {
  left: 10.76%;   /* puts the nose exactly under the sun in the background */
  bottom: -8%;
  width: 80%;
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 90%);
  animation: fade-in 1.2s ease-out both, advance 16s ease-in-out 1.2s infinite alternate;
}
@keyframes advance { from { transform: scale(1); } to { transform: scale(1.025) translateY(-.6%); } }
/* Nihlo: left, facing right toward Omnis. Lower edge fades out. */
.layer--nihlo {
  left: 5%;
  bottom: -8%;
  width: 27%;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 88%);
  animation: arrive 1.4s ease-out .9s both;   /* entrance sequence: ship 0s, Nihlo .9s, Omnis 1.5s */
}
/* Omnis: right, taller than Nihlo (wider layer), reaching toward him. */
.layer--omnis {
  left: 66%;
  bottom: -8%;
  width: 29%;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 88%);
  animation: arrive-right 1.4s ease-out 1.5s both;
}
@keyframes arrive-right { from { opacity: 0; transform: translateX(2%); } to { opacity: 1; transform: none; } }
/* Threat waves. One 40s loop: rocks, then critters, organism, attack craft, 10s each (set by --delay).
   Each threat comes closer, is shot by the Pride's cannon (a beam from the nose), and explodes.
   The three parts of a threat share one --delay and one keyframe clock, so they stay in step.
   translate offsets are percent of the threat's own size; --dx/--dy is the full path, it is shot at 80% of it. */
.threat { animation: approach 40s linear var(--delay) infinite backwards, tumble var(--tdur) ease-in-out infinite alternate; }
@keyframes approach {
  0% { opacity: 0; translate: 0 0; scale: .8; }
  2% { opacity: 1; }
  15% { opacity: 1; translate: calc(var(--dx) * .8) calc(var(--dy) * .8); scale: 1.17; }
  15.1%, 100% { opacity: 0; translate: calc(var(--dx) * .8) calc(var(--dy) * .8); scale: 1.17; }
}
/* critters do not rotate: they swell slightly as they swim in */
.threat--swim { animation: approach 40s linear var(--delay) infinite backwards, swell var(--tdur) ease-in-out infinite alternate; }
/* attack craft fade in small and far, then charge at the Pride: they grow as they come down, speeding up */
.threat--charge { animation: charge 40s ease-in var(--delay) infinite backwards; }
@keyframes charge {
  0% { opacity: 0; translate: 0 0; scale: .3; }
  4% { opacity: 1; }
  15% { opacity: 1; translate: calc(var(--dx) * .8) calc(var(--dy) * .8); scale: 1.3; }
  15.1%, 100% { opacity: 0; translate: calc(var(--dx) * .8) calc(var(--dy) * .8); scale: 1.3; }
}
@keyframes swell { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes tumble { from { rotate: calc(var(--rot) * -1); } to { rotate: var(--rot); } }

/* the beam image is a fired shell, fat end first with the tail trailing behind: it flies from the cannon to the
   target, turned to --a (its fat end at 49.4% / 86.7% is the anchor); glow effects blend with screen */
.beam {
  height: auto;
  left: var(--x0); top: var(--y0);
  transform-origin: 49.4% 86.7%;
  translate: -49.4% -86.7%;
  rotate: var(--a);
  mix-blend-mode: screen;
  animation: shot 40s linear var(--delay) infinite backwards;
}
@keyframes shot {
  0%, 13.4% { opacity: 0; left: var(--x0); top: var(--y0); }
  13.5% { opacity: 1; left: var(--x0); top: var(--y0); }
  15% { opacity: 1; left: var(--x1); top: var(--y1); }
  15.2%, 100% { opacity: 0; left: var(--x1); top: var(--y1); }
}

/* the explosion blooms where the threat was and fades */
.boom {
  height: auto;
  translate: -50% -50%;
  mix-blend-mode: screen;
  animation: blast 40s linear var(--delay) infinite backwards;
}
@keyframes blast {
  0%, 15% { opacity: 0; scale: .3; }
  15.4% { opacity: 1; scale: .9; }
  18%, 100% { opacity: 0; scale: 1.7; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrive { from { opacity: 0; transform: translateX(-2%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .layer { animation: none !important; } }

.poster__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.wordmark__title { display: inline-grid; justify-items: center; gap: 4px; }
.wordmark__t1 { display: block; width: clamp(170px, 26vw, 320px); height: auto; }
.wordmark__t2 { font-size: clamp(12px, 1.9vw, 20px); letter-spacing: .16em; white-space: nowrap; }
.wordmark__t2::before, .wordmark__t2::after { content: "\2014"; margin: 0 .3em; }

.poster__tools { display: grid; justify-items: end; gap: 12px; }

.lang-switch {
  padding: 5px 14px;
  background: rgba(11,10,16,.7);
  color: var(--porcelain);
  border: 1.5px solid var(--porcelain);
  font: 600 16px/1.2 var(--text);
  cursor: pointer;
}
.lang-switch:hover { background: var(--porcelain); color: var(--ink); }


.poster__pitch { grid-row: 3; text-align: center; }
.poster__tagline {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: .1em;
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(11,10,16,.9);
}
.poster__descriptor {
  margin: 8px 0 0;
  font-size: 18px;
  color: var(--porcelain-dim);
  text-shadow: 0 2px 14px rgba(11,10,16,.9);
}

/* ---------- board ---------- */

.board {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px var(--gutter) 96px;
  display: grid;
  gap: 36px;
}

.draft-note {
  margin: 0;
  justify-self: start;
  padding: 4px 12px;
  background: var(--oxblood);
  font-size: 16px;
}
html:not([lang="zh-CN"]) .draft-note { display: none; }

.intro { max-width: 62ch; margin: 0 auto; text-align: center; }
.intro__lead { margin: 0 0 14px; font-size: 24px; line-height: 1.45; }
.intro__plan { margin: 0; font-size: 16px; color: var(--porcelain-dim); }

/* a band: a large engraved plate beside the text, alternating sides */
.band {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid rgba(232,231,226,.18);
}
.band--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.band--flip .band__plate { order: 2; }

.band__plate {
  display: block;
  width: 100%;
  height: auto;
  padding: 18px;
  background:
    radial-gradient(circle, rgba(232,231,226,.14) 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--panel);
  border: 1.5px solid var(--porcelain-dim);
  clip-path: polygon(0 var(--step), var(--step) var(--step), var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step)));
}
.band h2 { font-size: clamp(30px, 4vw, 42px); letter-spacing: .03em; margin-bottom: 14px; }
.band p { margin: 0 0 20px; max-width: 52ch; font-size: 19px; }
.band--hero { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; padding: 56px 0; }
.band--hero h2 { font-size: clamp(38px, 5.4vw, 60px); }
.band--hero p { font-size: 21px; }

/* the story is a different, deeper layer: its own tinted panel with a dashed edge */
.band--story {
  padding: 40px;
  background: var(--panel);
  border: 1.5px dashed var(--porcelain-dim);
  clip-path: polygon(0 var(--step), var(--step) var(--step), var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step), 100% 100%, 0 100%);
}
.band--story .band__plate { background: none; border: 0; padding: 0; clip-path: none; }

.status { display: flex; gap: 24px; align-items: flex-start; padding-top: 32px; border-top: 1px solid rgba(232,231,226,.18); color: var(--porcelain-dim); }
.status h2 { font-size: 28px; margin-bottom: 6px; color: var(--porcelain); }
.status p { margin: 0; max-width: 58ch; }

.link {
  display: inline-block;
  font-family: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--porcelain);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.link:hover { color: var(--field); }
.link--primary {
  padding: 6px 18px;
  background: var(--porcelain);
  color: var(--ink);
  text-decoration: none;
}
.link--primary:hover { background: var(--field); color: var(--ink); }

.stamp {
  display: inline-block;
  padding: 2px 12px 2px 10px;
  border: 2px solid var(--porcelain-dim);
  color: var(--porcelain);
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  transform: rotate(-2deg);
}
.stamp--provisional { border-style: dashed; }

/* diagrams: line only, shape and label carry meaning, colour only supports */
.fig { fill: none; stroke: var(--porcelain); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fig__thin { stroke-width: 2; }
.fig__dash { stroke-dasharray: 5 5; }
.fig__dot { stroke-dasharray: 1 7; }
.fig__fill { fill: var(--porcelain); }
.fig__field { stroke: var(--field); }
.fig__heat { stroke: var(--heat); }
.fig__label text { fill: var(--porcelain); font: 400 20px var(--text); }

@media (max-width: 760px) {
  .band, .band--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .band--flip .band__plate { order: 0; }
  .band--hero { padding: 40px 0; }
  .band--story { padding: 24px 20px; }
  .band__plate { max-width: 300px; }
}
@media (max-width: 560px) {
  .poster__bar { align-items: center; }
  .intro__lead { font-size: 21px; }
  .band p { font-size: 17px; }
  .status { flex-direction: column; gap: 14px; }
}

/* ---------- layer 1 and 3 pages ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 20px 28px;
  flex-wrap: wrap;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
}
.page-head__logo img { display: block; width: 120px; height: auto; }
.crumbs { flex: 1; padding-bottom: 1px; line-height: 1.2; display: flex; gap: 10px; flex-wrap: wrap; font-size: 16px; color: var(--porcelain-dim); }
.crumbs a { color: var(--porcelain); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--field); }
.page-head .lang-switch { margin-left: auto; align-self: center; }

.page { padding-top: 40px; gap: 56px; }
.page h1 { font-size: clamp(40px, 6vw, 68px); letter-spacing: .02em; margin-bottom: 18px; }
.page-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 48px; align-items: center; }
.page-top__lead { margin: 0; font-size: 21px; max-width: 46ch; }

.plate {
  display: block;
  width: 100%;
  height: auto;
  padding: 14px;
  background:
    radial-gradient(circle, rgba(232,231,226,.14) 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--panel);
  border: 1.5px solid var(--porcelain-dim);
  clip-path: polygon(0 var(--step), var(--step) var(--step), var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step)));
}

.topic { display: grid; gap: 18px; padding-top: 36px; border-top: 1px solid rgba(232,231,226,.18); }
.topic h2 { font-size: clamp(28px, 3.6vw, 38px); letter-spacing: .03em; }
.topic__lead { margin: 0; max-width: 62ch; font-size: 19px; }
.topic h3 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 14px 0 6px; letter-spacing: .03em; }
:lang(zh-CN) .topic h3 { font-weight: 700; }
.topic--rank { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 18px 48px; align-items: center; }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.mode p { margin: 0; font-size: 17px; }

.ranks { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ranks li { padding-left: 18px; border-left: 3px solid var(--gold); }

.deeper { display: grid; gap: 10px; padding: 28px 28px 32px; background: var(--panel); border: 1.5px solid var(--porcelain-dim); }
.deeper h2 { font-size: 28px; }
.deeper p { margin: 0; color: var(--porcelain-dim); }
.deeper__links { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.pager { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(232,231,226,.18); }
.page .status { padding-top: 0; border-top: 0; align-items: center; }

@media (max-width: 760px) {
  .page-top, .topic--rank { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-top .plate { max-width: 300px; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .mode .plate { max-width: 300px; }
  .page-head .lang-switch { margin-left: 0; }
}
.topic--rank > div { display: grid; gap: 18px; }

/* painted banner: a still crop of the poster layers across the top of a page */
.banner {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  container-type: size;
  background: var(--board);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.banner__stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; transform: translateY(var(--shift, -5%)); }
.banner .b, .banner .beam, .banner .boom { position: absolute; display: block; height: auto; max-width: none; }
.banner .b--pride { left: 10.76%; bottom: -8%; width: 80%; }
.banner .beam { left: var(--x0); top: var(--y0); animation: none; opacity: 1; }
.banner .boom { translate: -50% -50%; animation: none; opacity: .95; mix-blend-mode: screen; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--board) 0, rgba(11,10,16,0) 14%, rgba(11,10,16,0) 86%, var(--board) 100%), linear-gradient(to bottom, rgba(11,10,16,.55) 0, rgba(11,10,16,0) 30%); }
@media (max-width: 560px) { .banner { aspect-ratio: 16 / 9; } .banner__stage { --shift: -4%; } }

.page-top--wide { grid-template-columns: minmax(0, 1fr); }
.page-top--wide .page-top__lead { max-width: 56ch; }
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.type p { margin: 0; font-size: 16px; color: var(--porcelain-dim); }
.mark { display: block; width: 64px; height: 64px; margin-bottom: 4px; }
.weapons { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.weapon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; }
.weapon h3 { margin-top: 0; }
.weapon p { margin: 0; max-width: 56ch; font-size: 18px; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 10px; border: 1.5px solid var(--porcelain-dim); color: var(--porcelain-dim); font: 400 14px var(--text); letter-spacing: .02em; vertical-align: 4px; }
@media (max-width: 760px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.plate--wide { grid-column: 1 / -1; }
.steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; max-width: 62ch; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; font-size: 19px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--porcelain-dim); font-family: var(--display); font-size: 18px; }

.ranksgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.rank { padding: 20px 20px 22px; background: var(--panel); border-top: 3px solid var(--gold); }
.rank h3 { margin-top: 0; }
.rank p { margin: 0 0 10px; font-size: 17px; }
.rank__meta { color: var(--gold); font-weight: 600; font-size: 15px !important; letter-spacing: .02em; }
.hotspots { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 62ch; font-size: 19px; }
.hotspots li { padding-left: 18px; border-left: 3px solid var(--field); }
@media (max-width: 760px) { .ranksgrid { grid-template-columns: minmax(0, 1fr); } }

/* layer 2, the story: dashed panels mark it as the deeper layer */
.legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.leg { padding: 22px 22px 24px; background: var(--panel); border: 1.5px dashed var(--porcelain-dim); }
.leg h3 { margin-top: 0; }
.leg p { margin: 0; font-size: 17px; }
@media (max-width: 760px) { .legs { grid-template-columns: minmax(0, 1fr); } }

/* layer 3: one entry per rule, with its ID and status */
.rules-key { margin: 18px 0 0; display: grid; gap: 8px; font-size: 16px; color: var(--porcelain-dim); }
.rules-key p { margin: 0; }
.rules-key .stamp { transform: none; font-size: 14px; }
.rules { display: grid; gap: 0; border-top: 1px solid rgba(232,231,226,.18); }
.rule { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(232,231,226,.18); }
.rule__id { font-family: var(--display); font-size: 20px; color: var(--porcelain-dim); padding-top: 3px; }
.rule h2 { font-size: 24px; letter-spacing: .02em; margin-bottom: 8px; }
.rule p { margin: 0; max-width: 62ch; font-size: 18px; }
.rule .stamp { transform: none; font-size: 14px; white-space: nowrap; margin-top: 4px; }
@media (max-width: 640px) { .rule { grid-template-columns: minmax(0, 1fr); } .rule .stamp { justify-self: start; order: -1; } .rule__id { order: -2; } }

/* phones: wide diagrams scale down, so their labels grow; the header puts the breadcrumb on its own row */
@media (max-width: 760px) {
  .plate--wide .fig__label text { font-size: 27px; }
}
@media (max-width: 560px) {
  .page-head { flex-wrap: wrap; row-gap: 10px; }
  .page-head .lang-switch { margin-left: auto; align-self: center; }
  .crumbs { order: 3; flex-basis: 100%; padding-bottom: 0; }
}

/* phones: until a portrait background exists, the same layers are shown larger than the screen, centred on the Pride,
   with the two figures moved in beside it (the stage is 240cqw wide, so the screen shows its middle 42%) */
@media (max-width: 700px) {
  .stage {
    width: 240cqw;
    top: auto;
    bottom: 9%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .layer--nihlo { left: 26%; width: 22%; bottom: -6%; }
  .layer--omnis { left: 52%; width: 22%; bottom: -6%; }
}

.rules__group { font-size: 30px; letter-spacing: .03em; padding: 36px 0 14px; margin: 0; border-bottom: 1px solid rgba(232,231,226,.18); }
.rules__group:first-child { padding-top: 12px; }