/* "Rinc Productions Home" option 2c (Colophon) from Claude Design: dark
   ground, a gold outlined "R" behind everything, platforms as outlined tags.
   Colors are the Classical design system's tokens. Sizes run between the
   design's phone (390px) and desktop (1200px) frames. */
:root {
    --bg: #17150f;
    --text: #f8f4f4;
    --text-muted: #d7d3d3;
    --text-faint: #bab6b6;
    --gold-200: #ffe3bf;
    --gold-300: #facb8d;
    --gold-400: #e1ad66;
    --line: rgba(255, 255, 255, 0.12);
    --font-heading: "Cormorant Garamond", Georgia, serif;
    --font-body: "Lora", Georgia, serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

/* Everything sits above the ghost R. */
.page > :not(.ghost-r) {
    position: relative;
}

.ghost-r {
    position: absolute;
    right: -0.05em;
    bottom: -0.2em;
    font: italic 300 clamp(440px, 68vw, 820px) / 1 var(--font-heading);
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-400);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 1vw, 12px);
    margin: 0;
    padding: clamp(20px, 2.2vw, 26px) 18px;
    list-style: none;
    border-bottom: 1px solid var(--line);
}

.platforms li {
    padding: clamp(8px, 0.8vw, 9px) clamp(12px, 1.4vw, 16px);
    font: 500 clamp(10px, 1vw, 12px) / 1 var(--font-body);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-200);
    border: 1px solid var(--gold-400);
    border-radius: 999px;
}

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(22px, 2.4vw, 28px);
    max-width: 900px;
    padding: clamp(44px, 6.7vw, 80px) clamp(24px, 6vw, 72px);
}

h1 {
    margin: 0;
    font: 300 clamp(50px, 7.3vw, 88px) / 1 var(--font-heading);
}

.hero p {
    margin: 0;
    max-width: 480px;
    font: 400 clamp(16px, 1.5vw, 18px) / 1.6 var(--font-body);
    color: var(--text-muted);
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: clamp(22px, 2.3vw, 28px) clamp(24px, 6vw, 72px);
}

.copyright {
    font: 400 13px / 1 var(--font-body);
    color: var(--text-faint);
}

.wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* The negative right margins cancel the trailing letter-spacing so the
   letters line up flush right. */
.wordmark-rinc {
    margin-right: -0.32em;
    font: 300 clamp(28px, 3.3vw, 40px) / 0.9 var(--font-heading);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.wordmark-productions {
    margin-right: -0.44em;
    font: 500 clamp(8px, 0.85vw, 10px) / 1 var(--font-body);
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--gold-300);
}

/* Phones: the design's mobile frame has no copyright line. */
@media (max-width: 600px) {
    .copyright {
        display: none;
    }

    footer {
        justify-content: flex-end;
    }
}