/* Based Matt Coin. One flood of Base blue, drawn on with a fat white marker.
   Blue is Base. Orange only ever means MattCoin, the older sibling. */

:root {
  --blue: #0052ff;       /* Base blue: the ground */
  --wet: #4d86ff;        /* fresh marker on blue: scribbles, highlights */
  --rule: #6f9dff;       /* lines on blue */
  --soft: #dbe6ff;       /* secondary text on blue */
  --midnight: #07184f;   /* ink on paper and orange; the closing bands */
  --paper: #ffffff;
  --orange: #f7931a;     /* MattCoin */

  --display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 58ch;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blue);
  color: var(--paper);
  font: 400 1.125rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

a {
  color: inherit;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 0.2em; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 4px; }

code { font-family: var(--mono); font-size: 0.94em; overflow-wrap: anywhere; }

.skip { position: absolute; left: -999px; top: 0.75rem; z-index: 10; padding: 0.6rem 1rem; background: var(--paper); color: var(--blue); font-weight: 700; border-radius: 999px; }
.skip:focus { left: 0.75rem; }

h2 {
  max-width: 16ch;
  font: 400 clamp(2.4rem, 5.6vw, 4.5rem)/0.96 var(--display);
  text-wrap: balance;
}

/* Every section shares one rhythm; the modifier classes only change colour and layout. */
.band { padding: clamp(4rem, 10vw, 8.5rem) var(--gutter); }
.intro { max-width: var(--measure); margin-top: 1.5rem; color: var(--soft); }
.plain { display: grid; gap: 1.1rem; max-width: var(--measure); }

/* --- Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  overflow: hidden;
}

/* The visitor's own marker strokes. Sits on the blue, under everything else. */
.scribble { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 2rem;
  padding: 1.25rem var(--gutter);
  font-weight: 600;
}
.bar-name { font: 400 1.5rem/1 var(--display); text-decoration: none; }
.bar-block { margin-right: auto; color: var(--soft); font-variant-numeric: tabular-nums; }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 var(--gutter);
}

.hero-copy { align-self: center; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5.5rem); }

h1 {
  font: 400 clamp(4.4rem, min(13.5vw, 17svh), 12.5rem)/0.82 var(--display);
  letter-spacing: -0.01em;
}
h1 span { display: block; }

.lede { max-width: 40ch; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.4; }

.addr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: 1.75rem; }
.addr-label { flex-basis: 100%; color: var(--soft); font-size: 1rem; }
.addr-value { font-size: clamp(0.74rem, 1.25vw, 1.05rem); font-weight: 600; }

.copy {
  padding: 0.3rem 0.95rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 600 0.95rem/1.4 var(--body);
  cursor: pointer;
}
.copy:hover, .copy.is-done { background: var(--paper); border-color: var(--paper); color: var(--blue); }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; }
.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  border: 3px solid var(--paper);
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.btn-solid { background: var(--paper); color: var(--blue); }
.btn-solid:hover { background: var(--midnight); border-color: var(--midnight); color: var(--paper); }
.btn-line:hover { background: var(--paper); color: var(--blue); }

