:root{
  color-scheme:light;
  --salt:#f3ecd8;
  --salt-light:#fbf7ec;
  --sea:#367a94;
  --sea-deep:#1f5267;
  --sand:#c79763;
  --coral:#d6938b;
  --sun:#dfbd4f;
  --ink:#272727;
  --bg:var(--salt);
  --panel:transparent;
  --sample:var(--salt-light);
  --text:var(--sea);
  --flow-node:var(--sea-deep);
  --node-word:var(--coral);
  --muted:#667276;
  --grid:rgba(69,91,94,.14);
  --yellow:var(--coral);
}

body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 86% 2%,rgba(255,255,255,.9) 0,rgba(255,255,255,.12) 31%,transparent 49%),
    radial-gradient(ellipse at 12% 8%,rgba(54,122,148,.16) 0,rgba(54,122,148,.04) 28%,transparent 45%),
    linear-gradient(180deg,#dce9e9 0%,var(--salt-light) 32%,var(--salt) 100%);
  background-attachment:fixed;
  color:var(--ink);
}

main{
  width:100%;
  margin:0;
  padding:0 0 70px;
}

.site-header{
  width:100%;
  display:grid;
  grid-template-columns:minmax(210px,.7fr) minmax(640px,2.3fr);
  align-items:end;
  gap:clamp(28px,5vw,88px);
  padding:32px clamp(24px,4vw,72px) 28px;
  border-bottom:1px solid rgba(39,39,39,.16);
}

.identity small,
.chart-intro small{
  color:var(--sea-deep);
  letter-spacing:.09em;
}

.identity h1{
  margin:.35rem 0 0;
  color:var(--ink);
  font-weight:500;
}

.wind-meta{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  margin:0;
}

.wind-meta div{
  min-width:0;
  padding:2px clamp(10px,1.4vw,22px);
  border-left:1px solid rgba(39,39,39,.16);
}

.wind-meta dt{
  margin-bottom:7px;
  color:#68767a;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wind-meta dd{
  margin:0;
  color:var(--ink);
  font-size:clamp(.78rem,1vw,1rem);
  font-weight:500;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.chart-intro{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  padding:32px clamp(24px,4vw,72px) 18px;
}

.chart-intro p{
  max-width:760px;
  margin:7px 0 0;
  color:#4e5d60;
  font-size:.84rem;
  line-height:1.5;
}

#status{
  flex:0 0 auto;
  margin:0;
  padding:0;
  color:var(--sea-deep);
  text-align:right;
  font-size:.76rem;
}

.wind-canvas{
  display:block;
  width:100%;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.grid{
  stroke:var(--grid);
}

.time-grid{
  stroke:rgba(54,122,148,.13);
}

.axis{
  stroke:rgba(39,39,39,.62);
}

.label,
.time-label,
.axis-title,
.sample-label{
  fill:#56676b;
  font-family:Inter,system-ui,sans-serif;
}

.time-label,
.sample-label{
  font-size:10px;
}

.axis-title{
  fill:var(--sea-deep);
  font-size:9px;
  letter-spacing:1px;
}

.wind{
  stroke:var(--sea);
  stroke-width:.85;
}

.forecast-line{
  fill:none;
  stroke:var(--sea-deep);
  stroke-width:1.45;
  opacity:.72;
}

.forecast-point{
  fill:var(--salt-light);
  stroke:var(--sea-deep);
  stroke-width:1.3;
  cursor:crosshair;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .18s ease,fill .18s ease;
}

.forecast-point:hover,
.forecast-point:focus{
  fill:var(--coral);
  outline:none;
  transform:scale(1.8);
}

.sample-label{
  fill:var(--sea-deep);
  font-weight:500;
}

.data-proof{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  align-items:center;
  padding:17px clamp(24px,4vw,72px);
  border-top:1px solid rgba(39,39,39,.14);
  border-bottom:1px solid rgba(39,39,39,.14);
  color:#536367;
  font-size:.74rem;
}

.data-proof span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#sample-count{
  margin-left:auto;
  color:var(--sea-deep);
  font-weight:500;
}

.legend-dot{
  width:8px;
  height:8px;
  display:inline-block;
  border-radius:50%;
}

.legend-dot.forecast{
  border:1px solid var(--sea-deep);
  background:var(--salt-light);
}

.legend-dot.flow{
  background:var(--sea);
}

.legend-dot.glyph{
  background:var(--coral);
}

.font-lab{
  color:var(--ink);
  background:transparent;
  box-shadow:none;
}

.font-lab-heading small,
.font-tester-label{
  color:var(--sea-deep);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.wind-type-canvas{
  display:block;
  width:100%;
  height:230px;
  margin-top:10px;
  background:transparent;
}

.type-wind-readout{
  margin:8px 0 0;
  color:#5c6d70;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.font-tester{
  border-width:1px 0 0;
  border-color:rgba(39,39,39,.2);
  background:transparent;
  color:var(--ink);
  caret-color:var(--coral);
}

.font-tester:focus{
  border-color:var(--coral);
  box-shadow:none;
}

@media(prefers-reduced-motion:reduce){
  .wind-type-canvas{
    opacity:.95;
  }
}

@media(max-width:1050px){
  .site-header{
    grid-template-columns:1fr;
    align-items:start;
  }

  .wind-meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:22px;
  }
}

@media(max-width:700px){
  body{
    background-attachment:scroll;
  }

  .site-header{
    padding:24px 20px;
  }

  .wind-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .chart-intro{
    align-items:flex-start;
    flex-direction:column;
    padding:28px 20px 12px;
  }

  #status{
    text-align:left;
  }

  .data-proof{
    padding-inline:20px;
  }

  #sample-count{
    width:100%;
    margin-left:0;
  }

  .wind-type-canvas{
    height:170px;
  }
}