/* =====================================================================
   redcarpet.css - /red-carpet
   =====================================================================

   Scoped entirely to .rc-* so it cannot reach the site header, footer or
   nav. Everything else on the page borrows the shared .btn from
   base.css rather than restyling a button that already exists in three
   variants.

   The palette is the site's own tokens - --accent is the festival red
   and is what this page leans on, because the event is literally named
   after the colour. No new colours are introduced.
   ===================================================================== */

/* ---- Hero ---- */

.rc-hero {
    position: relative;
    /* 118px at the top, not 64. .site-header is position:fixed, so it
       sits OVER the first thing on the page - the kicker was tucked
       behind it. 110px is what .main-hero-content already uses to clear
       it; the extra 8 is so the kicker is not touching the underside of
       the header. */
    padding: 118px 20px 56px;
    /* A single deep-red wash rather than a photograph. There is no
       licensed image of this event that works at every viewport, and a
       hero that 404s or letterboxes is worse than one that does not
       try. The gradient does the work the carpet would. */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(214, 0, 0, .30), transparent 62%),
        linear-gradient(180deg, #170607 0%, var(--bg, #0b0b0b) 88%);
    border-bottom: 1px solid var(--line, #222);
    overflow: hidden;
}

.rc-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.rc-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent, #d60000);
}

.rc-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(34px, 7vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.rc-lede {
    margin: 0 auto 28px;
    max-width: 620px;
    font-size: clamp(16px, 2.1vw, 18px);
    line-height: 1.62;
    color: var(--muted2, #cfcfcf);
}

/* ---- The facts, as a definition list ----
   A <dl> because that is what "When: ... Where: ..." is, and it is what
   lets a screen reader read the label with its value instead of six
   loose lines. */
.rc-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    margin: 0 0 28px;
}

.rc-facts > div {
    padding: 12px 18px;
    border: 1px solid var(--line, #222);
    border-radius: var(--radius, 14px);
    background: var(--card-bg, rgba(255, 255, 255, .03));
    text-align: left;
    min-width: 0;
}

.rc-facts dt {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted, #aaa);
    margin-bottom: 3px;
}

.rc-facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.rc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* Shown where the Register button would be, when there is no
   registration link yet. Deliberately not styled as a button - it is a
   sentence, and dressing it up as a control people cannot press is the
   thing this replaces. */
.rc-nolink {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted2, #cfcfcf);
}
.rc-nolink a { color: var(--accent, #d60000); font-weight: 700; }

/* ---- Body ---- */

.rc-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 8px 20px 64px;
}

.rc-section { padding: 34px 0 0; }

.rc-section h2 {
    margin: 0 0 14px;
    font-size: clamp(21px, 3.4vw, 27px);
    letter-spacing: -0.01em;
}

.rc-section p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted2, #cfcfcf);
}

.rc-note {
    font-size: 14px !important;
    color: var(--muted, #aaa) !important;
}
.rc-note a { color: var(--muted2, #cfcfcf); text-decoration: underline; }

.rc-address {
    font-size: 16px;
    line-height: 1.7;
}
.rc-address strong { color: var(--text, #fff); }

/* ---- The running order ----
   Numbered, because the order is the information. counter-reset on the
   list and a counter on each item rather than the browser's own markers,
   so the number can sit in its own column and the text can wrap under
   itself rather than under the digit. */
.rc-run {
    list-style: none;
    counter-reset: rc-step;
    margin: 0 0 14px;
    padding: 0;
}

.rc-run li {
    counter-increment: rc-step;
    position: relative;
    padding: 0 0 18px 46px;
    border-left: 1px solid var(--line, #222);
    margin-left: 13px;
}

.rc-run li:last-child { border-left-color: transparent; padding-bottom: 0; }

.rc-run li::before {
    content: counter(rc-step);
    position: absolute;
    left: -13px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent, #d60000);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.rc-run-label {
    display: block;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 3px;
    line-height: 1.3;
}

.rc-run-text {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted2, #cfcfcf);
}

/* ---- Guests and presenters ---- */

.rc-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* auto-FILL, so two guests are two normal cards rather than two
       half-page ones. Same reasoning as the film photo gallery. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.rc-people li {
    padding: 14px 16px;
    border: 1px solid var(--line, #222);
    border-radius: var(--radius, 14px);
    background: var(--card-bg, rgba(255, 255, 255, .03));
}

.rc-person-name {
    display: block;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.3;
}

.rc-person-role {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted, #aaa);
}

/* ---- The closing call to action ---- */

.rc-cta {
    margin-top: 34px;
    padding: 28px 24px;
    border: 1px solid rgba(214, 0, 0, .35);
    border-radius: var(--radius-lg, 20px);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(214, 0, 0, .16), transparent 70%),
        var(--card-bg, rgba(255, 255, 255, .03));
}
.rc-cta h2 { margin-top: 0; }

@media (max-width: 560px) {
    .rc-hero { padding: 96px 18px 40px; }
    .rc-facts { flex-direction: column; }
    .rc-facts > div { width: 100%; }
    .rc-actions { flex-direction: column; align-items: stretch; }
    .rc-actions .btn { justify-content: center; }
}

/* The page is an invitation with a date, a place and a time on it, so it
   is one of the few on this site somebody will actually print. The
   gradients and the dark background are what a printer makes a mess of.
*/
@media print {
    .rc-hero {
        background: none;
        border-bottom: 1px solid #999;
        padding: 0 0 18px;
    }
    .rc-hero-inner, .rc-body { max-width: none; }
    .rc-kicker, .rc-run li::before { color: #000; background: none; }
    .rc-run li::before { border: 1px solid #000; color: #000; }
    .rc-facts > div, .rc-people li, .rc-cta { border-color: #999; background: none; }
    .rc-actions, .rc-cta .btn { display: none; }
}