/* The whole of rifthub.uk: the landing page and the three legal pages share this
   one sheet, so a change to the look lands on all four at once. Loaded from
   /assets, which the site's Content-Security-Policy allows as `style-src 'self'`.

   No JavaScript is served anywhere on this site, and the policy forbids it, so
   anything interactive here is CSS only. */

:root {
    color-scheme: dark;
    --bg: #0b0d12;
    --surface: #12151d;
    --border: #232838;
    --text: #eef1f7;
    --muted: #9aa3b8;
    /* Links and the hero wash: lifted off the brand blue below so it stays
       readable as text on the dark background. */
    --accent: #6c8cff;
    /* The app icon's own blue, which is also the background of the App Store
       screenshots further down the landing page. Buttons wear it so the page and
       the pictures in it are the same product. */
    --brand: #346df1;
    --brand-ink: #ffffff;
    --radius: 14px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

img {
    max-width: 100%;
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Running text sets its own measure: 1120px is a comfortable grid, not a
   comfortable line length, so every page that is mostly prose narrows to this. */
.wrap.narrow {
    max-width: 760px;
}

/* Headers ------------------------------------------------------------------ */

header.hero,
header.page {
    background: radial-gradient(1000px 480px at 50% -160px, rgba(108, 140, 255, .22), transparent 70%);
    border-bottom: 1px solid var(--border);
}

/* The landing page: everything centred under the app icon. */
header.hero {
    padding: 72px 0 56px;
    text-align: center;
}

/* Every other page: a title, left aligned, under the same brand row. */
header.page {
    padding: 56px 0 40px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
    text-decoration: none;
}

.brand img {
    display: block;
}

.app-icon {
    display: block;
    width: 104px;
    height: 104px;
    margin: 0 auto 18px;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5));
}

h1 {
    font-size: clamp(1.9rem, 5.5vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 12px;
}

h2 {
    font-size: 1.4rem;
    margin: 0 0 20px;
}

h3 {
    font-size: 1rem;
    margin: 0 0 6px;
}

.tagline {
    max-width: 34em;
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: 1.1rem;
}

header.page .tagline {
    margin-left: 0;
}

/* Centring the measure is a header effect. In a section the paragraph has to
   start where its own heading starts, or it reads as an indented quote. */
main .tagline {
    margin-inline: 0;
}

/* The dateline under a legal page's title. */
.meta {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
}

/* Riot's attribution line. It sits in its own band directly under the hero
   rather than only in the footer, because the policy asks for it where a visitor
   actually reads it, and nobody scrolls a landing page to the end for it. */
.legal-notice {
    margin: 0;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
    text-align: center;
}

/* Calls to action ---------------------------------------------------------- */

.cta {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 12px;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 650;
    text-decoration: none;
}

.store-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Follows Apple's black "Download on the App Store" badge artwork. */
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 20px 0 16px;
    border: 1px solid #a6a6a6;
    border-radius: 12px;
    background: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    transition: border-color .15s ease;
}

.app-store-badge:hover,
.app-store-badge:focus-visible {
    border-color: #ffffff;
}

.app-store-logo {
    width: 30px;
    height: 30px;
    fill: currentColor;
    flex: none;
    margin-top: -3px;
}

.app-store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.app-store-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
}

.app-store-name {
    margin-top: 2px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.cta-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .9rem;
}

/* Sections and cards ------------------------------------------------------- */

section {
    padding: 56px 0;
    border-bottom: 1px solid var(--border);
}

/* The footer draws its own rule, so the last section must not draw a second. */
main > section:last-of-type {
    border-bottom: 0;
}

/* 400px is what makes four cards two even rows at the 1120px measure rather than
   a row of three and a lonely fourth. */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* One column, same gap: for cards that read as a list rather than as a grid. */
.stack {
    display: grid;
    gap: 16px;
}

.card,
.note,
.intro {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.card p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
}

/* Numbered steps ---------------------------------------------------------- */

/* The step list on the beta pages: a numbered badge beside each card, so the
   order is what the eye reads first and each card keeps a single button. */
.steps {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: start;
}

.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 700;
}

.steps .card {
    min-width: 0;
}

.steps .cta {
    margin-top: 14px;
}

/* Screenshots -------------------------------------------------------------- */

/* The App Store screenshots, scrolled horizontally. Each already carries its
   own title, drawn into the picture by fastlane, which is why nothing here
   captions them: the caption is the alt text, and it is the same sentence. */
/* The gallery is the one band that is not held to the text measure: it runs the
   full width so that on a wide display all five shots fit and centre, which is
   what keeps the page symmetrical. `safe` is what makes that legal: plain
   `center` would push the overflow past the scroll origin on a narrow screen and
   the first shot could never be scrolled back to. Overflowing, it falls back to
   starting at the left edge, and the heading above is centred so nothing looks
   out of line either way. */
.shots {
    display: flex;
    justify-content: safe center;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 8px;
    scrollbar-width: none;
}

.shots::-webkit-scrollbar {
    display: none;
}

/* Five shots at this width plus their gaps come to 1364px, so they fit without
   scrolling from roughly a 1440px display upwards. */
.shots img {
    width: 260px;
    height: auto;
    flex: none;
    scroll-snap-align: center;
    border-radius: var(--radius);
}

.gallery h2 {
    text-align: center;
}

/* Legal pages -------------------------------------------------------------- */

/* padding-block, not padding: this element is also a .wrap, and the shorthand
   would drop the horizontal padding that keeps the text off the screen edge. */
main.legal {
    padding-block: 8px 40px;
}

main.legal section {
    padding: 32px 0 0;
    border-bottom: 0;
}

main.legal h2 {
    font-size: 1.2rem;
    margin: 0 0 12px;
}

main.legal h3 {
    margin: 20px 0 6px;
}

main.legal p {
    margin: 0 0 12px;
}

main.legal ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

main.legal li {
    margin-bottom: 6px;
}

main.legal .intro {
    margin: 24px 0 0;
    font-size: .95rem;
    color: var(--muted);
}

main.legal .note {
    margin-top: 8px;
}

main.legal .note p:last-child {
    margin-bottom: 0;
}

.muted {
    color: var(--muted);
}

/* Footer ------------------------------------------------------------------- */

footer {
    padding: 32px 0 48px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}

footer a {
    color: var(--muted);
}