/* The dog. Each stroke of the original drawing is replayed in order. */
.dog { position: relative; align-self: end; }
.dog svg { display: block; width: 100%; height: auto; max-height: 86svh; margin-left: auto; overflow: visible; }
.dog path {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.dog svg.draw path { animation: stroke var(--t, 0.3s) cubic-bezier(0.55, 0.06, 0.3, 1) var(--d, 0s) both; }

.dog path:nth-child(1)  { --d: 0.25s; --t: 0.55s; }   /* neck */
.dog path:nth-child(2)  { --d: 0.80s; --t: 0.12s; }
.dog path:nth-child(3)  { --d: 0.92s; --t: 1.15s; }   /* the long scribble that fills the head */
.dog path:nth-child(4)  { --d: 2.07s; --t: 0.34s; }   /* muzzle */
.dog path:nth-child(5)  { --d: 2.41s; --t: 0.30s; }
.dog path:nth-child(6)  { --d: 2.71s; --t: 0.08s; }
.dog path:nth-child(7)  { --d: 2.79s; --t: 0.26s; }   /* left ear */
.dog path:nth-child(8)  { --d: 3.05s; --t: 0.26s; }   /* right ear */
.dog path:nth-child(9)  { --d: 3.31s; --t: 0.55s; }
.dog path:nth-child(10) { --d: 3.86s; --t: 0.65s; }
.dog path:nth-child(11) { --d: 4.51s; --t: 0.14s; }
.dog path:nth-child(12) { --d: 4.65s; --t: 0.12s; }

/* Opacity hides the round cap that a zero-length dash would otherwise leave as a dot. */
@keyframes stroke {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  2%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.redraw {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  padding: 0.3rem 0.95rem;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  color: var(--paper);
  font: 600 0.95rem/1.4 var(--body);
  cursor: pointer;
}
.redraw:hover { background: var(--midnight); border-color: var(--midnight); }

/* --- Claims against the chain ----------------------------------------------- */

.status { margin-top: 0.75rem; color: var(--soft); font-size: 1rem; }
.status.is-bad { color: var(--paper); font-weight: 700; }

.claims { width: 100%; margin-top: clamp(2rem, 4vw, 3.5rem); border-collapse: collapse; text-align: left; }
.claims thead th { padding: 0 1.5rem 0.75rem 0; color: var(--soft); font-size: 1rem; font-weight: 400; }
.claims tbody tr { border-top: 2px solid var(--rule); }
.claims tbody tr:last-child { border-bottom: 2px solid var(--rule); }
.claims tbody th, .claims td { padding: 1.5rem 1.5rem 1.5rem 0; vertical-align: top; }
.claims tbody th { width: 34%; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 700; line-height: 1.25; }
.claims td:last-child { width: 26%; padding-right: 0; }

.live { display: inline; border-radius: 0.3em; font-variant-numeric: tabular-nums; }
.live b { font-weight: 700; }
/* A value that just changed on-chain gets one stroke of highlighter. */
.live.is-new, .legend strong.is-new { animation: mark 1.4s ease-out; }
@keyframes mark {
  0%, 25% { background: var(--wet); box-shadow: 0 0 0 0.25em var(--wet); }
  100%    { background: transparent; box-shadow: 0 0 0 0.25em transparent; }
}

/* --- Where the coins are ---------------------------------------------------- */

.where { padding-top: 0; }

.split {
  display: flex;
  gap: 4px;
  height: clamp(3.75rem, 8vw, 6.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: 999px;
  overflow: hidden;
}
.seg { flex: var(--share, 0) 1 0; min-width: 8px; transition: flex-grow 1.1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.seg-creator { background: var(--paper); }
.seg-pool    { background: var(--wet); }
.seg-others  { background: var(--midnight); }
.seg-burned  { background: repeating-linear-gradient(135deg, var(--midnight) 0 6px, var(--blue) 6px 12px); }

.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.75rem 2rem; margin-top: 1.75rem; }
.legend dt { display: flex; align-items: center; gap: 0.6rem; color: var(--soft); }
.legend dd { margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.legend strong { display: block; border-radius: 0.2em; font-size: 1.75rem; line-height: 1.2; }
.legend dd span { color: var(--soft); font-size: 1rem; }
.swatch { flex: none; width: 1.1rem; height: 1.1rem; border: 2px solid var(--paper); border-radius: 50%; }

.where .plain { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --- The contract, on a sheet of paper -------------------------------------- */

.sheet { background: var(--paper); color: var(--midnight); }
.sheet h2 { color: var(--blue); }
.sheet .intro { color: var(--midnight); }

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.code {
  position: sticky;
  top: 1.5rem;
  padding: 0.25rem 0;
  counter-reset: line;
  font: 400 0.84rem/1.75 var(--mono);
}
/* Long lines wrap under themselves rather than running off the sheet. */
.code li {
  display: grid;
  grid-template-columns: 3.25ch minmax(0, 1fr);
  padding-right: 0.75rem;
  counter-increment: line;
  white-space: pre-wrap;
}
.code li::before { content: counter(line); padding-right: 1.25ch; color: #8a97c2; text-align: right; }
.code code { font-size: 1em; overflow-wrap: anywhere; }
.code .is-comment code { color: #5b6a9e; }
.code li.is-lit { background: #cfdeff; box-shadow: inset 5px 0 0 var(--blue); }

.notes { display: grid; gap: 0.5rem; }
.notes button {
  display: block;
  width: 100%;
  padding: 1.1rem 0 1.1rem 1.4rem;
  border: 0;
  border-left: 5px solid #cfdeff;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.notes b { display: block; font-size: 1.3rem; line-height: 1.25; }
.where-lines { display: block; margin: 0.15rem 0 0.5rem; color: #5b6a9e; font-size: 0.95rem; }
.notes button:hover, .notes button:focus-visible, .notes button[aria-pressed="true"] { border-left-color: var(--blue); }
.notes button[aria-pressed="true"] b { color: var(--blue); }
.notes :focus-visible { outline-color: var(--blue); }

/* --- MattCoin, in its own colour -------------------------------------------- */

.family {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  background: var(--orange);
  color: var(--midnight);
}
.family a { font-weight: 700; }

/* --- Closing bands ---------------------------------------------------------- */

.caution { background: var(--midnight); }
.cautions { max-width: 46rem; margin-top: clamp(2rem, 4vw, 3rem); }
.cautions li { padding: 1.25rem 0; border-top: 2px solid #2a3c86; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; }
.cautions li:last-child { border-bottom: 2px solid #2a3c86; }

.foot { padding-top: 0; background: var(--midnight); }
.addresses { display: grid; gap: 1.25rem; }
.addresses dt { color: var(--soft); font-size: 1rem; }
.addresses dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.15rem; }
.addresses code { font-size: clamp(0.74rem, 1.2vw, 1rem); }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2.5rem; }
.fine { margin-top: 1.5rem; color: var(--soft); font-size: 1rem; }

/* --- Narrow screens --------------------------------------------------------- */

@media (max-width: 860px) {
  .bar { justify-content: space-between; }
  .bar-block { order: 3; flex-basis: 100%; margin: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-bottom: 1rem; }
  .dog svg { width: min(78%, 22rem); margin: 0 0 0 auto; }
  .redraw { right: auto; left: 0; }

  .sheet-grid, .family { grid-template-columns: minmax(0, 1fr); }
  .code { position: static; }

  /* The table becomes a stack: claim, then the chain's answer, then the link. */
  .claims, .claims tbody, .claims tr, .claims th, .claims td { display: block; width: auto; }
  .claims thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .claims tbody tr { padding: 1.25rem 0; }
  .claims tbody th, .claims td { width: auto; padding: 0; }
  .claims td { margin-top: 0.5rem; }
  .claims td:last-child { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dog svg.draw path, .live.is-new, .legend strong.is-new { animation: none; }
  .seg { transition: none; }
  .redraw { display: none; }
}

/* --- Not found page --------------------------------------------------------- */

.lost { margin-top: 1.5rem; }