/* Meme Town Dog. One sky, one town, flat pixel art on a 4 px cell.
   Built to the avatar and the banner in art/ref: see DESIGN-NOTES.md for every measured number. */

/* ---------------------------------------------------------------- faces */
@font-face{font-family:Pixelify;src:url(/fonts/PixelifySans-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Pixelify;src:url(/fonts/PixelifySans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Pally;src:url(/fonts/Pally-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Pally;src:url(/fonts/Pally-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:SplineMono;src:url(/fonts/SplineSansMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SplineMono;src:url(/fonts/SplineSansMono-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root{
  /* sky and ground, measured off his banner */
  --sky:#56B4EE;
  --sky-deep:#3F9FE0;
  --cloud:#FAEBCC;
  --cloud-edge:#F3D8AB;
  --grass:#3B5624;
  --earth:#523625;
  --earth-deep:#3A261A;

  /* paper, measured off his avatar field and his house walls */
  --cream:#FBEFD5;
  --cream-step:#EECFA2;
  --wall:#F1C685;

  /* ink */
  --ink:#07375D;
  --ink-2:#2F5B78;
  --ink-lit:#4B7D9B;

  /* the dog, the cap, the propeller */
  --dog:#FEDA1C;
  --dog-step:#EAA407;
  --dog-line:#C47303;
  --cap:#016AFC;
  --prop:#EF0910;
  --prop-text:#C4120E;

  /* type scale, nothing off this list */
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px;
  --t-24:24px; --t-32:32px; --t-48:48px; --t-72:72px;

  /* spacing, nothing off this list */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px;

  --col:1120px;
  --gut:24px;
  --cell:4px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{background:var(--sky)}
body{
  margin:0;
  background:var(--sky);
  color:var(--ink);
  font-family:Pally,"Segoe UI",system-ui,sans-serif;
  font-weight:500;
  font-size:var(--t-16);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}
canvas{image-rendering:pixelated}
h1,h2,h3,p,ul,ol,dl,dd,pre,figure{margin:0;padding:0}
ul,ol{list-style:none}
code,.mono{font-family:SplineMono,ui-monospace,monospace;font-variant-numeric:tabular-nums}

.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;
}

/* the pixel role: display only, never under 24 px, never smoothed by the LCD filter */
.px,.sec,.fig,.cfig,.stepno,.key,.tick b,.minutes-head,.rectag{
  font-family:Pixelify,"Courier New",monospace;
  font-weight:700;
  letter-spacing:.02em;
  will-change:transform;
  text-rendering:geometricPrecision;
}

/* ---------------------------------------------------------------- page */
.page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:calc(var(--col) + var(--gut) * 2);
  margin:0 auto;
  padding:0 var(--gut);
}

/* the weather: clouds drifting behind the whole document */
.sky-weather{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.drift{position:absolute;opacity:.92}
.drift-1{top:300px;left:4%;animation:drift 150s linear infinite;animation-delay:-75s}
.drift-2{top:296px;left:58%;animation:drift 190s linear infinite;animation-delay:-80s}
.drift-3{top:430px;left:34%;animation:drift 120s linear infinite;animation-delay:-70s}
.drift-4{top:1180px;left:12%;animation:drift 210s linear infinite;animation-delay:-100s}
.drift-5{top:1760px;left:62%;animation:drift 170s linear infinite;animation-delay:-90s}
.drift-6{top:2420px;left:28%;animation:drift 135s linear infinite;animation-delay:-60s}
.drift-7{top:640px;left:72%;animation:drift 160s linear infinite;animation-delay:-85s}
.drift-8{top:1480px;left:46%;animation:drift 125s linear infinite;animation-delay:-55s}
.drift-9{top:2080px;left:8%;animation:drift 200s linear infinite;animation-delay:-96s}
@keyframes drift{from{transform:translateX(-120vw)}to{transform:translateX(120vw)}}

/* ---------------------------------------------------------------- masthead */
.top{padding:var(--s-64) 0 var(--s-48)}
.mark{margin:0 0 var(--s-24)}
.mark img{width:762px;height:auto;max-width:100%}
.lede{
  max-width:52ch;
  font-size:var(--t-20);
  line-height:1.5;
  color:var(--ink);
}

/* ---------------------------------------------------------------- the flight */
.flight{padding:0 0 var(--s-64)}

/* One sky carrying three things on ONE scale: the last ten minutes as a pixel skyline, the record
   as a dashed line across it, and the dog flying at the rate he is actually counting. */
.airspace{
  position:relative;
  height:520px;
  margin-bottom:var(--s-48);
  --roof:56px;
  --roofw:512px;
}
.sky{position:absolute;left:0;right:0;top:0;bottom:var(--roof);z-index:1}
/* the roofs he sits on until he takes off, running past the column the way his town does.
   They sit BEHIND the sky, so his paws land on the ridge instead of being cut by it. */
.roofs{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:0;
  width:100vw;height:var(--roof);
  background:url(/img/rooftops.png) repeat-x bottom left;
  background-size:var(--roofw) var(--roof);
}
.tenmin{
  position:absolute;left:0;bottom:28px;
  width:58%;height:calc(100% - 28px);
  display:block;
}
.recline{
  position:absolute;left:0;right:0;
  bottom:var(--rec,50%);
  height:8px;
  background:url(/img/dash.png) repeat-x left center;
  background-size:112px 8px;
  transition:bottom .6s ease;
}
.tenlab{
  position:absolute;left:0;bottom:0;
  width:58%;
  display:flex;justify-content:space-between;
  font-size:var(--t-16);color:var(--ink);
}

.flier{
  position:absolute;
  right:var(--s-32);
  bottom:var(--alt,4%);
  width:165px;
  transition:bottom 1.2s cubic-bezier(.22,.61,.36,1);
}
.flier .dog{width:165px;height:235px;animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.flier .prop{
  position:absolute;
  left:25px;              /* the hub lands on the cap's shaft: 82.5 - 11.5 cells at 5 px */
  top:-28px;
  width:120px;height:30px;
}
/* he only sparkles when he is really over the record line */
.flier .spark{position:absolute;width:25px;height:25px;opacity:0;transition:opacity .3s}
.flier.is-climbing .spark{opacity:1;animation:twinkle 1.6s steps(2,end) infinite}
.flier .spark-a{left:-24px;top:16px}
.flier .spark-b{right:-16px;top:64px;animation-delay:.8s}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}

.flight-read{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.3fr);
  gap:var(--s-24);
  margin-top:var(--s-48);
}

/* ---------------------------------------------------------------- the board */
/* one generated cream plate, nine sliced on its own cells. Its face is the same flat cream the
   art is painted in, so nothing is stretched and nothing is a bordered box. */
.board{
  border-style:solid;
  border-width:8px 16px 16px 8px;
  border-image:url(/img/board.png) 8 16 16 8 repeat;
  background:var(--cream);
  background-clip:padding-box;
  padding:var(--s-32);
  color:var(--ink);
}

.read-big{display:flex;flex-direction:column;justify-content:center}
.fig{font-size:var(--t-72);line-height:1;color:var(--ink)}
.figlab{margin-top:var(--s-8);font-size:var(--t-16);line-height:1.5;color:var(--ink-2)}

.read-say{display:flex;flex-direction:column;justify-content:center;gap:var(--s-16)}
.say{font-size:var(--t-20);line-height:1.5}

/* a divider is a rule drawn by a pseudo element, never a box around the words */
.ruled{position:relative;margin-top:var(--s-16);padding-top:var(--s-16)}
.ruled::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:var(--cell);background:var(--cream-step);
}
.held{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-16);
  font-size:var(--t-16);
}
.held + .held{margin-top:var(--s-12)}
.held b{font-family:SplineMono,monospace;font-weight:600;font-size:var(--t-16);font-variant-numeric:tabular-nums}


/* ---------------------------------------------------------------- readings on clouds */
/* three readings riding on clouds in the top left of the same sky */
.cloudrow{
  position:absolute;left:0;top:0;
  width:58%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24);
}
.cloudread{position:relative;min-width:0;text-align:center}
.cloudread .cl{max-width:100%}
.cloudread .cl{width:120px;height:44px;margin:calc(-1 * var(--s-12)) auto 0}
.cfig{font-size:var(--t-48);line-height:1;color:var(--ink)}
.clab{margin-top:var(--s-12);font-size:var(--t-16);line-height:1.5;color:var(--ink)}

/* ---------------------------------------------------------------- sections */
.sec{
  font-size:var(--t-32);
  line-height:1.2;
  color:var(--ink);
  margin-bottom:var(--s-24);
}
.rules,.logs,.towny{padding-bottom:var(--s-64)}

/* ---------------------------------------------------------------- the rules board */
.steps{display:grid;gap:var(--s-32)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:var(--s-24);align-items:start}
.stepno{font-size:var(--t-32);line-height:1;color:var(--ink);width:48px}
.steps h3{font-size:var(--t-20);line-height:1.3;font-weight:700;margin-bottom:var(--s-8)}
.steps p{font-size:var(--t-16);line-height:1.5;max-width:62ch}
.potsplit{
  margin-top:var(--s-32);
  font-size:var(--t-16);line-height:1.5;max-width:66ch;
}
.potsplit b{font-family:SplineMono,monospace;font-weight:600}

/* ---------------------------------------------------------------- takeoffs */
.takeoffs{display:grid;gap:var(--s-16);margin-bottom:var(--s-32)}
.takeoffs li{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:var(--s-24);
  align-items:center;
  border-style:solid;
  border-width:8px 16px 16px 8px;
  border-image:url(/img/board.png) 8 16 16 8 repeat;
  background:var(--cream);
  background-clip:padding-box;
  padding:var(--s-16) var(--s-24);
}
.takeoffs .tno{font-family:Pixelify,monospace;font-weight:700;font-size:var(--t-32);line-height:1;will-change:transform}
.takeoffs .twhat{font-size:var(--t-16);line-height:1.5}
.takeoffs .twhat b{font-family:SplineMono,monospace;font-weight:600}
.takeoffs .is-waiting{opacity:1}
.takeoffs .is-waiting .tno,.takeoffs .is-waiting .twhat{color:var(--ink-2)}

.keeperboard{display:grid;gap:var(--s-16)}
.keephead{display:flex;align-items:center;gap:var(--s-12);font-size:var(--t-16)}
.keephead b{margin-left:auto;font-family:SplineMono,monospace;font-weight:600}
.keeplamp{width:32px;height:32px;flex:none}
.keeplog{
  font-family:SplineMono,monospace;font-size:var(--t-16);line-height:1.6;
  white-space:pre-wrap;word-break:break-word;color:var(--ink-2);
}

/* ---------------------------------------------------------------- the town */
.townlede{font-size:var(--t-16);line-height:1.5;max-width:66ch;color:var(--ink);margin-bottom:var(--s-24)}
.street{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:var(--s-8) var(--s-4);
  min-height:96px;
  padding-bottom:16px;
  background:url(/img/turf.png) repeat-x bottom left;
  background-size:128px 16px;
}
.street img{flex:none}
.streetfoot{margin-top:var(--s-12);font-size:var(--t-16);color:var(--ink)}

.mineboard{margin-top:var(--s-32)}
.mineh{font-size:var(--t-20);line-height:1.3;font-weight:700;margin-bottom:var(--s-16)}
.minenote{margin-top:var(--s-12);font-size:var(--t-16);line-height:1.5;color:var(--ink-2);max-width:60ch}
.minefacts{margin-top:var(--s-24);display:grid;gap:var(--s-12)}
.minefacts>div{
  position:relative;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-16);
  padding-bottom:var(--s-12);
}
.minefacts>div::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--cell);background:var(--cream-step);
}
.minefacts dt{font-size:var(--t-16)}
.minefacts dd{
  font-family:SplineMono,monospace;font-weight:600;font-size:var(--t-16);
  text-align:right;word-break:break-all;
}
.minerounds{margin-top:var(--s-16);display:grid;gap:var(--s-8)}
.minerounds li{
  display:flex;justify-content:space-between;gap:var(--s-16);
  font-family:SplineMono,monospace;font-size:var(--t-16);
}

