/* TedRants Cards -- landing page.
   Palette and type straight from brand/tedrants-cards-brand-guide.md.

   No web fonts on purpose. The guide sanctions Georgia as a Cinzel
   fallback, and Georgia ships on every Mac, Windows and iOS device -- so
   headings render instantly with zero network requests. A hosted font
   would cost a round trip, a render delay, and (with Google Fonts) a
   third-party request leaking visitor data. "Must load fast" wins.

   Mobile-first: base styles target a phone, one breakpoint scales up. */

:root {
    --onyx: #0B0B0D;
    --charcoal: #17181B;
    --silver: #C9CED3;
    --bright-silver: #E8EAED;
    --steel: #6B7278;

    --serif: Georgia, "Times New Roman", Times, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
    margin: 0;
    background: var(--onyx);
    color: var(--silver);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--serif);
    color: var(--bright-silver);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

h1 { font-size: 1.9rem; margin: 0.6rem 0 1rem; }
h2 { font-size: 1.5rem; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

p { margin: 0 0 1rem; }

a { color: var(--bright-silver); }

/* Tracked-out uppercase serif, per the brand guide's small-label rule. */
.tagline {
    font-family: var(--serif);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.72rem;
    color: var(--steel);
    margin: 0;
}

.hero {
    text-align: center;
    padding: 3.5rem 1.25rem 3rem;
    max-width: 720px;
    margin: 0 auto;
}

/* The mark is the trust signal on a page whose whole job is looking like a
   real dealer, so it earns real space -- but not more than the headline. At
   520px it was 72% of the 720px content column and read as the subject of
   the page. 380 keeps it prominent and lets the headline lead. Capped at
   80vw so it never crowds the edges on a small phone. */
.lockup {
    width: min(380px, 80vw);
    height: auto;
    display: block;
    margin: 0 auto 1.75rem;
}

/* Each half of the headline is its own line, at every width. Blocks rather
   than a <br> so the break is a layout rule, not markup. Measured on a
   375px phone: letting it reflow freely costs the same three lines but
   breaks mid-phrase, so the forced split is strictly better. */
.hero h1 span { display: block; }

.lede {
    font-size: 1.05rem;
    max-width: 34rem;
    margin: 0 auto 0.35rem;
}

/* Last lede line carries the gap down to the buttons. */
.lede:last-of-type { margin-bottom: 1.75rem; }

.cta-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* min-height 48px: comfortably above the ~44px minimum tap target both
   Apple and Google publish, so these don't get mis-tapped on a phone. */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--steel);
    border-radius: 3px;
    color: var(--bright-silver);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta:hover, .cta:focus-visible {
    background: var(--charcoal);
    border-color: var(--silver);
}

.cta-primary {
    background: var(--bright-silver);
    color: var(--onyx);
    border-color: var(--bright-silver);
    font-weight: 600;
}

.cta-primary:hover, .cta-primary:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--onyx);
}

/* Visible keyboard focus -- removing outlines without replacing them is a
   real accessibility failure, not a style choice. */
a:focus-visible {
    outline: 2px solid var(--silver);
    outline-offset: 3px;
}

/* Everything centred, per Ted. Some blocks were left-aligned inside a
   centred container, which read as right-justified against the empty
   space next to them. */
.band {
    padding: 2.75rem 1.25rem;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* --- Platform ratings --- */
.ratings { max-width: 900px; }

.rating-row {
    display: grid;
    gap: 1rem;
}

.rating-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.5rem 1.25rem;
    background: var(--charcoal);
    border: 1px solid rgba(107, 114, 120, 0.35);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.rating-card:hover, .rating-card:focus-visible { border-color: var(--silver); }

/* Both platform marks now sit directly on Onyx, each using its own brand's
   sanctioned dark-background variant. No chip, no container, nothing
   recoloured. See the note in index.html for where each file came from.

   The holders still share one FIXED box. The two marks have very different
   aspect ratios (Whatnot is a wide horizontal lockup, TCGplayer is a stacked
   card-fan-over-wordmark), so without a fixed box the holders came out 58px
   and 75px tall and every row beneath them -- stars, score, detail -- sat at
   a different height on each card. */
.logo-bare {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    height: 76px;
    width: 220px;
    box-sizing: border-box;
}

/* max-height keeps a tall logo from bursting the fixed box. */
.logo-bare img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* Matched by optical area, not by pixel width. Whatnot renders 220x43
   (9,460 sq px). TCGplayer's stacked lockup at full box height would be
   181x76 (13,756), which reads as roughly 45% heavier sitting next to it.
   Capping height at 62px puts it at 148x62 (9,176), within 3% of Whatnot. */
.logo-tcg img { max-height: 62px; }

.stars {
    color: var(--bright-silver);
    font-size: 1.3rem;
    letter-spacing: 0.12em;
}

.rating-score {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--bright-silver);
}

