/* Chart result on chart.html only. Hilda's colours and type, scoped so the rest of the site is untouched. */
@font-face{font-family:'Noto Sans Symbols 2';src:url(../fonts/noto-sans-symbols-2-symbols.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+2190-21FF,U+2300-23FF,U+2460-27BF,U+2900-2BFF,U+1F700-1F77F}

.c .chartout{
  --paper:#FBFAF6;
  --paper-raised:#FFFDF8;
  --sand:#E8D9C4;
  --sand-light:#EFE3D2;
  --line:#D9C8B2;
  --ink:#3A2A20;
  --ink-muted:#7A5E48;
  --terracotta:#B1582C;
  --terracotta-deep:#8F4520;
  --sun:#C4842A;
  --sage:#7d8b6a;
  color:#3A2A20;
}
.c .chartout[hidden]{display:none}
.c .chartout .jumps{display:flex;gap:18px;overflow-x:auto;padding:0 0 8px;margin:calc(var(--s-head) * 1.5) 0 28px}
.c .chartout .jumps a{flex:none;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#B1582C;border-bottom:1px solid #B1582C;padding-bottom:3px}
.c .chartout .forline,.c .chartout .notice,.c .chartout .hintline{font-size:12px;letter-spacing:.06em;color:#7A5E48;margin:0 0 18px}
.c .chartout .block{margin:0 0 56px}
.c .chartout .lab{color:#B1582C}
.c .chartout h2.ag{font-size:42px;line-height:1.02;color:#A9733F;margin:10px 0 16px}
.c .chartout h3.ag{font-size:32px;line-height:1.05;color:#A9733F;margin:8px 0 8px}
.c .chartout .draft{font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1.5;color:#5A4434;margin:0 0 14px}
.c .chartout .card{background:#FFFDF8;border:1px solid #D9C8B2;padding:28px 24px}
.c .chartout .signature{text-align:center;padding:36px 22px}
.c .chartout .signature h2.ag{font-size:56px;margin:8px 0 12px}
.c .chartout .sig-line{font-family:"Newsreader",Georgia,serif;font-size:22px;line-height:1.4;margin:6px 0;color:#3A2A20}
.c .chartout .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 8px}
.c .chartout .chips span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid #D9C8B2;padding:8px 12px;color:#5A4434}
.c .chartout .chips .on{background:#B1582C;border-color:#B1582C;color:#F7F1E8}
.c .chartout .lights{display:grid;grid-template-columns:1fr;gap:14px}
.c .chartout .light .meta{font-family:"Newsreader",Georgia,serif;font-style:italic;color:#7A5E48;margin:0 0 10px}
.c .chartout .wheel-card{padding:12px 8px 20px}
.c .chartout .wheel-card svg{width:min(100%,520px);height:auto;display:block;margin:0 auto}
.c .chartout .wheel-card svg [data-body]{cursor:pointer}
@media (prefers-reduced-motion: no-preference){
  .c .chartout .wheel-card svg{animation:cl-wheel 120s linear infinite;transform-origin:50% 50%}
}
@keyframes cl-wheel{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .c .chartout .wheel-card svg{animation:none}
}
.c .chartout .bars{display:grid;gap:0;margin:8px 0 18px}
.c .chartout .bar{display:grid;grid-template-columns:88px minmax(0,1fr) 28px;gap:12px;align-items:center;background:transparent;border:0;border-bottom:1px solid #D9C8B2;padding:12px 0}
.c .chartout .bar span{font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#3A2A20;font-weight:400}
.c .chartout .bar b{font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:#3A2A20;font-weight:400;text-align:right}
.c .chartout .track{height:6px;background:#EBDDC9;overflow:hidden}
.c .chartout .track i{display:block;height:100%;width:var(--w,0%);background:#B1582C}
.c .chartout .track.fire i{background:#B1582C}
.c .chartout .track.earth i{background:#7A5E48}
.c .chartout .track.air i{background:#C29467}
.c .chartout .track.water i{background:#5A4434}
.c .chartout .design{display:grid;gap:28px;align-items:center}
.c .chartout .bg{background:#EFE3D2;padding:12px}
.c .chartout .bg svg{width:min(100%,260px);height:auto;display:block;margin:0 auto}
.c .chartout .facts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.c .chartout .facts span{background:#EFE3D2;padding:10px 12px;font-size:14px;color:#3A2A20}
.c .chartout .facts b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#B1582C;font-weight:400;margin-bottom:4px}
.c .chartout .channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.c .chartout .channels i{font-style:normal;border:1px solid #D9C8B2;padding:6px 10px;font-size:12px;letter-spacing:.04em;color:#5A4434}
.c .chartout .nums{display:grid;grid-template-columns:1fr;gap:14px}
.c .chartout .nums article{text-align:center;padding:32px 18px 26px}
.c .chartout .nums .num{font-family:Agare,"Newsreader",Georgia,serif;font-weight:400;font-size:72px;line-height:.9;color:var(--terracotta)}
.c .chartout .nums .k{font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);font-weight:400;margin:10px 0 14px}
.c .chartout .nums p{font-family:"Newsreader",Georgia,serif;font-size:16px;line-height:1.45;color:var(--ink);margin:0}
.c .chartout .nums .draft{font-size:16px;line-height:1.45;text-align:center;color:var(--ink);margin:0}
.c .chartout .cta.card{background:#FFFDF8;border:1px solid #D9C8B2;text-align:center;padding:48px 28px 40px;margin:8px 0 0}
.c .chartout .cta .eyebrow{display:block;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#B1582C;font-weight:500}
.c .chartout .cta h2{font-family:Agare,"Newsreader",Georgia,serif;font-weight:400;font-size:40px;line-height:1.1;color:#3A2A20;margin:12px 0 12px}
.c .chartout .cta .draft{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:20px;line-height:1.45;color:#3A2A20;margin:0 auto;max-width:28em}
.c .chartout .cta .btn{margin-top:26px}
.c .chartout .cta .soon{margin:16px 0 0;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-size:13px;letter-spacing:.02em;color:#7A5E48}
@media(min-width:761px){
  .c .chartout h2.ag{font-size:52px}
  .c .chartout .signature h2.ag{font-size:72px}
  .c .chartout .lights{grid-template-columns:1fr 1fr}
  .c .chartout .design{grid-template-columns:280px 1fr;gap:48px}
  .c .chartout .nums{grid-template-columns:1.4fr 1fr 1fr;align-items:stretch}
  .c .chartout .nums article:first-child .num{font-size:96px}
}
@media(max-width:760px){
  .c .chartout .block{margin-bottom:40px}
  .c .chartout h2.ag{font-size:34px}
  .c .chartout .signature h2.ag{font-size:44px}
  .c .chartout .sig-line,.c .chartout .draft{font-size:18px}
  .c .chartout .bar{grid-template-columns:72px minmax(0,1fr) 24px}
  .c .chartout .cta h2{font-size:32px}
  .c .chartout .cta.card{padding:36px 18px 32px}
  .c .chartout .cta .draft{font-size:18px}
}