/* stumo-2027.css -- the Student Movement newspaper inside the 2027 chrome.
   Its templates (issues/issue.dt, article.dt, archives.tt) are laid out on the
   Bootstrap 3 grid, which index.css does not carry. This is a scoped stand-in
   for just the Bootstrap bits they use (container/row/col-*, visible-/hidden-,
   img-responsive, pull/text helpers, hr, heading scale) plus the type values
   the paper had on www, so the content area keeps its newspaper look while the
   header/footer are the 2027 ones. Everything is scoped to .stumo .body (the
   paper's own wrapper), so nothing leaks into the chrome. specific.css (the
   paper's own rules, compiled from specific.less) loads after this. */

.stumo .body { font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 16px; line-height: 1.428571; color: #333; }
.stumo .body *, .stumo .body *::before, .stumo .body *::after { box-sizing: border-box; }
.stumo .body .container { width: 100%; margin-inline: auto; padding-inline: 15px; }
.stumo .body .container::after, .stumo .body .row::after { content: ""; display: table; clear: both; }
.stumo .body .row { margin-inline: -15px; }
.stumo .body .col-xs-1,
.stumo .body .col-xs-2,
.stumo .body .col-xs-3,
.stumo .body .col-xs-4,
.stumo .body .col-xs-5,
.stumo .body .col-xs-6,
.stumo .body .col-xs-7,
.stumo .body .col-xs-8,
.stumo .body .col-xs-9,
.stumo .body .col-xs-10,
.stumo .body .col-xs-11,
.stumo .body .col-xs-12,
.stumo .body .col-sm-1,
.stumo .body .col-sm-2,
.stumo .body .col-sm-3,
.stumo .body .col-sm-4,
.stumo .body .col-sm-5,
.stumo .body .col-sm-6,
.stumo .body .col-sm-7,
.stumo .body .col-sm-8,
.stumo .body .col-sm-9,
.stumo .body .col-sm-10,
.stumo .body .col-sm-11,
.stumo .body .col-sm-12,
.stumo .body .col-md-1,
.stumo .body .col-md-2,
.stumo .body .col-md-3,
.stumo .body .col-md-4,
.stumo .body .col-md-5,
.stumo .body .col-md-6,
.stumo .body .col-md-7,
.stumo .body .col-md-8,
.stumo .body .col-md-9,
.stumo .body .col-md-10,
.stumo .body .col-md-11,
.stumo .body .col-md-12,
.stumo .body .col-lg-1,
.stumo .body .col-lg-2,
.stumo .body .col-lg-3,
.stumo .body .col-lg-4,
.stumo .body .col-lg-5,
.stumo .body .col-lg-6,
.stumo .body .col-lg-7,
.stumo .body .col-lg-8,
.stumo .body .col-lg-9,
.stumo .body .col-lg-10,
.stumo .body .col-lg-11,
.stumo .body .col-lg-12 { position: relative; min-height: 1px; padding-inline: 15px; }
.stumo .body .col-xs-1,
.stumo .body .col-xs-2,
.stumo .body .col-xs-3,
.stumo .body .col-xs-4,
.stumo .body .col-xs-5,
.stumo .body .col-xs-6,
.stumo .body .col-xs-7,
.stumo .body .col-xs-8,
.stumo .body .col-xs-9,
.stumo .body .col-xs-10,
.stumo .body .col-xs-11,
.stumo .body .col-xs-12 { float: left; }
.stumo .body .col-xs-1 { width: 8.333333%; }
.stumo .body .col-xs-2 { width: 16.666667%; }
.stumo .body .col-xs-3 { width: 25.000000%; }
.stumo .body .col-xs-4 { width: 33.333333%; }
.stumo .body .col-xs-5 { width: 41.666667%; }
.stumo .body .col-xs-6 { width: 50.000000%; }
.stumo .body .col-xs-7 { width: 58.333333%; }
.stumo .body .col-xs-8 { width: 66.666667%; }
.stumo .body .col-xs-9 { width: 75.000000%; }
.stumo .body .col-xs-10 { width: 83.333333%; }
.stumo .body .col-xs-11 { width: 91.666667%; }
.stumo .body .col-xs-12 { width: 100.000000%; }
@media (min-width: 768px) {
  .stumo .body .container { max-width: 750px; }
  .stumo .body .col-sm-1,
.stumo .body .col-sm-2,
.stumo .body .col-sm-3,
.stumo .body .col-sm-4,
.stumo .body .col-sm-5,
.stumo .body .col-sm-6,
.stumo .body .col-sm-7,
.stumo .body .col-sm-8,
.stumo .body .col-sm-9,
.stumo .body .col-sm-10,
.stumo .body .col-sm-11,
.stumo .body .col-sm-12 { float: left; }
  .stumo .body .col-sm-1 { width: 8.333333%; }
  .stumo .body .col-sm-2 { width: 16.666667%; }
  .stumo .body .col-sm-3 { width: 25.000000%; }
  .stumo .body .col-sm-4 { width: 33.333333%; }
  .stumo .body .col-sm-5 { width: 41.666667%; }
  .stumo .body .col-sm-6 { width: 50.000000%; }
  .stumo .body .col-sm-7 { width: 58.333333%; }
  .stumo .body .col-sm-8 { width: 66.666667%; }
  .stumo .body .col-sm-9 { width: 75.000000%; }
  .stumo .body .col-sm-10 { width: 83.333333%; }
  .stumo .body .col-sm-11 { width: 91.666667%; }
  .stumo .body .col-sm-12 { width: 100.000000%; }
}
@media (min-width: 992px) {
  .stumo .body .container { max-width: 970px; }
  .stumo .body .col-md-1,
.stumo .body .col-md-2,
.stumo .body .col-md-3,
.stumo .body .col-md-4,
.stumo .body .col-md-5,
.stumo .body .col-md-6,
.stumo .body .col-md-7,
.stumo .body .col-md-8,
.stumo .body .col-md-9,
.stumo .body .col-md-10,
.stumo .body .col-md-11,
.stumo .body .col-md-12 { float: left; }
  .stumo .body .col-md-1 { width: 8.333333%; }
  .stumo .body .col-md-2 { width: 16.666667%; }
  .stumo .body .col-md-3 { width: 25.000000%; }
  .stumo .body .col-md-4 { width: 33.333333%; }
  .stumo .body .col-md-5 { width: 41.666667%; }
  .stumo .body .col-md-6 { width: 50.000000%; }
  .stumo .body .col-md-7 { width: 58.333333%; }
  .stumo .body .col-md-8 { width: 66.666667%; }
  .stumo .body .col-md-9 { width: 75.000000%; }
  .stumo .body .col-md-10 { width: 83.333333%; }
  .stumo .body .col-md-11 { width: 91.666667%; }
  .stumo .body .col-md-12 { width: 100.000000%; }
}
@media (min-width: 1200px) {
  .stumo .body .container { max-width: 1170px; }
  .stumo .body .col-lg-1,
.stumo .body .col-lg-2,
.stumo .body .col-lg-3,
.stumo .body .col-lg-4,
.stumo .body .col-lg-5,
.stumo .body .col-lg-6,
.stumo .body .col-lg-7,
.stumo .body .col-lg-8,
.stumo .body .col-lg-9,
.stumo .body .col-lg-10,
.stumo .body .col-lg-11,
.stumo .body .col-lg-12 { float: left; }
  .stumo .body .col-lg-1 { width: 8.333333%; }
  .stumo .body .col-lg-2 { width: 16.666667%; }
  .stumo .body .col-lg-3 { width: 25.000000%; }
  .stumo .body .col-lg-4 { width: 33.333333%; }
  .stumo .body .col-lg-5 { width: 41.666667%; }
  .stumo .body .col-lg-6 { width: 50.000000%; }
  .stumo .body .col-lg-7 { width: 58.333333%; }
  .stumo .body .col-lg-8 { width: 66.666667%; }
  .stumo .body .col-lg-9 { width: 75.000000%; }
  .stumo .body .col-lg-10 { width: 83.333333%; }
  .stumo .body .col-lg-11 { width: 91.666667%; }
  .stumo .body .col-lg-12 { width: 100.000000%; }
}

/* responsive visibility (Bootstrap 3) */
.stumo .body .visible-xs-block, .stumo .body .visible-sm-block { display: none !important; }
@media (max-width: 767px) { .stumo .body .visible-xs-block { display: block !important; } .stumo .body .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .stumo .body .visible-sm-block { display: block !important; } .stumo .body .hidden-sm { display: none !important; } }

/* helpers */
.stumo .body .img-responsive { display: block; max-width: 100%; height: auto; }
.stumo .body .center-block { margin-inline: auto; }
.stumo .body .pull-right { float: right !important; }
.stumo .body .text-right { text-align: right; }
.stumo .body .text-center { text-align: center; }

/* type + rhythm (base.css zeroes every margin). :where() keeps these at
   element specificity so specific.css (.stumo h3 ...) still wins, as it did
   over Bootstrap on www. */
:where(.stumo .body) h1, :where(.stumo .body) h2, :where(.stumo .body) h3, :where(.stumo .body) h4, :where(.stumo .body) h5, :where(.stumo .body) h6 { font-weight: 400; line-height: 1.1; margin: 20px 0 10px; }
:where(.stumo .body) h4, :where(.stumo .body) h5, :where(.stumo .body) h6 { margin-block: 10px; }
:where(.stumo .body) h1 { font-size: 36px; }
:where(.stumo .body) h2 { font-size: 30px; }
:where(.stumo .body) h3 { font-size: 24px; }
:where(.stumo .body) h4 { font-size: 18px; }
:where(.stumo .body) p { margin: 0 0 10px; }
:where(.stumo .body) :is(p, li, figcaption) { line-height: inherit; }
:where(.stumo .body) ul, :where(.stumo .body) ol { margin: 0 0 10px; padding-left: 40px; }
:where(.stumo .body) ul { list-style: disc; }
:where(.stumo .body) ol { list-style: decimal; }
:where(.stumo .body) blockquote { margin: 0 0 20px; padding: 10px 20px; border-left: 5px solid #eee; font-size: 17.5px; }
:where(.stumo .body) figure { margin: 0; }
:where(.stumo .body) hr { height: 0; margin: 20px 0; border: 0; border-top: 1px solid #eee; }
:where(.stumo .body) a { color: #3a7baa; text-decoration: none; }
:where(.stumo .body) a:hover, :where(.stumo .body) a:focus { color: #23527c; text-decoration: underline; }
:where(.stumo .body) img { vertical-align: middle; }
:where(.stumo .body) article img { max-width: 100%; height: auto; }

/* the "Table of Contents" button on an article (legacy btn-blue) */
.stumo .body a.btn { display: inline-block; padding: 8px 16px; border-radius: 4px; border: 1px solid var(--au-navy, #003366); background: var(--au-navy, #003366); color: #fff; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; text-decoration: none; }
.stumo .body a.btn:hover { background: var(--au-navy-light, #004080); color: #fff; text-decoration: none; }