.rating-detail { font-size: 0.86rem; color: var(--silver); }

.rating-link {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--steel);
    margin-top: 0.4rem;
}

.band-alt {
    background: var(--charcoal);
    max-width: none;
}

.band-alt > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* "What I do" is one combined, centred block (was two side-by-side
   columns) with reviews sitting alongside it on wider screens. */
.what-i-do { display: grid; gap: 2.5rem; }
.what-text { text-align: center; }

/* The reviews heading is a plain h2 now, same size and colour as "What I
   do" -- it was a smaller, greyer style before, which made the two halves
   of this section read as unequal. */

/* All reviews occupy the same single grid cell, so they stack on top of one
   another and the container sizes itself to whichever quote is tallest.
   That matters because the tallest quote changes with column width: the
   longest one needs 18rem in a 352px column but 22rem in a 267px column at
   the breakpoint. A hardcoded min-height was right at exactly one viewport
   and clipped or wasted space at every other. This has no magic number and
   nothing to re-tune when the reviews change. */
.review-stack {
    display: grid;
}

.review {
    grid-area: 1 / 1;
    margin: 0;
    padding: 1.5rem;
    background: var(--charcoal);
    border: 1px solid rgba(107, 114, 120, 0.35);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    opacity: 0;
    /* 63 reviews x 10s = 630s full cycle. Delay comes from the --i index set
       inline on each figure, so adding or removing a review means renumbering
       and updating REVIEW_COUNT below, not rewriting a stack of nth-child
       rules. */
    animation: review-cycle 630s infinite;
    animation-delay: calc(var(--i) * 10s);
}

.review blockquote {
    margin: 0 0 0.9rem;
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--bright-silver);
}

/* Source is called out explicitly -- a review is only worth anything if
   the reader can see where it came from. */
.review figcaption {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--steel);
}

/* REVIEW_COUNT = 63, cycle 630s, so each review owns 1/63 of the timeline
   = 1.587% = 10 seconds. Fades in over 0.4s, holds 9.2s, fades out, then
   waits out the other sixty-two. Change the review count and all four
   percentages have to change with it: one slot is 100/count percent, and
   the fade is 0.4s expressed as a percentage of the new cycle length. */
@keyframes review-cycle {
    0%      { opacity: 0; }
    0.063%  { opacity: 1; }
    1.524%  { opacity: 1; }
    1.587%  { opacity: 0; }
    100%    { opacity: 0; }
}

.stream-time {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--bright-silver);
}

footer {
    text-align: center;
    padding: 3rem 1.25rem 3.5rem;
    border-top: 1px solid rgba(107, 114, 120, 0.25);
    font-size: 0.9rem;
}

/* Back to the icon mark. The full lockup already opens the page at 380px;
   repeating the wordmark and tagline at 340px down here is the same ink
   twice. The hexagon alone signs the page off without restating anything. */
.footer-mark {
    width: 96px;
    height: auto;
    opacity: 0.9;
    margin: 0 auto 1.25rem;
    display: block;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 1rem 0 0;
    font-size: 0.86rem;
}

.fine {
    color: var(--steel);
    font-size: 0.76rem;
    max-width: 34rem;
    margin: 1.5rem auto 0;
    line-height: 1.5;
}

/* Sections are centered on mobile for balance; on wider screens the long
   prose blocks read better left-aligned, so only the hero stays centered. */
@media (min-width: 46em) {
    body { font-size: 18px; }
    h1 { font-size: 2.6rem; }
    h2 { font-size: 1.8rem; }

    .hero { padding: 5rem 2rem 4rem; }
    .band { padding: 4rem 2rem; }

    /* Reviews to the right of the combined block, per Ted. Slightly
       narrower than the prose so the quotes read as a supporting panel
       rather than competing with the main copy. */
    .what-i-do {
        grid-template-columns: 1.35fr 1fr;
        gap: 3rem;
        align-items: center;
        max-width: 940px;
    }

    .rating-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

    /* These were left-aligned on desktop before. Ted asked for everything
       centred, so the alignment override is gone entirely. */
    #stream .cta, #shop .cta, #sell .cta { margin-top: 0.5rem; }
}

/* Auto-advancing text is a real accessibility problem -- it can move on
   before someone has finished reading, and it's a known trigger for
   vestibular disorders. Under reduced-motion the rotation stops entirely
   and every review is shown stacked and readable instead. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }

    /* grid-area: auto returns each review to its own row instead of all
       sharing cell 1/1, so they read as a normal stacked list. */
    .review-stack { gap: 1rem; }
    .review {
        grid-area: auto;
        opacity: 1;
        animation: none;
    }

    /* Show a sample rather than all 63. Stacking every one would add roughly
       15,000px to the page for the people least able to deal with it, and
       the rating card above already links to the full review list on
       Whatnot. Eight is enough to make the point. */
    .review:nth-child(n+9) { display: none; }
}