@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800&family=DM+Sans:wght@500;700;800&family=Nunito:wght@900;1000&family=Bricolage+Grotesque:wght@900&family=Young+Serif&display=swap");
:root{--paper:#fff0d5;--ink:#20241d;--jade:#184b41;--gold:#f1b84e;--red:#a92e1d;--display:"Barlow Condensed",Impact,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:700 1rem "DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(1440px,calc(100% - 40px));margin:auto}


.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:47px;padding:6px 12px;background:var(--jade);color:#fff4d7;border:2px solid var(--ink);border-radius:5px 14px 5px 14px;box-shadow:0 3px 0 var(--ink);font-size:13px;font-weight:800;white-space:nowrap;transition:transform .2s,box-shadow .2s,background-color .2s}
.button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink);background:#226154}
.button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.button span{font-family:Arial,sans-serif}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.yellow{background:var(--red)}
.yellow:hover,.yellow:focus-visible{background:#8b2418}
.emblem{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--ink);background:#f9d280;color:#332314;font-style:normal;font-size:17px;line-height:1;transition:transform .3s ease}
.seal{border-radius:5px;transform:rotate(-8deg)}
.wing{border-radius:12px 4px 12px 4px}
.button:is(:hover,:focus-visible) .coin{transform:rotate(90deg)}
.button:is(:hover,:focus-visible) .seal{transform:rotate(8deg) scale(1.1)}
.button:is(:hover,:focus-visible) .wing{transform:translate(2px,-3px) rotate(-20deg)}
.poster{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,44%) 1fr;align-content:center;gap:17px 0;min-height:53vw;padding-block:36px}
.poster picture{position:absolute;inset:0;z-index:-1}
.poster-art{display:block;width:100%;height:100%;object-fit:cover;object-position:right top}
.countdown,.social{grid-column:1;padding-inline:clamp(20px,4vw,76px)}
h1{font:800 clamp(44px,6.5vw,112px)/.88 "Playfair Display",Georgia,serif;letter-spacing:-.055em;color:#25281c;margin:0 0 22px}
.clock{position:relative;isolation:isolate;display:grid;align-items:center;width:min(100%,490px);min-height:100px;background:#482619;border:2px solid #22150e;border-radius:12px 23px;box-shadow:inset 0 0 0 3px #d79b4c,0 4px 0 #252017}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 13%;text-align:center;color:#fff}
.tiles div+div{border-left:1px solid #f2cf777a}
.tiles strong{display:block;font:800 clamp(30px,4.7vw,70px)/.86 var(--display);font-variant-numeric:tabular-nums}
.tiles span{display:block;margin-top:8px;font-size:clamp(8px,1vw,12px);text-transform:uppercase;letter-spacing:.07em}
.countdown p,.countdown noscript{font-size:12px;margin:15px 0 0;color:#463923}
.social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(4px,1vw,12px)}
.tick{animation:tick .35s ease-out}
@keyframes tick{from{transform:translateY(5px);opacity:.4}to{transform:translateY(0);opacity:1}}
@media(max-width:800px){

 .poster{display:flex;flex-direction:column;gap:17px;min-height:0;padding:27px 0 0}
 .poster picture{position:static;order:2;width:100%}
 .poster-art{height:auto}
 .countdown,.social{width:min(100%,470px);margin-inline:auto;padding-inline:14px;text-align:center}
 .social{justify-content:center}
 h1{font-size:clamp(44px,12vw,78px)}
 .tiles strong{font-size:clamp(40px,10vw,62px)}
}
@media(prefers-reduced-motion:reduce){.tick{animation:none}.button,.emblem{transition:none}.button:is(:hover,:focus-visible,:active),.button:is(:hover,:focus-visible) .emblem{transform:none}}

.clock {
  aspect-ratio: 3.55;
  min-height: 0;
  background: #482619 url("assets/countdown-sign.webp") center / 100% 100% no-repeat;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tiles { padding-block: 9px; }
.button { position: relative; border-color: #45291c; box-shadow: inset 0 0 0 1px #ffd38980, 0 3px 0 #45291c; }
.button:hover,.button:focus-visible { box-shadow: inset 0 0 0 1px #ffd389c0,0 6px 0 #45291c; }
.button:active { box-shadow: inset 0 0 0 1px #ffd38980,0 1px 0 #45291c; }
.button span { transition: transform .2s ease; }
.button:is(:hover,:focus-visible) span { transform: translate(2px,-2px); }
@media(max-width:800px){.clock{margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.button span{transition:none}.button:is(:hover,:focus-visible) span{transform:none}}

footer {
  --hero-overlap: clamp(14px, 3vw, 52px);
  position: relative;
  margin-top: calc(-1 * var(--hero-overlap));
  padding: 0;
  background: transparent;
}
.cloud-divider {
  position: absolute;
  inset: calc(var(--hero-overlap) * .65) 0 auto;
  z-index: 1;
  width: 100%;
  height: clamp(34px, 8vw, 180px);
  filter: saturate(.22) brightness(1.14);
  transform: translateY(-50%);
  pointer-events: none;
}
.footer-art {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to bottom, transparent, black var(--hero-overlap));
}


:root{--display:"Barlow Condensed",Impact,sans-serif}


h1{font-size:clamp(56px,8vw,132px);letter-spacing:-.025em}
.button{font:800 17px/1 var(--display);letter-spacing:.035em;text-transform:uppercase}
.countdown,.social{padding-inline:clamp(18px,3vw,56px)}
.clock{width:min(100%,630px);aspect-ratio:3.15}
.tiles{padding:8px 12%}
.tiles strong{font-size:clamp(44px,6vw,94px)}
.tiles span{font:700 clamp(11px,1.3vw,18px)/1 var(--display);letter-spacing:.1em;margin-top:5px}
@media(max-width:800px){
 .countdown,.social{width:min(100%,540px);padding-inline:14px}
 h1{font-size:clamp(55px,13vw,90px)}
 .tiles strong{font-size:clamp(44px,12vw,76px)}
 .tiles span{font-size:clamp(11px,3vw,16px)}
}

.art-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: clamp(127px, 12vw, 185px);
  min-height: 44px;
  aspect-ratio: 3;
  padding-left: clamp(33px, 3.65vw, 56px);
  padding-right: 8px;
  background: var(--plate) center / 100% 100% no-repeat;
  color: #fff;
  text-shadow: 0 1px 2px #15100c;
  font: 800 clamp(15px, 1.4vw, 21px)/1 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 4px 3px #24140966);
  transition: transform .18s ease, filter .18s ease;
}
.buy-button { --plate: url("assets/button-buy-ornate.png"); }
.x-button { --plate: url("assets/button-x.png"); }
.telegram-button { --plate: url("assets/button-telegram.png"); }
.art-button:is(:hover,:focus-visible) {
  transform: translateY(-3px);
  filter: drop-shadow(0 7px 4px #24140960) brightness(1.07);
}
.art-button:active { transform: translateY(2px); filter: drop-shadow(0 1px 1px #24140966); }
.art-button:focus-visible { outline-offset: 5px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
  .art-button { transition: none; }
  .art-button:is(:hover,:focus-visible,:active) { transform: none; }
}

.wordmark { display:block; transform: translateY(-28px); width:min(61vw,990px); max-width:none; height:auto; }
.art-button {
  width:100%;
  padding-left:23%;
  font:1000 clamp(16px,1.8vw,28px)/1 "Nunito",ui-rounded,sans-serif;
  letter-spacing:-.025em;
  text-transform:none;
}
.tiles strong { font-family:"Cinzel",Georgia,serif; font-weight:800; line-height:.96; }
.tiles span { font-family:"Cinzel",Georgia,serif; font-weight:700; }
@media(max-width:800px){
 .wordmark{width:min(100%,760px);margin-inline:auto;transform:translateY(-10px)}
 .countdown h1{margin:0 -20px 10px}

 .tiles strong{font-size:clamp(43px,13.4vw,95px)}
 .tiles span{font-size:clamp(10px,3vw,16px)}
}

@media (min-width: 801px) {
  .poster { padding-top: 0; padding-bottom: clamp(154px, 17vw, 285px); }
  .poster picture { top: clamp(40px, 4.5vw, 80px); }
  .countdown { width: min(59vw, 960px); }
  .social { width: min(65vw, 1040px); }
  .social .art-button { min-height: 58px; }
  .clock { width: min(100%, 890px); }
  .tiles strong { font-size: clamp(54px, 7.2vw, 120px); }
}
@media (max-width: 800px) {
  .countdown, .social { width: min(100%, 620px); }
  .poster { padding-top: 0; }
  .poster picture { margin-top:24px; }
  .poster { gap: 12px; }
  .countdown h1 { margin-bottom: 4px; }
  .clock { width: calc(100% + 12px); margin-inline: -6px; }
  .social { width: min(100%, 690px); padding-inline: 3px; }
  .social .art-button { min-height: 49px; font-size: clamp(11px, 3.3vw, 21px); padding-right: 4px; }
}

.lore {
  padding:clamp(28px,4vw,64px) 24px clamp(52px,6vw,96px);
  background:#184b41 url("assets/great-wall-ink-clouds.webp") center / cover no-repeat;
}
.lore-scroll {
  width:min(100%,664px);
  margin-inline:auto;
  padding:clamp(46px,8vw,62px) clamp(23px,5vw,54px);
  background:url("assets/aged-lore-scroll.webp") center / 100% 100% no-repeat;
  color:#25231c;
}
.lore-pages {
  max-height:clamp(235px,40svh,350px);
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-color:#925639 #edcf9c;
  border-block:1px solid #be925c;
  padding:0 clamp(8px,2vw,24px) 12px;
  scroll-padding-top:12px;
}
.lore-pages:focus-visible { outline:2px solid #862f20; outline-offset:2px; }
.lore-painting { width:min(100%,320px); margin:1rem auto 1.5rem; }
.lore-comic { width:min(100%,480px); margin:1.5rem auto 1rem; }
.lore-painting img,.lore-comic img {
  display:block;
  width:100%;
  height:auto;
  outline:1px solid #926438;
  box-shadow:0 4px 12px #5f321d35;
}
.lore-scroll h2,.lore-scroll h3 { font:900 1.15em/1.12 "Bricolage Grotesque","Nunito",sans-serif; letter-spacing:-.025em; }
.lore-scroll p a { text-decoration:underline; text-underline-offset:.18em; }
.lore-scroll h2 {
  margin:0 0 .65rem;
  text-align:center;
  color:#641f24;
  font:400 clamp(24px,4.5vw,48px)/1.12 "Young Serif",Georgia,serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.lore-scroll h2 span { white-space:nowrap; }
@media (max-width:540px) {
  .lore-scroll h2 span { display:block; }
}
.lore-scroll h3 { margin:1.8em 0 .55em; color:#184b41; font-size:clamp(18px,3vw,26px); }
.lore-scroll p { font:900 clamp(16px,2vw,19px)/1.65 "Nunito",ui-rounded,sans-serif; }
.music-control {
  position:fixed; z-index:5; right:12px; bottom:12px; min-height:44px;
  padding:6px 12px; border:2px solid #64361e; border-radius:18px;
  color:#fff3d7; background:#184b41; font:900 13px "Nunito",sans-serif; cursor:pointer;
}
.music-control:focus-visible { outline:2px solid #c57235; outline-offset:3px; }

.lore { position: relative; padding-top: clamp(36px, 5vw, 82px); }
.hero-divider {
  inset: 0 0 auto;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  body { --magpie: url("assets/magpie-mono-up.png"); cursor: var(--magpie) 1 11, auto; }
  body.magpie-down { --magpie: url("assets/magpie-mono-down.png"); }
  a, button { cursor: var(--magpie) 1 11, pointer; }
}

::selection { background: #ffad42; color: #241608; }