/* =====================================================================
   Leviathan's Wake — "Deep Space" theme
   1970s painted paperback-cover science fiction: Berkey, Foss, Di Fate.
   Midnight-blue void, spattered starfields, bone-white hulls, molten
   orange engine light, cyan atmospheric haze.

   Same structure and selectors as the paper theme — only the palette and
   the surface treatments change. Hard screen-print edges and offset
   shadows give way to thin luminous rules and soft glows, because that
   is how light behaves in an airbrushed painting.
   ===================================================================== */

:root {
  --void: #070b18;
  --void-2: #0c1226;
  --void-3: #121a35;
  --panel: #141d3a;
  --panel-2: #1b2547;

  --bone: #ecebe4;
  --bone-soft: #a8b6cd;
  --bone-dim: #7d8ba5;

  --flare: #ff6a1f;
  --flare-deep: #d94a12;
  --gold: #ffb42e;
  --cyan: #52d7e8;
  --cyan-deep: #1f8fa6;
  --hull-red: #e2402c;

  --edge: rgba(126, 170, 214, 0.34);
  --edge-strong: rgba(150, 195, 235, 0.55);
  --rule: 1px solid var(--edge);
  --rule-faint: 1px solid rgba(126, 170, 214, 0.18);
  --radius-lg: 28px;
  --radius-sm: 10px;

  /* Page measure. Anything that needs to reason about how much room is left
     beside the content column derives it from these. */
  --page-max: 1180px;
  --page-pad: 24px;

  --glow-sm: 0 0 18px rgba(82, 215, 232, 0.1), 0 6px 22px rgba(0, 0, 0, 0.5);
  --glow-md: 0 0 28px rgba(82, 215, 232, 0.14), 0 14px 40px rgba(0, 0, 0, 0.6);

  --font-display: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --font-mono: "Space Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Map glyph colors, read at runtime by assets/js/palette.js. */
  --map-line: #b9d3ea;
  --map-ink: #04070f;
  --map-field: #050a16;
  --map-route: #ffb42e;
  --map-alert: #ff6a1f;
  --map-planet: #3fa9c4;
  --map-moon: #cfd6e0;
  --map-belt: #8d99ae;
  --map-ruins: #b8532c;
  --map-giant: #e0a049;
  --map-giant-band: #b8532c;
  --map-companion: #d08a4a;
  --map-gate-node: #ffd98a;

  /* Brand mark. */
  --mark-disc: #ff6a1f;
  --mark-line: #ecebe4;
  --mark-edge: #04070f;

  --eyebrow-hero: #ffb42e;
  --hero-ring: #52d7e8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--void);
  /* A starfield rather than paper grain. Several speckle layers at
     mutually prime sizes and offsets, so no single grid is legible. */
  background-image:
    radial-gradient(circle at 20% 12%, rgba(51, 96, 150, 0.22), transparent 55%),
    radial-gradient(circle at 82% 68%, rgba(126, 60, 30, 0.16), transparent 52%),
    radial-gradient(rgba(233, 243, 255, 0.85) 0.8px, transparent 0.9px),
    radial-gradient(rgba(210, 228, 255, 0.5) 0.6px, transparent 0.7px),
    radial-gradient(rgba(255, 236, 210, 0.45) 0.7px, transparent 0.8px),
    radial-gradient(rgba(200, 220, 245, 0.3) 0.5px, transparent 0.6px);
  background-size:
    100% 100%,
    100% 100%,
    311px 277px,
    163px 197px,
    229px 181px,
    97px 113px;
  background-position:
    0 0,
    0 0,
    17px 43px,
    91px 11px,
    53px 137px,
    0 0;
  background-attachment: fixed;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold);
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  color: var(--bone);
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 0 40px rgba(82, 215, 232, 0.2);
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

p {
  margin: 0 0 1em;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.narrow {
  max-width: 820px;
}

/* ------------------------------ header ------------------------------ */

.site-header {
  border-bottom: var(--rule);
  background: rgba(8, 13, 28, 0.86);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bone);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  white-space: nowrap;
}

.brand:hover {
  color: var(--gold);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  filter: drop-shadow(0 0 8px rgba(255, 106, 31, 0.6));
}

.nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.nav > a,
.nav-item > a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-soft);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 6px 16px;
  background: rgba(20, 29, 58, 0.7);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nav > a:hover,
.nav-item > a:hover {
  background: var(--panel-2);
  border-color: var(--cyan);
  color: var(--bone);
}

.nav > a[aria-current],
.nav-item > a[aria-current] {
  background: var(--flare);
  border-color: var(--flare);
  color: #0b1020;
  box-shadow: 0 0 16px rgba(255, 106, 31, 0.45);
}

/* --------------------------- nav dropdown --------------------------- */

.nav-item {
  position: relative;
  display: flex;
}

