/* Shared inner-page language: open space, botanical detail, compact glass. */
.inner-page { --page-panel: #f4f7ef; --page-soft: #eaf0e2; --page-caption: #607063; }
html[data-theme=dark] .inner-page { --page-panel: #0e1716; --page-soft: #14211c; --page-caption: #9daa9f; }
.page-shell { width: calc(100% - 8.6%); max-width: 1280px; margin-inline: auto; }
.page-eyebrow { display: block; font-size: 10px; font-weight: 650; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--page-caption); }
.page-note { font-size: 12px; line-height: 1.6; color: var(--page-caption); }
.page-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 30px; font-size: 10px; font-weight: 600; white-space: nowrap; background: #ffffff73; }
.page-pill.pill-green { color: #3a641c; background: #ccec9b70; border-color: #93b46540; }
html[data-theme=dark] .page-pill { background: #ffffff08; }
html[data-theme=dark] .page-pill.pill-green { color: #c5e7a6; background: #a8d57413; }
.page-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 37px; }
.page-breadcrumb>a { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; min-height: 40px; }
.page-breadcrumb>a svg { width: 15px; height: 15px; transform: rotate(180deg); }
.page-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-section-heading h2 { font-size: clamp(28px,3vw,40px); line-height: 1.12; letter-spacing: -.055em; margin-top: 9px; }
.page-heading { font-size: clamp(36px,4.5vw,60px); line-height: 1.08; letter-spacing: -.06em; }
.inner-page .button { min-height: 44px; }
.inner-page .footer { max-width: 1280px; }
.inner-page .round-button { width: 44px; height: 44px; }
.inner-page main:focus { outline: none; }

.collection-world { position: relative; isolation: isolate; min-height: 615px; overflow: clip; background: #e3eee4; }
.collection-scenery { position: absolute; inset: 0; z-index: -2; background: url('assets/hero.webp') center center / cover; }
.collection-world:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#f7faf4fa 3%,#f7faf4e8 28%,#f7faf447 58%,transparent 80%),linear-gradient(0deg,#f5f8f0b3,transparent 35%); }
.world-moonfolk .collection-scenery { background: #dceaf5 url('assets/moonfolk.webp') right 40% / auto 140% no-repeat; }
.world-circuit .collection-scenery { background: #e9eed7 url('assets/circuit.webp') right 35% / auto 140% no-repeat; }
.collection-intro { position: relative; padding-top: 103px; padding-bottom: 84px; }
.collection-identity { display: flex; align-items: center; gap: 12px; }
.collection-sigil { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 50%; color: #f1ffe7; border: 1px solid #cee4b2; box-shadow: inset 0 0 0 4px #ffffff1a; background: linear-gradient(145deg,#698649,#17382e); flex-shrink: 0; }
.collection-sigil svg { width: 31px; height: 31px; }
.collection-sigil.small { width: 40px; height: 40px; }
.collection-sigil.small svg { width: 25px; height: 25px; }
.world-moonfolk .collection-sigil { background: linear-gradient(145deg,#638cc0,#243d76); }
.collection-identity .page-eyebrow { font-size: 8px; }
.collection-identity p { margin-top: 4px; font-size: 13px; font-weight: 600; }
.collection-intro h1 { margin-top: 19px; font-size: clamp(54px,6.1vw,86px); line-height: 1.06; letter-spacing: -.065em; }
.collection-tagline { margin-top: 15px; color: var(--pine); font-size: 21px; letter-spacing: -.035em; max-width: 480px; }
.collection-intro-text { max-width: 405px; color: #56665b; font-size: 14px; line-height: 1.8; margin-top: 12px; }
.collection-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.collection-primary-actions>.button { margin-right: 3px; }
.collection-follow[aria-pressed=true] { color: #538b27; background: #e1efcd; }
.collection-follow[aria-pressed=true] svg { fill: currentColor; }
.collection-chain { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #53614f; margin-top: 21px; }
.collection-chain .status-dot { width: 6px; height: 6px; }
.collection-dot { margin-inline: 3px; opacity: .5; }
.collection-art-caption { position: absolute; right: 4.3%; bottom: 72px; padding-left: 16px; border-left: 1px solid #fff9; color: #fff; text-shadow: 0 1px 9px #182d37; }
.collection-art-caption>span { font-size: 8px; letter-spacing: .24em; }
.collection-art-caption p { font-size: 19px; line-height: 1.35; font-weight: 550; margin-top: 8px; letter-spacing: -.025em; }
.collection-summary { position: relative; z-index: 1; margin-top: -33px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; padding: 24px 8px; border-radius: 22px; }
.collection-stat { display: flex; flex-direction: column; padding-inline: 26px; min-width: 0; }
.collection-stat+.collection-stat { border-left: 1px solid var(--line); }
.collection-stat>span { font-size: 11px; color: var(--page-caption); }
.collection-stat>strong { font-size: 25px; letter-spacing: -.05em; margin-top: 9px; }
.collection-stat small { font-size: 10px; color: var(--page-caption); margin-top: 7px; }
.collection-stat em { font-size: 15px; font-style: normal; font-weight: 400; color: var(--page-caption); }
.collection-progress>span { display: flex; justify-content: space-between; }
.collection-progress b { color: var(--pine); }
.collection-progress progress { width: 100%; height: 5px; appearance: none; border: 0; border-radius: 5px; overflow: hidden; margin-top: 10px; background: var(--page-soft); }
.collection-progress progress::-webkit-progress-bar { background: var(--page-soft); }
.collection-progress progress::-webkit-progress-value { background: var(--green); border-radius: 5px; }
.collection-progress progress::-moz-progress-bar { background: var(--green); }
.collection-body { padding-top: 28px; }
.collection-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); }
.collection-tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 51px; font-size: 13px; color: var(--page-caption); white-space: nowrap; }
.collection-tabs a.active { color: var(--ink); font-weight: 600; }
.collection-tabs a.active:after { content: ''; position: absolute; bottom: -1px; height: 2px; left: 0; right: 0; background: var(--green); }
.collection-tabs a>span { display: grid; place-items: center; background: var(--page-soft); min-width: 20px; height: 20px; border-radius: 5px; font-size: 10px; }
.collection-feedback { font-size: 12px; color: var(--pine); }
.collection-feedback:not(:empty) { padding-top: 16px; }
.collection-body section { scroll-margin-top: 24px; }
.collection-story { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 10%; padding: 64px 0 72px; }
.story-copy h2 { font-size: clamp(34px,3.7vw,48px); line-height: 1.12; letter-spacing: -.06em; margin: 13px 0 21px; }
.story-copy>p:not(.page-eyebrow) { font-size: 14px; line-height: 1.85; color: var(--page-caption); margin-top: 13px; max-width: 490px; }
.story-signature { display: flex; align-items: center; gap: 12px; margin-top: 25px; font-size: 11px; color: var(--page-caption); }
.story-signature strong { display: block; color: var(--ink); font-size: 12px; margin-top: 4px; }
.story-art { position: relative; margin: 0; border-radius: 22px; overflow: hidden; height: 345px; }
.story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.story-art:after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#071c23b3); }
.story-art figcaption { position: absolute; z-index: 1; bottom: 24px; left: 24px; right: 24px; color: white; }
.story-art figcaption>span:first-child { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.story-art figcaption>span:last-child { display: flex; align-items: center; justify-content: space-between; font-size: 23px; font-weight: 600; letter-spacing: -.04em; margin-top: 8px; }
.collection-items { padding-block: 43px 58px; border-top: 1px solid var(--line); }
.collection-item-tools { display: grid; grid-template-columns: minmax(170px,1fr) 160px 175px auto; gap: 10px; }
.page-search { display: flex; align-items: center; gap: 9px; padding: 0 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--page-panel); }
.page-search svg { width: 17px; height: 17px; color: var(--page-caption); }
.page-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; outline: none; padding: 13px 0; }
.page-search:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.page-select select,.page-filter { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--page-panel); color: var(--ink); font-size: 12px; }
.page-filter[aria-pressed=true] { background: var(--page-soft); border-color: var(--green); color: var(--pine); }
.collection-results { display: flex; justify-content: space-between; gap: 20px; color: var(--page-caption); font-size: 11px; margin-block: 20px; }
.collection-item-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.collection-item { border: 1px solid var(--line); border-radius: 19px; overflow: hidden; background: var(--paper); transition: transform .2s; }
@media(hover:hover) { .collection-item:hover { transform: translateY(-4px); } }
.collection-item-art { display: block; width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; text-align: left; }
.collection-item-art img { width: 100%; height: 100%; object-fit: cover; }
.item-trait { position: absolute; bottom: 12px; left: 12px; padding: 6px 9px; border: 1px solid #ffffff80; border-radius: 8px; background: #f4f8eddd; color: #24362b; font-size: 9px; }
.collection-item-info { padding: 15px; }
.collection-item-info>p { font-size: 10px; color: var(--page-caption); }
.collection-item-info h3 { font-size: 15px; margin-top: 7px; letter-spacing: -.03em; }
.collection-item-info>div { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.collection-item-info .round-button { width: 36px; height: 36px; }
.page-empty { padding: 48px 20px; text-align: center; background: var(--page-panel); border-radius: 18px; }
.page-empty p { margin: 12px 0 22px; color: var(--page-caption); font-size: 13px; }
.collection-phases { border-top: 1px solid var(--line); padding-block: 50px 65px; }
.collection-phase-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.collection-phase-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: var(--page-panel); }
.collection-phase-card.is-open { background: linear-gradient(145deg,#eff6e8,var(--paper)); border-color: #92af6766; }
.phase-card-top { display: flex; align-items: center; justify-content: space-between; }
.phase-index { font-size: 14px; font-weight: 500; color: var(--page-caption); }
.collection-phase-card h3 { font-size: 18px; letter-spacing: -.04em; margin-top: 27px; }
.collection-phase-card>p { font-size: 12px; line-height: 1.7; color: var(--page-caption); margin-block: 10px 25px; }
.phase-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.phase-card-bottom strong { font-size: 19px; letter-spacing: -.045em; }
.phase-card-bottom>span { font-size: 10px; color: var(--page-caption); }
.phase-card-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 19px; font-size: 10px; line-height: 1.5; min-height: 44px; }
.phase-card-link svg { width: 16px; height: 16px; }
.collection-access { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; padding: 50px 0 64px; border-top: 1px solid var(--line); }
.access-intro h2 { font-size: 43px; line-height: 1.13; letter-spacing: -.06em; margin-top: 12px; }
.access-intro>p:not(.page-eyebrow) { font-size: 13px; line-height: 1.8; color: var(--page-caption); max-width: 300px; margin-top: 15px; }
.access-intro>.text-link { font-size: 12px; margin-top: 23px; min-height: 44px; white-space: normal; }
.access-cards { display: grid; gap: 15px; }
.collection-access-card { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: start; gap: 14px; border-radius: 20px; padding: 22px; border: 1px solid var(--line); }
.collection-access-card .page-eyebrow { font-size: 8px; }
.collection-access-card h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.04em; margin-top: 6px; }
.collection-access-card p { font-size: 12px; color: var(--page-caption); margin-top: 9px; }
.collection-access-card small { display: block; font-size: 11px; line-height: 1.7; color: var(--page-caption); margin-top: 9px; }
.collection-access-card>.button { grid-column: 2; justify-self: start; font-size: 11px; }
.access-flow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px; }
.access-flow>span { color: var(--page-caption); font-size: 9px; line-height: 1.7; }
.access-flow b { display: block; font-size: 11px; color: var(--pine); }
.access-flow svg { width: 14px; opacity: .4; }
.trait-chip { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 10px; color: var(--pine); }
.collection-details { border-top: 1px solid var(--line); padding-block: 45px; }
.collection-faq details { border-bottom: 1px solid var(--line); }
.collection-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding-block: 22px; font-size: 14px; font-weight: 500; }
.collection-faq summary::-webkit-details-marker { display: none; }
.collection-faq summary svg { width: 16px; height: 16px; }
.collection-faq details[open] summary svg { transform: rotate(180deg); }
.collection-faq details>p { max-width: 780px; padding-bottom: 22px; font-size: 13px; line-height: 1.8; color: var(--page-caption); }
.collection-endcap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 42px 0 72px; }
.collection-endcap h2 { font-size: clamp(29px,3.5vw,44px); line-height: 1.15; letter-spacing: -.055em; margin-block: 20px; }
.collection-endcap>.page-note { margin-top: 16px; }

html[data-theme=dark] .collection-world { background: #0b1518; }
html[data-theme=dark] .collection-scenery { background-image: url('assets/hero-night.webp'); }
html[data-theme=dark] .world-moonfolk .collection-scenery { background-color: #0b172c; background-image: url('assets/moonfolk.webp'); }
html[data-theme=dark] .world-circuit .collection-scenery { background-color: #141b10; background-image: url('assets/circuit.webp'); }
html[data-theme=dark] .collection-world:after { background: linear-gradient(90deg,#06090afc 3%,#06090aed 30%,#06090a60 65%,#06090a15),linear-gradient(0deg,#06090aaa,transparent 40%); }
html[data-theme=dark] .collection-intro-text,html[data-theme=dark] .collection-chain { color: #b0bbaa; }
html[data-theme=dark] .collection-follow[aria-pressed=true] { color: #c6e8a3; background: #c6e8a31c; }
html[data-theme=dark] .collection-phase-card.is-open { background: linear-gradient(140deg,#1c2d20,#0b1312); border-color: #a9d07966; }
html[data-theme=dark] .collection-item { background: linear-gradient(145deg,#151d1e,#0b1111); }
html[data-theme=dark] .item-trait { background: #101e1dde; color: #dfedda; border-color: #e3f5d430; }

@media(min-width:1700px) { .collection-world { min-height: 675px; } .collection-intro { padding-top: 112px; } .collection-scenery { background-position: center 45%; } }
@media(max-width:1000px) {
  .collection-world { min-height: 600px; }
  .collection-intro h1 { font-size: 63px; }
  .collection-intro-text { max-width: 355px; }
  .collection-tagline { max-width: 370px; font-size: 19px; }
  .collection-art-caption { display: none; }
  .collection-stat { padding-inline: 18px; }
  .collection-stat>strong { font-size: 22px; }
  .collection-story { gap: 6%; grid-template-columns: 1fr 1fr; }
  .story-art { height: 335px; }
  .collection-item-tools { grid-template-columns: minmax(140px,1fr) 135px 155px auto; gap: 8px; }
  .collection-item-grid { gap: 12px; }
  .collection-item-info { padding: 12px; }
  .collection-item-info h3 { font-size: 13px; }
  .collection-item-info>div { font-size: 11px; }
  .collection-phase-card { padding: 18px; }
  .collection-phase-card h3 { font-size: 17px; }
  .phase-card-bottom { align-items: start; flex-direction: column; }
  .collection-access { gap: 30px; }
}
@media(max-width:760px) {
  .page-shell { width: calc(100% - 36px); }
  .page-breadcrumb { margin-bottom: 24px; }
  .page-section-heading { align-items: start; flex-wrap: wrap; gap: 10px; }
  .collection-world { min-height: 695px; }
  .collection-intro { padding-top: 96px; padding-bottom: 240px; }
  .collection-identity { gap: 10px; }
  .collection-identity .collection-sigil { width: 42px; height: 42px; }
  .collection-intro h1 { font-size: clamp(43px,9vw,65px); margin-top: 14px; }
  .collection-tagline { font-size: 18px; max-width: 360px; }
  .collection-intro-text { max-width: 380px; font-size: 13px; line-height: 1.7; }
  .collection-primary-actions { margin-top: 20px; }
  .collection-chain { font-size: 10px; }
  .collection-scenery { background-size: auto 570px; background-position: 68% bottom; background-repeat: no-repeat; }
  .world-moonfolk .collection-scenery,.world-circuit .collection-scenery { background-size: auto 630px; background-position: 75% bottom; }
  .collection-world:after { background: linear-gradient(180deg,#f7faf4 12%,#f7faf4f5 37%,#f7faf46b 61%,#f7faf400 85%); }
  html[data-theme=dark] .collection-world:after { background: linear-gradient(180deg,#06090a 12%,#06090afa 37%,#06090a8a 66%,#06090a16); }
  .collection-summary { grid-template-columns: 1fr 1fr; padding: 6px; margin-top: -47px; border-radius: 19px; }
  .collection-stat { padding: 18px; }
  .collection-stat:nth-child(3) { border-left: 0; }
  .collection-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .collection-stat>strong { font-size: 23px; }
  .collection-body { padding-top: 17px; }
  .collection-tabs { gap: 26px; overflow-x: auto; scrollbar-width: thin; }
  .collection-tabs a { font-size: 12px; }
  .collection-story { gap: 28px; padding-block: 38px 40px; grid-template-columns: 1fr; }
  .story-art { height: 330px; }
  .story-copy h2 { font-size: 35px; }
  .collection-items,.collection-phases,.collection-access,.collection-details { padding-block: 33px; }
  .collection-item-tools { grid-template-columns: 1fr 1fr; gap: 10px; }
  .page-search { grid-column: 1 / -1; }
  .page-filter { grid-column: 1 / -1; width: max-content; }
  .page-search input,.page-select select { font-size: 16px; }
  .collection-results { margin-block: 17px; }
  .collection-results>span:last-child { display: none; }
  .collection-item-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .collection-item-info h3 { font-size: 14px; }
  .collection-item-info .round-button { width: 44px; height: 44px; }
  .collection-phase-grid { grid-template-columns: 1fr; gap: 12px; }
  .collection-phase-card { padding: 20px; }
  .collection-phase-card h3 { margin-top: 17px; }
  .collection-phase-card>p { margin-bottom: 18px; }
  .phase-card-bottom { flex-direction: row; align-items: center; }
  .collection-access { grid-template-columns: 1fr; gap: 25px; }
  .access-intro h2 { font-size: 35px; }
  .access-intro>p:not(.page-eyebrow) { max-width: 390px; }
  .collection-endcap { padding-block: 28px 48px; }
}
@media(max-width:360px) {
  .collection-intro h1 { font-size: 42px; }
  .collection-primary-actions { gap: 7px; }
  .collection-primary-actions>.button { font-size: 12px; padding-inline: 16px; gap: 12px; }
  .collection-stat { padding: 15px 11px; }
  .collection-stat>strong { font-size: 21px; }
  .collection-item-info { padding: 10px; }
  .collection-item-info h3 { font-size: 12px; }
  .collection-item-info>div { flex-wrap: wrap; }
  .collection-item-info .round-button { width: 36px; height: 44px; }
  .collection-access-card { padding: 17px; gap: 11px; }
  .collection-access-card>.button { grid-column: 1 / -1; justify-self: stretch; }
  .collection-chain { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) { .collection-item { transition: none; } }

/* Permanent context for fictional collection and mint demonstrations. */
.collection-demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 810px;
  margin: 0 0 26px;
  padding: 18px 20px;
  border: 1px solid #a3924c68;
  border-radius: 18px;
  background: #f4eed9f5;
  color: #283a2c;
  box-shadow: 0 8px 30px #192f2410;
}
.collection-demo-notice .demo-notice-label {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid #a3924c70;
  border-radius: 7px;
  background: #e6dbac;
  color: #57471d;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.4;
}
.collection-demo-notice strong { display: block; font-size: 14px; line-height: 1.5; }
.collection-demo-notice p { margin-top: 5px; font-size: 12px; line-height: 1.65; color: #4b5546; max-width: 620px; }
.collection-demo-notice a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 4px; font-size: 11px; font-weight: 650; color: #365b31; text-decoration: underline; text-underline-offset: 3px; }
.collection-demo-notice a svg { flex: 0 0 auto; width: 14px; height: 14px; }
.collection-demo-notice.mint-demo-notice { max-width: none; }
html[data-theme=dark] .collection-demo-notice { color: #f4ecd2; background: #25291e; border-color: #b7a46566; box-shadow: none; }
html[data-theme=dark] .collection-demo-notice .demo-notice-label { color: #efdaa1; background: #3d3724; border-color: #a3924c80; }
html[data-theme=dark] .collection-demo-notice p { color: #d0cbb9; }
html[data-theme=dark] .collection-demo-notice a { color: #d2e3b9; }
@media(max-width:767px) {
  .collection-demo-notice { flex-direction: column; gap: 10px; padding: 16px; border-radius: 15px; margin-bottom: 23px; }
  .collection-demo-notice strong { font-size: 14px; }
  .collection-demo-notice p { font-size: 12px; }
  .collection-demo-notice a { min-height: 44px; line-height: 1.6; }
}
@media(forced-colors:active) { .collection-demo-notice,.collection-demo-notice .demo-notice-label { border: 1px solid CanvasText; } }
