/* =========================================================================
   $ZOE — the anti AI mascot
   Hand-written CSS port of the original Tailwind design system.

   Design tokens use oklch (same values as the source project), with hex
   fallbacks declared first for older engines.

   Breakpoints match the original Tailwind scale:
     sm  = 40rem  (640px)
     md  = 48rem  (768px)
     lg  = 64rem  (1024px)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Reenie Beanie";
  src:
    url("assets/fonts/ReenieBeanie-Regular.woff2") format("woff2"),
    url("assets/fonts/ReenieBeanie-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Design tokens
   ---------------------------------------------------------------------- */

:root {
  --radius: 0.75rem;

  /* Hex fallbacks first, oklch (authoritative) second. */
  --background: #f6f2e9;
  --foreground: #4b463f;
  --card: #f8f4ec;
  --card-foreground: #4b463f;
  --primary: #57514a;
  --primary-foreground: #f6f2e9;
  --secondary: #eae4d6;
  --secondary-foreground: #4b463f;
  --muted: #eae4d6;
  --muted-foreground: #7a736a;
  --accent: #6b655e;
  --accent-foreground: #f6f2e9;
  --border: #9a938a;
  --input: #9a938a;
  --ring: #7a736a;
  --sage: #8fbf9a;

  --background: oklch(0.968 0.011 84);
  --foreground: oklch(0.33 0.012 60);
  --card: oklch(0.975 0.009 84);
  --card-foreground: oklch(0.33 0.012 60);
  --primary: oklch(0.38 0.015 60);
  --primary-foreground: oklch(0.968 0.011 84);
  --secondary: oklch(0.93 0.014 84);
  --secondary-foreground: oklch(0.33 0.012 60);
  --muted: oklch(0.93 0.014 84);
  --muted-foreground: oklch(0.5 0.012 60);
  --accent: oklch(0.45 0.008 60);
  --accent-foreground: oklch(0.968 0.011 84);
  --border: oklch(0.62 0.012 60);
  --input: oklch(0.62 0.012 60);
  --ring: oklch(0.5 0.012 60);
  --sage: oklch(0.68 0.05 145);

  --font-hand: "Reenie Beanie", "Architects Daughter", "Comic Sans MS", cursive;
  --font-cursive: var(--font-hand);

  /* Type scale (Tailwind defaults) */
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;

  /* Speckled-paper dot texture */
  --paper-dot-a: rgba(75, 70, 63, 0.05);
  --paper-dot-b: rgba(75, 70, 63, 0.04);
}

@supports (color: color-mix(in oklab, black, white)) {
  :root {
    --paper-dot-a: color-mix(in oklab, var(--foreground) 5%, transparent);
    --paper-dot-b: color-mix(in oklab, var(--foreground) 4%, transparent);
  }
}

/* -------------------------------------------------------------------------
   3. Base / reset
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps the rotated sketch panels from ever forcing a sideways scroll. */
  overflow-x: hidden;
}

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

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-hand);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(var(--paper-dot-a) 1px, transparent 1px),
    radial-gradient(var(--paper-dot-b) 1px, transparent 1px);
  background-size:
    7px 7px,
    11px 11px;
  background-position:
    0 0,
    3px 4px;
}

h1,
h2,
h3 {
  font-family: var(--font-hand);
  font-weight: 400;
  margin: 0;
}

p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
  /* Stops long URLs/addresses from pushing the layout wide on small screens. */
  overflow-wrap: anywhere;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   4. Hand-drawn sketch utilities
   ---------------------------------------------------------------------- */

.sketch-box {
  border: 2px solid var(--border);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  position: relative;
}

.sketch-box-sm {
  border: 2px solid var(--border);
  border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px;
}

.sketch-underline {
  position: relative;
}

.sketch-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.15em;
  height: 2px;
  background: var(--border);
  border-radius: 50%;
  transform: rotate(-0.6deg);
}

.paper-rule {
  height: 2px;
  background: rgba(75, 70, 63, 0.35);
  border-radius: 50%;
}

@supports (color: color-mix(in oklab, black, white)) {
  .paper-rule {
    background: color-mix(in oklab, var(--foreground) 35%, transparent);
  }
}

/* -------------------------------------------------------------------------
   5. Page shell
   ---------------------------------------------------------------------- */

.page {
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 64rem; /* max-w-5xl */
  overflow-x: hidden;
  padding: 1.5rem 1rem;
}

/* -------------------------------------------------------------------------
   6. Nav
   ---------------------------------------------------------------------- */

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Brand + section links: one tier. The exchange buttons are a separate tier
   below, so the two never share a wrap row and drop items unpredictably. */
.nav__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* A grid, not a wrapping flex row: every button gets an equal cell, so the
   last one can never orphan itself in the middle of the nav. */
.nav__ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  width: 100%;
}

.nav__brand {
  font-size: var(--text-3xl);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.75rem;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.nav__links > a:hover {
  color: var(--accent);
}

/* Comfortable thumb targets on touch screens without shifting the layout. */
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;
  text-align: center;
}