.nav-menu {
  --menu-w: 232px;
  /* Room between the content column and the viewport edge on this side. The
     nav sits flush with the content edge, so this is the slack the menu has
     to grow into. */
  --slack: calc((100vw - min(var(--page-max), 100vw)) / 2);

  position: absolute;
  top: calc(100% + 10px);
  /* Line the menu up with the left edge of its button, then pull it back left
     by however much it would otherwise spill past the page gutter — so it is
     always fully visible, and only ever moves as far as it has to. */
  left: min(0px, calc(100% + var(--slack) - var(--menu-w)));
  width: var(--menu-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: rgba(12, 18, 38, 0.97);
  backdrop-filter: blur(10px);
  border: var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* Bridges the gap between the button and the menu so the menu doesn't close
   while the pointer is travelling to it. */
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-bottom: var(--rule-faint);
  margin: 12px 10px 6px;
  padding-bottom: 6px;
}

.nav-menu-label:first-child {
  margin-top: 2px;
}

.nav-menu a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bone-soft);
  padding: 7px 10px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

.nav-menu a:hover {
  background: var(--panel-2);
  color: var(--bone);
}

.nav-menu a[aria-current="page"] {
  color: var(--flare);
  background: rgba(255, 106, 31, 0.12);
}

/* Drop the menu when it can't behave: no hover on touch, and below ~490px the
   nav wraps onto two lines, which moves the button away from the right edge
   and leaves nowhere sensible to anchor. The button still goes to the sector
   page, which lists every system. */
@media (hover: none), (max-width: 520px) {
  .nav-menu {
    display: none;
  }
}

/* ------------------------------- hero ------------------------------- */

.hero {
  border-bottom: var(--rule);
  background:
    radial-gradient(ellipse at 78% 14%, rgba(255, 140, 40, 0.16), transparent 58%),
    radial-gradient(ellipse at 12% 82%, rgba(31, 143, 166, 0.22), transparent 60%),
    linear-gradient(160deg, #101a3a 0%, #070b18 62%);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 24px 64px;
  position: relative;
  z-index: 2;
}

.hero-inner.solo {
  grid-template-columns: 1fr;
  max-width: 900px;
  padding-bottom: 56px;
}

/* Full-bleed banner. The art is an ultra-wide ~4:1 strip, so at full viewport
   width it lands near the 520px cap without being cropped; cover only trims on
   viewports wider than about 2080px. */
section.band.banner {
  padding: 0;
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}

.hero h1 {
  margin-bottom: 0.3em;
}

.hero .lede {
  font-size: 1.2rem;
  max-width: 46ch;
  color: var(--bone-soft);
}

.hero-art {
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--glow-md);
  background: var(--void-2);
}

.hero-rings {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------ blocks ------------------------------ */

section.band {
  border-bottom: var(--rule);
  padding: 56px 0;
}

section.band.alt {
  background: rgba(18, 26, 53, 0.55);
}

section.band.ink {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(31, 143, 166, 0.18), transparent 60%),
    #04070f;
  color: var(--bone);
}

section.band.ink a {
  color: var(--gold);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.band.ink .eyebrow {
  color: var(--gold);
}

.grid {
  display: grid;
  gap: 22px;
}

.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid.top {
  align-items: start;
}

.panel-art {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: var(--rule);
}

.panel {
  background: linear-gradient(170deg, rgba(27, 37, 71, 0.9), rgba(12, 18, 38, 0.9));
  border: var(--rule);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  padding: 24px 26px;
  box-shadow: var(--glow-sm);
}

.panel.flush {
  padding: 0;
  overflow: hidden;
}

.panel h3 {
  margin-bottom: 0.4em;
}

.panel p:last-child {
  margin-bottom: 0;
}

.stat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* chips */

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  padding: 3px 12px;
  background: rgba(27, 37, 71, 0.8);
  color: var(--bone);
  white-space: nowrap;
}

.chip.gate {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100a;
}

.chip.fringe {
  background: var(--cyan-deep);
  border-color: var(--cyan);
  color: #051317;
}

.chip.rich {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100a;
}

.chip.middling {
  background: rgba(140, 158, 186, 0.35);
  color: var(--bone);
}

.chip.poor {
  background: var(--flare-deep);
  border-color: var(--flare);
  color: #fff2e8;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* buttons */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--flare);
  color: #0b1020;
  border: 1px solid var(--flare);
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: 0 0 22px rgba(255, 106, 31, 0.4);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.btn:hover {
  color: #0b1020;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255, 180, 46, 0.55);
}

.btn.secondary {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(82, 215, 232, 0.18);
}

.btn.secondary:hover {
  color: #051317;
  background: var(--cyan);
  border-color: var(--cyan);
}

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* --------------------------- system cards --------------------------- */

.sys-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(170deg, rgba(27, 37, 71, 0.92), rgba(10, 15, 32, 0.94));
  border: var(--rule);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: var(--glow-sm);
}

.sys-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 0 34px rgba(82, 215, 232, 0.22), 0 18px 44px rgba(0, 0, 0, 0.66);
  color: inherit;
}

