/* Version 2 dashboard */
#website {
  max-width:1180px;
  margin:28px auto 36px;
  background:#fff;
  border-radius:28px;
  box-shadow:0 18px 50px rgba(16,32,26,.07);
  overflow:hidden
}
.header {
  height:72px;
  max-width:none;
  margin:0;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  background:#fff
}
.brand-mark {
  background:var(--green);
  color:#fff;
  border-radius:12px;
  font:700 18px/1 var(--sans);
  font-style:normal
}
.nav-link {
  border-radius:10px;
  padding:8px 12px;
  color:#5d6b64
}
.nav-link.active {
  background:var(--green);
  color:#fff
}
.nav-link.active:after {content:none}
.button {border-radius:12px;font-weight:600}
.button-dark {background:var(--green)}
.button-dark:hover {background:#146b52}
.layout {
  max-width:none;
  margin:0;
  padding:20px 24px 8px;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:20px
}
.reading {grid-column:1;grid-row:2;min-width:0}
.intro {
  grid-column:1/-1;
  padding:2px 2px 0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px
}
.intro h1 {
  font:650 30px/1.15 var(--sans);
  letter-spacing:-.6px;
  margin:4px 0 0
}
.intro p {
  margin:0 0 4px;
  max-width:280px;
  text-align:right;
  font-size:13px;
  line-height:1.6;
  color:var(--muted)
}
.paper {
  border-radius:18px;
  padding:18px 18px 0;
  box-shadow:none
}
.paper-heading {margin:8px 0 16px}
.paper-heading h2 {
  font:650 22px/1.3 var(--sans);
  letter-spacing:-.3px;
  margin:4px 0 0
}
.issue-mark {
  font:650 13px/1 var(--sans);
  font-style:normal;
  color:var(--green);
  background:#e7f3ee;
  border-radius:999px;
  padding:8px 10px;
  text-align:center
}
.issue-mark small {
  font:11px var(--sans);
  letter-spacing:0;
  color:var(--green);
  margin-top:2px
}
.period-tabs {gap:8px;border-bottom:0}
.period-tabs button {
  background:#f3f6f4;
  border-radius:999px;
  padding:8px 12px;
  color:#5d6b64
}
.period-tabs .selected {color:#fff;background:var(--green)}
.period-tabs .selected:after {content:none}
.indices {
  border-bottom:0;
  padding-bottom:8px
}
.indices>div {
  background:#f5f8f6;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 12px
}
.indices>div+div {border-left:0;padding-left:14px}
.indices strong {
  font:650 22px/1.1 var(--sans);
  letter-spacing:-.4px
}
.indices b.down {color:#1f8a5b}
.quote-note {margin:10px 2px 0;font-size:12px}
.story h3 {font-size:15px;font-weight:650}
.story-tag {background:#e7f3ee;color:var(--green);border-radius:999px}
.paper-footer {
  margin:8px -18px 0;
  padding:14px 18px;
  background:#f6f8f7;
  border-radius:0 0 18px 18px
}
.reading-footnote {display:none}
.section-label {margin:18px 0 4px;font-size:12px;letter-spacing:.2px}
.story {padding:16px 0}
.story-number {font:600 12px/1 var(--sans);font-style:normal;color:#8aa099}
.subview h2 {font:650 22px/1.3 var(--sans);letter-spacing:-.3px}
.dialog-top,#detail-dialog h2 {font-family:var(--sans)}
.get-pet {
  display:block;
  margin:0;
  padding:0;
  max-width:none;
  grid-column:2;
  grid-row:2
}
.companion {
  margin-top:0;
  background:var(--green);
  color:#fff;
  border:0;
  border-radius:20px;
  position:sticky;
  top:16px
}
.companion .eyebrow,.companion h3 {color:#fff}
.companion .muted,.companion-bottom,.mood-note {color:rgba(255,255,255,.78)}
.companion-bottom {border-top-color:rgba(255,255,255,.16)}
.pill {background:rgba(255,255,255,.14);color:#fff}
.speech {color:var(--ink)}
.mood-picker {background:rgba(255,255,255,.12)}
.mood-picker button {color:rgba(255,255,255,.8)}
.mood-picker .selected {background:#fff;color:var(--green)}
.companion .button-dark {background:#fff;color:var(--green);width:100%;margin-top:8px}
.companion .text-button {color:#d7efe6}
.site-footer {
  max-width:none;
  margin:0;
  padding:16px 24px 20px;
  border-top:1px solid var(--line)
}
@media(max-width:1180px) {
  .intro p {position:static;text-align:left;margin-top:8px}
  .layout {grid-template-columns:1fr}
  .get-pet {grid-column:auto;grid-row:auto}
  .companion {position:static}
}
@media(max-width:740px) {
  #website {margin:0;border-radius:0}
  .header {height:auto;padding:12px 16px;gap:8px}
  nav {gap:6px}
  .nav-link {white-space:nowrap;padding:7px 8px;font-size:12px}
  .brand {font-size:15px;gap:8px}
  .brand small {display:none}
  .brand-mark {width:36px;height:36px;font-size:15px}
  .intro {display:block}
  .intro h1 {font-size:26px}
  .header .download {display:none}
  .indices {grid-template-columns:1fr}
  .indices>div+div {border-top:0;margin-top:0;padding-top:14px}
}