/* ---------------------------------------------------------------- the sign */
.signpost{position:relative;padding:var(--s-48) 0 var(--s-48)}
.signpost::before{
  content:"";
  position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:0;bottom:0;
  background:var(--earth);
  z-index:-1;
}
.signpost::after{
  content:"";
  position:absolute;left:50%;transform:translateX(-50%);
  width:100vw;top:0;height:40px;
  background:url(/img/ground.png) repeat-x top left;
  background-size:128px 40px;
  z-index:-1;
}
.signboard{position:relative;z-index:1;max-width:720px}
.posts{position:relative;z-index:0;margin:-8px 0 0;width:720px;max-width:100%;height:auto}

.tick{display:flex;align-items:baseline;gap:var(--s-16);flex-wrap:wrap;margin-bottom:var(--s-16)}
.tick b{font-size:var(--t-32);line-height:1}
.tick span{font-size:var(--t-16);color:var(--ink-2)}
.mintrow{
  display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;
  padding:var(--s-12) var(--s-16);
  background:var(--wall);
  margin-bottom:var(--s-16);
}
.mintrow code{
  flex:1 1 320px;
  font-size:var(--t-16);line-height:1.5;
  word-break:break-all;color:var(--ink);
}
.marks{display:flex;gap:var(--s-12);flex-wrap:wrap;margin-top:var(--s-16)}
.risk{
  margin-top:var(--s-24);
  font-size:var(--t-16);line-height:1.5;color:var(--ink-2);max-width:62ch;
}

