:root { color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:#f3f4ef; background:#10151f; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:2rem; } body { margin:0; min-width:320px; } a { color:inherit; text-underline-offset:.25em; } a:focus-visible { outline:3px solid #c6f36b; outline-offset:6px; } .shell { width:min(1120px,calc(100% - 48px)); margin:auto; } .skip { position:absolute; top:-80px; background:#fff; color:#111; padding:12px; } .skip:focus { top:12px; }
header { display:flex; justify-content:space-between; align-items:center; min-height:100px; border-bottom:1px solid #ffffff16; gap:1rem; } .brand { display:flex; align-items:center; font-size:1.4rem; font-weight:750; text-decoration:none; letter-spacing:-.04em; } .mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff50; border-radius:10px; margin-right:12px; font-size:1rem; } .brand-dot { color:#c6f36b; } nav { display:flex; gap:24px; font-size:.9rem; } nav a { text-decoration:none; }
.hero { padding:90px 0 70px; } .eyebrow { font-size:.72rem; font-weight:650; letter-spacing:.14em; color:#a9b3c2; } h1 { font-size:clamp(2.9rem,6.8vw,5.6rem); line-height:1.08; font-weight:550; letter-spacing:-.065em; margin:30px 0; } h1 span { color:#c6f36b; } .hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:30px; } .hero-bottom p { max-width:530px; line-height:1.7; color:#b6bfcc; font-size:1.06rem; } .round-link { border:1px solid #ffffff35; border-radius:50%; width:60px; height:60px; display:grid; place-items:center; font-size:1.7rem; text-decoration:none; flex-shrink:0; }
.catalog { padding:35px 0 90px; } .section-title { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff25; padding-top:26px; margin-bottom:28px; gap:20px; } .section-title h2 { font-size:1.5rem; font-weight:550; margin:0; letter-spacing:-.03em; } .section-title span { font-size:.7rem; color:#9ca8b9; letter-spacing:.1em; } .app-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .app-card { border-radius:22px; overflow:hidden; border:1px solid #ffffff20; background:#181f2b; } .app-art { min-height:260px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; position:relative; overflow:hidden; } .app-art::after { content:""; position:absolute; width:270px; height:270px; border:1px solid currentColor; opacity:.18; border-radius:50%; right:-70px; bottom:-90px; } .ucdm .app-art { background:#dde6cf; color:#395340; } .juip .app-art { background:#7760d3; color:#f5f1ff; } .app-symbol { font-family:Georgia,serif; font-size:3rem; line-height:1; } .art-word { font-size:2.2rem; font-weight:550; line-height:1.15; letter-spacing:-.045em; position:relative; z-index:1; } .app-content { padding:28px; } .app-meta { display:flex; justify-content:space-between; gap:12px; color:#b9c4d2; font-size:.66rem; letter-spacing:.07em; } .app-meta span:last-child { color:#c6f36b; letter-spacing:0; } h3 { font-size:1.45rem; letter-spacing:-.03em; margin:20px 0 12px; } .app-content p { color:#b6bfcc; line-height:1.6; min-height:52px; } .app-link { display:flex; justify-content:space-between; border-top:1px solid #ffffff20; padding-top:22px; margin-top:28px; text-decoration:none; font-weight:600; } .app-link:hover { color:#c6f36b; }
.contact { padding:55px 0 85px; border-top:1px solid #ffffff25; } .contact h2 { font-size:clamp(2rem,5vw,3.5rem); font-weight:500; letter-spacing:-.045em; margin:20px 0; } .contact p { color:#b6bfcc; } .contact a { display:inline-block; margin-top:20px; color:#c6f36b; font-size:clamp(1rem,3vw,1.5rem); } footer { display:flex; justify-content:space-between; gap:20px; padding:26px 0; border-top:1px solid #ffffff20; font-size:.78rem; color:#9ca8b9; }
@media(max-width:650px) { .shell { width:calc(100% - 36px); } header { min-height:85px; } .brand { font-size:1.1rem; } .mark { margin-right:8px; width:29px; height:29px; } nav { gap:14px; font-size:.8rem; } .hero { padding:55px 0; } .hero-bottom p { font-size:.98rem; } .round-link { width:46px; height:46px; } .app-grid { grid-template-columns:1fr; } .app-art { min-height:235px; } .app-content { padding:24px; } .section-title span { font-size:.6rem; } footer { flex-direction:column; gap:8px; } }
.upcoming { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; } .upcoming article { padding:28px; border:1px solid #ffffff20; border-radius:22px; } .upcoming h3 { margin:12px 0; } .upcoming p { color:#b6bfcc; font-size:.9rem; } @media(max-width:650px) { .upcoming { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.app-art { min-height:280px; isolation:isolate; }
.app-art::after { display:none; }
.banner-label { position:relative; z-index:2; font-size:.72rem; letter-spacing:.16em; font-weight:700; }
.art-word { font-size:clamp(1.9rem,3.2vw,2.2rem); max-width:80%; text-shadow:0 1px 16px #00000008; }
.askweed .app-art { background:#193d2e; color:#e0f0c6; }
.astramancia .app-art { background:#282039; color:#f0dfb6; }
.app-grid { align-items:stretch; }
.app-card { display:flex; flex-direction:column; }
.app-content { display:flex; flex-direction:column; flex:1; }
.app-content .app-link { margin-top:auto; }
.app-content p { margin-bottom:28px; }
.upcoming { grid-template-columns:repeat(2,minmax(0,1fr)); }
.upcoming article { padding:0; overflow:hidden; }
.upcoming-banner { height:145px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; font-size:1.35rem; font-weight:600; letter-spacing:-.03em; }
.identity-symbol { font-family:Georgia,serif; font-size:6rem; line-height:1; opacity:.25; }
.tuturnito .upcoming-banner { background:linear-gradient(130deg,#21464b,#387679); color:#d8f2ed; }
.upcoming-content { padding:20px 28px; }
@media(max-width:650px) { .upcoming { grid-template-columns:1fr; } .app-art { min-height:250px; padding:26px; } .art-word { font-size:2rem; } .app-meta { flex-wrap:wrap; } }
.upcoming { grid-template-columns:1fr; max-width:548px; }