/* $DRYDAY — a one-page comic. Baloo 2 for the lettering, Comic Neue for the balloons. */
@font-face { font-family: "Baloo 2"; src: url(../assets/fonts/Baloo2-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url(../assets/fonts/Baloo2-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url(../assets/fonts/ComicNeue-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url(../assets/fonts/ComicNeue-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1B1420; --paper: #FFF3D9; --white: #FFFDF7; --yel: #FFE14D; --cyan: #2FB8F5; --sky: #8FE0FF; --red: #E8312F; --blue: #3D62F0;
  --pink: #FF6F9A; --lime: #B4FF3E;
  --f-l: "Baloo 2", "Comic Neue", system-ui, sans-serif; --f-b: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  --f-m: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 400 18px/1.45 var(--f-b); overflow-x: hidden;
  background: var(--paper) radial-gradient(circle at 1px 1px, rgba(27, 20, 32, .09) 1.6px, transparent 2px) 0 0 / 12px 12px; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sm { font-size: .82em; }

/* ---------------------------------------------------------------- the masthead */
.mast { max-width: 1180px; margin: 0 auto; padding: 22px 20px 6px; }
.mast-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.issue { margin: 0; display: grid; justify-items: center; background: var(--white); border: 5px solid var(--ink); padding: 6px 12px 8px;
  box-shadow: 5px 5px 0 var(--ink); transform: rotate(-4deg); line-height: 1; }
.issue b { font: 800 46px/1 var(--f-l); }
.issue span { font: 700 13px/1.1 var(--f-b); text-transform: uppercase; text-align: center; }
.logo { margin: 0; position: relative; justify-self: center; font: 800 clamp(64px, 12.5vw, 176px)/.86 var(--f-l); letter-spacing: -.01em; text-transform: uppercase;
  display: flex; gap: .16em; padding-bottom: .22em; }
.logo span { -webkit-text-stroke: .075em var(--ink); paint-order: stroke fill; text-shadow: .06em .06em 0 var(--ink); }
.logo .w1 { color: var(--sky); transform: rotate(-3deg); }
.logo .w2 { color: var(--yel); transform: rotate(2deg) translateY(.04em); }
.logo-drips { position: absolute; left: 4%; right: 4%; bottom: 0; width: 92%; height: .3em; fill: var(--sky); stroke: var(--ink); stroke-width: 4; overflow: visible; }
.corner { display: grid; gap: 1px; background: var(--yel); border: 5px solid var(--ink); padding: 8px 14px; box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(3deg); font: 700 14px/1.2 var(--f-b); text-transform: uppercase; }
.corner b { font: 800 26px/1 var(--f-l); text-transform: none; }
.corner em { font-style: normal; font-weight: 700; }
.tagline { margin: 14px auto 0; width: fit-content; max-width: 100%; background: var(--red); color: var(--white); border: 4px solid var(--ink);
  padding: 6px 20px; font: 700 clamp(17px, 2.2vw, 24px)/1.2 var(--f-b); text-transform: uppercase; transform: skew(-8deg); box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.tagline span { color: var(--yel); }

/* ---------------------------------------------------------------- the comic page */
.page { max-width: 1180px; margin: 26px auto 0; background: var(--white); border: 6px solid var(--ink); padding: 14px; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 14px; box-shadow: 10px 10px 0 rgba(27, 20, 32, .85); }
.pnl { position: relative; margin: 0; border: 5px solid var(--ink); overflow: hidden; background: var(--sky); }
.pnl .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pA { grid-column: span 2; aspect-ratio: 1200 / 700; }
.pB { aspect-ratio: 600 / 700; }
.pC { aspect-ratio: 600 / 700; }
.pD { grid-column: span 2; aspect-ratio: 1200 / 700; }
.pE { grid-column: 1 / -1; aspect-ratio: 1800 / 640; }

.cap { position: absolute; z-index: 2; margin: 0; background: var(--yel); border: 3px solid var(--ink); padding: 7px 12px; max-width: 48%;
  font: 700 15px/1.25 var(--f-b); text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.cap.tl { top: 10px; left: 10px; }
.cap.br { bottom: 10px; right: 10px; }
.cap.sm { font-size: 13px; }
.bal { position: absolute; z-index: 2; margin: 0; background: var(--white); border: 3.5px solid var(--ink); border-radius: 50% / 46%;
  padding: 12px 24px; font: 700 clamp(16px, 2vw, 24px)/1.15 var(--f-b); text-align: center; white-space: nowrap; }
.bal::before, .bal::after { content: ""; position: absolute; left: var(--tx, 30%); bottom: -24px; width: 30px; height: 26px; background: var(--ink); clip-path: polygon(0 0, 100% 0, var(--tp, 18%) 100%); }
.bal::after { background: var(--white); bottom: -17px; left: calc(var(--tx, 30%) + 5px); width: 21px; height: 20px; }
.b-hold { top: 14%; right: 8%; --tx: 26%; --tp: 10%; }
.b-off { top: 7%; left: 31%; --tx: 46%; --tp: 50%; }
.b-wait { top: 9%; left: 55%; --tx: 30%; --tp: 30%; }
.sfx { position: absolute; z-index: 2; font: 800 clamp(30px, 5.4vw, 74px)/1 var(--f-l); color: var(--yel); -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill;
  text-shadow: .06em .06em 0 var(--ink); transform: rotate(-8deg); letter-spacing: .01em; pointer-events: none; }
.s-grr { right: 3%; bottom: 7%; color: var(--lime); transform: rotate(-6deg); }
.s-squish { left: 6%; bottom: 8%; color: var(--sky); transform: rotate(8deg); font-size: clamp(28px, 4vw, 54px); }
.s-drip { left: 4%; bottom: 5%; color: var(--sky); font-size: clamp(24px, 3.6vw, 50px); transform: rotate(-4deg); }
.news { grid-column: 1 / -1; background: #FFF3C4; border: 4px solid var(--ink); padding: 12px 18px; font-size: 16px; }
.news p { margin: 0 0 4px; }
.news .sm { margin: 0; color: #4A3F55; }
.news a { font-weight: 700; }

/* the drawings move a little */
.dt-drip { animation: drip 1.5s ease-in infinite; }
@keyframes drip { 0% { transform: translateY(-4px); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
.dt-hang { animation: sway 3.4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.dt-rays { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the dry-o-meter */
.meter { max-width: 1180px; margin: 34px auto 0; background: var(--white); border: 6px solid var(--ink); padding: 14px; display: grid;
  grid-template-columns: 1.55fr 1fr; gap: 14px; box-shadow: 10px 10px 0 rgba(27, 20, 32, .85); }
.m-scene { aspect-ratio: 900 / 700; }
.m-art { position: absolute; inset: 0; }
.m-scene .cap { font-size: 20px; }
.b-ready { top: 11%; right: 6%; --tx: 20%; --tp: 0%; background: var(--yel); }
.m-scene.puff .m-art { animation: puff .6s ease-out; }
@keyframes puff { 30% { transform: translateX(-10px) scale(1.02); filter: brightness(1.12); } }
.m-scene.splash .m-art { animation: splash .7s ease-out; }
@keyframes splash { 0% { filter: saturate(.3) brightness(1.6); } 100% { filter: none; } }
.m-gauge { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 22px 20px; align-items: center;
  background: var(--sky) radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .5) 2px, transparent 2.4px) 0 0 / 14px 14px; }
.tube { position: relative; height: 340px; border: 5px solid var(--ink); border-radius: 42px; background: var(--white); overflow: hidden; box-shadow: 5px 5px 0 var(--ink); }
#tubeFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, #2690D9, var(--sky) 45%, var(--yel) 100%) bottom / 100% 330px no-repeat;
  border-top: 4px solid var(--ink); transition: height .25s linear; }
.tube span { position: absolute; left: 0; right: 0; text-align: center; font: 800 13px/1 var(--f-l); text-transform: uppercase; z-index: 1; }
.t100 { top: 12px; } .t0 { bottom: 12px; color: var(--white); }
.m-read { min-width: 0; }
.pct { margin: 0; font: 800 clamp(64px, 8vw, 104px)/.9 var(--f-l); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; color: var(--white); text-shadow: .05em .05em 0 var(--ink); }
.pct span { display: block; font-size: .3em; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.m-line { margin: 12px 0 4px; font: 800 22px/1.15 var(--f-l); }
.m-sky { margin: 0 0 16px; font-size: 15px; }
.m-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.m-btns button, #copyCa { font: 800 18px/1 var(--f-l); background: var(--yel); border: 4px solid var(--ink); padding: 12px 18px 10px; box-shadow: 5px 5px 0 var(--ink); text-transform: uppercase; }
.m-btns button:active:not(:disabled), #copyCa:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.m-btns button:disabled { opacity: .45; cursor: default; }
.m-btns .ghost { background: var(--white); }
.m-note { margin: 16px 0 0; font-size: 14px; color: #283246; }
.meter.done .m-gauge { background-color: var(--yel); }
.meter.done .pct { color: var(--red); }

/* ---------------------------------------------------------------- meanwhile, on the chart (the token panel) */
.mean { max-width: 1180px; margin: 34px auto 0; background: var(--white); border: 6px solid var(--ink); padding: 14px; box-shadow: 10px 10px 0 rgba(27, 20, 32, .85); }
.mean-in { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px 26px; padding: 76px 22px 24px; background: #5B3C8F radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 2px, transparent 2.4px) 0 0 / 14px 14px; }
.cap.big { font-size: 20px; max-width: none; }
.screen { position: relative; aspect-ratio: 4 / 3.3; border: 5px solid var(--ink); background: #0E0B16; box-shadow: 8px 8px 0 var(--ink); grid-row: span 1; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sky); font: 800 22px/1 var(--f-l); text-align: center; padding: 20px; }
.wait.off { display: none; }
.left { display: grid; gap: 14px; align-content: start; min-width: 0; }
.out { justify-self: start; color: var(--white); font-weight: 700; }
.side { display: grid; grid-template-columns: 1fr 112px; gap: 14px; align-content: start; min-width: 0; }
.who { grid-column: 2; grid-row: 1; align-self: end; }
.who svg { width: 112px; height: auto; display: block; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
.ca-bal { position: relative; grid-column: 1; grid-row: 1; border-radius: 26px; padding: 14px 16px 16px; white-space: normal; text-align: left; font-size: 16px; min-width: 0; align-self: center; }
.ca-bal::before, .ca-bal::after { left: auto; right: -27px; bottom: auto; top: 46%; width: 30px; height: 26px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ca-bal::after { right: -19px; top: calc(46% + 4px); width: 22px; height: 18px; }
.ca-l { margin: 0 0 6px; font: 700 15px/1.2 var(--f-b); }
#caText { display: block; font: 600 13.5px/1.35 var(--f-m); word-break: break-all; background: #F3EEFA; border: 2px solid var(--ink); padding: 6px 8px; margin-bottom: 10px; }
#copyCa { font-size: 15px; padding: 9px 14px 7px; box-shadow: 4px 4px 0 var(--ink); }
#caOk { display: block; min-height: 1.2em; font: 700 14px/1.2 var(--f-b); margin-top: 6px; }
.boxes { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.boxes div { background: var(--yel); border: 3px solid var(--ink); padding: 6px 10px; box-shadow: 3px 3px 0 var(--ink); min-width: 0; }
.boxes div:nth-child(odd) { transform: rotate(-1deg); } .boxes div:nth-child(even) { transform: rotate(1deg); }
.boxes div:first-child { grid-column: 1 / -1; }
.boxes dt { font: 700 12px/1.1 var(--f-b); text-transform: uppercase; }
.boxes dd { margin: 2px 0 0; font: 800 22px/1.1 var(--f-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boxes dd sub { font-size: .6em; }
.up-v { color: #0D7A2C; } .down-v { color: #C21B1B; }
.at { grid-column: 1 / -1; margin: -4px 0 0; color: var(--white); font-size: 14px; }
.bursts { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.bursts a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 20px 28px; font: 800 17px/1 var(--f-l);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M100 3 L118 18 L146 6 L150 26 L190 22 L176 42 L197 56 L172 64 L184 88 L150 80 L136 97 L112 82 L88 97 L74 80 L38 92 L44 68 L4 62 L26 46 L8 28 L48 28 L52 8 L80 18Z' fill='%23FFFDF7' stroke='%231B1420' stroke-width='4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bursts li:nth-child(2n) a { transform: rotate(4deg); } .bursts li:nth-child(2n+1) a { transform: rotate(-3deg); }
.bursts a:hover { filter: drop-shadow(3px 3px 0 var(--ink)); }
.bursts img { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); object-fit: cover; background: #fff; }

/* ---------------------------------------------------------------- the end */
.end { max-width: 1180px; margin: 46px auto 0; padding: 0 20px 40px; text-align: center; }
.the-end { margin: 0; font: 800 clamp(66px, 11vw, 150px)/.9 var(--f-l); color: var(--red); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .05em 0 var(--ink); text-transform: uppercase; }
.the-end span { color: var(--yel); display: inline-block; transform: rotate(14deg) translateY(-.05em); }
.next { margin: 8px 0 26px; font: 700 22px/1.2 var(--f-b); text-transform: uppercase; }
.next b { background: var(--cyan); color: var(--white); border: 3px solid var(--ink); padding: 0 10px; }
.indicia { border-top: 4px solid var(--ink); padding-top: 14px; font-size: 13.5px; line-height: 1.5; color: #3A3046; }
.indicia p { margin: 0 0 8px; }
.indicia nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-bottom: 8px; font-weight: 700; }
.indicia nav a { padding: 0 12px; border-left: 2px solid var(--ink); }
.indicia nav a:first-child { border-left: 0; }
.fine { font-size: 12.5px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .mast { padding: 14px 14px 4px; }
  .mast-in { grid-template-columns: 1fr 1fr; gap: 14px; }
  .logo { grid-column: 1 / -1; grid-row: 1; font-size: clamp(64px, 23vw, 110px); }
  .issue { justify-self: start; } .issue b { font-size: 34px; }
  .corner { justify-self: end; font-size: 12px; padding: 6px 10px; } .corner b { font-size: 20px; }
  .page, .meter, .mean { margin-left: 10px; margin-right: 10px; padding: 9px; gap: 9px; border-width: 5px; box-shadow: 6px 6px 0 rgba(27, 20, 32, .85); }
  .page { grid-template-columns: 1fr; }
  .pA, .pD, .pE, .news { grid-column: auto; }
  .pB, .pC { aspect-ratio: 600 / 640; }
  .pE { aspect-ratio: 1.3; }
  .cap { font-size: 12px; padding: 5px 8px; max-width: 64%; }
  .bal { padding: 8px 14px; font-size: 16px; }
  .b-off { left: 8%; top: 8%; --tx: 54%; }
  .b-wait { left: auto; right: 4%; top: 18%; --tx: 34%; }
  .sfx { font-size: 34px; }
  .s-squish, .s-drip { font-size: 28px; }
  .news { font-size: 15px; padding: 10px 12px; }
  .meter { grid-template-columns: 1fr; }
  .m-gauge { grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 14px; }
  .tube { height: 250px; } #tubeFill { background-size: 100% 240px; }
  .m-line { font-size: 19px; }
  .m-btns button { font-size: 15px; padding: 10px 12px 8px; }
  .m-scene .cap { font-size: 15px; }
  .mean-in { grid-template-columns: 1fr; padding: 62px 12px 16px; gap: 18px; }
  .cap.big { font-size: 16px; }
  .side { grid-template-columns: 1fr 86px; }
  .who svg { width: 86px; }
  .boxes dd { font-size: 19px; }
  .screen { aspect-ratio: 4 / 3.6; }
  .bursts a { padding: 16px 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dt-drip, .dt-hang, .dt-rays, .m-scene.puff .m-art, .m-scene.splash .m-art { animation: none; }
  #tubeFill { transition: none; }
}