@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root { --ink: #07121c; --navy: #091a27; --panel: #0a1924; --blue: #8dd5fb; --gold: #d6ae5a; --cream: #eee4cd; --line: rgba(209, 170, 88, .56); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #050b10; color: var(--cream); font-family: 'EB Garamond', Georgia, serif; font-size: 18px; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 5%, #173d58 0, #07131d 35%, #05090e 75%); }
a { color: inherit; text-decoration: none; }
.site-header { background: linear-gradient(180deg, #071019, #0c1c28 75%, #050b11); border-bottom: 1px solid var(--line); box-shadow: 0 5px 18px #000; }
.header-inner, main { width: min(1240px, calc(100% - 36px)); margin: auto; }
.header-inner { min-height: 138px; display: flex; justify-content: space-between; align-items: stretch; }
.brand { width: 280px; padding: 21px 0 15px 24px; display: flex; flex-direction: column; justify-content: center; text-transform: uppercase; font-family: Cinzel, Georgia, serif; text-shadow: 0 2px 3px #000; border-left: 1px solid #313a3d; }
.brand-top { color: var(--gold); font-size: 1.05rem; letter-spacing: .19em; }.brand-main { color: #f2bf51; font-size: 2.7rem; line-height: .9; letter-spacing: -.06em; }.brand-sub { color: #9fcded; font-size: .72rem; letter-spacing: .24em; margin-top: 9px; }
.header-right { flex: 1; display: flex; flex-direction: column; align-items: flex-end; }.account-links { padding: 12px 22px 5px; color: #cab48a; font-size: .92rem; }.account-links span { border-left: 1px solid #806b46; margin: 0 11px; }
.main-nav { display: flex; height: 91px; border-left: 1px solid #263440; }.main-nav a { min-width: 94px; padding: 15px 12px; display: grid; place-content: center; gap: 5px; text-align: center; text-transform: uppercase; font-family: Cinzel, Georgia, serif; font-size: .7rem; border-right: 1px solid #263440; color: #dfd4bc; background: linear-gradient(135deg, #0b1b28, #06111a); }.main-nav b { font-size: 1.7rem; line-height: 1; font-weight: 400; }.main-nav a:hover, .main-nav .active { background: radial-gradient(circle at 50% 35%, #1976ac, #0b2c42 50%, #08141e 100%); color: #fff; box-shadow: inset 0 0 18px #60caff; }
.hero-frame { min-height: 570px; position: relative; isolation: isolate; border: 1px solid var(--line); border-top: 0; background: #07111a url('assets/ron-hero.png') left center / cover no-repeat; box-shadow: 0 13px 27px #000; }.hero-frame::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, rgba(4, 13, 21, .3) 50%, rgba(4, 13, 21, .88) 100%); }
.hero-content { position: absolute; right: 6%; top: 50%; transform: translateY(-45%); width: min(410px, 42%); text-align: center; }.hero-kicker, .section-label { font-family: Cinzel, Georgia, serif; color: #a7d9f2; text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; }.hero-content h1 { margin: 9px 0 15px; font: 600 clamp(2rem, 3.2vw, 3.25rem)/1.15 Cinzel, Georgia, serif; text-shadow: 0 3px 10px #000; }.hero-copy { color: #cad7dd; line-height: 1.35; font-size: 1.1rem; }.gold-button { display: inline-block; margin-top: 14px; padding: 13px 31px; border: 1px solid #edc96f; border-radius: 4px; background: linear-gradient(#453719, #16140c); box-shadow: inset 0 0 0 3px #1b180e, 0 0 0 2px #71531f, 0 4px 12px #000; color: #fff2ca; text-transform: uppercase; font: 600 .76rem Cinzel, Georgia, serif; letter-spacing: .08em; cursor: pointer; }.gold-button:hover { filter: brightness(1.25); }.gold-button.small { padding: 10px 22px; font-size: .66rem; }.hero-meta { color: #8bc7ea; text-transform: uppercase; font: .66rem Cinzel, Georgia, serif; letter-spacing: .12em; }.hero-meta i { display: inline-block; width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); margin: 0 9px 2px; }
.portal-links { display: grid; grid-template-columns: repeat(5, 1fr); background: linear-gradient(120deg, #0b1c28, #06121b); border: 1px solid var(--line); margin-top: 9px; }.portal-links a { min-height: 124px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-right: 1px solid #2b3b42; }.portal-links a:last-child { border: 0; }.portal-links a:hover { background: #102c3c; }.portal-links strong { color: #dfd1b3; font-size: 2.1rem; font-weight: 400; }.portal-links span { font: .9rem Cinzel, Georgia, serif; }.portal-links small { display: block; color: #aac3cd; font: .86rem 'EB Garamond', Georgia, serif; margin-top: 3px; }
.content-grid, .lower-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 13px; }.ornate-panel { position: relative; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(12, 31, 44, .98), rgba(4, 14, 22, .98)); box-shadow: inset 0 0 20px rgba(67, 159, 207, .11), 0 5px 14px #000; }.ornate-panel::before, .ornate-panel::after { content: '✦'; position: absolute; color: var(--gold); font-size: .7rem; }.ornate-panel::before { top: 5px; left: 7px; }.ornate-panel::after { right: 7px; bottom: 5px; }.news-panel { padding: 20px 25px; }.panel-title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #39505a; padding-bottom: 10px; }.panel-title h2, .directory-heading h2 { margin: 0; color: #d8b76c; font: 600 1.55rem Cinzel, Georgia, serif; }.panel-title a { color: var(--blue); font-size: .93rem; }.story { display: flex; gap: 15px; padding: 14px 0; border-bottom: 1px solid rgba(65, 93, 104, .45); }.story:last-child { border: 0; }.story-mark { color: #f0c469; border: 1px solid #7e6740; width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 45px; font-size: 1.4rem; }.story p { margin: 2px 0; color: #b8cbd1; line-height: 1.2; }.story .date { color: #80c9ed; font-size: .82rem; }.story h3 { margin: 0; color: #e8e1ce; font-size: 1.12rem; font-weight: 500; }
.destination-card { min-height: 350px; overflow: hidden; }.destination-image { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 9, 15, .98), transparent 72%), url('assets/ron-hero.png') 28% center / cover; filter: saturate(.7); }.destination-copy { position: relative; min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: end; padding: 25px; text-align: center; }.destination-copy p { margin: 0; color: #afd7e8; }.destination-copy h2 { margin: 3px 0; font: 600 clamp(1.5rem, 3vw, 2.45rem) Cinzel, Georgia, serif; }.destination-copy span { color: #d4d2c5; }.destination-copy .gold-button { margin-top: 14px; }
.feature-card { min-height: 290px; padding: 31px; display: flex; align-items: end; overflow: hidden; background: linear-gradient(90deg, rgba(4, 12, 18, .94) 30%, rgba(4, 12, 18, .35)), url('assets/ron-hero.png') 14% 65% / cover; }.feature-card > div { max-width: 450px; }.feature-card h2 { margin: 7px 0; font: 600 clamp(1.45rem, 3vw, 2.45rem)/1.15 Cinzel, Georgia, serif; }.feature-card p:not(.section-label) { margin: 0; color: #cdd9d8; }.community-panel { padding: 21px 28px; }.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 27px 0 20px; }.stats div { text-align: center; border-right: 1px solid #35464e; }.stats div:last-child { border: 0; }.stats b { display: block; color: #f0e3c6; font: 1.32rem Cinzel, Georgia, serif; }.stats span { color: #a8c3d0; font-size: .8rem; }.community-panel blockquote { margin: 0; text-align: center; color: #e2dbca; font-size: 1.18rem; line-height: 1.2; }.community-panel cite { display: block; color: #91c7e2; margin-top: 13px; font-size: .9rem; }
.directory-section { padding: 68px 0 38px; }.directory-heading { text-align: center; margin-bottom: 18px; }.directory-heading p:last-child { margin: 6px; color: #a5bdc8; }.database-panel { max-width: 1000px; padding: 27px; margin: auto; }.search-form label { display: block; color: #e6d7b7; font: .8rem Cinzel, Georgia, serif; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }.search-row { display: grid; grid-template-columns: 1fr auto; gap: 11px; } input { min-width: 0; padding: 13px 15px; background: #06111b; border: 1px solid #506775; color: #e8e5d9; font: 1rem 'EB Garamond', Georgia, serif; outline: none; } input:focus { border-color: #8bd4f7; box-shadow: 0 0 8px #247da4; }.search-row .gold-button { margin: 0; }.results-header { display: flex; justify-content: space-between; align-items: baseline; margin-top: 25px; }.results-header h3 { margin: 0; font: 1.1rem Cinzel, Georgia, serif; }.results-header p { color: #8dc9e7; margin: 0; }.table-wrap { overflow-x: auto; margin-top: 9px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #28404d; } th { color: #d7b76e; font: .7rem Cinzel, Georgia, serif; text-transform: uppercase; } td { color: #d5e0e0; } tbody tr:hover { background: rgba(68, 155, 196, .1); }.message { margin-top: 20px; padding: 13px 16px; border: 1px solid; }.error { background: #2b1716; border-color: #a86048; color: #ffc3ae; }.error span { display: block; font-size: .85rem; margin-top: 5px; }.empty { color: #bcd3d4; border-color: #496474; }
footer { width: 100%; padding: 33px max(18px, calc((100vw - 1204px) / 2)); display: flex; justify-content: space-between; align-items: center; background: #040a0f; border-top: 1px solid #43402e; color: #b7c6c5; } footer div { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: center; } .footer-rune { grid-row: span 2; color: var(--gold); font-size: 1.7rem; } footer b { color: #dec078; font: .85rem Cinzel, Georgia, serif; } footer small { font-size: .84rem; } footer p { display: flex; gap: 17px; margin: 0; font-size: .85rem; color: #94bdd2; }
@media (max-width: 820px) { .header-inner { min-height: unset; display: block; }.brand { width: 100%; align-items: center; border: 0; padding: 16px; }.header-right { align-items: center; }.account-links { display: none; }.main-nav { width: 100%; height: auto; }.main-nav a { min-width: 0; flex: 1; padding: 11px 4px; }.main-nav b { font-size: 1.3rem; }.hero-frame { min-height: 510px; background-position: 30% center; }.hero-content { width: min(430px, 70%); right: 3%; }.portal-links { grid-template-columns: repeat(3, 1fr); }.portal-links a { min-height: 94px; }.content-grid, .lower-grid { grid-template-columns: 1fr; }.feature-card { min-height: 270px; } }
@media (max-width: 540px) { body { font-size: 16px; }.header-inner, main { width: 100%; }.brand-main { font-size: 2.25rem; }.main-nav a { font-size: .57rem; }.hero-frame { min-height: 540px; }.hero-frame::after { background: linear-gradient(0deg, rgba(4, 13, 21, .84), transparent 75%); }.hero-content { width: 90%; right: 5%; top: auto; bottom: 27px; transform: none; }.hero-copy { font-size: 1rem; }.portal-links { grid-template-columns: repeat(2, 1fr); }.portal-links a { min-height: 84px; }.portal-links a:last-child { grid-column: span 2; border-top: 1px solid #2b3b42; }.portal-links strong { font-size: 1.7rem; }.news-panel, .community-panel, .database-panel { padding: 18px; }.story-mark { width: 35px; height: 35px; flex-basis: 35px; }.stats { gap: 8px; }.stats b { font-size: 1.05rem; }.stats span { font-size: .7rem; }.search-row { grid-template-columns: 1fr; }.search-row .gold-button { width: 100%; }.results-header { display: block; }.results-header p { margin-top: 5px; } footer { display: block; text-align: center; } footer div { justify-content: center; } footer p { margin-top: 20px; justify-content: center; flex-wrap: wrap; } }