.nav__cta:hover {
  background-color: var(--secondary);
}

.nav__cta img,
.nav__cta svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

.hero {
  margin-top: 2.5rem;
  display: grid;
  align-items: center;
  gap: 2rem;
}

.hero__copy {
  text-align: center;
  min-width: 0;
}

.hero__title {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  font-size: var(--text-6xl);
  line-height: 1;
  font-style: italic;
  letter-spacing: -0.025em;
}

.hero__heart {
  margin-top: 0.5rem;
  font-size: var(--text-3xl);
  line-height: 1.2;
  font-style: normal;
  color: var(--accent);
}

.hero__tagline {
  margin-top: 1.5rem;
  font-size: var(--text-3xl);
  line-height: 1.375; /* leading-snug */
}

.hero__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.25rem;
  font-size: var(--text-xl);
  line-height: 1.4;
}

.hero__cta:hover {
  background-color: var(--secondary);
}

.hero__art {
  margin-inline: auto;
  width: 100%;
  max-width: 16rem;
}

/* -------------------------------------------------------------------------
   8. Why Zoe
   ---------------------------------------------------------------------- */

.why {
  position: relative;
  margin-top: 3.5rem;
}

.why__panel {
  margin-inline: auto;
  max-width: 48rem; /* max-w-3xl */
  transform: rotate(-0.5deg);
  padding: 2rem 1rem;
}

.why__title {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-cursive);
  font-size: var(--text-4xl);
  line-height: 1.15;
}

.why__body {
  margin-top: 2rem;
  margin-inline: auto;
  max-width: 36rem;
  text-align: center;
  font-family: var(--font-cursive);
  font-size: var(--text-2xl);
  line-height: 1.625; /* leading-relaxed */
}

.why__body > * + * {
  margin-top: 1.25rem; /* space-y-5 */
}

.why__body .rot-a {
  transform: rotate(0.3deg);
}
.why__body .rot-b {
  transform: rotate(-0.3deg);
}
.why__body .rot-c {
  transform: rotate(0.2deg);
}

.why__shout {
  font-size: var(--text-3xl);
  line-height: 1.35;
}

.why__body .why__turn {
  margin-top: 2rem;
}

.why__quote {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  transform: rotate(-1deg);
  font-size: var(--text-2xl);
}

.why__quote span {
  display: inline-block;
  padding: 0.5rem 1rem;
}

.why__symbol {
  font-size: var(--text-2xl);
}

/* -------------------------------------------------------------------------
   9. Trio — robot / heart / tokenomics
   ---------------------------------------------------------------------- */

.trio {
  margin-top: 3rem;
  display: grid;
  align-items: center;
  gap: 2rem;
}

.trio__robot {
  margin-inline: auto;
  width: 100%;
  max-width: 20rem; /* max-w-xs */
}

.trio__figure {
  text-align: center;
}

.trio__figure img {
  margin-inline: auto;
  width: 100%;
  max-width: 14rem;
}

.trio__caption {
  margin-top: 0.5rem;
  font-size: var(--text-2xl);
  line-height: 1.35;
}

.trio__caption .heart {
  color: var(--accent);
}

.tokenomics {
  background-color: var(--card);
  color: var(--card-foreground);
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  min-width: 0;
}

.tokenomics__title {
  text-align: center;
  font-size: var(--text-3xl);
  line-height: 1.25;
}

.tokenomics__list {
  margin-top: 1rem;
  font-size: var(--text-xl);
  line-height: 1.45;
}

.tokenomics__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tokenomics__list li + li {
  margin-top: 0.75rem; /* space-y-3 */
}

.tokenomics__list .icon {
  flex-shrink: 0;
  color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------
   10. Contract
   ---------------------------------------------------------------------- */

.contract {
  margin-top: 3.5rem;
}

.contract__panel {
  margin-inline: auto;
  max-width: 48rem;
  transform: rotate(0.4deg);
  padding: 1.5rem 1rem;
  text-align: center;
}

.contract__title {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--text-3xl);
  line-height: 1.25;
}

.contract__address {
  display: block;
  margin-top: 1.25rem;
  width: 100%;
  word-break: break-all;
  padding: 0.75rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  text-align: center;
}

.contract__address:hover {
  background-color: var(--secondary);
}

.contract__hint {
  margin-top: 0.5rem;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--muted-foreground);
}

.contract__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.contract__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-2xl);
  line-height: 1.3;
}

.contract__action:hover {
  background-color: var(--secondary);
}

.contract__action img,
.contract__action svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   11. Footer
   ---------------------------------------------------------------------- */

