/* ============================================
   Habitus Brand Tokens
   Source: habitus-approach.html
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Spline+Sans:wght@300;400;500;600&display=swap');

:root {
  /* Base */
  --paper:    #f6f1e7;
  --paper-2:  #efe8d9;
  --ink:      #1b201c;
  --ink-soft: #4a514a;
  --spruce:   #1f4d42;
  --spruce-2: #2c6b5b;
  --clay:     #c2613b;
  --line:     rgba(27, 32, 28, .14);

  /* Lens colors */
  --story:    #c2613b;
  --tempo:    #2f7c8c;
  --cadence:  #c79a3a;
  --scenario: #2c6b5b;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Spline Sans', system-ui, sans-serif;
}

/* ============================================
   Base resets
   ============================================ */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
}

/* ============================================
   Header / title card
   ============================================ */

#header {
  background: var(--spruce) !important;
  color: var(--paper) !important;
}

#header h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--paper) !important;
}

#header p {
  color: var(--paper-2) !important;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
}

/* ============================================
   Story container + map area
   ============================================ */

#story {
  background: transparent !important;
}

#map-container {
  background: transparent !important;
}

#features {
  background: transparent !important;
}

/* ============================================
   Chapter panels
   ============================================ */

.step,
#story .step,
#features .step {
  background:    var(--paper-2) !important;
  color:         var(--ink) !important;
  border-left:   3px solid var(--line) !important;
  border-radius: 4px;
}

.step.active,
#story .step.active,
#features .step.active {
  border-left-color: var(--clay) !important;
  box-shadow: inset 3px 0 0 var(--clay);
}

/* Chapter titles */
.step h3,
.step .title,
#story .step h3,
#story .step .title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color:        var(--spruce) !important;
  line-height:  1.2 !important;
}

/* Chapter body copy */
.step p,
.step .description,
#story .step p,
#story .step .description {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color:        var(--ink-soft) !important;
  line-height:  1.65 !important;
}

/* Caption / metadata */
.step .caption,
#story .step .caption {
  font-family:    var(--font-body) !important;
  font-size:      0.75rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--ink-soft) !important;
  opacity:        0.7 !important;
}

/* Links inside steps */
.step a {
  color: var(--clay) !important;
}

/* Images */
.step img {
  display: block;
  max-width: 100%;
}

/* ============================================
   Override Digidem .dark inner panel
   ============================================ */

.step .dark,
#features .step .dark {
  background-color: var(--paper-2) !important;
  color:            var(--ink) !important;
}

.step .dark h3 {
  font-family: var(--font-display) !important;
  color:        var(--spruce) !important;
}

.step .dark p {
  color: var(--ink-soft) !important;
}

.step .dark p.caption {
  color:   var(--ink-soft) !important;
  opacity: 0.7 !important;
}

/* ============================================
   Footer
   ============================================ */

#footer {
  background: var(--ink) !important;
  color:      var(--paper-2) !important;
  position:   relative;
  z-index:    10;
}

#footer a {
  color: var(--clay) !important;
}