.sys-card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--void-3);
  border-bottom: var(--rule);
  object-fit: cover;
  width: 100%;
}

.sys-card .body {
  padding: 18px 20px 22px;
}

.sys-card h3 {
  margin-bottom: 6px;
}

.sys-card p {
  font-size: 0.95rem;
  color: var(--bone-soft);
  margin: 0;
}

/* ------------------------------- maps ------------------------------- */

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr);
  gap: 24px;
  align-items: start;
}

.map-frame {
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  /* Slightly lifted from the page so the chart still reads as an
     instrument panel rather than a hole in the background. */
  background: radial-gradient(ellipse at 50% 45%, #142145 0%, #080f22 74%);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), var(--glow-sm);
}

.map-frame svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.map-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-top: var(--rule);
  background: rgba(20, 29, 58, 0.9);
  color: var(--bone-soft);
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.swatch {
  width: 22px;
  height: 0;
  border-top: 3px solid var(--map-line);
  display: inline-block;
}

.swatch.dashed {
  border-top-style: dashed;
}

.swatch.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--edge-strong);
}

.readout {
  border: var(--rule);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  background: linear-gradient(170deg, rgba(27, 37, 71, 0.9), rgba(12, 18, 38, 0.9));
  padding: 22px 24px;
  position: sticky;
  top: 92px;
  box-shadow: var(--glow-sm);
}

.readout h3 {
  margin-bottom: 4px;
}

.readout .stat {
  display: block;
  margin-bottom: 12px;
}

.readout p {
  font-size: 0.95rem;
}

.readout .hint {
  color: var(--bone-dim);
  font-style: italic;
}

/* SVG map internals */

.map-node {
  cursor: pointer;
}

.map-node:focus {
  outline: none;
}

.map-node:focus-visible .node-ring,
.map-node.is-active .node-ring {
  opacity: 1;
}

.node-ring {
  opacity: 0;
  transition: opacity 0.12s;
}

.map-node text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  fill: var(--bone);
  paint-order: stroke;
  stroke: #050a16;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.map-node .sub {
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.14em;
}

.star-label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  fill: var(--bone);
  paint-order: stroke;
  stroke: #050a16;
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.star-label.sub {
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.14em;
}

.map-link {
  stroke: var(--map-line);
  stroke-width: 3;
  opacity: 0.6;
}

.map-link.leviathan {
  stroke: var(--gold);
  stroke-dasharray: 10 9;
  opacity: 0.85;
}

.map-link.leviathan.none {
  stroke: var(--flare);
  stroke-dasharray: 4 10;
}

.map-orbit {
  fill: none;
  stroke: var(--map-line);
  stroke-width: 2;
  opacity: 0.22;
  stroke-dasharray: 3 8;
}

.dimmed {
  opacity: 0.2;
  transition: opacity 0.15s;
}

/* ------------------------------ tables ------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  background: rgba(16, 24, 48, 0.75);
  border: var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(126, 170, 214, 0.16);
  font-size: 0.95rem;
  vertical-align: top;
}

th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(27, 37, 71, 0.9);
  color: var(--gold);
}

tr:last-child td {
  border-bottom: none;
}

/* ------------------------- prose / detail page ---------------------- */

.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.85fr);
  gap: 32px;
  align-items: start;
}

.dl {
  margin: 0;
}

.dossier-art {
  width: 100%;
  display: block;
  border: 1px solid var(--edge-strong);
  border-radius: 28px 10px 28px 10px;
  margin-bottom: 22px;
  box-shadow: var(--glow-md);
}

.dl dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flare);
  margin-top: 16px;
}

.dl dt:first-child {
  margin-top: 0;
}

.dl dd {
  margin: 4px 0 0;
  font-size: 0.98rem;
  color: var(--bone-soft);
}

.pull {
  border-left: 3px solid var(--flare);
  padding: 4px 0 4px 18px;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--bone-soft);
  margin: 0 0 24px;
}

.place {
  border: var(--rule);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
  background: linear-gradient(170deg, rgba(27, 37, 71, 0.85), rgba(12, 18, 38, 0.85));
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--glow-sm);
}

.place h4 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.place .capital {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}

.neighbors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.neighbors a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px 14px;
  background: rgba(27, 37, 71, 0.8);
  color: var(--bone-soft);
}

.neighbors a:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #051317;
}

/* ------------------------------ footer ------------------------------ */

.site-footer {
  background: #04070f;
  color: var(--bone-dim);
  padding: 40px 0;
  font-size: 0.9rem;
  border-top: var(--rule);
}

.site-footer a {
  color: var(--gold);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------- responsiveness -------------------------- */

@media (max-width: 900px) {
  .hero-inner,
  .map-layout,
  .dossier {
    grid-template-columns: 1fr;
  }

  .readout {
    position: static;
  }
}

/* Long eyebrows wrap on small phones, which breaks the hairline rule. Keep the
   type size and tighten the tracking instead. */
@media (max-width: 480px) {
  .eyebrow {
    letter-spacing: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}