/* ============================================================
CASINORANK — Verde — Midnight Emerald
Forest green + aged brass. British country house, billiard room, library casino.
Single source of truth. Theme by editing :root tokens below.
Note: fonts are loaded via tags in each HTML file's
for better Core Web Vitals (preconnect + preload pattern).
Make sure to update the font preload URLs in HTML to match the
--font-display value below if you change themes.
============================================================ */
/* --- Design Tokens --- */
:root {
/* Palette */
--color-bg: #0a1410;
--color-bg-elev: #0e1915;
--color-surface: #0f1f1a;
--color-surface-2: #162b24;
--color-surface-3: #1d3a30;
--color-border: #1d3a30;
--color-border-strong: #2a4e40;
--color-ink: #f0ede2;
--color-ink-2: #b5c1b9;
--color-ink-3: #7c8c82;
--color-ink-muted: #506058;
/* Accent (these slots keep their --color-gold-* names for compatibility,
but hold the theme's primary accent color regardless of the actual hue.) */
--color-gold: #b8956c;
--color-gold-bright: #d4b388;
--color-gold-deep: #7e6549;
--color-gold-soft: rgba(184, 149, 108, 0.14);
--color-gold-glow: rgba(184, 149, 108, 0.28);
--color-on-accent: #15211b;
/* Secondary accent + danger (slots keep emerald/ruby names) */
--color-emerald: #5e8b6e;
--color-emerald-glow: rgba(94, 139, 110, 0.12);
--color-ruby: #b84d3e;
/* Vignette tone for hero radial darkening */
--color-vignette: rgba(10, 20, 16, 0.65);
/* Typography */
--font-display: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 6rem;
--space-16: 8rem;
--space-20: 10rem;
/* Layout */
--container: 1240px;
--container-narrow: 880px;
--container-prose: 720px;
/* Radii */
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 14px;
--radius-xl: 20px;
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bump: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
--shadow-gold: 0 0 0 1px rgba(184, 149, 108, 0.14), 0 8px 32px rgba(184, 149, 108, 0.14);
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-ink);
background: var(--color-bg);
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Subtle film grain on the whole page */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
transition: color 200ms var(--ease);
}
button {
font: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
ul,
ol {
list-style: none;
}
::selection {
background: var(--color-gold);
color: var(--color-bg);
}
/* --- Typography Scale --- */
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--color-ink);
font-variation-settings: 'opsz' 80;
}
h1 {
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
font-variation-settings: 'opsz' 144;
}
h2 {
font-size: clamp(2rem, 3.8vw, 3rem);
}
h3 {
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
letter-spacing: -0.015em;
}
h4 {
font-size: 1.15rem;
letter-spacing: -0.01em;
}
p {
color: var(--color-ink-2);
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--color-gold);
}
/* --- Layout helpers --- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--prose {
max-width: var(--container-prose);
}
section {
padding-block: var(--space-12);
}
@media (max-width: 640px) {
section {
padding-block: var(--space-10);
}
}
/* ============================================================
HEADER
============================================================ */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding-block: var(--space-4);
background: rgba(10, 9, 8, 0.4);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid transparent;
transition:
background 300ms var(--ease),
border-color 300ms var(--ease),
padding 300ms var(--ease);
}
.site-header.is-scrolled {
background: rgba(10, 9, 8, 0.85);
border-bottom-color: var(--color-border);
padding-block: var(--space-3);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.site-logo__mark {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--color-gold);
border-radius: 50%;
color: var(--color-gold);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
}
.site-nav {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-nav a {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-2);
position: relative;
padding-block: var(--space-2);
}
.site-nav a:hover,
.site-nav a.is-active {
color: var(--color-ink);
}
.site-nav a.is-active::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: var(--color-gold);
}
.nav-toggle {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
align-items: center;
justify-content: center;
}
.nav-toggle span {
width: 16px;
height: 1px;
background: var(--color-ink);
position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-ink);
}
.nav-toggle span::before {
transform: translateY(-5px);
}
.nav-toggle span::after {
transform: translateY(5px);
}
@media (max-width: 768px) {
.nav-toggle {
display: inline-flex;
}
.site-nav {
position: fixed;
inset: 0 0 0 30%;
background: var(--color-bg-elev);
border-left: 1px solid var(--color-border);
flex-direction: column;
align-items: flex-start;
padding: var(--space-16) var(--space-6) var(--space-6);
transform: translateX(100%);
transition: transform 300ms var(--ease-out);
}
.site-nav.is-open {
transform: translateX(0);
}
.site-nav a {
font-size: 1rem;
}
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
padding-top: calc(var(--space-20) + var(--space-8));
padding-bottom: var(--space-16);
overflow: hidden;
isolation: isolate;
text-align: center;
}
.hero--compact {
padding-top: calc(var(--space-20) + var(--space-4));
padding-bottom: var(--space-12);
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -2;
background-image:
radial-gradient(ellipse 60% 50% at 50% 20%, var(--color-gold-glow), transparent 60%),
radial-gradient(
ellipse 40% 35% at 80% 80%,
var(--color-emerald-glow, var(--color-gold-soft)),
transparent 60%
),
linear-gradient(180deg, var(--color-bg-elev) 0%, var(--color-bg) 100%);
}
.hero__bg::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--hero-image, none);
background-size: cover;
background-position: center;
opacity: 0.28;
mix-blend-mode: luminosity;
}
.hero__bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 0%, transparent 60%, var(--color-bg) 100%),
radial-gradient(
ellipse at center,
transparent 30%,
var(--color-vignette, rgba(10, 9, 8, 0.6)) 100%
);
}
/* Decorative gold filigree corners */
.hero__ornament {
position: absolute;
width: 80px;
height: 80px;
color: var(--color-gold);
opacity: 0.4;
z-index: -1;
}
.hero__ornament--tl {
top: var(--space-16);
left: var(--space-6);
}
.hero__ornament--br {
bottom: var(--space-12);
right: var(--space-6);
transform: rotate(180deg);
}
.hero__content {
position: relative;
max-width: 760px;
margin-inline: auto;
}
.hero__content .eyebrow {
margin-bottom: var(--space-5);
}
.hero__content h1 {
margin-bottom: var(--space-5);
}
.hero__content p {
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: var(--color-ink-2);
max-width: 560px;
margin-inline: auto;
}
.hero__divider {
width: 1px;
height: 60px;
margin: var(--space-8) auto 0;
background: linear-gradient(180deg, var(--color-gold), transparent);
}
/* Page-load animation */
.hero__content > * {
opacity: 0;
transform: translateY(20px);
animation: rise 800ms var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) {
animation-delay: 100ms;
}
.hero__content > *:nth-child(2) {
animation-delay: 220ms;
}
.hero__content > *:nth-child(3) {
animation-delay: 340ms;
}
.hero__content > *:nth-child(4) {
animation-delay: 460ms;
}
@keyframes rise {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
SECTION HEADER
============================================================ */
.section-header {
text-align: center;
margin-bottom: var(--space-10);
}
.section-header .eyebrow {
margin-bottom: var(--space-4);
}
.section-header p {
margin-top: var(--space-3);
color: var(--color-ink-3);
}
/* ============================================================
CASINO LIST
============================================================ */
.casino-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.casino-card {
position: relative;
display: grid;
grid-template-columns: 200px 1fr auto;
align-items: center;
gap: var(--space-6);
padding: var(--space-5) var(--space-6);
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-elev) 100%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition:
border-color 280ms var(--ease),
transform 280ms var(--ease),
box-shadow 280ms var(--ease);
overflow: hidden;
}
.casino-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--color-gold-soft), transparent);
opacity: 0;
transition: opacity 400ms var(--ease);
pointer-events: none;
}
.casino-card:hover {
border-color: var(--color-border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.casino-card:hover::before {
opacity: 1;
}
.casino-card__rank {
position: absolute;
top: 0;
left: 0;
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--color-gold);
background: var(--color-bg-elev);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
border-bottom-right-radius: var(--radius);
padding: var(--space-1) var(--space-3);
}
.casino-card__logo {
display: grid;
place-items: center;
height: 100px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-3);
}
.casino-card__logo img {
max-height: 60px;
width: auto;
}
.casino-card__main {
min-width: 0;
}
.casino-card__name {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
margin-bottom: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-3);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-gold-soft);
color: var(--color-gold-bright);
border: 1px solid rgba(201, 169, 97, 0.3);
}
.badge--emerald {
background: rgba(74, 139, 111, 0.12);
color: var(--color-emerald);
border-color: rgba(74, 139, 111, 0.3);
}
.casino-card__bonus {
font-size: 0.95rem;
color: var(--color-ink);
margin-bottom: var(--space-3);
}
.casino-card__bonus strong {
color: var(--color-gold-bright);
font-weight: 600;
}
.casino-card__features {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
}
.casino-card__features li {
font-size: 0.82rem;
color: var(--color-ink-3);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.casino-card__features li::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-gold);
}
.casino-card__aside {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
min-width: 180px;
}
.rating {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.rating__score {
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--color-gold-bright);
letter-spacing: -0.02em;
}
.rating__max {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--color-ink-muted);
}
.rating__stars {
display: inline-flex;
gap: 2px;
margin-top: var(--space-1);
}
.rating__stars span {
width: 10px;
height: 10px;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
background: var(--color-gold);
}
.rating__stars span.dim {
background: var(--color-ink-muted);
}
/* CTA Button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--radius);
transition: all 220ms var(--ease);
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn--primary {
background: var(
--btn-primary-bg,
linear-gradient(180deg, var(--color-gold-bright), var(--color-gold))
);
color: var(--color-on-accent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 4px 16px var(--color-gold-soft);
}
.btn--primary:hover {
background: var(
--btn-primary-bg-hover,
linear-gradient(180deg, var(--color-gold-bright), var(--color-gold-bright))
);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 8px 24px var(--color-gold-glow);
}
.btn--primary:active {
transform: translateY(0);
}
.btn--ghost {
background: transparent;
color: var(--color-ink);
border: 1px solid var(--color-border-strong);
}
.btn--ghost:hover {
border-color: var(--color-gold);
color: var(--color-gold-bright);
}
.btn--block {
width: 100%;
}
.btn__arrow {
transition: transform 220ms var(--ease);
}
.btn:hover .btn__arrow {
transform: translateX(3px);
}
/* Casino card responsive */
@media (max-width: 900px) {
.casino-card {
grid-template-columns: 120px 1fr;
grid-template-rows: auto auto;
gap: var(--space-4);
}
.casino-card__logo {
height: 80px;
}
.casino-card__aside {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
@media (max-width: 520px) {
.casino-card {
padding: var(--space-4);
}
.casino-card__name {
font-size: 1.15rem;
}
.casino-card__aside {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.casino-card__aside .btn {
width: 100%;
}
}
/* ============================================================
SEO TEXT BLOCK
============================================================ */
.seo-block {
position: relative;
padding: var(--space-10) clamp(1.5rem, 5vw, 4rem);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
max-width: var(--container-narrow);
margin-inline: auto;
}
.seo-block::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 60px;
height: 1px;
background: var(--color-gold);
transform: translate(-50%, -0.5px);
}
.seo-block h2 {
font-size: 1.75rem;
margin-bottom: var(--space-5);
}
.seo-block p {
margin-bottom: var(--space-4);
line-height: 1.75;
}
.seo-block p:last-child {
margin-bottom: 0;
}
.seo-block h3 {
font-size: 1.25rem;
margin-top: var(--space-6);
margin-bottom: var(--space-3);
color: var(--color-gold-bright);
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
margin-top: var(--space-16);
padding-block: var(--space-10) var(--space-6);
background: var(--color-bg-elev);
border-top: 1px solid var(--color-border);
}
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
.site-footer__brand .site-logo {
margin-bottom: var(--space-4);
}
.site-footer__brand p {
color: var(--color-ink-3);
font-size: 0.9rem;
max-width: 320px;
}
.site-footer h4 {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-4);
}
.site-footer ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.site-footer a {
font-size: 0.9rem;
color: var(--color-ink-2);
}
.site-footer a:hover {
color: var(--color-gold-bright);
}
.site-footer__compliance {
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.compliance-badges {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.compliance-badges .badge-18 {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--color-ruby);
color: var(--color-ruby);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
}
.compliance-badges .org {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.compliance-badges .org:hover {
color: var(--color-gold);
border-color: var(--color-gold-deep);
}
.site-footer__legal {
font-size: 0.8rem;
color: var(--color-ink-muted);
}
.responsible-text {
font-size: 0.8rem;
color: var(--color-ink-3);
line-height: 1.6;
max-width: 720px;
margin-bottom: var(--space-5);
padding: var(--space-4);
border-left: 2px solid var(--color-gold-deep);
background: rgba(0, 0, 0, 0.2);
border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 900px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.site-footer__grid {
grid-template-columns: 1fr;
}
.site-footer__compliance {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
BLOG GRID
============================================================ */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 900px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.blog-grid {
grid-template-columns: 1fr;
}
}
.article-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition:
border-color 280ms var(--ease),
transform 280ms var(--ease);
text-decoration: none;
color: inherit;
}
.article-card:hover {
border-color: var(--color-gold-deep);
transform: translateY(-3px);
}
.article-card__image {
aspect-ratio: 1200 / 630;
background: var(--color-surface-2);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.article-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}
.article-card__meta {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-3);
}
.article-card__meta time {
color: var(--color-ink-muted);
}
.article-card__body {
padding: var(--space-5);
}
.article-card__title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.25;
color: var(--color-ink);
margin-bottom: var(--space-3);
letter-spacing: -0.01em;
}
.article-card__excerpt {
font-size: 0.9rem;
color: var(--color-ink-3);
line-height: 1.6;
}
.load-more-wrap {
display: flex;
justify-content: center;
margin-top: var(--space-10);
}
/* ============================================================
ARTICLE PAGE
============================================================ */
.article {
padding-block: var(--space-10);
}
.article__cover {
max-width: var(--container-narrow);
margin: 0 auto var(--space-10);
aspect-ratio: 1200 / 630;
background: var(--color-surface-2);
background-size: cover;
background-position: center;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
}
.prose {
max-width: var(--container-prose);
margin-inline: auto;
font-size: 1.05rem;
line-height: 1.75;
}
.prose h1 {
font-size: clamp(2rem, 3.5vw, 2.75rem);
margin-bottom: var(--space-6);
letter-spacing: -0.02em;
}
.prose h2 {
font-size: 1.65rem;
margin-top: var(--space-10);
margin-bottom: var(--space-4);
scroll-margin-top: 100px;
letter-spacing: -0.015em;
}
.prose h3 {
font-size: 1.3rem;
margin-top: var(--space-6);
margin-bottom: var(--space-3);
color: var(--color-gold-bright);
}
.prose p {
margin-bottom: var(--space-5);
color: var(--color-ink-2);
}
.prose ul,
.prose ol {
margin: 0 0 var(--space-5) var(--space-5);
color: var(--color-ink-2);
}
.prose ul li {
list-style: none;
position: relative;
padding-left: var(--space-5);
margin-bottom: var(--space-2);
}
.prose ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 1px;
background: var(--color-gold);
}
.prose ol {
list-style: decimal;
}
.prose ol li {
margin-bottom: var(--space-2);
padding-left: var(--space-2);
}
.prose ol li::marker {
color: var(--color-gold);
font-family: var(--font-mono);
}
.prose a {
color: var(--color-gold-bright);
border-bottom: 1px solid var(--color-gold-deep);
}
.prose a:hover {
color: var(--color-gold);
border-bottom-color: var(--color-gold);
}
.prose strong {
color: var(--color-ink);
font-weight: 600;
}
.prose blockquote {
margin: var(--space-6) 0;
padding: var(--space-4) var(--space-6);
border-left: 2px solid var(--color-gold);
background: var(--color-surface);
border-radius: 0 var(--radius) var(--radius) 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
color: var(--color-ink);
}
.article__tldr {
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-gold);
border-radius: var(--radius);
margin-bottom: var(--space-8);
}
.article__tldr .eyebrow {
margin-bottom: var(--space-2);
font-size: 0.7rem;
}
.article__tldr p {
color: var(--color-ink);
margin: 0;
}
.toc {
padding: var(--space-5) var(--space-6);
background: var(--color-bg-elev);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: var(--space-10);
}
.toc__title {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-3);
}
.toc ol {
counter-reset: toc;
list-style: none;
margin: 0;
padding: 0;
}
.toc ol li {
counter-increment: toc;
padding-left: 0;
margin-bottom: var(--space-2);
}
.toc ol li::before {
display: none;
}
.toc a {
display: inline-flex;
align-items: baseline;
gap: var(--space-3);
color: var(--color-ink-2);
font-size: 0.95rem;
}
.toc a::before {
content: counter(toc, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-gold);
}
.toc a:hover {
color: var(--color-gold-bright);
}
.article__cta {
margin: var(--space-10) auto;
max-width: var(--container-prose);
padding: var(--space-8);
background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.02));
border: 1px solid var(--color-gold-deep);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.article__cta::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, transparent, var(--color-gold-soft), transparent);
z-index: -1;
}
.article__cta h3 {
margin-bottom: var(--space-3);
font-family: var(--font-display);
}
.article__cta p {
color: var(--color-ink-2);
margin-bottom: var(--space-5);
max-width: 480px;
margin-inline: auto;
}
/* ============================================================
CONTACT PAGE
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-10);
max-width: var(--container-narrow);
margin-inline: auto;
}
@media (max-width: 800px) {
.contact-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field label {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
}
.field input,
.field textarea,
.field select {
font: inherit;
font-size: 0.95rem;
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-ink);
transition:
border-color 200ms var(--ease),
background 200ms var(--ease);
font-family: var(--font-body);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--color-gold);
background: var(--color-surface-2);
}
.field textarea {
min-height: 160px;
resize: vertical;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 480px) {
.field-row {
grid-template-columns: 1fr;
}
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.info-card {
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.info-card h4 {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-3);
}
.info-card p,
.info-card a {
color: var(--color-ink);
line-height: 1.7;
font-size: 0.95rem;
}
.info-card a:hover {
color: var(--color-gold-bright);
}
.social-links {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.social-links a {
width: 40px;
height: 40px;
border: 1px solid var(--color-border-strong);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--color-ink-2);
transition: all 220ms var(--ease);
}
.social-links a:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
/* FAQ */
.faq {
max-width: var(--container-narrow);
margin-inline: auto;
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--space-5) 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--color-ink);
transition: color 200ms var(--ease);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: var(--color-gold-bright);
}
.faq-item summary::after {
content: '+';
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--color-gold);
transition: transform 250ms var(--ease);
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item[open] summary {
color: var(--color-gold-bright);
}
.faq-item p {
padding-bottom: var(--space-5);
color: var(--color-ink-2);
max-width: 720px;
animation: faqOpen 300ms var(--ease-out);
}
@keyframes faqOpen {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================================
COOKIE CONSENT & AGE GATE
============================================================ */
.cookie-bar {
position: fixed;
inset: auto var(--space-5) var(--space-5) var(--space-5);
max-width: 480px;
margin-left: auto;
z-index: 300;
padding: var(--space-5);
background: var(--color-bg-elev);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: none;
animation: slideUp 400ms var(--ease-out);
}
.cookie-bar.is-visible {
display: block;
}
.cookie-bar p {
font-size: 0.85rem;
color: var(--color-ink-2);
margin-bottom: var(--space-4);
}
.cookie-bar p a {
color: var(--color-gold-bright);
border-bottom: 1px solid var(--color-gold-deep);
}
.cookie-bar__actions {
display: flex;
gap: var(--space-3);
}
.cookie-bar__actions .btn {
padding: var(--space-2) var(--space-4);
font-size: 0.75rem;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.age-gate {
position: fixed;
inset: 0;
z-index: 400;
background: rgba(10, 9, 8, 0.96);
backdrop-filter: blur(20px);
display: none;
align-items: center;
justify-content: center;
padding: var(--space-5);
}
.age-gate.is-visible {
display: flex;
animation: fadeIn 300ms var(--ease);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.age-gate__card {
max-width: 460px;
padding: var(--space-10) var(--space-8);
background: var(--color-bg-elev);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
}
.age-gate__icon {
width: 64px;
height: 64px;
border: 2px solid var(--color-gold);
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto var(--space-5);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--color-gold);
}
.age-gate h2 {
font-size: 1.75rem;
margin-bottom: var(--space-3);
}
.age-gate p {
color: var(--color-ink-2);
margin-bottom: var(--space-6);
font-size: 0.95rem;
}
.age-gate__actions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
.age-gate__legal {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
font-size: 0.75rem;
color: var(--color-ink-muted);
}
/* ============================================================
UTILITIES
============================================================ */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* ============================================================
AFFILIATE DISCLOSURE BANNER (above casino list)
============================================================ */
.disclosure {
max-width: var(--container-narrow);
margin: 0 auto var(--space-8);
padding: var(--space-3) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 2px solid var(--color-gold);
border-radius: var(--radius);
font-size: 0.82rem;
color: var(--color-ink-3);
line-height: 1.6;
display: flex;
align-items: center;
gap: var(--space-3);
}
.disclosure svg {
flex-shrink: 0;
color: var(--color-gold);
}
.disclosure strong {
color: var(--color-ink-2);
font-weight: 600;
}
.disclosure a {
color: var(--color-gold-bright);
border-bottom: 1px solid var(--color-gold-deep);
}
/* ============================================================
BREADCRUMBS (article page)
============================================================ */
.breadcrumbs {
max-width: var(--container-prose);
margin: 0 auto var(--space-6);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.breadcrumbs a {
color: var(--color-ink-3);
transition: color 200ms var(--ease);
}
.breadcrumbs a:hover {
color: var(--color-gold);
}
.breadcrumbs__sep {
color: var(--color-ink-muted);
}
.breadcrumbs [aria-current='page'] {
color: var(--color-ink-2);
}
/* ============================================================
AUTHOR BYLINE (article page)
============================================================ */
.byline {
max-width: var(--container-prose);
margin: 0 auto var(--space-8);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
display: grid;
grid-template-columns: 56px 1fr auto;
gap: var(--space-4);
align-items: center;
}
.byline__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-bg-elev);
border: 1px solid var(--color-gold-deep);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--color-gold);
overflow: hidden;
}
.byline__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.byline__name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 2px;
}
.byline__name a {
color: inherit;
}
.byline__name a:hover {
color: var(--color-gold-bright);
}
.byline__role {
font-size: 0.85rem;
color: var(--color-ink-3);
}
.byline__dates {
text-align: right;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-muted);
line-height: 1.8;
}
.byline__dates strong {
color: var(--color-gold);
font-weight: 500;
display: block;
}
@media (max-width: 560px) {
.byline {
grid-template-columns: 48px 1fr;
}
.byline__dates {
grid-column: 1 / -1;
text-align: left;
}
.byline__avatar {
width: 48px;
height: 48px;
}
}
/* ============================================================
RELATED ARTICLES (article page bottom)
============================================================ */
.related {
max-width: var(--container);
margin: var(--space-12) auto 0;
padding-top: var(--space-10);
border-top: 1px solid var(--color-border);
}
.related__header {
text-align: center;
margin-bottom: var(--space-8);
}
.related__header .eyebrow {
margin-bottom: var(--space-3);
}
.related__header h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 800px) {
.related__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* ============================================================
PAGINATION (blog SEO fallback)
============================================================ */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-8);
}
.pagination a,
.pagination span {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-3);
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--color-ink-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: all 200ms var(--ease);
}
.pagination a:hover {
color: var(--color-gold-bright);
border-color: var(--color-gold-deep);
}
.pagination [aria-current='page'] {
background: var(--color-surface-2);
color: var(--color-gold-bright);
border-color: var(--color-gold-deep);
}
.pagination__ellipsis {
border: none;
}
/* ============================================================
LATEST GUIDES (homepage internal-link block)
============================================================ */
.latest-guides {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
max-width: var(--container);
margin: 0 auto;
}
@media (max-width: 800px) {
.latest-guides {
grid-template-columns: 1fr;
}
}
/* ============================================================
ABOUT PAGE — team grid, methodology cards
============================================================ */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
max-width: var(--container);
margin: 0 auto;
}
.team-card {
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color 280ms var(--ease);
}
.team-card:hover {
border-color: var(--color-gold-deep);
}
.team-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--color-bg-elev);
border: 1px solid var(--color-gold-deep);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.6rem;
color: var(--color-gold);
margin-bottom: var(--space-4);
overflow: hidden;
}
.team-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-card__name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
color: var(--color-ink);
margin-bottom: var(--space-1);
}
.team-card__role {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-3);
}
.team-card__bio {
font-size: 0.9rem;
color: var(--color-ink-2);
line-height: 1.65;
margin-bottom: var(--space-4);
}
.team-card__credentials {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.team-card__credentials li {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-1) var(--space-2);
background: var(--color-gold-soft);
color: var(--color-gold-bright);
border: 1px solid rgba(201, 169, 97, 0.2);
border-radius: var(--radius-sm);
}
.team-card__links {
display: flex;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.team-card__links a {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-border-strong);
display: grid;
place-items: center;
color: var(--color-ink-3);
transition: all 220ms var(--ease);
}
.team-card__links a:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
/* Methodology checklist */
.methodology {
max-width: var(--container-narrow);
margin: 0 auto;
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
}
.methodology h3 {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 1.15rem;
margin-bottom: var(--space-3);
color: var(--color-gold-bright);
}
.methodology h3 span {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-gold);
letter-spacing: 0.1em;
}
.methodology__group {
margin-bottom: var(--space-6);
}
.methodology__group:last-child {
margin-bottom: 0;
}
.methodology__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3) var(--space-5);
margin-top: var(--space-4);
}
@media (max-width: 600px) {
.methodology__list {
grid-template-columns: 1fr;
}
}
.methodology__list li {
font-size: 0.92rem;
color: var(--color-ink-2);
position: relative;
padding-left: var(--space-5);
}
.methodology__list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-gold);
font-weight: 600;
}
/* ============================================================
ARTICLE COVER as ![]()
(replaces background-image approach)
============================================================ */
.article__cover-img {
display: block;
width: 100%;
max-width: var(--container-narrow);
margin: 0 auto var(--space-10);
aspect-ratio: 1200 / 630;
object-fit: cover;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface-2);
}
/* Override .article-card__image to work as wrapper around real ![]()
*/
.article-card__image-wrap {
aspect-ratio: 1200 / 630;
background: var(--color-surface-2);
position: relative;
overflow: hidden;
}
.article-card__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out);
}
.article-card:hover .article-card__image-wrap img {
transform: scale(1.04);
}
.article-card__image-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
pointer-events: none;
}
/* ============================================================
AUTHOR PROFILE PAGE
============================================================ */
.author-profile {
display: grid;
grid-template-columns: 340px 1fr;
gap: var(--space-10);
max-width: var(--container);
margin: 0 auto;
align-items: start;
}
@media (max-width: 900px) {
.author-profile {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}
/* Large editorial portrait — 4:5 aspect like a magazine masthead */
.author-profile__portrait {
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
border: 1px solid var(--color-gold-deep);
background: var(--color-surface-2);
overflow: hidden;
position: relative;
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
}
.author-profile__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.author-profile__portrait::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
pointer-events: none;
}
/* Corner ornament — same language as the hero ornaments */
.author-profile__portrait-frame {
position: absolute;
top: -1px;
right: -1px;
width: 32px;
height: 32px;
pointer-events: none;
color: var(--color-gold);
opacity: 0.6;
}
/* Stats card under the portrait */
.author-stats {
margin-top: var(--space-5);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
display: grid;
gap: var(--space-4);
}
.author-stats__item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
}
.author-stats__label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.author-stats__value {
color: var(--color-gold-bright);
font-size: 1.35rem;
font-family: var(--font-display);
font-weight: 500;
line-height: 1;
}
.author-stats__value--text {
font-size: 0.95rem;
color: var(--color-ink-2);
font-family: var(--font-body);
font-weight: 500;
text-align: right;
}
/* Right column body */
.author-profile__role {
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-4);
}
.author-profile__bio {
font-size: 1.05rem;
line-height: 1.8;
color: var(--color-ink-2);
margin-bottom: var(--space-7);
}
.author-profile__bio p {
margin-bottom: var(--space-4);
}
.author-profile__bio p:last-child {
margin-bottom: 0;
}
.author-profile__bio strong {
color: var(--color-ink);
font-weight: 600;
}
.author-profile__bio a {
color: var(--color-gold-bright);
border-bottom: 1px solid var(--color-gold-deep);
}
/* Credentials block */
.author-credentials {
margin-bottom: var(--space-7);
padding: var(--space-5) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.author-credentials__label,
.author-expertise__label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-muted);
margin-bottom: var(--space-3);
}
.author-credentials__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.author-credentials__list li {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-2) var(--space-3);
background: var(--color-gold-soft);
color: var(--color-gold-bright);
border: 1px solid rgba(201, 169, 97, 0.2);
border-radius: var(--radius-sm);
}
/* Expertise (clickable topic pills) */
.author-expertise {
margin-bottom: var(--space-7);
}
.author-expertise__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.author-expertise__list a {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: 999px;
font-size: 0.85rem;
color: var(--color-ink-2);
transition: all 220ms var(--ease);
}
.author-expertise__list a:hover {
border-color: var(--color-gold);
color: var(--color-gold-bright);
background: var(--color-gold-soft);
}
/* Contact row */
.author-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.author-contact__group {
display: flex;
flex-direction: column;
gap: 4px;
}
.author-contact__label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.author-contact__email {
color: var(--color-gold-bright);
border-bottom: 1px solid var(--color-gold-deep);
font-size: 0.95rem;
font-weight: 500;
}
.author-contact__email:hover {
color: var(--color-gold);
}
.author-contact__social {
display: flex;
gap: var(--space-2);
margin-left: auto;
}
.author-contact__social a {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--color-border-strong);
display: grid;
place-items: center;
color: var(--color-ink-3);
transition: all 220ms var(--ease);
}
.author-contact__social a:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
@media (max-width: 560px) {
.author-contact__social {
margin-left: 0;
width: 100%;
}
}
/* Articles section uses existing .blog-grid + .article-card */