@import url("https://use.typekit.net/gdr2rlg.css");

:root {
  font-family: "futura-pt", sans-serif;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --clr-gy-2: #eeeeee;
  --clr-gy-3: #e0e0e0;
  --clr-gy-4: #bdbdbd;
  --clr-gy-5: #9e9e9e;
  --clr-gy-6: #757575;
  --clr-gy-7: #616161;
  --clr-gy-8: #424242;
  --clr-gy-9: #212121;
  --clr-or-5: #ff9900;
  --clr-rd-5: #f44336;
  --clr-pk-5: #bf6fbf;
  --clr-gn-4: #66bb6a;
  --clr-gn-5: #4caf50;
  --clr-gn-8: #2e7d32;
  --clr-bu-3: #64b5f6;
  --clr-bu-5: #2196f3;
  --clr-bu-6: #1e88e5;
  --clr-bu-8: #1565c0;
  --ref-x: 1920;
  --ref-y: 1080;
  --xvsy: calc((var(--ref-y) / var(--ref-x)) * 100vw);
  --x-cnv: 100vw;
  --x-chart: calc((1800 / var(--ref-x)) * var(--x-cnv));
  --x-date: calc((165 / var(--ref-x)) * var(--x-cnv));
  --x-title: calc((1435 / var(--ref-x)) * var(--x-cnv));
  --x-flag: calc((28 / 11) * var(--y-flag));
  --x-flag-txt: calc((var(--x-flag) / var(--ref-x)) * var(--x-cnv));
  --x-logo-max: calc((220 / var(--ref-x)) * var(--x-cnv));
  --y-cnv: 100%;
  --y-date-box: calc((var(--mgn-head-b) / var(--ref-y)) * var(--y-cnv));
  --y-flag: 80;
  --y-foot: 65;
  --dim-y-foot: calc((var(--y-foot) / var(--ref-y)) * var(--y-cnv));
  --dim-x-foot: calc((var(--y-foot) / var(--ref-x)) * var(--x-cnv));
  --mgn-cnv: calc((25 / var(--ref-x)) * var(--x-cnv));
  --mgn-chart-x: calc((60 / var(--ref-x)) * var(--x-cnv));
  --mgn-chart-y: calc((220 / var(--ref-y)) * var(--y-cnv));
  --mgn-title-y: calc((50 / var(--ref-y)) * var(--y-cnv));
  --mgn-title-x: calc((220 / var(--ref-x)) * var(--x-cnv));
  --mgn-title-b: calc((950 / var(--ref-y)) * var(--y-cnv));
  --mgn-head-b: 170;
  --mgn-foot: calc((20 / var(--ref-x)) * var(--x-cnv));
  --txtsz-date: calc((50 / var(--ref-y)) * var(--xvsy));
  --txtsz-title: calc((64 / var(--ref-y)) * var(--xvsy));
  --txtsz-subtitle: calc((23 / var(--ref-y)) * var(--xvsy));
  --txtsz-subnote: calc((16 / var(--ref-y)) * var(--xvsy));
  --txtsz-flag: calc((16 / var(--ref-y)) * var(--xvsy));
  --txtsz-page: calc((22 / var(--ref-y)) * var(--xvsy));
  --txtsz-ftnt: calc((15 / var(--ref-y)) * var(--xvsy));
  --txt-height: 67%;
  --txt-book: 400;
  --txt-demi: 600;
  --txt-heavy: 700;
  --txt-clr: var(--clr-or-5);
}

body, p {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.dr-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--x-cnv);
  aspect-ratio: 16 / 9;
  background-color: var(--clr-gy-9);
}

.dr-chart {
  position: absolute;
  left: var(--mgn-chart-x);
  top: var(--mgn-chart-y);
  width: var(--x-chart);
  aspect-ratio: 1800 / 720;
}

.dr-ctn-chart {
  width: 100%;
  margin: auto;
}

.dr-date-blk {
  position: absolute;
  left: var(--mgn-cnv);
  top: 0;
  width: var(--x-date);
  height: var(--y-date-box);
  background-color: var(--clr-suite);
  border-radius: 0 0 15% 15%;
}

.dr-date-m {
  position: absolute;
  left: var(--mgn-cnv);
  top: var(--mgn-title-y);
  width: var(--x-date);
}

.dr-date-y {
  position: absolute;
  left: var(--mgn-cnv);
  bottom: var(--mgn-title-b);
  width: var(--x-date);
}

.dr-title {
  position: absolute;
  left: var(--mgn-title-x);
  top: var(--mgn-title-y);
  width: var(--x-title);
  color: var(--clr-suite);
  font-size: var(--txtsz-title);
  font-weight: var(--txt-heavy);
  letter-spacing: -0.08vw;
  line-height: var(--txt-height);
}