/* ---------------------------------------------------------------- keys */
.key{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-12);
  min-height:48px;
  padding:var(--s-12) var(--s-32);
  border-style:solid;
  border-width:4px 12px 12px 8px;
  border-image:url(/img/key.png) 4 12 12 8 repeat;
  background:var(--ink);
  background-clip:padding-box;
  color:var(--cream);
  font-size:var(--t-24);
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s steps(1);
}
.key img{width:20px;height:20px;image-rendering:auto}
.key span{font-family:Pixelify,monospace;font-weight:700}
.key:hover{border-image-source:url(/img/key-on.png);background:var(--ink-2)}
.key:active{transform:translate(4px,4px)}
/* the ring has to read on cream, on navy and on the sky, so it is navy with a cream halo */
.key:focus-visible{outline:4px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 8px var(--cloud)}
a:focus-visible,button:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
/* OFF is its own object, not a dimmed key: a sand plate with no shadow and nothing to press */
.key[disabled],.key.is-off{
  background:var(--cream-step);
  border-image-source:url(/img/key-off.png);
  color:var(--ink-2);
  cursor:not-allowed;
  opacity:1;
}
.key[disabled]:hover,.key.is-off:hover{border-image-source:url(/img/key-off.png);background:var(--cream-step)}
.key[disabled]{pointer-events:none}
.key.is-off{pointer-events:none}
.key-wide{display:flex;width:100%}
.key-buy{display:flex;width:100%;margin-top:var(--s-8)}
.key-copy{flex:none;min-height:48px;font-size:var(--t-24)}
.key-mark{font-size:var(--t-24)}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion:reduce){
  .drift{animation:none !important}
  .flier .dog{animation:none !important}
  .flier .spark{animation:none !important}
  .flier,.recline{transition:none !important}
  *{scroll-behavior:auto}
}

