.lore { padding: 150px 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; background: linear-gradient(110deg, #120c21, #0a0812); }
.lore h2 { font-size: clamp(46px, 6.2vw, 86px); line-height: .84; letter-spacing: -.09em; margin: 0; }
.lore h2 em { font-style: normal; color: #b270ff; }
.lore-copy { max-width: 470px; align-self: end; color: #c6b9d4; font-size: 19px; line-height: 1.5; }
.future { padding: 135px 10%; }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 35px; border-top: 1px solid #4e3b66; border-left: 1px solid #4e3b66; }
.future-grid article { padding: 28px; min-height: 190px; border-right: 1px solid #4e3b66; border-bottom: 1px solid #4e3b66; }
.future-grid span { font: 12px "DM Mono", monospace; color: #b270ff; }
.future-grid h3 { font-size: 26px; letter-spacing: -.06em; margin: 34px 0 8px; }
.future-grid p { color: var(--muted); line-height: 1.45; margin: 0; }
.future small { display: block; color: #796d8a; font: 10px "DM Mono", monospace; line-height: 1.5; margin-top: 20px; max-width: 500px; }
@media (max-width: 760px) { .lore { grid-template-columns: 1fr; padding: 90px 7%; gap: 35px; } .future { padding: 90px 7%; } .future-grid { grid-template-columns: 1fr; } .lore-copy { font-size: 17px; } }
.countdown { padding: 105px 7%; text-align: center; background: radial-gradient(circle at center, #40225f 0%, #160c25 42%, #07050c 75%); }.clock { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 30px); }.clock div { min-width: 115px; }.clock b { display: block; font-size: clamp(52px, 8vw, 112px); letter-spacing: -.1em; line-height: .9; }.clock span { display: block; margin-top: 15px; color: #cdb9df; font: 10px "DM Mono", monospace; letter-spacing: .15em; }.clock i { color: #a568f5; font-size: clamp(36px, 5vw, 65px); font-style: normal; }.countdown small { display: block; color: #8e7b9f; font: 10px "DM Mono", monospace; margin-top: 32px; }
.faces { padding: 20px 5% 150px; }.faces-heading { max-width: 620px; margin: 0 5% 48px; }.faces h2 { font-size: clamp(46px, 6vw, 82px); line-height: .84; letter-spacing: -.09em; margin: 0; }.faces h2 em { font-style: normal; color: #b270ff; }.faces-heading > p:last-child { color: var(--muted); line-height: 1.5; margin: 26px 0 0; }.face-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.face-grid figure { margin: 0; overflow: hidden; background: #15101d; }.face-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s ease; }.face-grid figure:hover img { transform: scale(1.04); }.face-grid figcaption { padding: 13px 11px; color: #d8c9ea; font: 10px "DM Mono", monospace; letter-spacing: .05em; }.faces + .lore { margin-top: 0; } @media (max-width: 900px) { .face-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .faces { padding: 20px 7% 90px; }.faces-heading { margin: 0 0 35px; }.face-grid { grid-template-columns: repeat(2, 1fr); } }