/* All decoration is abstract; brand text is a replaceable logo placeholder. */
:root {
    color-scheme: dark;
    --background: #101211;
    --surface: #191c19;
    --text: #f5f6ed;
    --muted: #a7afa4;
    --accent: #c7fa72;
    font-family: Arial, Helvetica, sans-serif;
    font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--background); color: var(--text); }
a { color: inherit; }
::selection { background: var(--accent); color: var(--background); }
.shell { width: min(1400px, calc(100% - 6rem)); margin: 0 auto; }
.skip-link { position: absolute; left: 1rem; top: -10rem; z-index: 10; padding: 1rem; background: var(--accent); color: #101211; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #343a31; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 900; font-size: 1.3rem; letter-spacing: -.055em; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; background: var(--accent); color: #101211; border-radius: 11px 2px 11px 2px; font-size: 1rem; font-weight: 900; letter-spacing: -.07em; }
.header-link { text-decoration: none; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.header-link:hover { color: var(--accent); }
.hero { position: relative; padding: 58px 0 52px; }
.eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0 0 20px; color: var(--accent); font-size: .875rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: currentColor; }
.hero h1 { margin: 0; font-size: clamp(4rem, 11.8vw, 10.5rem); font-weight: 900; line-height: .9; letter-spacing: -.075em; }
.hero h1 span { display: inline-block; color: var(--accent); font-style: italic; padding-right: .12em; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 28px; }
.hero-bottom p { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--muted); }
.hero-bottom p strong { color: var(--text); font-weight: 400; }
.network-count { flex-shrink: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .875rem; }
.network-count strong { color: var(--accent); font-size: 2rem; letter-spacing: -.08em; }
.network-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: 0 0 22px; padding-top: 26px; border-top: 1px solid #343a31; }
.network-heading h2 { margin: 0; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.network-heading p { margin: 0; color: var(--muted); font-size: .875rem; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.site-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; border-radius: 16px; border: 1px solid #343a31; background: var(--surface); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.site-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 15px 35px #0005; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.card-art { min-height: 225px; position: relative; display: flex; align-items: center; justify-content: center; padding: 34px 18px; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--card-color); }
.card-art::before { content: ''; position: absolute; z-index: -1; width: 320px; height: 320px; border: 1px solid currentColor; border-radius: 50%; opacity: .13; box-shadow: 0 0 0 38px currentColor, 0 0 0 39px var(--card-color), 0 0 0 77px currentColor, 0 0 0 78px var(--card-color); transform: translate(45%, 30%); }
.card-number { position: absolute; top: 17px; left: 18px; font-family: monospace; font-size: .875rem; opacity: .65; }
.card-category { position: absolute; bottom: 17px; left: 18px; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.wordmark { text-align: center; font-weight: 900; line-height: .92; letter-spacing: -.055em; font-size: clamp(2rem, 2.8vw, 2.75rem); }
.wordmark span { display: block; }
.wordmark small { display: block; font-size: .875rem; letter-spacing: .18em; margin-bottom: .7rem; }
.logo-image { width: 100%; max-width: 245px; height: 120px; object-fit: contain; }
.mortys { --card-color: #b9ed74; --ink: #244024; }
.mortys .wordmark { font-style: italic; transform: rotate(-5deg); font-size: 3.1rem; }
.tor { --card-color: #1c2839; --ink: #eac98a; }
.tor .wordmark { font-family: Georgia, serif; font-size: clamp(1.65rem, 2.35vw, 2.5rem); font-weight: 700; }
.pegs { --card-color: #e3b8ec; --ink: #522b65; }
.pegs .wordmark { font-family: Georgia, serif; font-size: 2.65rem; }
.movies { --card-color: #f2b871; --ink: #61381f; }
.movies .wordmark { text-transform: uppercase; font-size: 2.7rem; letter-spacing: -.045em; }
.golf { --card-color: #7cc5ad; --ink: #163c34; }
.golf .wordmark { font-size: 2.4rem; font-style: italic; }
.codenames { --card-color: #e77970; --ink: #432b28; }
.codenames .wordmark { font-family: monospace; font-size: 2rem; text-transform: uppercase; letter-spacing: -.075em; }
.emblem { --card-color: #8faae3; --ink: #1d305f; }
.emblem .wordmark { font-family: Georgia, serif; font-size: 2.4rem; text-transform: uppercase; }
.depth { --card-color: #d5d7c5; --ink: #353b28; }
.depth .wordmark { font-size: 2.8rem; font-style: italic; text-transform: uppercase; }
.card-content { padding: 22px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.card-content h3 { margin: 0 0 8px; font-size: 1.125rem; letter-spacing: -.025em; }
.card-content p { margin: 0 0 20px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: monospace; font-size: .875rem; color: var(--text); }
.visit-label { font-family: Arial, Helvetica, sans-serif; font-size: .75rem; color: var(--muted); border: 1px solid #444b3f; border-radius: 5px; padding: 4px 7px; }
.site-card:hover .visit-label { background: var(--accent); border-color: var(--accent); color: #101211; }
.site-footer { margin-top: 60px; border-top: 1px solid #343a31; padding: 30px 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.footer-left { display: flex; gap: 1.4rem; align-items: center; }
.footer-left p { color: var(--muted); font-size: .875rem; margin: 0; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { font-size: .875rem; text-decoration: none; color: var(--muted); }
.footer-links a:hover, .footer-links a[aria-current='page'] { color: var(--accent); }
.legal-main { max-width: 820px; margin: 0 auto; padding: 70px 0 10px; }
.legal-main h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -.06em; line-height: 1.05; margin: 0 0 22px; }
.legal-main .effective { color: var(--accent); font-size: .875rem; margin-bottom: 35px; }
.legal-main h2 { margin: 2.25rem 0 .75rem; font-size: 1.3rem; letter-spacing: -.025em; }
.legal-main p, .legal-main li { font-size: 1rem; color: #bec5b9; line-height: 1.8; }
.legal-main ul { padding-left: 1.5rem; }
.legal-main a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
.legal-intro { border-left: 3px solid var(--accent); padding-left: 22px; }
@media (min-width: 1700px) { .hero h1 { font-size: 11rem; } }
@media (max-width: 1100px) {
    .shell { width: calc(100% - 3rem); }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wordmark { font-size: 3rem; }
    .card-art { min-height: 250px; }
    .site-footer, .footer-left { align-items: flex-start; }
    .footer-left { flex-direction: column; gap: 1rem; }
}
@media (max-width: 600px) {
    .shell { width: calc(100% - 2rem); }
    .site-header { min-height: 80px; }
    .header-link { font-size: .75rem; }
    .hero { padding: 40px 0 30px; }
    .hero h1 { font-size: clamp(3.25rem, 15vw, 5.5rem); }
    .hero-bottom { align-items: flex-start; gap: 1.5rem; flex-direction: column; margin-top: 24px; }
    .hero-bottom p { font-size: 1rem; }
    .network-count strong { font-size: 1.5rem; }
    .network-heading p { display: none; }
    .card-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .card-art { min-height: 230px; }
    .site-footer { flex-direction: column; gap: 1.5rem; margin-top: 40px; }
    .legal-main { padding-top: 45px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .site-card { transition: none; }
    .site-card:hover { transform: none; }
}