.rule {
  margin-top: 3rem;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: 2rem;
  text-align: center;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.footer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.footer__link:hover {
  color: var(--accent);
}

/* The sketched marks carry their own circle, so no border here. */
.footer__mark {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.footer__sep {
  display: none;
  color: var(--muted-foreground);
}

.footer__made {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__made .heart {
  font-size: var(--text-2xl);
}

/* -------------------------------------------------------------------------
   12. Very small phones (< 360px) — keep the big display type in bounds
   ---------------------------------------------------------------------- */

@media (max-width: 23.75rem) {
  /* Tighten the chrome so "Open in Pump.fun" and "View on Dexscreener" still
     sit on one line inside a half-width cell. */
  .nav__ctas {
    gap: 0.5rem;
  }

  .nav__cta {
    gap: 0.375rem;
    padding: 0.5rem 0.4375rem;
    font-size: 1rem;
  }

  .nav__cta img,
  .nav__cta svg {
    width: 1rem;
    height: 1rem;
  }
}

/* 320px phones: the longest label needs one more nudge to hold its line. */
@media (max-width: 20rem) {
  .nav__cta {
    font-size: 0.875rem;
  }
}

@media (max-width: 22.5rem) {
  .hero__title {
    font-size: 3rem;
  }

  .hero__tagline,
  .why__title {
    font-size: 1.625rem;
  }

  .why__body {
    font-size: 1.375rem;
  }

  .why__shout {
    font-size: 1.75rem;
  }

  .contract__action {
    font-size: 1.25rem;
  }

  .nav__brand {
    font-size: 1.75rem;
  }
}

/* -------------------------------------------------------------------------
   13. sm — 40rem / 640px
   ---------------------------------------------------------------------- */

@media (min-width: 40rem) {
  .page {
    padding: 2rem 1.5rem;
  }

  .nav {
    align-items: stretch;
    gap: 1.25rem;
  }

  .nav__bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .nav__ctas {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 0.75rem;
  }

  .nav__brand {
    font-size: var(--text-4xl);
  }

  .nav__links {
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    font-size: var(--text-xl);
  }

  .nav__cta {
    padding-inline: 1rem;
  }

  .nav__cta img,
  .nav__cta svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hero {
    margin-top: 3.5rem;
  }

  .hero__title {
    gap: 1rem;
    font-size: var(--text-8xl);
  }

  .hero__heart {
    margin-top: 1rem;
    font-size: var(--text-4xl);
  }

  .hero__tagline {
    margin-top: 2rem;
    font-size: var(--text-4xl);
  }

  .hero__cta {
    margin-top: 2.5rem;
    padding-inline: 1.5rem;
    font-size: var(--text-2xl);
  }

  .hero__art {
    max-width: 24rem; /* max-w-sm */
  }

  .why {
    margin-top: 5rem;
  }

  .why__panel {
    padding: 2.5rem;
  }

  .why__title {
    font-size: var(--text-6xl);
  }

  .why__body {
    margin-top: 2.5rem;
    font-size: var(--text-3xl);
  }

  .why__body > * + * {
    margin-top: 1.5rem; /* space-y-6 */
  }

  .why__body .why__turn {
    margin-top: 2.5rem;
  }

  .why__shout {
    font-size: var(--text-5xl);
  }

  .why__quote {
    font-size: var(--text-4xl);
  }

  .why__quote span {
    padding-inline: 1.25rem;
  }

  .why__symbol {
    font-size: var(--text-3xl);
  }

  .trio {
    margin-top: 3.5rem;
    gap: 2.5rem;
  }

  .trio__figure img {
    max-width: 20rem;
  }

  .trio__caption {
    font-size: var(--text-3xl);
  }

  .tokenomics {
    padding: 1.5rem;
  }

  .tokenomics__title {
    font-size: var(--text-4xl);
  }

  .tokenomics__list {
    margin-top: 1.25rem;
    font-size: var(--text-2xl);
  }

  .contract {
    margin-top: 5rem;
  }

  .contract__panel {
    padding: 2rem 2.5rem;
  }

  .contract__title {
    font-size: var(--text-5xl);
  }

  .contract__address {
    margin-top: 1.5rem;
    padding-inline: 1rem;
    font-size: var(--text-3xl);
  }

  .contract__hint {
    font-size: var(--text-xl);
  }

  .contract__actions {
    margin-top: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .contract__action {
    width: -moz-fit-content;
    width: fit-content;
    padding-inline: 1.5rem;
    font-size: var(--text-3xl);
  }

  .contract__action img,
  .contract__action svg {
    width: 2.25rem;
    height: 2.25rem;
  }

  .rule {
    margin-top: 4rem;
  }

  .footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: left;
    font-size: var(--text-xl);
  }

  .footer__sep {
    display: inline;
  }
}

/* -------------------------------------------------------------------------
   14. md — 48rem / 768px
   ---------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__copy {
    text-align: left;
  }

  .hero__title {
    justify-content: flex-start;
  }

  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trio__robot {
    max-width: none;
  }
}

/* -------------------------------------------------------------------------
   15. lg — 64rem / 1024px
   ---------------------------------------------------------------------- */

/* Wide enough for all four exchange buttons on one line. Matches the React
   build's `lg` breakpoint so the two stay identical. */
@media (min-width: 64rem) {
  .nav__ctas {
    grid-template-columns: repeat(4, auto);
  }
}

@media (min-width: 64rem) {
  .hero__title {
    font-size: var(--text-9xl);
  }
}