/* The news pages (/news, /news/<slug>): written by the platform (News/NewsSite.cs), read beside the play page
   in its world (the GPL page's DESIGN.md, "The Arena Rim"): the night ground, the off-white ink ramp, hairlines
   like the floor grid, square cells. What is read (the list's rows, a post) sits on the paper, one step up from
   the night, in a softer reading ink; the frame round it stays the night. The game's bitmap face sets the
   wordmark only; Akshar every label and heading; Overpass the reading. Cyan is the trail's alone and means
   where you are or what you can follow: the focus ring, a hovered or focused row's 4u bar (on its solid ground, as
   the home menu's trail marks its row) and a link's underline; titles, keys and acts stay ink. No script; the fonts
   are the site's own files. */

@font-face {
  font-family: "Armagetron";
  src: url("/fonts/armagetron.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Akshar";
  src: url("/fonts/akshar-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Akshar";
  src: url("/fonts/akshar-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Overpass;
  src: url("/fonts/overpass-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Overpass;
  src: url("/fonts/overpass-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: clamp(0.8px, 0.0651vw, 1.25px);
  --night: #07090c;
  /* the reading surface: one step up from the night, so light words sit on it without glowing (critique 2026-10-17:
     the reading was harsh on the near-black); the frame round it stays the night, so nothing flashes */
  --paper: #11161d;
  /* a row under the pointer or the keys: a step up from the paper, as the game's menus lift theirs */
  --row-hover: #161c25;
  --row-focus: #1a2130;
  --measure: calc(693 * var(--u));
  --well: #0b0f14;
  --ink: #f2f4f7;
  --ink-rest: #b3bfcf;
  --ink-quiet: #8995a6;
  /* the words on the paper: a warmer, softer reading ink and its strong step (bold, links); the full ink is for titles */
  --text: #bcc4ce;
  --text-strong: #dfe4ea;
  --hairline: rgba(142, 156, 176, 0.3);
  --cell-line: rgba(142, 156, 176, 0.38);
  --trail: #2fd3ff;
  --font-display: "Armagetron", "VCR OSD Mono", "Lucida Console", monospace;
  --font-label: "Akshar", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-text: Overpass, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: 7.73%;
  color-scheme: dark;
  accent-color: var(--trail);
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--cell-line) var(--night);
}

body.news {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--ink-rest);
  font-family: var(--font-text);
  font-size: calc(20 * var(--u));
  line-height: 1.6;
  overflow-wrap: break-word;
}

::selection { background: var(--trail); color: #000; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--trail); outline-offset: calc(3 * var(--u)); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  background: var(--ink);
  color: #000;
  font: 600 calc(16 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-120%);
}
.skip:focus-visible { transform: none; }

.arrow {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ---- the top: the wordmark (to the game), NEWS and PLAY as the status bar's cells ------------------------------ */

/* the top shares the content's edges, so the wordmark, the column and the cells line up */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--u)) calc(28 * var(--u));
  width: 100%;
  max-width: calc(1180 * var(--u) + 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(40 * var(--u)) var(--gutter) 0;
}

/* what Retrocycles is, for whoever came by a shared link */
.tagline {
  margin: 0;
  padding-top: calc(6 * var(--u));
  color: var(--ink-quiet);
  font: 400 calc(17 * var(--u)) / 1.2 var(--font-text);
}

.mark {
  font-family: var(--font-display);
  font-size: calc(72 * var(--u));
  line-height: 1;
  letter-spacing: calc(-8 * var(--u));
  text-transform: uppercase;
  text-shadow: calc(3 * var(--u)) 0 0 currentColor;
  color: var(--ink);
  text-decoration: none;
  -webkit-font-smoothing: none;
}

.top-acts { display: flex; gap: calc(12 * var(--u)); margin-left: auto; }

.cell {
  display: inline-flex;
  align-items: center;
  height: calc(50 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid var(--cell-line);
  background: rgba(8, 11, 16, 0.78);
  color: var(--ink-rest);
  font: 500 calc(17 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 140ms ease-out, border-color 140ms ease-out, background-color 140ms ease-out;
}

.cell:hover,
.cell:focus-visible,
.cell[aria-current="page"] { border-color: var(--ink-quiet); color: var(--ink); }

.cell-solid { border-color: var(--ink); background: var(--ink); color: #000; font-weight: 600; }
.cell-solid:hover,
.cell-solid:focus-visible { border-color: #fff; background: #fff; color: #000; }

/* ---- the head ------------------------------------------------------------------------------------------------------ */

.wrap {
  flex: 1;
  width: 100%;
  max-width: calc(1180 * var(--u) + 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(56 * var(--u)) var(--gutter) 0;
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(10 * var(--u)) calc(28 * var(--u));
  padding-bottom: calc(24 * var(--u));
}

.head-title {
  margin: 0;
  color: var(--ink);
  font: 600 calc(56 * var(--u)) / 0.9 var(--font-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.head-say {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-quiet);
  font-size: calc(21 * var(--u));
  line-height: 1.4;
}

.empty { margin: calc(48 * var(--u)) 0 0; color: var(--ink-quiet); }

/* the key over a title: the kind, then the day after a 1px rule */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--u)) 0;
  font: 400 calc(16 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kind { padding-right: calc(14 * var(--u)); color: var(--text-strong); font-weight: 600; }

.date {
  padding-left: calc(14 * var(--u));
  border-left: 1px solid var(--cell-line);
  color: var(--ink-quiet);
  font-variant-numeric: tabular-nums;
}

/* ---- the list: one row per post on the paper, under hairlines; each leads with its picture, the newest larger ------- */

.posts {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.post + .post { border-top: 1px solid var(--hairline); }

.post-act {
  position: relative;
  display: grid;
  grid-template-columns: calc(240 * var(--u)) minmax(0, 1fr);
  column-gap: calc(32 * var(--u));
  align-items: start;
  padding: calc(22 * var(--u)) calc(36 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease-out;
}

.post-act::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(4 * var(--u));
  background: var(--trail);
  opacity: 0;
}

.post-act:hover { background: var(--row-hover); }
.post-act:focus-visible { outline: none; background: var(--row-focus); }
.post-act:focus-visible .post-title { font-weight: 600; }
.post-act:hover::before,
.post-act:focus-visible::before { opacity: 1; }

.post-pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--cell-line);
  background: var(--well);
}

/* a post without an upload: the arena's floor running to its horizon, under a hairline */
.post-floor { position: relative; overflow: hidden; aspect-ratio: 16 / 7; background: linear-gradient(to bottom, var(--well) 40%, #0e131a); }
.post-floor::after { content: ""; position: absolute; left: 0; right: 0; top: 40%; border-top: 1px solid var(--hairline); }
.post-floor::before {
  content: "";
  position: absolute;
  left: -60%;
  right: -60%;
  top: 40%;
  height: 130%;
  background-image:
    linear-gradient(rgba(142, 156, 176, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 156, 176, 0.5) 1px, transparent 1px);
  background-size: calc(34 * var(--u)) calc(34 * var(--u));
  transform: perspective(calc(240 * var(--u))) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
  mask-image: linear-gradient(to bottom, transparent, #000 35%);
}

.post-text { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; padding-top: calc(4 * var(--u)); }

.post-title {
  color: var(--ink);
  font: 500 calc(32 * var(--u)) / 1.12 var(--font-label);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.post-say {
  max-width: 60ch;
  color: var(--text);
  font-size: calc(18 * var(--u));
  line-height: 1.55;
  text-wrap: pretty;
}

.post-lead .post-act {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: calc(44 * var(--u));
  align-items: center;
  padding: calc(32 * var(--u)) calc(44 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u));
}

.post-lead .post-text { gap: calc(16 * var(--u)); }
.post-lead .post-title { font-size: calc(52 * var(--u)); line-height: 1.02; font-weight: 600; }
.post-lead .post-say { font-size: calc(20 * var(--u)); }

.pages {
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  margin-top: calc(32 * var(--u));
}

.page-older { margin-left: auto; }

.page-act,
.back-act {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(44 * var(--u));
  color: var(--ink-rest);
  font: 500 calc(17 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.page-act:hover,
.page-act:focus-visible,
.back-act:hover,
.back-act:focus-visible { color: var(--ink); }

/* ---- a post: one centred column; the article on the paper, the way back above and below it ----------------------- */

.read { max-width: calc(880 * var(--u)); margin: 0 auto; }

.back-act { margin-top: calc(-40 * var(--u)); }
.back-end { margin-top: calc(28 * var(--u)); }

.article {
  margin-top: calc(20 * var(--u));
  padding: calc(56 * var(--u)) calc(64 * var(--u)) calc(60 * var(--u));
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.article-head { padding-bottom: calc(36 * var(--u)); border-bottom: 1px solid var(--hairline); }

.article-title {
  margin: calc(20 * var(--u)) 0 0;
  color: var(--ink);
  font: 600 calc(60 * var(--u)) / 1.04 var(--font-label);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.article-lead {
  max-width: 30em;
  margin: calc(22 * var(--u)) 0 0;
  color: var(--text);
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  text-wrap: pretty;
}

/* the reading: 21u Overpass at 1.65, its words in a 33em measure (about 72 characters; --measure), pictures and
   code the full column, a paragraph's breath between blocks */
.article-body {
  padding-top: calc(8 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.65;
}

.article-body > * { max-width: var(--measure); margin: calc(28 * var(--u)) 0 0; }
.article-body > p:has(> img:only-child),
.article-body > pre,
.article-body > table { max-width: none; }

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--ink);
  font-family: var(--font-label);
  line-height: 1.15;
  text-wrap: balance;
  scroll-margin-top: calc(24 * var(--u));
}

.article-body h2 {
  margin-top: calc(60 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body h3 { margin-top: calc(44 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; }
.article-body h4,
.article-body h5,
.article-body h6 { margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 600; }

.article-body h2 + *,
.article-body h3 + *,
.article-body h4 + * { margin-top: calc(16 * var(--u)); }

.article-body p { text-wrap: pretty; }

.article-body strong { color: var(--text-strong); font-weight: 600; }

/* a link: the reading's strong ink over the trail's line, the colour of what can be followed */
.article-body a {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--trail);
  text-decoration-thickness: calc(2 * var(--u));
  text-underline-offset: calc(4 * var(--u));
}

.article-body a:hover { color: var(--ink); text-decoration-color: var(--trail); text-decoration-thickness: calc(3 * var(--u)); }

/* lists: the status bar's online square, in quiet ink, before each item */
.article-body ul,
.article-body ol { padding: 0 0 0 calc(30 * var(--u)); }
.article-body ul { list-style: none; }
.article-body li + li { margin-top: calc(12 * var(--u)); }
.article-body ul > li { position: relative; }
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: calc(-24 * var(--u));
  top: 0.66em;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  background: var(--ink-quiet);
}
.article-body ol > li::marker {
  color: var(--ink-quiet);
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
}

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: calc(12 * var(--u)) 0;
  border: 1px solid var(--cell-line);
  background: var(--well);
}

.article-body p:has(> img:only-child) { margin-top: calc(36 * var(--u)); margin-bottom: calc(12 * var(--u)); }

/* a quote: the reading's own ink behind a 1px line, never brighter than the words round it */
.article-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(24 * var(--u));
  border-left: 1px solid var(--cell-line);
  color: var(--text);
}
.article-body blockquote > :first-child { margin-top: 0; }
.article-body blockquote > :last-child { margin-bottom: 0; }

/* a command or a setting as the game spells it: a square well in the line */
.article-body code {
  padding: calc(1 * var(--u)) calc(6 * var(--u));
  border: 1px solid var(--cell-line);
  background: var(--well);
  color: var(--text-strong);
  font-family: var(--font-label);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

.article-body pre {
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--cell-line);
  background: var(--well);
  overflow-x: auto;
  line-height: 1.5;
}
.article-body pre code { padding: 0; border: 0; background: none; }

.article-body hr { height: 0; margin: calc(48 * var(--u)) 0; border: 0; border-top: 1px solid var(--hairline); }

.article-body table { width: 100%; border-collapse: collapse; font-size: 0.9em; font-variant-numeric: tabular-nums; }
.article-body th {
  padding: 0 calc(16 * var(--u)) calc(10 * var(--u)) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-quiet);
  font: 400 calc(15 * var(--u)) / 1.2 var(--font-label);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.article-body td { padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) 0; border-bottom: 1px solid var(--hairline); }

/* the way back into the game: the page's one solid act */
.article-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(16 * var(--u)) calc(28 * var(--u));
  margin-top: calc(60 * var(--u));
  padding-top: calc(40 * var(--u));
  border-top: 1px solid var(--hairline);
}

.solid-act {
  display: inline-flex;
  align-items: center;
  height: calc(68 * var(--u));
  padding: 0 calc(44 * var(--u));
  background: var(--ink);
  color: #000;
  font: 600 calc(26 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 140ms ease-out;
}
.solid-act:hover,
.solid-act:focus-visible { background: #fff; }

/* a missing post: the way into the game first, then the newest posts */
.lost-acts { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(28 * var(--u)); margin-top: calc(16 * var(--u)); }
.lost-acts + .more { margin-top: calc(72 * var(--u)); }

.article-end-say { margin: 0; color: var(--ink-quiet); font-size: calc(18 * var(--u)); }

.more { margin-top: calc(96 * var(--u)); }

.more-title {
  margin: 0 0 calc(16 * var(--u));
  color: var(--ink);
  font: 600 calc(30 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.more .post-act { grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr); padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); }
.more .post-title { font-size: calc(26 * var(--u)); }
.more .post-say { font-size: calc(17 * var(--u)); }

/* ---- the foot: the documents line ------------------------------------------------------------------------------ */

.foot { padding: calc(108 * var(--u)) var(--gutter) calc(40 * var(--u)); }

.foot-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 calc(32 * var(--u)); }

.foot-acts a {
  display: inline-flex;
  align-items: center;
  min-height: calc(44 * var(--u));
  color: var(--ink-quiet);
  font: 400 calc(16 * var(--u)) / 1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.foot-acts a:hover,
.foot-acts a:focus-visible { color: var(--ink); }

/* ---- the other widths ------------------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .post-act { grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr); column-gap: calc(28 * var(--u)); }
  .post-lead .post-act { grid-template-columns: minmax(0, 1fr); row-gap: calc(24 * var(--u)); }
}

@media (max-width: 760px) {
  :root { --u: clamp(0.9px, 0.26vw, 1.1px); --gutter: 16px; }
  body.news { font-size: 17px; }
  .top { padding-top: 20px; column-gap: 12px; }
  .tagline { order: 3; flex-basis: 100%; padding-top: 0; font-size: 14px; }
  .mark { font-size: 26px; letter-spacing: -3px; text-shadow: 1px 0 0 currentColor; }
  .cell { height: 44px; padding: 0 14px; font-size: 14px; }
  .top-acts { gap: 8px; }
  .wrap { padding-top: 36px; }
  .head { padding-bottom: 20px; }
  .head-title { font-size: 40px; }
  .head-say { flex-basis: 100%; font-size: 16px; }
  /* the paper runs to the screen's edges, its words on the heading's line */
  .posts,
  .article { margin-left: -16px; margin-right: -16px; }
  .post-act .post-floor { display: none; }
  .meta { font-size: 13px; }
  .kind { padding-right: 10px; }
  .date { padding-left: 10px; }
  .post-act,
  .post-lead .post-act,
  .more .post-act {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 16px 16px 22px;
  }
  .post-text,
  .post-lead .post-text { gap: 8px; padding-top: 0; }
  .post-title,
  .more .post-title { font-size: 23px; }
  .post-lead .post-title { font-size: 30px; }
  .post-say,
  .post-lead .post-say,
  .more .post-say { font-size: 16px; }
  .back-act { margin-top: -20px; font-size: 15px; }
  .back-end { margin-top: 16px; }
  .article { margin-top: 12px; padding: 24px 16px 28px; }
  .article-head { padding-bottom: 24px; }
  .article-title { font-size: 34px; }
  .article-lead { font-size: 19px; }
  .article-body { font-size: 17px; line-height: 1.6; }
  .article-body > * { margin-top: 20px; }
  .article-body h2 { font-size: 22px; margin-top: 40px; }
  .article-body h3 { font-size: 20px; margin-top: 32px; }
  .article-body h2 + *,
  .article-body h3 + *,
  .article-body h4 + * { margin-top: 12px; }
  .article-body ul,
  .article-body ol { padding-left: 22px; }
  .article-body ul > li::before { left: -18px; }
  .article-end { margin-top: 40px; padding-top: 28px; }
  .solid-act { height: 56px; padding: 0 28px; font-size: 20px; }
  .article-end-say { font-size: 15px; }
  .more { margin-top: 64px; }
  .more-title { font-size: 19px; }
  .foot { padding-top: 64px; }
  .foot-acts { gap: 0 20px; }
  .foot-acts a { min-height: 44px; font-size: 14px; }
}

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

@media print {
  html,
  body.news,
  .posts,
  .article { background: #fff; color: #000; }
  .top-acts,
  .foot,
  .more,
  .article-end,
  .back-act,
  .skip { display: none; }
  .article { padding: 0; }
  .mark,
  .article-title,
  .article-body h2,
  .article-body h3,
  .article-body strong,
  .article-body a,
  .article-body blockquote,
  .kind { color: #000; }
  .article-lead,
  .date { color: #333; }
}