/* Base Critters - landing page
   Palette follows the collection: one light house ground, Base blue as the
   single accent, ink for text. No gradients, no shadows on the art. */

:root {
  --blue: #0052ff;
  --blue-dark: #0040c8;
  --ink: #17171b;
  --house: #dfe0e2;
  --paper: #f4f4f2;
  --line: #d6d6d2;
  --muted: #6a6a72;
  --radius: 14px;
  --wrap: 1120px;
  --bar: 57px;              /* sticky header height */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* Pixel art rendering.
   `pixelated` is only correct when scaling UP by a whole number. Every image
   here is scaled DOWN by a fraction, where nearest-neighbour drops rows and
   columns unevenly and visibly mangles the sprite - which is what made the
   28px brand mark look distorted. Downscaling is left smooth so the browser
   averages properly; assets are rendered large enough that it never has to
   scale one up. */
.hero-art, .track img, .brand img { image-rendering: auto; }

a { color: inherit; }

code {
  font: 500 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #e8e8e4;
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

/* ---------------------------------------------------------------- header */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(244, 244, 242, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
}
/* Same treatment as the banner wordmark, so the header and anything a holder
   posts read as the same mark rather than two similar ones. */
.brand span {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.035em;
  line-height: 1;
}
.brand img { border-radius: 50%; width: 28px; height: 28px; }

.bar nav { display: flex; gap: 20px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--muted); }
.bar nav a:hover { color: var(--ink); }

/* Burger. Hidden entirely above the breakpoint - not merely visually, so it
   is out of the tab order on desktop where the links are already visible. */
.burger {
  display: none;
  width: 44px; height: 44px;           /* a real thumb target, not a 24px icon */
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  padding: 0; margin: -6px -8px -6px 0;
  background: none; border: 0; cursor: pointer;
  border-radius: 10px;
}
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.burger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Open state: the three bars become a cross, so the control says what it
   will do next rather than needing a second icon. */
.bar.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bar.open .burger span:nth-child(2) { opacity: 0; }
.bar.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero */
.hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero-art {
  width: 100%;
  border-radius: 50%;
  background: var(--blue);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(40px, 6.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.lede { margin: 0 0 26px; font-size: 19px; color: #3b3b42; max-width: 44ch; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650; font-size: 16px;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.micro { margin: 0; font-size: 14px; color: var(--muted); letter-spacing: .02em; }

/* ----------------------------------------------------------------- strip */
.strip {
  overflow: hidden;
  padding: 26px 0;
  background: var(--blue);
  border-top: 1px solid var(--blue-dark);
  border-bottom: 1px solid var(--blue-dark);
}
.track {
  display: flex; gap: 18px;
  width: max-content;
  padding-left: 18px;
  animation: slide 26s linear infinite;
}
.track img { width: 160px; border-radius: 50%; }

@keyframes slide { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---------------------------------------------------------------- panels */
.panel { max-width: var(--wrap); margin: 0 auto; padding: 72px 24px; }

/* The last section cannot scroll to the top of the viewport if there is not a
   viewport's worth of page beneath it - the browser clamps at maximum scroll
   and the heading lands mid-screen. Every other anchor aligned; #kit could
   not, because it is last and its output panel is hidden until a kit is made.
   Reserving that height is honest rather than cosmetic: it is exactly where
   the profile picture and header appear. */
main > .panel:last-of-type {
  min-height: calc(100vh - var(--bar, 57px) - 72px);
  box-sizing: border-box;
}
.panel.alt {
  max-width: none;
  background: var(--house);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.panel.alt > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  font-weight: 780;
}
.sub { margin: 0 0 34px; color: var(--muted); max-width: 62ch; font-size: 17px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
}
.card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.card p { margin: 0; color: #45454d; font-size: 15.5px; }

/* ----------------------------------------------------------------- stats */
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.stats li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.stats b {
  display: block;
  font-size: 34px; line-height: 1; letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.stats span { display: block; margin-top: 8px; font-weight: 650; font-size: 15px; }
.stats i { display: block; margin-top: 2px; font-style: normal; font-weight: 400;
           font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------------- footer */
footer {
  border-top: 1px solid var(--line);
  padding: 34px 24px 44px;
}
.foot-in {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  font-size: 15px; color: var(--muted);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.foot-social { display: flex; gap: 6px; align-items: center; }
.foot-in a { text-decoration: none; }
.foot-in a:hover { color: var(--ink); }
/* Text links carry the same 44px vertical target as the icons, so the row is
   comfortable on a phone without looking padded on a desktop. */
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }

.disclaimer {
  max-width: var(--wrap);
  margin: 18px auto 0;
  font-size: 13px; line-height: 1.6; color: #8a8a92;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .hero-art { max-width: 320px; margin: 0 auto; }
  .hero-copy { text-align: center; }
  .lede { margin-inline: auto; }
  .cta { justify-content: center; }
  .panel { padding: 56px 20px; }
  .track img { width: 118px; }
}

/* ------------------------------------------------------------ mobile nav */
@media (max-width: 700px) {
  .burger { display: flex; }
  .bar { padding: 12px 18px; }

  /* Absolutely positioned on purpose: the panel must not change the height
     of the bar, because the anchor scrolling measures that height to decide
     where a section lands. A panel that pushed the bar taller would move
     every target the moment the menu opened. */
  .bar nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none;
    flex-direction: column; gap: 0;
    padding: 4px 18px 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .bar.open nav { display: flex; }
  .bar nav a {
    display: flex; align-items: center;
    min-height: 48px;
    color: var(--ink);
    border-top: 1px solid var(--line);
  }

  /* Footer stacks: socials first because they are the tappable thing, the
     legal links next, the copyright last where it belongs. */
  .foot-in {
    flex-direction: column; align-items: center;
    text-align: center; gap: 2px;
  }
  .foot-social { order: 1; }
  .foot-nav { order: 2; justify-content: center; gap: 2px 16px; }
  .foot-copy { order: 3; margin-top: 6px; }
  .disclaimer { text-align: center; }
  .ico-link { width: 44px; height: 44px; }

  /* Kit controls: a token field that fills the row is far easier to hit than
     a 190px pill, and the buttons below it stop reflowing on every keystroke. */
  .lookup { gap: 8px; }
  .lookup input { width: 100%; }
  .lookup .btn { flex: 1 1 auto; }
  .dl .btn { flex: 1 1 auto; }
  .taster { padding: 18px 16px; }
  .prose { padding: 40px 20px 24px; }
}

@media (max-width: 520px) {
  .panel { padding: 44px 16px; }
  .bar { padding: 11px 14px; }
  .bar nav { padding-inline: 14px; }
  .btn { padding: 12px 18px; font-size: 15.5px; }
  .strip { padding: 18px 0; }
  .track { gap: 12px; padding-left: 12px; }
  .track img { width: 96px; }
  .hero { padding: 32px 16px 24px; }
  .hero-art { max-width: 240px; }
  .lede { font-size: 17.5px; }
  .foot-nav { gap: 0 14px; font-size: 14.5px; }
  footer { padding: 26px 16px 34px; }
}

/* ------------------------------------------------------------------- X */
/* Inlined as SVG rather than a font or a hosted asset, so the page still
   makes zero external requests and the mark inherits text colour. */
.ico { width: 16px; height: 16px; fill: currentColor; display: block; }

.ico-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--muted);
  transition: color .15s ease, background .15s ease;
}
.ico-link:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }

.btn .ico { width: 15px; height: 15px; margin-right: 9px; }
.btn { gap: 0; }

/* Contract address. Shown short and linked to Basescan - anyone buying
   should be able to verify what they are buying in one click. */
.contract { text-decoration: none; }
.contract code {
  background: #e6e6e2;
  font-size: 12.5px;
  padding: .2em .45em;
  transition: background .15s ease;
}
.contract:hover code { background: var(--blue); color: #fff; }

/* Mint line. States the date in the markup so it survives no-JS, with the
   countdown appended by script rather than replacing it. */
.mint {
  margin: 0 0 10px;
  font-weight: 650;
  font-size: 15.5px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

/* The taster kit. A collection nobody can wear before buying is a collection
   nobody sees. One Critter is free for anyone, holder or not. */
.taster {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.taster h3 { margin: 0 0 8px; font-size: 17px; }
.taster p { margin: 0 0 14px; color: #45454d; font-size: 15.5px; max-width: 58ch; }

/* "Follow on [X]" - the mark reads as the word, so it sits after the text
   with the spacing on the correct side and lifts slightly to sit on the
   baseline rather than below it. */
.btn-follow .ico { margin: 0 0 0 8px; transform: translateY(0.5px); }

/* Anchor targets.
   The header is position:sticky, so a plain #anchor scrolls the section to
   y=0 where the header sits on top of it - you land mid-heading with the
   title hidden. scroll-margin-top parks each section below the bar instead. */
:target { scroll-margin-top: var(--bar); }
section[id] { scroll-margin-top: var(--bar); }

html {
  scroll-behavior: smooth;
  /* Applies to native hash jumps as well as scripted scrolling, so an
     arrival at /#licence lands below the sticky bar without JavaScript. */
  scroll-padding-top: var(--bar);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Policy pages. Narrow measure, generous leading - these exist to be read,
   not skimmed, and a 40em column is where prose stops being work. */
.prose { max-width: 40em; margin: 0 auto; padding: 56px 24px 24px; }
.prose h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -0.02em; margin: 0 0 12px; }
.prose h2 { font-size: 19px; margin: 34px 0 8px; letter-spacing: -0.01em; }
.prose p { margin: 0 0 14px; color: #3b3b42; }
.prose .lede { font-size: 18px; color: var(--muted); margin-bottom: 8px; }
.prose a { color: var(--blue); }
.prose .stamp { margin-top: 34px; font-size: 14px; color: var(--muted); }

/* Holder kit, now a section on the homepage. */

  .lookup{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 8px}
 .lookup input{font:inherit;padding:12px 16px;border:1px solid var(--line);
   border-radius:999px;width:190px;background:#fff}
 .lookup input:focus{outline:2px solid var(--blue);outline-offset:1px}
 .out{display:none;margin-top:34px}
 .out.on{display:block}
 .row{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;
   margin-bottom:26px}
 .row canvas{width:100%;height:auto;border-radius:12px;background:var(--house)}
 .row canvas.circle{border-radius:50%}
 .row h3{margin:0 0 6px;font-size:17px}
 .row p{margin:0 0 12px;color:var(--muted);font-size:15px}
 .dl{display:inline-flex;gap:8px;flex-wrap:wrap}
 .msg{margin-top:18px;color:var(--muted);font-size:15px}
 .msg.err{color:#b3261e}
 @media(max-width:700px){.row{grid-template-columns:1fr}}

/* Moved out of inline style attributes so the Content-Security-Policy can
   forbid inline styles entirely rather than allowing them everywhere. */
.row .span { grid-column: 1 / -1; }
.row-full { grid-template-columns: 1fr; }