.dr-subtitle {
  position: absolute;
  left: var(--mgn-title-x);
  bottom: var(--mgn-title-b);
  width: var(--x-title);
  color: var(--clr-gy-3);
  font-size: var(--txtsz-subtitle);
  font-weight: var(--txt-book);
  letter-spacing: -0.01vw;
  line-height: var(--txt-height);
}

.dr-subnote {
  position: absolute;
  left: var(--mgn-title-x);
  top: calc((150 / var(--ref-y)) * var(--y-cnv));
  width: var(--x-title);
  color: var(--clr-gy-3);
  font-size: var(--txtsz-subnote);
  font-weight: var(--txt-book);
  line-height: var(--txt-height);
}

.dr-flag-blk {
  position: absolute;
  display: flex;
  right: var(--mgn-cnv);
  top: var(--mgn-title-y);
  width: calc((var(--x-flag) / var(--ref-x)) * var(--x-cnv));
  height: calc((var(--y-flag) / var(--ref-y)) * var(--y-cnv));
}

.dr-ctn-flag {
  height: calc((var(--y-flag) / var(--ref-y)) * var(--xvsy));
  margin: auto;
}

.dr-flag-txt1 {
  position: absolute;
  right: var(--mgn-cnv);
  bottom: calc((((var(--ref-y) - var(--mgn-head-b)) + 18) / var(--ref-y)) * var(--y-cnv));
  width: var(--x-flag-txt);
}

.dr-flag-txt2 {
  position: absolute;
  right: var(--mgn-cnv);
  bottom: calc(((var(--ref-y) - var(--mgn-head-b)) / var(--ref-y)) * var(--y-cnv));
  width: var(--x-flag-txt);
}

.dr-footer {
  position: absolute;
  left: var(--mgn-cnv);
  bottom: var(--mgn-cnv);
  display: flex;
  width: calc(var(--x-cnv) - (2 * var(--mgn-cnv)));
  height: var(--dim-y-foot);
}

.dr-page {
  display: flex;
  justify-content: center;
  align-items: center;
  align-text: center;
  min-width: var(--dim-x-foot);
  margin-right: var(--mgn-foot);
  border-radius: 50%;
  background-color: var(--clr-gy-3);
  font-size: var(--txtsz-page);
  font-weight: var(--txt-heavy);
  letter-spacing: -0.05vw;
  color: var(--clr-gy-9);
}
  
.dr-page:empty {
  min-width: 0;
  margin-right: 0;
  background-color: transparent;
}

.dr-footnotes {
  display: flex;
  flex-grow: 2;
  align-items: center;
  margin-right: var(--mgn-foot);
}

.dr-logo-blk {
  display: flex;
  align-items: center;
  max-height: var(--dim-x-foot);
  gap: calc((25 / var(--ref-x)) * var(--x-cnv));
  margin-left: calc((10 / var(--ref-x)) * var(--x-cnv));
}

.dr-logo {
  display: flex;
  max-width: var(--x-logo-max);
  align-items: center;
}

.dr-logo:empty {
  display: none;
}

.dr-ctn-logo {
  max-width: var(--x-logo-max);
  height: calc((var(--y-foot) / var(--ref-y)) * var(--xvsy));
}

.dr-txt-clip {
  white-space: nowrap;
  overflow: clip visible;
  text-overflow: clip;
}

.dr-txt-clr {
  color: var(--txt-clr);
}

.dr-txt-emph {
  color: var(--txt-clr);
  font-weight: var(--txt-demi);
}

.dr-txt-date {
  text-align: center;
  font-size: var(--txtsz-date);
  line-height: var(--txt-height);
  color: var(--clr-gy-9);
  font-weight: var(--txt-heavy);
  letter-spacing: -0.13vw;
}

.dr-txt-flag {
  text-align: center;
  font-size: var(--txtsz-flag);
  line-height: var(--txt-height);
  color: var(--clr-or-5);
  font-weight: var(--txt-demi);
}

.dr-txt-footnotes {
  color: var(--clr-gy-6);
  font-size: var(--txtsz-ftnt);
  font-weight: var(--txt-book);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4; 
  -webkit-box-orient: vertical;
}

.dr-txt-footnotes a, a:visited {
  color: var(--clr-gn-5);
  text-decoration: none;
}

.dr-txt-footnotes a:hover {
  color: var(--clr-gn-4);
  text-decoration: underline;
  text-underline-offset: 0.16vw;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.01vw;
}