html { scroll-padding-top: 90px; }
body { -webkit-tap-highlight-color: rgba(231, 52, 63, .18); touch-action: manipulation; }
h1, h2 { text-wrap: balance; }
section[id] { scroll-margin-top: 90px; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 800; transform: translateY(-180%); transition: transform .2s ease; }
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--red); outline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Keep the supplied artwork intact; artwork should never be cropped into a made-up ratio. */
.frame img,
.hero-image-wrap .frame img,
.story-image img,
.gallery-large img,
.gallery-small img {
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.hero-image-wrap { transform: rotate(1.25deg); }
.hero-image-wrap .frame { background: #fff9e9; }
.token-card-main { min-height: 0; }
.token-card-main img {
  position: static;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
  margin-top: 2rem;
  transform: none;
  border-radius: 15px;
}
.final-card { min-height: 0; align-items: center; }
.final-card > img { width: 100%; height: auto; object-fit: contain; }

/* Simple, named navigation takes the place of the removed logo. */
.nav-shell { justify-content: space-between; }
.nav-shell nav { gap: 1.15rem; }
.nav-shell nav a { display: inline-flex; align-items: center; gap: .35rem; }
.nav-shell nav a span { color: var(--red); font-size: 1rem; line-height: 1; }
.nav-actions { display: flex; align-items: center; gap: 7px; }
.nav-tg { padding-left: 11px; }
.final-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.final-actions .button { margin: 0; }
.hero-socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.hero-socials a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px; border: 1px solid rgba(31, 26, 18, .22); border-radius: 999px; color: var(--ink); background: rgba(255, 249, 233, .34); font-size: .76rem; font-weight: 900; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.hero-socials a:hover { transform: translateY(-2px); background: rgba(255, 249, 233, .78); }

/* Hero: an editorial arrival instead of a static banner. */
.hero { min-height: 100dvh; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: 0; width: min(50vw, 700px); aspect-ratio: 1; right: 4%; bottom: -31%; border: 1px solid rgba(31, 26, 18, .14); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255, 249, 233, .11), 0 0 0 48px rgba(255, 249, 233, .08); }
.hero::after { content: ""; position: absolute; z-index: 0; width: 172px; height: 96px; left: 43%; bottom: 12%; opacity: .32; background-image: radial-gradient(circle, var(--red) 2px, transparent 2.5px); background-size: 24px 24px; transform: rotate(-14deg); }
.hero h1 { overflow: hidden; }
.title-line { display: block; opacity: 0; transform: translateY(1.1em); transition: transform .92s cubic-bezier(.19, 1, .22, 1), opacity .72s cubic-bezier(.19, 1, .22, 1); }
.title-line-second { transition-delay: .09s; }
.hero-copy.is-visible .title-line { opacity: 1; transform: translateY(0); }
.hero-image-wrap .frame { transform-origin: 58% 82%; }
.hero-image-wrap.is-visible .frame { animation: hero-art-arrival 1.15s cubic-bezier(.19, 1, .22, 1) both; }
.balloon-note { transform-origin: 58% 100%; animation: balloon-note-float 3.8s cubic-bezier(.45, .05, .55, .95) 1.25s infinite; }

/* Navigation and cards provide the interaction feedback; the reading surface stays calm. */
.nav-shell nav a { position: relative; transition: color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1); }
.nav-shell nav a { padding: 6px 8px; border-radius: 11px; background: rgba(246, 212, 72, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); transition: color .22s ease, background-color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1); }
.nav-shell nav a::after { content: ""; position: absolute; right: 0; bottom: -7px; width: 0; height: 2px; background: var(--red); transition: width .28s cubic-bezier(.22, 1, .36, 1); }
.nav-shell nav a.is-current { color: var(--red); background: rgba(231, 52, 63, .1); }
.nav-shell nav a.is-current::after { width: calc(100% - 1.35rem); }
.token-card, .story-image, .gallery-large, .gallery-small { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.token-card-main .card-inner::after { content: ""; position: absolute; width: 150px; height: 150px; top: -78px; right: -68px; border-radius: 50%; background: rgba(246, 212, 72, .14); pointer-events: none; }
.token-card-main .card-inner > * { position: relative; z-index: 1; }
.token-card-main img { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }

@keyframes hero-art-arrival { from { opacity: 0; transform: translate3d(28px, 36px, 0) rotate(2deg) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } }
@keyframes balloon-note-float { 0%, 100% { transform: rotate(-5deg) translate3d(0, 0, 0); } 50% { transform: rotate(-3.5deg) translate3d(0, -9px, 0); } }

@media (hover: hover) and (pointer: fine) {
  .nav-shell nav a:hover { color: var(--red); transform: translateY(-1px); }
  .nav-shell nav a:hover::after { width: calc(100% - 1.35rem); }
  .token-card:hover { transform: translateY(-7px) rotate(-.35deg); }
  .token-card-main:hover img { transform: translateY(-5px); }
  .story-image:hover, .gallery-large:hover, .gallery-small:hover { transform: translateY(-6px) rotate(0); }
}

@media (max-width: 780px) {
  .hero-image-wrap { margin-left: 0; transform: none; }
  .balloon-note { left: 10px; }
  .token-card-main { min-height: 0 !important; }
  .token-card-main img { max-width: min(100%, 350px); max-height: none; margin: 1.5rem auto 0; }
  .gallery-images { display: block; }
  .gallery-small { width: min(78%, 350px); max-width: none; margin: 2.25rem auto 0; transform: none; }
  .gallery-small .frame { padding: 10px; border: 2px solid var(--ink); border-radius: 36px; box-shadow: 0 16px 32px rgba(31, 26, 18, .12); }
  .final-card > img { height: auto; order: -1; }
  .nav-shell { width: calc(100% - 20px); padding: 7px 8px 7px 12px; }
  .nav-shell nav { display: flex; gap: .7rem; min-width: 0; }
  .nav-shell nav a { font-size: .68rem; white-space: nowrap; }
  .nav-shell nav a span { font-size: .8rem; }
  .nav-actions { gap: 5px; }
  .nav-cta { flex: 0 0 auto; padding: 7px 8px 7px 11px; font-size: .68rem; }
  .nav-tg { padding-left: 8px; }
  .nav-cta span { width: 24px; height: 24px; }
  .hero-socials { margin-top: 16px; }
  .hero::before { width: 78vw; right: -20vw; bottom: -10%; }
  .hero::after { left: auto; right: 11%; bottom: 8%; opacity: .2; }
  .title-line { transform: translateY(.8em); }
  .nav-shell nav a::after { bottom: -5px; }
  .nav-shell nav a.is-current::after { width: calc(100% - 1.15rem); }
}

/* The remaining headings now lead each section directly, without decorative labels. */
.story-grid { margin-top: 0; }
.gallery h2 { margin-top: 0; }
.token-card h3 { margin-top: 0; }
.token-link { position: absolute; left: 25px; bottom: 23px; color: inherit; font-weight: 900; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.token-link:hover { color: var(--red); }
.token-link-light { color: #fff; border-bottom-color: rgba(255, 255, 255, .85); }
.token-link-light:hover { color: #fff; border-bottom-color: #fff; }
.launch-art-card { grid-row: span 2; align-self: start; aspect-ratio: 1; overflow: hidden; border-radius: 30px; background: transparent; box-shadow: 0 20px 42px rgba(53, 111, 116, .18); }
.launch-art-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-actions .button { justify-content: center; padding-inline: 22px; }
.countdown-seconds { background: var(--red) !important; color: #fff; box-shadow: 0 7px 0 rgba(144, 20, 29, .15); }
.countdown-seconds.is-ticking { animation: countdown-tick .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes countdown-tick { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-4px) scale(1.045); } 100% { transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .title-line { opacity: 1; transform: none; transition: none; }
  .hero-image-wrap.is-visible .frame, .balloon-note, .countdown-seconds.is-ticking { animation: none; }
}

@media (max-width: 780px) {
  .launch-art-card { grid-row: auto; width: 100%; max-width: 430px; margin-inline: auto; border-radius: 26px; }
}

/* The anniversary section treats the first edition as a physical artifact. */
.century { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 9vw, 145px); align-items: center; background: #e6c694; }
.century-copy h2 { font: 800 clamp(3.4rem, 6vw, 6.8rem)/.89 var(--display); margin: 0 0 2rem; }
.century-copy p { max-width: 560px; font-size: 1.04rem; font-weight: 700; }
.century-copy .century-closing { max-width: 440px; margin: 2rem 0 0; font: 700 clamp(1.35rem, 2.2vw, 2rem)/1.05 var(--display); letter-spacing: -.04em; }
.century-book { width: min(100%, 560px); justify-self: end; transform: rotate(2deg); }
.century-book .frame { background: rgba(255, 249, 233, .72); }
.century-book img { display: block; width: 100%; height: auto; object-fit: contain; }

@media (max-width: 780px) {
  .nav-shell nav a span { display: none; }
  .nav-shell nav { gap: .35rem; }
  .nav-shell nav a { padding: 5px 6px; border-radius: 9px; }
  .final-actions { gap: 18px; }
  .century { grid-template-columns: 1fr; gap: 42px; }
  .century-book { width: min(100%, 440px); justify-self: center; transform: none; }
}