/* Hallmark · macrostructure: survey ledger (stepped hero + ruled report) · theme: studied-DNA (source: planhat.com/frontier) · paper #f6f4ee · accent #c9f25c · display Gloock · body Hanken Grotesk · contrast: pass */
/* CHEKR: a survey of a coin. Paper, grid, contour lines, charcoal stair bars, ruled ledgers. */
@font-face { font-family: 'Gloock'; src: url('/assets/fonts/gloock-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/assets/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'GeistMono'; src: url('/assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --paper: #f6f4ee;
  --ink: #2f2d28;
  --tile: #3a3832;
  --lime: #c9f25c;
  --lime-soft: #e4ff9a;
  --sand: #e3ddcc;
  --rule: #d8d3c4;
  --mute: #6f6b60;
  --warn: #f1c75b;
  --fail: #c2412d;
  --grid: rgba(47, 45, 40, .055);
  --cell: 80px;
  --pad: clamp(16px, 4vw, 64px);
  --bar-h: 56px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --serif: 'Gloock', 'Times New Roman', serif;
  --sans: 'Hanken', system-ui, sans-serif;
  --mono: 'GeistMono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.55 var(--sans);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.topo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* ---------- the bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--pad);
  background: var(--ink); color: var(--paper);
}
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lime); font: 400 26px/1 var(--serif); }
.bar__brand img { width: 34px; height: 34px; border-radius: 8px; }
.bar__nav { display: flex; flex: 1; justify-content: space-evenly; gap: 16px; }
.bar__nav a { text-decoration: none; font-size: 14px; color: #d9d4c5; transition: color .2s; }
.bar__nav a:hover { color: var(--lime); }
.bar__coin { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ca { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid #55524a; border-radius: 6px; background: transparent; cursor: pointer; color: var(--paper); }
.ca:disabled { cursor: default; }
.ca__k { color: var(--lime); font-weight: 600; font-size: 14px; }
.ca__v { font: 400 13px/1 var(--mono); color: #d9d4c5; }
.ca__i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .7; }
.ca:disabled .ca__i { display: none; }
.ca.is-done .ca__v { color: var(--lime); }
.bar__buy { height: 36px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 6px; background: var(--lime); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s; }
.bar__buy:hover { background: var(--lime-soft); }
.bar__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: var(--paper); transition: background .2s, color .2s; }
.bar__ico:hover { background: var(--tile); color: var(--lime); }
.bar__ico svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- the land: stair bars + paste box ---------- */
.land { min-height: 100vh; padding: calc(var(--bar-h) + clamp(48px, 9vh, 120px)) var(--pad) 64px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 48px; }
.steps { display: flex; flex-direction: column; align-items: flex-start; }
.steps__h { margin: 0; display: flex; flex-direction: column; align-items: flex-start; font: 400 clamp(40px, 7.4vw, 140px)/1 var(--serif); letter-spacing: -.01em; }
.step { display: block; overflow: hidden; }
.step__t { display: block; background: var(--ink); color: var(--lime); padding: .12em .32em .14em; white-space: nowrap; transform: translateX(-101%); transition: transform .9s var(--ease); }
.step--b { margin-left: clamp(24px, 9vw, 200px); }
.step--c { margin-left: clamp(48px, 18vw, 400px); }
.is-in .step__t { transform: none; }
.is-in .step--b .step__t { transition-delay: .14s; }
.is-in .step--c .step__t { transition-delay: .28s; }

.probe { display: flex; width: min(860px, 100%); margin-left: clamp(48px, 18vw, 400px); background: var(--sand); padding: 10px; gap: 10px; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) .42s; }
.is-in .probe { clip-path: inset(0 0 0 0); }
.probe__in { flex: 1; min-width: 0; height: 56px; border: 0; background: var(--paper); padding: 0 18px; font: 400 16px/1 var(--mono); border-radius: 2px; }
.probe__in::placeholder { color: var(--mute); }
.probe__go { height: 56px; padding: 0 28px; border: 0; border-radius: 2px; background: var(--ink); color: var(--lime); font-weight: 600; font-size: 17px; cursor: pointer; transition: background .2s; }
.probe__go:hover { background: var(--tile); }
.probe__go:disabled { opacity: .7; cursor: progress; }
.probe__msg { margin: 14px 0 0 clamp(48px, 18vw, 400px); min-height: 1.5em; color: var(--mute); }
.probe__msg.is-bad { color: var(--fail); }
.land__note { max-width: 520px; justify-self: end; font-size: 17px; }
.land__note p { margin: 0 0 10px; }
.land__count { color: var(--mute); font-size: 15px; }

/* scanning: a line sweeps the paste box while the checks run */
.probe.is-busy { position: relative; }
.probe.is-busy::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--ink); transform-origin: left; animation: sweep 1.4s var(--ease) infinite; }
@keyframes sweep { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- report ---------- */
.report { padding: 48px var(--pad) 96px; }
.report__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 20px; }
.coin { display: flex; align-items: center; gap: 18px; min-width: 0; }
.coin__img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--sand); }
.coin__name { margin: 0; font: 400 clamp(30px, 3.6vw, 56px)/1.05 var(--serif); overflow-wrap: anywhere; }
.coin__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; color: var(--mute); }
.coin__mint { border: 0; background: none; padding: 0; font: 400 14px/1 var(--mono); color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.coin__meta a { color: var(--mute); text-underline-offset: 3px; }
.coin__meta a:hover { color: var(--ink); }
.score { display: flex; align-items: flex-end; gap: 20px; }
.score__n { margin: 0; font: 400 clamp(96px, 12vw, 200px)/.85 var(--serif); letter-spacing: -.03em; }
.score__n small { font-size: .26em; color: var(--mute); letter-spacing: 0; margin-left: 4px; }
.verdict { margin: 0 0 8px; padding: 10px 18px; font-weight: 600; font-size: 20px; border-radius: 2px; white-space: nowrap; }
.lv-pass { background: var(--lime); color: var(--ink); }
.lv-warn { background: var(--warn); color: var(--ink); }
.lv-fail { background: var(--fail); color: var(--paper); }
.lv-unknown { background: var(--rule); color: var(--ink); }
.report__line { margin: 22px 0 0; max-width: 980px; font: 400 clamp(22px, 2.2vw, 34px)/1.25 var(--serif); }
.report__acts { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.act { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--ink); background: transparent; border-radius: 2px; text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.act:hover { background: var(--ink); color: var(--lime); }
.act--x { background: var(--ink); color: var(--lime); }
.act--x:hover { background: var(--tile); }
.act.is-on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.report__when { color: var(--mute); font-size: 14px; margin-left: auto; }

.report__grid { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 4vw, 64px); align-items: start; }

/* the ledger: one ruled row per check, + opens the detail */
.ledger { border-top: 2px solid var(--ink); }
.row { border-bottom: 1px solid var(--rule); background: rgba(246, 244, 238, .82); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), background .2s; }
.row.is-in { opacity: 1; transform: none; }
.row__top { width: 100%; display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 1.4fr) 96px 28px; gap: 16px; align-items: center; padding: 16px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.row__top:hover { background: rgba(201, 242, 92, .14); }
.row__k { font-weight: 500; font-size: 17px; }
.row__v { color: var(--mute); font-size: 15px; overflow-wrap: anywhere; }
.chip { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.plus { width: 22px; height: 22px; position: relative; justify-self: end; transition: transform .35s var(--ease); }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.row.is-open .plus { transform: rotate(45deg); }
.row__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.row.is-open .row__more { grid-template-rows: 1fr; }
.row__in { overflow: hidden; }
.row__d { margin: 0; padding: 0 4px 6px; max-width: 760px; }
.row__src { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 4px 18px; font-size: 14px; }
.row__src a { color: var(--mute); text-underline-offset: 3px; }
.row__src a:hover { color: var(--ink); }
.row__src span { color: var(--mute); }

/* holders strip inside the top10 row */
.hold { display: flex; height: 10px; margin: 6px 4px 12px; background: var(--sand); }
.hold i { display: block; height: 100%; background: var(--ink); border-right: 1px solid var(--paper); }
.hold i.is-dev { background: var(--fail); }

/* ape box */
.ape { position: sticky; top: calc(var(--bar-h) + 20px); background: var(--ink); color: var(--paper); padding: 26px; }
.ape__h { margin: 0; font: 400 34px/1 var(--serif); color: var(--lime); }
.ape__sub { margin: 10px 0 18px; color: #d9d4c5; font-size: 15px; }
.ape__warn { background: var(--fail); color: var(--paper); padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
.ape__warn p { margin: 0 0 10px; }
.ape__ok { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ape__ok input { margin-top: 4px; accent-color: var(--ink); }
.ape__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #4d4a42; }
.ape__k { color: #d9d4c5; font-size: 15px; }
.sizes { display: flex; gap: 6px; }
.sizes button { min-width: 48px; height: 36px; border: 1px solid #55524a; background: none; color: var(--paper); border-radius: 2px; cursor: pointer; transition: background .2s, color .2s; }
.sizes button[aria-checked="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.ape__in { width: 120px; height: 36px; border: 1px solid #55524a; background: var(--tile); color: var(--paper); border-radius: 2px; padding: 0 10px; }
.bill { margin: 6px 0 16px; padding-top: 12px; border-top: 1px solid #4d4a42; font-size: 15px; }
.bill div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.bill dt { color: #d9d4c5; }
.bill dd { margin: 0; text-align: right; }
.bill .is-fee dd { color: var(--lime); }
.ape__go { width: 100%; height: 52px; border: 0; border-radius: 2px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 17px; cursor: pointer; transition: background .2s; }
.ape__go:hover { background: var(--lime-soft); }
.ape__go:disabled { opacity: .55; cursor: not-allowed; }
.ape__msg { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: #d9d4c5; overflow-wrap: anywhere; }
.ape__msg.is-bad { color: #ffb4a5; }
.ape__msg a { color: var(--lime); }

/* ---------- staggered statement ---------- */
.say { padding: clamp(80px, 16vh, 200px) var(--pad); display: flex; flex-direction: column; font: 400 clamp(34px, 5.6vw, 104px)/1.06 var(--serif); letter-spacing: -.01em; }
.say__l { margin: 0; opacity: 0; transform: translateY(.4em); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.say__l.is-in { opacity: 1; transform: none; }
.say__l--2 { margin-left: 22%; }
.say__l--3 { margin-left: 8%; }
.say__l--4 { margin-left: 34%; }
.say__l--5 { margin-left: 46%; }
.say__l--6 { margin-left: 12%; }

/* ---------- tabs, watchlist, recent, faq ---------- */
.watch, .recent, .how { padding: 64px var(--pad); }
.tab { display: inline-block; background: var(--ink); padding: 8px 16px; }
.tab h2, .band h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 40px)/1.1 var(--serif); color: var(--lime); }
.watch__sub { max-width: 640px; color: var(--mute); margin: 16px 0 24px; }
.wlist, .rlist { border-top: 2px solid var(--ink); }
.wrow, .rrow { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 90px auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--rule); background: rgba(246, 244, 238, .82); text-decoration: none; transition: background .2s; }
.wrow:hover, .rrow:hover { background: rgba(201, 242, 92, .16); }
.wrow img, .rrow img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--sand); }
.wrow__n, .rrow__n { font-weight: 600; overflow-wrap: anywhere; }
.wrow__n small, .rrow__n small { display: block; font: 400 13px/1.4 var(--mono); color: var(--mute); }
.wrow__s, .rrow__s { font: 400 30px/1 var(--serif); text-align: right; }
.rrow__v { color: var(--mute); font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.delta { grid-column: 2 / -1; margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.delta span { background: var(--lime); padding: 2px 10px; font-size: 14px; font-weight: 500; }
.delta span.is-bad { background: var(--fail); color: var(--paper); }
.wrow__x { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.empty { padding: 28px 4px; color: var(--mute); border-bottom: 1px solid var(--rule); background: rgba(246, 244, 238, .82); }

.band { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ink); padding: 14px 18px; }
.band p { margin: 0; color: #d9d4c5; font-size: 15px; }
.rrow { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .2s; }
.rrow.is-in { opacity: 1; transform: none; }
.rrow time { color: var(--mute); font-size: 14px; white-space: nowrap; }

.faq { margin: 24px 0 0; border-top: 2px solid var(--ink); }
.faq__r { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.6fr); gap: 24px; padding: 24px 4px; border-bottom: 1px solid var(--rule); background: rgba(246, 244, 238, .82); }
.faq dt { font: 400 24px/1.2 var(--serif); }
.faq dd { margin: 0; max-width: 760px; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px var(--pad); background: var(--ink); color: #d9d4c5; font-size: 14px; }
.foot p { margin: 0; max-width: 720px; }
.foot__brand { display: flex; align-items: center; gap: 10px; color: var(--lime); text-decoration: none; font: 400 22px/1 var(--serif); }
.foot__brand img { border-radius: 6px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--lime); padding: 10px 18px; font-size: 15px; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- wide screens ---------- */
@media (min-width: 1800px) {
  :root { --cell: 96px; }
  .land__note { font-size: 19px; max-width: 600px; }
  .report__grid { grid-template-columns: minmax(0, 1fr) 460px; }
}
@media (min-width: 2400px) {
  :root { --cell: 120px; --bar-h: 68px; }
  body { font-size: 19px; }
  .bar__brand { font-size: 32px; }
  .bar__nav a { font-size: 17px; }
  .probe { width: 1200px; }
  .probe__in, .probe__go { height: 72px; font-size: 20px; }
  .row__k { font-size: 21px; }
  .row__v { font-size: 18px; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .report__grid { grid-template-columns: minmax(0, 1fr); }
  .ape { position: static; }
}
@media (max-width: 720px) {
  :root { --cell: 56px; --bar-h: 52px; }
  .bar { gap: 8px; }
  .bar__brand span { display: none; }
  .ca { padding: 0 8px; }
  .ca__k { display: none; }
  .ca__v { font-size: 12px; }
  .bar__buy { padding: 0 12px; }
  .bar__ico { width: 32px; }
  .land { min-height: auto; padding-top: calc(var(--bar-h) + 40px); }
  .steps__h { font-size: clamp(28px, 9.6vw, 64px); }
  .step--b { margin-left: 14px; }
  .step--c { margin-left: 28px; }
  .probe, .probe__msg { margin-left: 0; }
  .probe { flex-direction: column; }
  .probe__in, .probe__go { height: 52px; }
  .land__note { justify-self: start; font-size: 16px; }
  .score { width: 100%; justify-content: space-between; }
  .row__top { grid-template-columns: minmax(0, 1fr) auto 22px; gap: 10px; }
  .row__k { grid-column: 1; grid-row: 1; }
  .row__top .chip { grid-column: 2; grid-row: 1; }
  .plus { grid-column: 3; grid-row: 1; }
  .row__v { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .wrow, .rrow { grid-template-columns: 40px minmax(0, 1fr) 56px; gap: 12px; }
  .wrow img, .rrow img { width: 40px; height: 40px; }
  .rrow__v, .rrow time, .wrow__v { grid-column: 2 / -1; }
  .wrow__s, .rrow__s { font-size: 24px; grid-column: 3; grid-row: 1; }
  .faq__r { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .say__l--2, .say__l--3, .say__l--4, .say__l--5, .say__l--6 { margin-left: 0; }
  .say__l:nth-child(even) { padding-left: 14%; }
  .report__when { margin-left: 0; width: 100%; }
}
@media (max-width: 360px) {
  .bar__ico { width: 28px; }
  .bar__buy { padding: 0 10px; }
  .ca__v { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step__t, .probe, .row, .say__l, .rrow { transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .probe.is-busy::after { animation: none; }
}
.row__top .chip { justify-self: end; }
.row__v, .bill dd, .score__n, .wrow__s, .rrow__s, .land__count, .band p { font-variant-numeric: tabular-nums; }