/* ==========================================================================
   Chicken Shit Artist
   Hand-rolled replacement for Bootstrap 2.3.2 + jQuery.

   This reproduces the ORIGINAL RENDERING, not the original stylesheet. Where
   the two disagree, the rendering wins and the reason is noted inline. Values
   here were lifted from getComputedStyle() on the recovered site rather than
   re-derived from the Bootstrap source, so the cascade accidents that shaped
   the real page are preserved deliberately.

   Breakpoints match Bootstrap 2.3's grid:
     >=1200px  container 1170  span 370  gutter 30
      980-1199 container  940  span 300  gutter 20
      768- 979 container  724  span 228  gutter 20   (navbar collapses)
      <=767    fluid, body gutter 20, columns stack
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-bottom: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #5a5a5a;
  background-color: #fff;
}

/* `height: auto` lets the intrinsic width/height attributes on each <img>
   reserve layout space without distorting once max-width kicks in. The
   carousel overrides it back to a fixed height below. */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

a {
  color: #08c;
  text-decoration: none;
}

a:hover,
a:focus { color: #005580; text-decoration: underline; }

p { margin: 0 0 10px; }

h1,
h2 {
  margin: 10px 0;
  font-weight: bold;
  line-height: 40px;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1 { font-size: 38.5px; }
h2 { font-size: 31.5px; }

.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

.muted { color: #999; }

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

.pull-right { float: right; }
.pull-left  { float: left; }

.img-circle { border-radius: 50%; }

/* Visible only to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring. The original had none; this is additive and does not
   alter the resting appearance of anything. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #08c;
  outline-offset: 2px;
}


/* Layout
   ========================================================================== */

.container {
  width: 940px;
  margin: 0 auto;
}

/* Bootstrap's .container carried a clearfix, which also stopped the last
   child's bottom margin collapsing out of the box. Kept so container heights
   match the original exactly. */
.container::after {
  display: table;
  clear: both;
  content: "";
}

/* flex-start rather than the default stretch: the original columns were floats
   that sized to their own content, and two of the three are shorter than the
   first. Invisible today, but it keeps the boxes honest. */
.row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.row > .span4 {
  flex: 1 1 0;
  min-width: 0;
}


/* Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
  border-bottom-color: #b3b3b3;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  transition: background-position .1s linear;
}

.btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
  border-radius: 6px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background-color: #006dcc;
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
}


/* Navbar
   ========================================================================== */

.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  margin-top: 20px;
}

.navbar-inner {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  padding: 0 20px;
  background-color: #1b1b1b;
  background-image: linear-gradient(to bottom, #222, #111);
  background-repeat: repeat-x;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.brand {
  margin-left: -20px;
  padding: 14px 20px 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  color: #999;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
}

.brand:hover,
.brand:focus { color: #fff; text-decoration: none; }

.nav {
  display: flex;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
  padding: 15px 20px;
  color: #999;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}

.nav > li > a:hover,
.nav > li > a:focus { color: #fff; text-decoration: none; }

.nav > li.active > a {
  color: #fff;
  background-color: #111;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .125);
}

/* Collapse toggle: hidden above 979px, where the links show inline. */
.btn-navbar {
  display: none;
  padding: 7px 10px;
  margin: 10px 5px 0 auto;
  background-color: #0e0e0e;
  background-image: linear-gradient(to bottom, #151515, #040404);
  border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .075);
}

.btn-navbar:hover,
.btn-navbar:focus { background-color: #040404; }

.icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 1px; /* the first bar; makes the button 29px tall, as before */
  background-color: #f5f5f5;
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.icon-bar + .icon-bar { margin-top: 3px; }


/* Carousel
   ========================================================================== */

.carousel {
  position: relative;
  margin-bottom: 60px;
  line-height: 1;
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.carousel .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  transform: translateX(100%);
  transition: transform .6s ease-in-out;
}

.carousel .item.active { transform: translateX(0); }

/* The original stretched the 1500x550 source to exactly viewport-width x 500,
   distorting it, because Bootstrap's `img { max-width: 100% }` fought the
   explicit height. Reproduced deliberately: object-fit stays `fill`. */
.carousel .item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  max-width: none;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

/* content-box here on purpose: the original's 550px cap applied to the text,
   with the 20px gutters sitting outside it, for a 590px box overall. */
.carousel-caption {
  box-sizing: content-box;
  position: static;
  max-width: 550px;
  padding: 0 20px;
  margin-top: 200px;
  background-color: transparent;
}

.carousel-caption h1,
.carousel-caption .lead {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.carousel-caption .btn { margin-top: 10px; }

/* 40%, not a fixed 200px: the carousel is 500px tall normally and 300px below
   767px, and the controls track it. */
.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  z-index: 10;
  width: 40px;
  height: 80px;
  padding: 0;
  font-family: inherit;
  font-size: 120px;
  font-weight: 100;
  line-height: 30px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  cursor: pointer;
  background-color: transparent;
  border: 0;
  opacity: .5;
}

.carousel-control.right { right: 15px; left: auto; }

.carousel-control:hover,
.carousel-control:focus {
  color: #fff;
  text-decoration: none;
  opacity: .9;
}


/* Marketing content
   ========================================================================== */

.marketing .span4 { text-align: center; }

.marketing .span4 p {
  margin-right: 10px;
  margin-left: 10px;
}

/* Bootstrap set `h2 { font-weight: bold }`; the original page then overrode it
   with `.marketing h2 { font-weight: normal }`. Stated directly here. */
.marketing h2 { font-weight: normal; }


/* Featurettes
   ========================================================================== */

.featurette-divider { margin: 80px 0; }

/* Vertical centring trick from the Bootstrap carousel example: pad the block,
   then pull the floated image up by the same amount. Needs the float. */
.featurette {
  padding-top: 120px;
  overflow: hidden;
}

.featurette-image { margin-top: -120px; }

.featurette-image.pull-left  { margin-right: 40px; }
.featurette-image.pull-right { margin-left: 40px; }

/* The original declared `font-weight: 300` here, but `.marketing h2` above it
   in the cascade won on specificity, so this text has always rendered at 400.
   Kept at 400 so the refactor is a visual no-op. */
.featurette-heading {
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}


/* Prose pages
   ========================================================================== */

/* hi.html carried `body { padding-top: 60px }` of its own and, unlike the
   home page, was never wrapped in a .container. Both preserved. */
body.letter { padding-top: 60px; }

/* Pages with no carousel behind the navbar need it in normal flow rather than
   absolutely positioned over the top of the page. */
.navbar-wrapper.navbar-static {
  position: static;
  margin: 20px 0 40px;
}

.prose { max-width: 42em; }

.prose h1 {
  margin: 0 0 20px;
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
}

.prose h2 {
  margin: 40px 0 10px;
  font-size: 24.5px;
  font-weight: normal;
  line-height: 40px;
}

.prose p { margin: 0 0 15px; }

.prose .note {
  padding: 15px 20px;
  margin: 0 0 30px;
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 4px;
  color: #8a6d3b;
}


/* >=1200px
   ========================================================================== */

@media (min-width: 1200px) {
  .container { width: 1170px; }
  .row { gap: 30px; }
}


/* <=979px  — navbar collapses
   ========================================================================== */

@media (max-width: 979px) {
  .navbar-wrapper { margin-bottom: 0; }

  .navbar-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -20px 0;
    border-radius: 0;
  }

  /* Bootstrap swapped the brand's pull-in from -20px to -5px here while
     leaving its 20px padding alone. */
  .brand { margin-left: -5px; }

  .btn-navbar { display: block; }

  .nav-collapse {
    flex: 0 0 100%;
    overflow: hidden;
  }

  .nav-collapse:not(.open) { display: none; }

  .nav {
    display: block;
    margin: 0 0 10px;
  }

  .nav > li > a {
    margin-bottom: 2px;
    border-radius: 3px;
  }

  .featurette {
    height: auto;
    padding: 0;
  }

  .featurette-image.pull-left,
  .featurette-image.pull-right {
    display: block;
    float: none;
    max-width: 40%;
    margin: 0 auto 20px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container { width: 724px; }
}


/* <=767px
   ========================================================================== */

@media (max-width: 767px) {
  body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .container { width: auto; }

  .navbar-inner { margin: -20px; }

  /* Pull the carousel back out through the body gutter to stay full-bleed. */
  .carousel {
    margin-right: -20px;
    margin-left: -20px;
  }

  .carousel-inner,
  .carousel .item,
  .carousel .item img { height: 300px; }

  .carousel-caption {
    width: 65%;
    padding: 0 70px;
    margin-top: 100px;
  }

  .carousel-caption h1 { font-size: 30px; }

  .carousel-caption .lead,
  .carousel-caption .btn { font-size: 18px; }

  /* flow-root, not block: Bootstrap's .row carried a clearfix, which kept the
     last column's trailing 10px margin inside the row instead of letting it
     collapse into the divider below. A BFC does the same job in one word.
     Scoped to this breakpoint — .row is a flex container above it, where an
     ::after clearfix would become a stray flex item. */
  .row { display: flow-root; }

  .marketing .span4 + .span4 { margin-top: 40px; }

  .featurette-heading { font-size: 30px; }

  .featurette .lead {
    font-size: 18px;
    line-height: 1.5;
  }
}


/* Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .carousel .item { transition: none; }

  .btn:hover,
  .btn:focus { transition: none; }
}