:root {
  --cream: #fef7ed;
  --sky: #87ceeb;
  --ink: #121212;
  --blue: #174d66;
  --pink: #e15a8c;
  --yellow: #ffe55c;
  --white: #fffefa;
  --stroke: 4px solid var(--ink);
  --hard-shadow: 0 6px 0 var(--ink);
  --frame-gutter: clamp(13px, 3.2vw, 56px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.22em; }
button, input { font: inherit; }
button:enabled { cursor: pointer; }
button:disabled { opacity: 0.55; }
h1, h2, h3, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #195da0; outline-offset: 4px; }
.skip { position: fixed; z-index: 9; top: 9px; left: 10px; transform: translateY(-145%); background: var(--ink); color: var(--white); padding: 9px 14px; }
.skip:focus { transform: none; }
.frame-width { width: min(1510px, calc(100% - 2 * var(--frame-gutter) - 12px)); margin-inline: auto; }
.panel-width { width: min(1130px, calc(100% - 2 * var(--frame-gutter))); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--ink); background: var(--cream); }
.header-layout { position: relative; min-height: 63px; width: min(1550px, calc(100% - 2 * var(--frame-gutter))); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.wordmark { position: relative; z-index: 1; font-size: clamp(1.35rem, 2vw, 1.55rem); line-height: 1; font-weight: 800; text-decoration: none; letter-spacing: -0.025em; }
.primary-nav { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; pointer-events: none; }
.nav-socials, .nav-actions { display: flex; align-items: center; pointer-events: auto; }
.nav-socials { grid-column: 2; }
.social-icon { display: grid; place-items: center; width: 36px; min-height: 44px; }
.social-icon svg { width: 20px; height: 20px; }
.social-icon:hover { color: var(--blue); }
.nav-actions { grid-column: 3; justify-self: end; gap: clamp(13px, 2.3vw, 32px); font-size: 0.9rem; text-transform: uppercase; white-space: nowrap; }
.nav-item, .merch-toggle { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav-item:hover, .merch-toggle:hover { text-decoration: underline; }
.merch-menu { position: relative; }
.merch-toggle { cursor: pointer; list-style: none; gap: 5px; }
.merch-toggle::-webkit-details-marker { display: none; }
.merch-caret { width: 15px; height: 15px; flex: none; }
.merch-menu[open] .merch-caret { transform: rotate(180deg); }
.merch-dropdown { position: absolute; top: calc(100% - 5px); left: 0; min-width: 155px; border: 1px solid var(--ink); background: var(--white); box-shadow: 0 2px 5px #1212121a; }
.merch-dropdown a { display: flex; align-items: center; min-height: 54px; padding: 8px 15px; text-decoration: none; }
.merch-dropdown a:hover { background: var(--cream); text-decoration: underline; }
.menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 9px 19px; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 0.9rem; line-height: 1.15; text-align: center; white-space: nowrap; }
.button-black { background: var(--ink); color: var(--white); }
.button-black:enabled:hover, a.button-black:hover { background: var(--blue); border-color: var(--blue); }
.button-white { background: var(--white); color: var(--ink); }
.button-white:enabled:hover, a.button-white:hover { background: var(--yellow); }
.nav-cta { min-height: 39px; padding-inline: 15px; }

.section-dots { position: fixed; z-index: 4; right: max(3px, calc(var(--frame-gutter) / 2)); top: 50%; transform: translateY(-50%); display: grid; }
.section-dots a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
.section-dots a::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; }
.section-dots a[aria-current]::after, .section-dots a:hover::after { width: 15px; height: 15px; background: #000; box-shadow: 0 0 0 1px #fef7ed80; }

.hero { position: relative; margin-top: clamp(30px, 4vw, 59px); padding-bottom: 30px; }
.hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  aspect-ratio: 16 / 9;
  min-height: 390px;
  overflow: hidden;
  background: var(--sky);
  border: var(--stroke);
}
.hero-dog { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; width: 91%; height: 94%; padding-bottom: clamp(26px, 2.5vw, 38px); object-fit: contain; object-position: center bottom; }
.hero-title {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  color: var(--blue);
  font-size: clamp(3.3rem, 7vw, 7.6rem);
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-transform: uppercase;
  padding: 14px 10px 16px 0;
}
.hero-title > span, .dog-line { display: block; }
.hero-title strong { font-weight: inherit; color: var(--yellow); -webkit-text-stroke: 0.017em var(--blue); }

.stats {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  inset-inline: clamp(16px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white);
  border: var(--stroke);
  box-shadow: var(--hard-shadow);
  border-radius: 50px;
  min-height: 54px;
  align-items: center;
}
.stats > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1px 8px; padding: 9px 6px; text-align: center; font-size: clamp(0.75rem, 1.23vw, 1rem); }
.stats dt { font-weight: 850; text-transform: uppercase; }
.stats dd { font-weight: 850; color: #9b233d; }
.stats a:hover { color: var(--blue); }

.token { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(400px, 53vw, 620px); padding-block: 44px; text-align: center; }
.token-watermark { position: absolute; z-index: -1; inset: 50% 0 auto; transform: translateY(-53%); color: #e7d5ce; font-size: clamp(4rem, 16.2vw, 15rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.083em; text-transform: uppercase; pointer-events: none; }
.token-content { width: min(100%, 500px); display: grid; justify-items: center; gap: 13px; padding: 20px; }
.token-logo { width: clamp(108px, 13vw, 154px); }
.token h2 { font-size: clamp(1.8rem, 4.6vw, 4.4rem); line-height: 0.95; font-weight: 900; letter-spacing: -0.07em; }
.token p { font-weight: 680; }
.contract-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; background: var(--white); border: 3px solid var(--ink); border-radius: 40px; box-shadow: 0 4px 0 var(--ink); padding: 10px 17px; width: fit-content; margin: 2px 0 5px; font-size: 0.9rem; }
.contract-note b { text-transform: uppercase; }
.contract-note span { color: var(--blue); font-weight: 650; }
.market-note { font-size: 0.83rem; }
.market-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -5px 0 2px; padding: 0; list-style: none; }
.market-links li { border: 1px solid #b1a49c; border-radius: 7px; padding: 4px 8px; color: #554f49; background: var(--cream); font-size: 0.75rem; }

.shop {
  padding: clamp(25px, 5vw, 65px);
  border: var(--stroke);
  background: var(--pink);
}
.shop h2, .pfp h2, .memes h2 { font-weight: 900; font-size: clamp(2.7rem, 7.1vw, 7rem); line-height: 0.91; letter-spacing: -0.075em; text-transform: uppercase; }
.shop h2 { color: var(--yellow); text-align: center; -webkit-text-stroke: 0.017em var(--ink); text-shadow: 0.028em 0.038em var(--ink); margin-bottom: clamp(21px, 5vw, 57px); }
.shop-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.shop-copy h3 { font-size: clamp(2.2rem, 5.4vw, 5.55rem); font-weight: 900; line-height: 0.87; letter-spacing: -0.078em; max-width: 8ch; }
.shop-copy p { font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 23ch; margin-top: 16px; font-weight: 650; }
.browser-frame { background: var(--white); border: var(--stroke); border-radius: 12px; box-shadow: 6px 7px 0 var(--ink); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 6px; min-height: 40px; border-bottom: 3px solid var(--ink); padding: 6px 10px; background: var(--cream); }
.window-bar span { width: 11px; height: 11px; background: #f47783; border: 1px solid var(--ink); border-radius: 50%; flex: none; }
.window-bar span:nth-child(2) { background: var(--yellow); }
.window-bar span:nth-child(3) { background: #a1dc9d; }
.window-bar b { margin-left: auto; font-size: 0.76rem; white-space: nowrap; }
.sticker-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.sticker { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 5px; min-width: 0; background: #f7e9d8; border: 1px solid #cfac9e; padding: 7px 4px 6px; text-decoration: none; border-radius: 6px; }
.sticker:hover { background: var(--yellow); border-color: var(--ink); }
.sticker:focus-visible { outline-offset: -4px; }
.sticker img { height: clamp(95px, 12vw, 155px); width: 88%; object-fit: contain; }
.sticker span { font-size: 0.84rem; font-weight: 850; text-transform: uppercase; }
.shelf-note { font-size: 0.82rem; padding: 0 10px 10px; font-weight: 650; }

.pfp, .memes { padding-block: clamp(63px, 10vw, 136px); }
.pfp { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr); gap: clamp(30px, 7vw, 100px); align-items: center; }
.pfp-copy > p { margin-top: 12px; font-weight: 700; font-size: clamp(1.06rem, 1.6vw, 1.3rem); }
.pfp-controls { display: grid; gap: 9px; justify-items: start; margin-top: 24px; }
.pfp-controls label { font-weight: 800; font-size: 0.9rem; }
.pfp-controls input { max-width: 100%; color: var(--ink); }
.pfp-controls input[type="file"] { width: 100%; font-size: 0.9rem; }
.pfp-controls input::file-selector-button { min-height: 41px; border: 2px solid var(--ink); border-radius: 8px; background: var(--white); color: var(--ink); font-weight: 750; margin-right: 7px; cursor: pointer; }
.pfp-controls input::file-selector-button:hover { background: var(--yellow); }
.pfp-controls input[type="range"] { width: min(100%, 310px); min-height: 32px; accent-color: var(--blue); }
.pfp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pfp-note, #pfp-status { color: #53473f; max-width: 42ch; font-size: 0.88rem; }
#pfp-status { min-height: 1.5em; font-weight: 700; }
.pfp-frame { padding: 11px; border: var(--stroke); background: var(--white); border-radius: 10px; box-shadow: 8px 8px 0 var(--ink); }
.pfp-frame canvas { display: block; width: 100%; height: auto; background: var(--sky); touch-action: none; cursor: grab; }
.pfp-frame canvas:active { cursor: grabbing; }
.pfp-frame p { padding: 8px 2px 0; font-size: 0.86rem; font-weight: 700; }

.memes { padding-top: 0; text-align: center; }
.memes h2 { font-size: clamp(2.35rem, 6.7vw, 6.5rem); }
.meme-card { max-width: 675px; margin: 27px auto 0; padding: clamp(12px, 2.2vw, 24px); border: var(--stroke); background: var(--white); border-radius: 14px; box-shadow: 8px 8px 0 var(--ink); }
.meme-stage { display: grid; place-items: center; min-height: clamp(180px, 43vw, 360px); padding: 12px; background: var(--sky); border: 2px solid var(--ink); border-radius: 7px; }
.meme-stage img { width: min(77%, 350px); height: clamp(164px, 40vw, 320px); object-fit: contain; }
.meme-actions { display: flex; justify-content: space-between; gap: 7px; align-items: center; text-align: left; margin-block: 11px; }
.meme-actions p { font-weight: 800; }
#meme-random { width: 100%; text-transform: uppercase; }
.all-memes { margin-top: 19px; font-size: 0.94rem; font-weight: 750; }

.closing { background: var(--ink); color: var(--cream); padding: clamp(42px, 7vw, 92px) 0 22px; }
.closing :focus-visible { outline-color: var(--yellow); }
.closing-line { font-size: clamp(2.6rem, 8.5vw, 8rem); font-weight: 900; line-height: 0.86; letter-spacing: -0.08em; text-transform: uppercase; }
.closing-line strong { color: var(--pink); }
.project-links { margin-top: 32px; padding-block: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 17px; border-top: 1px solid #796b65; border-bottom: 1px solid #796b65; }
.project-links nav { display: flex; flex-wrap: wrap; gap: 6px 19px; }
.project-links a, .signature a { text-underline-offset: 0.27em; }
.project-status, .footer-markets { color: #e6d8cf; font-size: 0.83rem; }
.project-status p { scroll-margin-block-start: 8px; }
.project-status p:target { color: var(--yellow); }
.footer-markets .market-links { justify-content: flex-start; margin: 5px 0 0; }
.footer-markets .market-links li { color: #e6d8cf; background: transparent; border-color: #796b65; }
.project-links a:hover, .signature a:hover { color: var(--yellow); }
.signature { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 0.83rem; color: #e6d8cf; margin-top: 14px; }

@media (max-width: 900px) {
  .frame-width { width: calc(100% - 2 * var(--frame-gutter)); }
  .hero-title { font-size: clamp(2.85rem, 7vw, 5rem); }
  .hero-stage { min-height: 0; }
}

@media (min-width: 768px) and (max-width: 940px) {
  .nav-socials .social-icon { width: 32px; }
  .nav-actions { gap: clamp(8px, calc(8vw - 53px), 19px); font-size: 0.8rem; }
  .nav-cta { padding-inline: 10px; font-size: 0.78rem; }
}

@media (max-width: 767px) {
  .header-layout { position: static; flex-wrap: wrap; }
  .js .site-header:has(.primary-nav.is-open) { border-bottom-color: transparent; }
  .js .menu-toggle { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; color: var(--ink); }
  .menu-toggle svg { width: 25px; height: 25px; }
  .menu-toggle .icon-close,
  .menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .menu-toggle[aria-expanded="true"] .icon-close { display: block; }

  .primary-nav { position: static; display: block; width: 100%; padding-bottom: 27px; pointer-events: auto; }
  .js .primary-nav { position: absolute; inset: 100% 0 auto; padding-inline: var(--frame-gutter); background: var(--cream); border-bottom: 1px solid var(--ink); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior-y: contain; }
  .js .primary-nav:not(.is-open) { display: none; }
  .nav-socials { justify-content: center; min-height: 69px; border-top: 1px solid var(--ink); border-bottom: 1px solid #d9dce3; }
  .nav-socials .social-icon { width: 44px; }
  .nav-actions { display: grid; width: 100%; justify-self: stretch; gap: 0; font-size: 1rem; }
  .nav-item, .merch-toggle { min-height: 49px; padding: 0 16px; }
  .nav-item, .merch-menu { border-bottom: 1px solid #d9dce3; }
  .merch-toggle { justify-content: space-between; }
  .merch-dropdown { position: static; min-width: 0; border: 0; box-shadow: none; background: #f5eee5; }
  .merch-dropdown a { min-height: 44px; padding: 8px 30px; font-size: 0.88rem; }
  .nav-cta { min-height: 44px; margin: 12px 16px 0; }

  .section-dots { right: clamp(10px, 4.7vw, 23px); }
}

@media (max-width: 670px) {
  html { scroll-padding-top: 70px; }
  .hero { margin-top: 17px; padding-bottom: 48px; }
  .hero-stage { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); justify-items: center; }
  .hero-title { grid-column: 1; grid-row: 1; font-size: clamp(2.7rem, 10.1vw, 4.8rem); text-align: center; padding: 19px 6px 0; }
  .dog-line { display: inline; }
  .hero-dog { grid-column: 1; grid-row: 2; width: min(88%, 410px); height: clamp(215px, 78vw, 380px); padding-bottom: 24px; margin-top: 6px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); inset-inline: 13px; min-height: 74px; border-radius: 22px; padding: 4px; }
  .stats > div { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 4px 9px; text-align: left; line-height: 1.2; }
  .token { min-height: 410px; }
  .shop { padding: 25px 14px 27px; }
  .shop-layout, .pfp { grid-template-columns: minmax(0, 1fr); }
  .shop-copy h3 { max-width: 100%; }
  .shop-copy p { margin-top: 9px; max-width: 100%; }
  .browser-frame, .pfp-frame, .meme-card { box-shadow: 5px 5px 0 var(--ink); }
  .pfp-frame { width: min(100%, 440px); }
}

@media (max-width: 370px) {
  .stats > div { font-size: 0.69rem; }
  .hero-title { font-size: 2.5rem; }
  .meme-actions p { font-size: 0.89rem; }
  .meme-actions .button { padding-inline: 9px; }
  .window-bar b { font-size: 0.67rem; }
}

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