:root {
  --ew-slate: #5E6360;
  --ew-graphite: #2B2D2A;
  --ew-celadon: #5E7E74;
  --ew-sage: #84998E;
  --ew-oxide: #8C4943;
  --ew-mist: #D5D5CF;
  --ew-fog: #E8E8E3;
  --ew-chalk: #FBF9F4;
}

body.ego-weather {
  --paper: var(--ew-fog);
  --paper-deep: var(--ew-mist);
  --ink: #202320;
  --ink-soft: var(--ew-slate);
  --ink-dim: var(--ew-slate);
  --line: #B4B5B0;
  --accent: var(--ew-celadon);
  --accent-2: var(--ew-oxide);
  --gold: var(--ew-sage);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(94, 99, 96, .045) 1px, transparent 1px),
    linear-gradient(rgba(94, 99, 96, .045) 1px, transparent 1px),
    var(--ew-fog);
  background-size: 48px 48px;
}

body.ego-weather nav {
  min-height: 60px;
  border-bottom: 5px solid var(--ew-celadon);
  background: rgba(94, 99, 96, .98);
}

body.ego-weather .nav-brand,
body.ego-weather .nav-brand b {
  color: var(--ew-chalk);
}

body.ego-weather .nav-brand::before {
  content: "\25CB";
  color: #C4D2CB;
}

body.ego-weather .nav-tag {
  color: rgba(251, 249, 244, .68);
}

body.ego-weather header {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-bottom: 8px double rgba(94, 99, 96, .34);
  background:
    linear-gradient(108deg, var(--ew-chalk) 0 67%, #C9D5D0 67% 100%);
}

body.ego-weather header > * {
  position: relative;
  z-index: 2;
}

body.ego-weather header::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -70px;
  top: 112px;
  width: 520px;
  height: 360px;
  border: 2px solid rgba(94, 126, 116, .45);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 30px #C9D5D0,
    inset 0 0 0 32px rgba(94, 126, 116, .28),
    inset 0 0 0 72px #C9D5D0,
    inset 0 0 0 74px rgba(140, 73, 67, .2);
  transform: rotate(-12deg);
}

body.ego-weather header::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 5%;
  top: 330px;
  width: 390px;
  height: 2px;
  background: var(--ew-oxide);
  box-shadow:
    0 -64px 0 rgba(94, 126, 116, .4),
    0 64px 0 rgba(94, 99, 96, .34);
  transform: rotate(-12deg);
}

body.ego-weather .hex {
  width: 68px;
  height: 68px;
  border: 2px solid var(--ew-slate);
  border-radius: 50%;
  background: transparent;
  clip-path: none;
  box-shadow: inset 0 0 0 12px var(--ew-mist);
}

body.ego-weather .hex span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ew-oxide);
  clip-path: none;
}

body.ego-weather header .kicker {
  width: max-content;
  padding: 5px 9px;
  background: var(--ew-slate);
  color: var(--ew-chalk);
}

body.ego-weather h1 {
  max-width: 760px;
  color: var(--ew-graphite);
  font-size: 82px;
  line-height: .95;
}

body.ego-weather h1 .gild {
  color: var(--ew-celadon);
}

body.ego-weather .hero-sub {
  color: var(--ew-slate);
  font-size: 25px;
}

body.ego-weather .doorway {
  max-width: 650px;
  padding: 18px 22px;
  border-left: 5px solid var(--ew-oxide);
  background: rgba(232, 232, 227, .72);
}

body.ego-weather main {
  max-width: 1030px;
  padding-top: 88px;
}

body.ego-weather .letter {
  position: relative;
  max-width: 860px;
  padding: 48px 54px;
  border: 1px solid rgba(94, 99, 96, .32);
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(196, 210, 203, .36) 72% 100%),
    var(--ew-chalk);
  box-shadow: 14px 14px 0 var(--ew-mist);
}

body.ego-weather .letter::after {
  content: "VISIBILITY / PRESSURE / MOVEMENT";
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--ew-celadon);
  font: 500 9px/1 var(--mono);
  writing-mode: vertical-rl;
}

body.ego-weather .letter h2,
body.ego-weather .gloss-h {
  color: var(--ew-graphite);
  font-size: 42px;
}

body.ego-weather .pull {
  padding: 30px 38px;
  border: 0;
  border-left: 9px solid var(--ew-oxide);
  background: var(--ew-slate);
  color: var(--ew-chalk);
  box-shadow: 10px 10px 0 var(--ew-sage);
}

body.ego-weather .root {
  padding: 34px 30px;
  border: 1px solid rgba(94, 99, 96, .3);
  border-top: 8px solid var(--ew-celadon);
  background: var(--ew-chalk);
  box-shadow: 8px 8px 0 rgba(94, 99, 96, .08);
}

body.ego-weather .root:nth-child(2) {
  border-top-color: var(--ew-oxide);
  background: #E4E9E6;
}

body.ego-weather .root .ar {
  color: var(--ew-celadon);
}

body.ego-weather .toolindex {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.ego-weather .ti-card {
  min-height: 170px;
  grid-template-columns: 1fr;
  align-content: start;
  border: 1px solid rgba(94, 99, 96, .3);
  border-top: 7px solid var(--ew-celadon);
  background: var(--ew-chalk);
}

body.ego-weather .ti-card:nth-child(4n + 2) {
  border-top-color: var(--ew-sage);
  background: #E4E9E6;
}

body.ego-weather .ti-card:nth-child(4n + 3) {
  border-top-color: var(--ew-oxide);
  background: #EEE4E2;
}

body.ego-weather .ti-card:nth-child(4n) {
  border-top-color: var(--ew-slate);
  background: var(--ew-mist);
}

body.ego-weather .ti-card .n {
  border: 2px solid var(--ew-celadon);
  border-radius: 50%;
  background: transparent;
  color: var(--ew-slate);
  clip-path: none;
}

body.ego-weather .toolpanel {
  padding: 42px;
  border: 1px solid var(--ew-slate);
  border-left: 12px solid var(--ew-celadon);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(94, 99, 96, .05) 31px 32px),
    var(--ew-chalk);
  box-shadow: 14px 14px 0 var(--ew-mist);
}

body.ego-weather .toolpanel::before {
  width: 170px;
  background: linear-gradient(90deg, var(--ew-celadon), var(--ew-sage), var(--ew-oxide));
}

body.ego-weather .tp-h .t {
  color: var(--ew-graphite);
  font-size: 34px;
}

body.ego-weather .tp-sec > .tl {
  color: var(--ew-celadon);
}

body.ego-weather .doorbox {
  border-left-color: var(--ew-oxide);
  background: var(--ew-fog);
}

body.ego-weather .btn-solid {
  border-color: var(--ew-slate);
  background: var(--ew-slate);
}

body.ego-weather footer {
  border-top: 7px double rgba(251, 249, 244, .22);
  background: var(--ew-slate);
  color: rgba(251, 249, 244, .7);
}

@media (max-width: 900px) {
  body.ego-weather h1 {
    font-size: 54px;
  }

  body.ego-weather header::before,
  body.ego-weather header::after {
    opacity: .18;
  }

  body.ego-weather .letter,
  body.ego-weather .toolpanel {
    padding: 40px 22px;
  }

  body.ego-weather .toolindex {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.ego-weather,
  body.ego-weather .toolpanel {
    background: #FFFFFF !important;
  }
}