/* Approved watercolor direction. Native text and controls stay crisp over
   quiet washes; paper grain lives in backgrounds, never over the content. */
:root {
  --grain: url('paper-grain.svg');
  --wash-dark: #33283e;
  --wash-shadow: #71508a24;
}
body { background-image: var(--grain); }
.token-section, .receipt-section, .how-it-works {
  background-image: var(--grain),
    radial-gradient(ellipse at 4% 80%, #c7b1d455, transparent 55%),
    radial-gradient(ellipse at 95% 15%, #f8f2e888, transparent 50%);
}
.dark-section, .footer {
  background-color: var(--wash-dark);
  background-image: var(--grain),
    radial-gradient(ellipse at 0 10%, #71508a55, transparent 65%),
    radial-gradient(ellipse at 100% 95%, #71508a40, transparent 55%);
}
.world-hero:after { background: linear-gradient(transparent, var(--wash-dark)); }
.hero-copy h1 { color: #372b40; text-shadow: 0 2px 0 #f8f2e866; }
.hero-copy h1 em { color: #71508a; }
.hero-kicker, .hero-copy>p { color: #44354f; }
.button, .pit-link, .nav-icon, .menu {
  border-color: var(--purple);
  background-image: var(--grain);
  box-shadow: 0 3px 0 #71508a40, 0 7px 16px #71508a16;
}
.button { border-width: 1.5px; }
.button:hover { box-shadow: 0 5px 0 #71508a33, 0 10px 20px #71508a22; }
.button:active { box-shadow: 0 1px 0 #71508a33; }
.nav-trade { background-color: #e3d5eb; }
.site-header nav {
  background-color: #382c43f5;
  background-image: var(--grain);
  border-color: #9c83ad;
  box-shadow: 0 6px 24px #33283e28;
}
.site-header nav a[aria-current] {
  background-image: var(--grain);
  box-shadow: 0 2px 0 #c7b1d466;
}
.section-chip {
  background-image: var(--grain);
  background-color: #f8f2e855;
  border-color: #83718f;
}
.dark-section .section-chip { border-color: #a38bb3; background-color: #71508a38; }
.reserve-center>strong { color: #dccae6; text-shadow: 0 3px 0 #c7b1d414; }
.orbit { opacity: .8; }
.orbit-c { width: 205px; right: -35px; opacity: .3; }
.token-art:before {
  inset: 3% -4% 10%;
  background: radial-gradient(ellipse at 50% 45%, #c7b1d46b, #c7b1d422 50%, transparent 70%);
  border-radius: 48% 52% 42% 58%;
}
.art-stamp {
  background-image: var(--grain);
  border-width: 1.5px;
  border-radius: 49% 51% 47% 53%;
  box-shadow: 3px 5px 12px #71508a20;
}
.world-strip {
  background-color: #d8c8e3;
  background-image: var(--grain), linear-gradient(100deg, #c7b1d455, #f8f2e844 50%, #c7b1d455);
  border-block: 1px solid #83718f;
}
.banner-group>span:after { background-image: url('watercolor-pearl.png'); }
.process-cards li, .process-cards li:nth-child(2), .process-cards li:nth-child(3) {
  background-color: #ede4f0;
  background-image: var(--grain), radial-gradient(ellipse at 100% 0, #c7b1d466, transparent 75%);
  border: 1px solid #a18aad;
  border-radius: 23px 27px 24px 20px;
  box-shadow: 0 4px 0 #c7b1d444, 0 12px 25px #71508a0c;
}
.process-cards li:nth-child(2) { background-color: #e5d8eb; }
.process-cards li:nth-child(3) { background-color: #dbcbe3; }
.trade-symbol { text-shadow: 2px 3px #f8f2e888; opacity: .85; }
.shell-symbol { width: 170px; overflow: visible; }
.shell-symbol img { position: static; width: 100%; max-width: 100%; }
.world-meme-image, .meme-image {
  background-color: #e3d6eb;
  background-image: var(--grain), radial-gradient(ellipse at 30% 0, #f8f2e888, transparent 75%);
  border: 6px solid #e9dfee;
  border-radius: 21px 25px 22px 20px;
  box-shadow: 0 7px 18px #24212a18;
}
.world-meme-image { border-color: #d9c7e2; }
.dark-section .button { border-color: #c7b1d4; box-shadow: 0 3px 0 #c7b1d440, 0 7px 16px #24212a24; }
.dark-section .button:hover { box-shadow: 0 5px 0 #c7b1d433, 0 10px 20px #24212a24; }
.receipt-paper {
  background-image: var(--grain), linear-gradient(125deg, #fff8ec88, transparent 70%);
  border-color: #b9abc5;
  box-shadow: 2px 3px 1px #71508a12, 10px 16px 25px #71508a20;
}
.paper-header { border-bottom-color: #71508a; }
.club-scene { background-image: url('oyster-watercolor.jpg'); opacity: .7; }
.pit-stop:after { background: linear-gradient(#e4ddee, #e4ddee75 50%, #e4ddee22); }
.token-directory>div { background-image: var(--grain); border-color: #a38bb370; }
.footer-wordmark { color: #d6c1e1; text-shadow: 0 3px 0 #c7b1d414; }
dialog {
  background-image: var(--grain);
  border: 1.5px solid var(--purple);
  box-shadow: 4px 6px 0 #c7b1d466, 0 24px 80px #24212a40;
}
.venue, .modal-top button, .meme-filters button, .meme-download, .memes-empty {
  background-image: var(--grain);
}
.gallery-page .site-header { background-image: var(--grain); }
.meme-filters button[aria-pressed="true"] { border-color: var(--purple); box-shadow: 0 2px 0 #71508a33; }
.meme-filters button:hover { border-color: var(--purple); background-color: var(--cream); }
.collection-shell .overflow-pearl img { filter: drop-shadow(1px 3px 2px #71508a20); }
@media(max-width:600px) {
  .club-scene { background-image: url('oyster-watercolor-mobile.jpg'); background-position: center 72%; }
  .world-meme-image { border-width: 4px; }
  .shell-symbol { width: 138px; }
  .orbit-c { width: 125px; }
}

/* Let the title own the landing view while keeping the art visible below it. */
.hero-copy {
  width: calc(100% - 64px);
  max-width: 1200px;
  padding-top: clamp(150px, 18vh, 210px);
}
.hero-copy h1 {
  font-size: clamp(112px, 14.5vw, 220px);
  line-height: .88;
  letter-spacing: -.025em;
}
.hero-kicker {
  font-size: clamp(15.4px, 1.82vw, 25.2px);
  line-height: 1.25;
  letter-spacing: .08em;
  margin-bottom: 24px;
}
.hero-copy>p:not(.hero-kicker) { margin-top: 30px; }
@media(max-width:600px) {
  .hero-copy { width: calc(100% - 28px); padding-top: 145px; }
  .hero-copy h1 { font-size: 20.5vw; line-height: .94; }
  .hero-kicker { font-size: clamp(11.2px, 3.08vw, 16.8px); letter-spacing: .05em; margin-bottom: 24px; }
  .hero-copy>p:not(.hero-kicker) { margin-top: 25px; }
}

.hero-title-line { display: block; white-space: nowrap; }
.hero-pearl-period {
  display: inline-block;
  width: .24em;
  height: .24em;
  margin-left: .025em;
  vertical-align: -.015em;
}
.collection-showcase { padding-bottom: 110px; }
@media(max-width:600px) {
  .hero-copy h1 { font-size: 17.2vw; }
  .collection-showcase { padding-bottom: 76px; }
}

.collection-slogan { max-width: 860px; margin-inline: auto; line-height: 1.12; text-wrap: balance; }
.token-copy h2 { font-size: clamp(40px, 5.5vw, 78px); }
@media(max-width:600px) {
  .token-copy h2 { font-size: clamp(40px, 10.5vw, 60px); }
}

.hero-buy { margin-top: 32px; }
.venue-heading { display: flex; align-items: center; gap: 12px; }
.venue-logo { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 9px; }
.purchase-dialog .modal-top { justify-content: flex-end; border-bottom: 0; padding-bottom: 0; }
.purchase-dialog .modal-top>span { display: none; }
.purchase-dialog #modal-body { padding-top: 8px; }
.meme-copy, #meme-viewer { background-image: var(--grain); }
#meme-copy-status:not(:empty) { bottom: 100px; z-index: 45; box-shadow: 0 8px 24px #71508a25; }
@media(max-width:600px) {
  .hero-buy { margin-top: 25px; }
  #meme-copy-status:not(:empty) { bottom: 20px; }
}

/* Get OYSTER: tan pill, display lettering, fine ink outline, caret and purple offset shadow. */
.button[data-action="buy"] {
  font: 400 21px/1 var(--display);
  text-transform: uppercase;
  background: #f0e3e0;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 9999px;
  padding: 14px 24px;
  min-height: 54px;
  gap: 12px;
  box-shadow: 3px 5px 0 #71508a;
}
.button[data-action="buy"] .buy-caret { width: .6em; height: .4em; flex: none; }
.button[data-action="buy"]:hover { background: #f7eeec; transform: translate(-2px,-2px); box-shadow: 5px 7px 0 #71508a; }
.button[data-action="buy"]:active { transform: translate(1px,2px); box-shadow: 1px 2px 0 #71508a; }
.button.nav-trade[data-action="buy"] {
  font-size: 18px;
  min-height: 44px;
  padding: 8px 16px;
  gap: 9px;
}
@media(max-width:600px) {
  .button.nav-trade[data-action="buy"] { padding: 8px 13px; gap: 7px; }
}

/* Keep the logo, purchase control and 44px menu inside narrow screens. */
@media(max-width:360px) {
  .site-header .nav.wrap { width: calc(100% - 24px); gap: 6px; }
  .site-header .nav .brand-label>img { width: 80px; }
}