/* ALAYN portal — the three houses side by side. Pure CSS, no JavaScript. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #050505; color: #F5F1E8; font: 300 16px/1.6 'Jost', 'Helvetica Neue', Arial, sans-serif; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.top { display: flex; align-items: baseline; justify-content: center; gap: 18px; padding: 18px 16px 14px; background: #050505; border-bottom: 1px solid rgba(201,164,92,.18); flex-wrap: wrap; text-align: center; }
.top .word { font: 400 1.5rem/1 'Cinzel', Georgia, serif; letter-spacing: .6em; padding-left: .6em; color: #E2C58C; }
.top .sub { font-size: .66rem; letter-spacing: .34em; text-transform: uppercase; color: #8d877b; }
.houses { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); min-height: calc(100svh - 120px); }
.house { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 44px); isolation: isolate; transition: flex .6s; }
.house .bgfx { position: absolute; inset: 0; z-index: -1; transition: transform 1.2s cubic-bezier(.22,.61,.36,1), opacity .6s; }
.house:hover .bgfx, .house:focus-visible .bgfx { transform: scale(1.06); }
.house .inner { max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.house .kicker { font-size: .66rem; letter-spacing: .4em; text-transform: uppercase; margin-bottom: 18px; }
.house .logo { width: min(300px, 70%); height: auto; margin-bottom: 18px; }
.house .logo.wordmark { width: min(320px, 82%); }
.house .mono { width: 92px; height: 92px; margin-bottom: 14px; }
.house h2 { font: 400 clamp(1.5rem, 2.3vw, 2.1rem)/1.15 'Cormorant Garamond', Georgia, serif; margin: 0 0 12px; }
.house p { font-size: .92rem; margin: 0 0 26px; opacity: .82; }
.house .enter { display: inline-flex; gap: 10px; align-items: center; padding: 14px 26px; font: 500 .7rem/1 'Jost', sans-serif; letter-spacing: .26em; text-transform: uppercase; border: 1px solid currentColor; transition: background .35s, color .35s, gap .35s; }
.house .enter i { font-style: normal; transition: transform .35s; }
.house:hover .enter i, .house:focus-visible .enter i { transform: translateX(4px); }
.house:focus-visible { outline: 2px solid #E2C58C; outline-offset: -6px; }

.noir { color: #F5F1E8; }
.noir .bgfx { background: radial-gradient(700px 500px at 50% 30%, rgba(201,164,92,.16), transparent 60%), linear-gradient(180deg, #0d0d0d, #050505); }
.noir .kicker, .noir .enter { color: #C9A45C; }
.noir:hover .enter { background: #C9A45C; color: #080808; }

.luxe { color: #F6EEF7; }
.luxe .bgfx { background: radial-gradient(600px 400px at 20% 0%, rgba(155,108,224,.32), transparent 60%), radial-gradient(500px 400px at 90% 100%, rgba(232,139,184,.2), transparent 60%), linear-gradient(180deg, #140B1F, #0B0612);
  box-shadow: inset 1px 0 0 rgba(231,194,125,.15), inset -1px 0 0 rgba(231,194,125,.15); }
.luxe .bgfx::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.7), transparent 60%), radial-gradient(1.4px 1.4px at 140px 110px, rgba(243,217,164,.8), transparent 60%), radial-gradient(1px 1px at 230px 60px, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 90px 200px, rgba(232,139,184,.7), transparent 60%); background-size: 260px 240px; opacity: .6; }
.luxe .kicker { color: #E7C27D; font-family: 'Cinzel', serif; }
.luxe .enter { color: #E7C27D; border-radius: 999px; }
.luxe:hover .enter { background: linear-gradient(135deg, #F7E3B0, #E7C27D 40%, #C9974E 65%, #F3D9A4); color: #1a0d22; border-color: transparent; }

.gems { color: #F2ECDD; }
.gems .bgfx { background: radial-gradient(600px 420px at 50% 15%, rgba(30,140,100,.32), transparent 60%), radial-gradient(500px 400px at 100% 100%, rgba(212,175,106,.12), transparent 60%), linear-gradient(180deg, #0B1B15, #06110D); }
.gems .bgfx::after { content: ''; position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(45deg, #D4AF6A 1px, transparent 1px), linear-gradient(-45deg, #D4AF6A 1px, transparent 1px); background-size: 56px 56px; }
.gems .kicker, .gems .enter { color: #D4AF6A; }
.gems .enter { border-radius: 6px; }
.gems:hover .enter { background: linear-gradient(135deg, #F6E3B4, #D4AF6A 40%, #A9823A 65%, #F0D9A0); color: #06110D; border-color: transparent; }
.gems .mono { filter: drop-shadow(0 0 24px rgba(30,140,100,.6)); }

.foot { background: #050505; border-top: 1px solid rgba(201,164,92,.15); text-align: center; padding: 22px 16px 26px; font-size: .78rem; color: #8d877b; }
.foot nav { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.foot nav a { letter-spacing: .24em; font-size: .68rem; text-transform: uppercase; color: #C9A45C; }
.foot p { margin: 0; }

@media (min-width: 1000px) { .houses:hover .house { opacity: .9; } .houses .house:hover { opacity: 1; } }
@media (max-width: 999px) {
  .houses { grid-template-columns: 1fr; min-height: 0; }
  .house { min-height: 72svh; }
}
@media (prefers-reduced-motion: reduce) { .house .bgfx, .house .enter i { transition: none; } }