/* Match the pylon report's paper, ink, lettering, and hand-drawn shapes. */
.tide-art {
  --tide-ink: #304b83;
  --tide-muted: #67728b;
  --tide-paper: #fffbef;
  --tide-orange: #d55231;
  --tide-blue: #355ac0;
  --tide-yellow: #ffda62;
  --tide-playful: "Chewy", system-ui, sans-serif;
  max-width: 1240px;
  margin: 56px auto 32px;
  overflow: hidden;
  background-color: var(--tide-paper);
  background-image: radial-gradient(#5472ba16 .8px, transparent .8px);
  background-size: 19px 19px;
  color: var(--tide-ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border: 2px solid var(--tide-ink);
  border-radius: 28px 43px 25px 37px;
  box-shadow: 5px 6px 0 #d2dbf7;
  isolation: isolate;
}
.tide-art *, .tide-art *::before, .tide-art *::after { box-sizing: border-box; }
.tide-art p, .tide-art h2, .tide-art dl, .tide-art dd, .tide-art ol { margin: 0; }
.tide-art__header { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px 38px 24px; }
.tide-art__eyebrow { display: flex; align-items: center; gap: 8px; color: var(--tide-orange); font: 17px/1.3 var(--tide-playful); }
.tide-art__star { font: 23px/1 system-ui, sans-serif; }
.tide-art h2 { width: fit-content; padding: 12px 0 10px; font: 64px/1 var(--tide-playful); color: var(--tide-orange); text-shadow: 2px 3px 0 #ffd591; transform: rotate(-2deg); }
.tide-art__title-small { display: block; margin-bottom: 1px; color: var(--tide-blue); font-size: .55em; text-shadow: none; }
.tide-art__title-dot { display: inline-block; margin-left: 2px; color: var(--tide-blue); transform: rotate(12deg); }
.tide-art__intro { color: var(--tide-ink); font: 18px/1.35 var(--tide-playful); }
.tide-art__conditions { display: flex; gap: 20px; }
.tide-art__conditions > div { display: flex; flex-direction: column; justify-content: center; min-width: 166px; max-width: 200px; min-height: 153px; padding: 18px 20px; border: 2px solid var(--tide-ink); box-shadow: 3px 4px 0 var(--tide-ink); text-align: center; background: var(--tide-yellow); border-radius: 49% 43% 45% 38% / 31% 43% 36% 44%; transform: rotate(-3deg); }
.tide-art__conditions > div + div { background: #e9ddff; border-radius: 37% 44% 34% 48% / 37% 31% 40% 30%; transform: rotate(3deg); }
.tide-art__conditions dt { font: 19px/1.2 var(--tide-playful); }
.tide-art__conditions dd { font: 52px/1.15 var(--tide-playful); font-variant-numeric: tabular-nums; }
.tide-art__conditions dd small { font: 23px var(--tide-playful); }
.tide-art__conditions .tide-art__condition-note { font: 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; min-height: 17px; }
.tide-art__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 4px 38px 20px; }
.tide-art__toolbar > p { padding: 7px 15px; background: #ffe3d3; border-radius: 3px 16px 5px 13px; color: var(--tide-ink); font: 17px/1.3 var(--tide-playful); transform: rotate(-2deg); }
.tide-art button { cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.tide-art__days { display: flex; gap: 10px; }
.tide-art__days button { border: 2px solid var(--tide-ink); border-radius: 18px 13px 17px 12px; padding: 8px 18px; color: var(--tide-ink); background: var(--tide-paper); font: 17px/1.3 var(--tide-playful); min-height: 42px; transform: rotate(2deg); }
.tide-art__days button:first-child { transform: rotate(-2deg); }
.tide-art__days button[aria-pressed="true"] { background: var(--tide-blue); color: white; box-shadow: 2px 3px 0 var(--tide-ink); }
.tide-art__days button:hover { transform: translateY(-2px); }
.tide-art button:focus-visible, .tide-art a:focus-visible, .tide-art input:focus-visible { outline: 3px solid var(--tide-orange); outline-offset: 5px; }
.tide-art__scene { position: relative; margin: 0 24px; overflow: hidden; border: 2px solid var(--tide-ink); border-radius: 20px 32px 17px 27px; }
.tide-art__chart { display: block; width: 100%; height: 330px; max-width: none; touch-action: pan-y; }
.tide-art__chart text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.tide-art__chart .tide-art__chart-label { font: 13px var(--tide-playful); }
.tide-art__line { stroke: var(--tide-ink); stroke-width: 2.5; stroke-linejoin: round; }
.tide-art__signature { position: absolute; bottom: 60px; right: 30px; color: #fff0b0; font: 26px/1.2 var(--tide-playful); transform: rotate(-3deg); pointer-events: none; }
.tide-art__message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--tide-ink); background: #fffbefd9; font: 24px/1.35 var(--tide-playful); text-align: center; padding: 24px; }
.tide-art__message[hidden], .tide-art [hidden] { display: none; }
.tide-art__message button { background: var(--tide-yellow); color: var(--tide-ink); padding: 9px 18px; border: 2px solid var(--tide-ink); border-radius: 16px 12px 18px 13px; box-shadow: 2px 3px 0 var(--tide-ink); font: 18px var(--tide-playful); }
.tide-art__explore { display: flex; align-items: center; gap: 16px; padding: 19px 38px; }
.tide-art__explore label { font: 18px var(--tide-playful); white-space: nowrap; transform: rotate(-2deg); }
.tide-art__explore label span { display: inline-block; padding-left: 5px; color: var(--tide-orange); font: 23px/1 system-ui, sans-serif; vertical-align: middle; }
.tide-art__explore input { flex: 1; min-width: 60px; height: 30px; accent-color: var(--tide-blue); cursor: ew-resize; }
.tide-art__explore output { min-width: 150px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.tide-art__explore button { color: var(--tide-orange); border: 0; background: transparent; padding: 2px 0; font: 15px var(--tide-playful); text-decoration: underline wavy; text-underline-offset: 4px; white-space: nowrap; }
.tide-art__events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0 24px !important; padding: 18px 12px 22px; border-top: 2px dashed #b8c2d5; }
.tide-art__events li { display: grid; grid-template-columns: 25px 1fr; align-items: center; column-gap: 8px; padding: 10px 8px; border-radius: 15px 9px 18px 10px; }
.tide-art__event-icon { font: 25px system-ui, sans-serif; grid-row: span 2; color: var(--tide-blue); }
.tide-art__event-label { font: 16px/1.3 var(--tide-playful); color: var(--tide-ink); }
.tide-art__event-value { font: 21px/1.5 var(--tide-playful); white-space: nowrap; }
.tide-art__event-value small { font: 11px system-ui, sans-serif; color: var(--tide-muted); padding-left: 7px; }
.tide-art__events .is-next { background: #fff0b0; transform: rotate(-2deg); }
.tide-art__events .is-next .tide-art__event-icon, .tide-art__events .is-next .tide-art__event-label { color: #ac3f29; }
.tide-art__footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 2px dashed #bfc9df; padding: 18px 38px; }
.tide-art__footer p:first-child { max-width: 260px; font: 17px/1.4 var(--tide-playful); transform: rotate(-2deg); }
.tide-art__footer p:last-child { color: var(--tide-muted); font-size: 10px; line-height: 1.8; text-align: right; }
.tide-art a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tide-art a:hover { color: var(--tide-orange); }
.tide-art__no-js { padding: 16px 38px; }
.tide-art__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tide-art__now-ring { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .tide-art__now-ring { animation: tide-breathe 4s ease-in-out infinite; }
  @keyframes tide-breathe { 50% { opacity: .2; transform: scale(1.5); } }
}
@media (max-width: 900px) {
  .tide-art__header { gap: 24px; padding-inline: 28px; }
  .tide-art h2 { font-size: 56px; }
  .tide-art__conditions { gap: 14px; }
  .tide-art__conditions > div { min-width: 146px; max-width: 170px; padding-inline: 14px; }
  .tide-art__events { gap: 7px; padding-inline: 0; }
  .tide-art__event-value small { display: block; padding: 0; }
}
@media (max-width: 700px) {
  .tide-art { margin-top: 32px; border-radius: 23px 32px 20px 28px; box-shadow: 3px 4px 0 #d2dbf7; }
  .tide-art__header { align-items: stretch; flex-direction: column; padding: 25px 22px 20px; gap: 24px; }
  .tide-art__eyebrow { font-size: 16px; }
  .tide-art h2 { font-size: 58px; }
  .tide-art__intro { font-size: 17px; }
  .tide-art__conditions { width: 100%; gap: 14px; }
  .tide-art__conditions > div { flex: 1; min-width: 0; max-width: none; min-height: 147px; padding: 16px 10px; }
  .tide-art__conditions dt { font-size: 17px; }
  .tide-art__conditions dd { font-size: 46px; }
  .tide-art__conditions .tide-art__condition-note { font-size: 10px; }
  .tide-art__toolbar { padding: 4px 18px 18px; gap: 12px; }
  .tide-art__toolbar > p { font-size: 14px; padding: 8px 10px; }
  .tide-art__days { gap: 7px; }
  .tide-art__days button { padding: 8px 11px; font-size: 16px; }
  .tide-art__scene { margin: 0 10px; border-radius: 16px 23px 14px 20px; }
  .tide-art__chart { height: 300px; }
  .tide-art__signature { font-size: 22px; right: 20px; }
  .tide-art__explore { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 22px; }
  .tide-art__explore label { grid-column: 1 / -1; font-size: 16px; }
  .tide-art__explore input { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0; }
  .tide-art__explore output { text-align: left; min-width: 0; font-size: 11px; white-space: nowrap; }
  .tide-art__events { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 18px !important; padding: 13px 0 18px; gap: 8px 5px; }
  .tide-art__events li { padding: 8px 5px; column-gap: 4px; grid-template-columns: 22px 1fr; }
  .tide-art__event-label { font-size: 15px; }
  .tide-art__event-value { font-size: 19px; }
  .tide-art__event-value small { display: inline; padding-left: 4px; font-size: 10px; }
  .tide-art__footer { align-items: flex-start; flex-direction: column; padding: 17px 22px; gap: 13px; }
  .tide-art__footer p:first-child { max-width: none; }
  .tide-art__footer p:last-child { text-align: left; font-size: 9px; }
}
@media (max-width: 370px) {
  .tide-art__toolbar { flex-wrap: wrap; }
  .tide-art h2 { font-size: 53px; }
  .tide-art__conditions { gap: 10px; }
  .tide-art__conditions > div { padding-inline: 8px; }
  .tide-art__event-value small { display: block; padding: 0; }
}