/* ---------------------------------------------------------------- widths */
@media (max-width:1023px){
  .mark img{width:508px}
  .airspace{height:460px;--roof:42px;--roofw:384px}
  .flier{right:var(--s-24);width:132px}
  .flier .dog{width:132px;height:188px}
  .flier .prop{left:20px;top:-22px;width:96px;height:24px}
  .flight-read{grid-template-columns:1fr}
  .fig{font-size:var(--t-48)}
}
@media (max-width:759px){
  :root{--gut:16px}
  .mark img{width:381px}
  .top{padding:var(--s-48) 0 var(--s-32)}
  .lede{font-size:var(--t-16)}
  .airspace{height:420px;--roof:28px;--roofw:256px}
  .flier{right:0;width:99px}
  .flier .dog{width:99px;height:141px}
  .flier .prop{left:15px;top:-18px;width:72px;height:18px}
  .tenmin,.tenlab{width:70%}
  /* on a phone a reading is a ROW: the figure on its cloud at the left, the label beside it */
  .cloudrow{position:static;width:100%;grid-template-columns:1fr;gap:var(--s-16)}
  .cloudread{display:grid;grid-template-columns:120px 1fr;gap:0 var(--s-16);align-items:center;text-align:left}
  .cloudread .cfig{grid-column:1;grid-row:1;text-align:center}
  .cloudread .cl{grid-column:1;grid-row:2;width:60px;height:22px;margin:0 auto}
  .cloudread .clab{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .cfig{font-size:var(--t-32)}
  .sky{position:relative;flex:1;min-height:340px}
  .airspace{display:flex;flex-direction:column;height:auto;gap:var(--s-24)}
  .roofs{position:relative;left:auto;transform:none;width:100vw;margin-left:calc(50% - 50vw)}
  .tenmin,.tenlab{width:70%}
  .sky-weather{display:none}   /* the pedestal clouds are enough on a phone */
  .sec{font-size:var(--t-24)}
  .board{padding:var(--s-24) var(--s-32)}
  .steps li{grid-template-columns:40px 1fr;gap:var(--s-16)}
  .stepno{width:40px;font-size:var(--t-24)}
  .takeoffs li{grid-template-columns:56px 1fr;gap:var(--s-16)}
  .takeoffs li .tmemo{grid-column:1 / -1}
  .signboard{max-width:none}
}
@media (max-width:429px){
  .mark img{width:254px}
  .tenmin,.tenlab{width:62%}
  .sky{min-height:300px}
  .fig{font-size:var(--t-32)}
  .key{font-size:var(--t-24);padding:var(--s-16) var(--s-24)}
}