/* ==========================================================================
   F1 Bite — sister title to Eddsport.

   Same design system as eddsport-redesign (tokens, type scale, spacing,
   hairlines, dark bands) so the two read as one family. The single
   difference is the house accent: amber instead of red, taken from the
   "F1 BITE" lockup on the Eddsport gateway card.

   If you change a shared component here, change it in eddsport too — the
   two stylesheets are deliberate copies, not a shared file, because the
   sites deploy independently.
   ========================================================================== */

:root {
    /* Surfaces */
    --ed-bg:         #ffffff;
    --ed-bg-alt:     #f6f7f9;
    --ed-card:       #ffffff;
    --ed-dark:       #101318;
    --ed-dark-2:     #1a1f27;

    /* Text */
    --ed-ink:        #101318;
    --ed-ink-soft:   #5c6572;
    --ed-ink-faint:  #8b93a1;

    /* Lines */
    --ed-line:       #e4e7ec;
    --ed-line-dark:  #2b323d;

    /* House accent — the amber from the Eddsport F1 Bite card.
       Everything reads var(--sec, var(--ed-accent)), so there's no
       per-section colour here the way Eddsport has: one title, one accent. */
    --ed-accent:     #a85908;
    --ed-accent-lit: #c26a0c;   /* slightly brighter, for use on dark */

    --ed-radius:     10px;
    --ed-shadow:     0 1px 2px rgba(16, 19, 24, .05),
                     0 8px 24px rgba(16, 19, 24, .06);
    --ed-shadow-lg:  0 2px 4px rgba(16, 19, 24, .06),
                     0 16px 40px rgba(16, 19, 24, .10);

    --bs-body-bg:    var(--ed-bg);
    --bs-body-color: var(--ed-ink);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

body {
    background: var(--ed-bg);
    color: var(--ed-ink);
    font-family: 'Spectral', Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.wordmark {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.04;
}

a {
    color: var(--ed-accent);
    text-decoration: none;
}

a:hover {
    color: var(--ed-ink);
}

::selection {
    background: var(--ed-ink);
    color: #fff;
}

.eyebrow {
    display: block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin-bottom: .7rem;
}

/* --- Wordmark -------------------------------------------------------------
   "F1 BITE" with BITE picked out in amber — the same lockup as the card on
   the Eddsport gateway, so arriving here feels like the same publisher.
   ------------------------------------------------------------------------- */

.wordmark {
    display: inline-block;
    font-size: 1.7rem;
    letter-spacing: .02em;
    color: var(--ed-ink);
    line-height: 1;
}

.wordmark:hover {
    color: var(--ed-ink);
}

.wordmark__s {
    color: var(--ed-accent);
}

/* block, not inline-block — otherwise it flows alongside the .eyebrow */
.wordmark--hero {
    display: block;
    font-size: clamp(3.2rem, 13vw, 9rem);
    letter-spacing: -.01em;
    margin: 0;
}

.wordmark--hero .wordmark__s {
    color: var(--ed-accent-lit);
}

.wordmark--footer {
    font-size: 2rem;
    color: #fff;
}

.wordmark--footer .wordmark__s {
    color: var(--ed-accent-lit);
}

/* --- Navbar --------------------------------------------------------------- */

.ed-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ed-line);
}

.ed-nav .nav-link {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
    padding: .45rem .9rem;
}

.ed-nav .nav-link:hover,
.ed-nav .nav-link.active {
    color: var(--ed-ink);
}

.navbar-toggler {
    border: 1px solid var(--ed-line);
    border-radius: 8px;
    padding: .3rem .55rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

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

.hero {
    background: var(--ed-dark);
    color: #fff;
    padding: 5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--ed-accent-lit);
}

.hero .eyebrow {
    color: #7d8694;
}

.hero .wordmark--hero {
    color: #fff;
}

.hero__standfirst {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    color: #b8bfca;
    max-width: 48ch;
    margin: 1.4rem 0 0;
}

.hero__meta {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6b7480;
    margin-top: 2.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ed-line-dark);
}

/* Link back to the parent title */
.hero__parent {
    color: var(--ed-accent-lit);
}

.hero__parent:hover {
    color: #fff;
}

/* --- Sections ------------------------------------------------------------ */

.section {
    padding: 4rem 0 5rem;
}

.section-head {
    margin-bottom: 2.5rem;
}

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    margin: 0;
}

.section-lede {
    color: var(--ed-ink-soft);
    max-width: 62ch;
    margin: .8rem 0 0;
}

.rule {
    height: 1px;
    background: var(--ed-line);
    margin: 1.4rem 0 0;
}

/* --- Story cards ---------------------------------------------------------
   F1 Bite articles all carry an image, so the listing is picture-led rather
   than the text list Eddsport uses. Same card language, different content.
   ------------------------------------------------------------------------ */

.story {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ed-card);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    overflow: hidden;
    box-shadow: var(--ed-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.story:hover {
    transform: translateY(-3px);
    box-shadow: var(--ed-shadow-lg);
}

/* Fixed 4:3 box: keeps the cards level and reserves space so nothing shifts
   as images load. 4:3 rather than 16:9 because the artwork is square-ish
   cartoon infographics (600x600, 750x600, 800x533), and a widescreen crop
   would slice the headline off the top of every one. */
.story__thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--ed-bg-alt);
    border-bottom: 1px solid var(--ed-line);
    overflow: hidden;
}

/* cover, so every card crops to the same shape — mixed source ratios letterboxed
   at different widths looked accidental.

   object-position is centre TOP, not centre: the artwork puts its headline
   along the top edge, so anchoring there keeps the joke visible and takes the
   crop out of the bottom of the frame instead. */
.story__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .35s ease;
}

.story:hover .story__thumb img {
    transform: scale(1.02);
}

/* --- Archive tile --------------------------------------------------------
   Stories from before 2026 have no artwork (the old stock images were
   dropped). Rather than a gap or a broken image, they get a typographic
   tile: on-brand, obviously deliberate, and it still gives the card
   something to look at.
   ------------------------------------------------------------------------ */

.story__tile {
    position: relative;
    display: grid;
    /* place-content, not place-items: centres the two rows as one block.
       place-items centres each row within its own track, which pushes the
       year and the label apart to the quarter marks. */
    place-content: center;
    justify-items: center;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(140deg, var(--ed-dark-2), var(--ed-dark));
    border-bottom: 1px solid var(--ed-line);
    overflow: hidden;
    text-align: center;
    padding: 1rem;
}

/* Faint oversized initials behind the year */
.story__tile::before {
    content: "F1";
    position: absolute;
    right: -.08em;
    bottom: -.34em;
    font-family: 'Anton', sans-serif;
    font-size: 7rem;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.story__tile-year {
    position: relative;
    font-family: 'Anton', sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ed-accent-lit);
}

.story__tile-label {
    position: relative;
    display: block;
    margin-top: .5rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #7d8694;
}

/* Preview only — stands in for a real /images/f1bite/ photo in index.html,
   which can't reach the server's image folder. */
.story__thumb--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eceff3, #dde2e9);
    color: var(--ed-ink-faint);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.story__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 1.35rem 1.4rem;
}

.story__title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.18rem;
    letter-spacing: -.015em;
    text-transform: none;
    line-height: 1.3;
    margin: 0;
}

.story__title a {
    color: var(--ed-ink);
}

.story__title a:hover {
    color: var(--ed-accent);
}

.story__strap {
    color: var(--ed-ink-soft);
    font-size: .95rem;
    margin: .5rem 0 0;
    flex: 1 1 auto;
}

.story__meta {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 1rem 0 0;
}

/* --- Pagination ---------------------------------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ed-line);
}

.pager a,
.pager span {
    display: inline-block;
    min-width: 2.4rem;
    padding: .5rem .7rem;
    text-align: center;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    border: 1px solid var(--ed-line);
    border-radius: 8px;
    color: var(--ed-ink);
}

.pager a:hover {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}

.pager .is-current {
    background: var(--ed-ink);
    border-color: var(--ed-ink);
    color: #fff;
}

.pager .is-gap {
    border-color: transparent;
    color: var(--ed-ink-faint);
    min-width: auto;
    padding: .5rem .3rem;
}

/* --- Buttons ------------------------------------------------------------- */

.btn-ink {
    --bs-btn-font-family: 'Archivo', system-ui, sans-serif;
    background: var(--ed-ink);
    color: #fff;
    border: 1px solid var(--ed-ink);
    border-radius: 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
    transition: background .18s ease, border-color .18s ease;
}

.btn-ink:hover,
.btn-ink:focus-visible {
    background: var(--ed-accent);
    border-color: var(--ed-accent);
    color: #fff;
}

.btn-outline-ink {
    --bs-btn-font-family: 'Archivo', system-ui, sans-serif;
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid #c9cfd8;
    border-radius: 8px;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
}

.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
    background: var(--ed-ink);
    color: #fff;
    border-color: var(--ed-ink);
}

/* --- Single article ------------------------------------------------------ */

.article-head {
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--ed-line);
}

.article-head__title {
    font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.04;
    margin: 0;
}

.article-head__strap {
    font-size: 1.15rem;
    color: var(--ed-ink-soft);
    margin: .9rem 0 0;
}

.article-head__date {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 1.1rem 0 0;
}

.article-image {
    margin: 0 0 1.75rem;
}

.article-image img {
    width: 100%;
    height: auto;
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}

/* Article_Code is raw markup from the CMS — usually an embed. Keep it inside
   its box rather than letting an iframe blow the column out. */
.article-embed {
    margin: 0 0 1.75rem;
}

.article-embed img,
.article-embed iframe,
.article-embed video {
    max-width: 100%;
    border-radius: 8px;
}

/* Body copy comes out of fm_paragraphformat with no classes, so style the
   bare tags. */
.article-body {
    font-size: 1.08rem;
    line-height: 1.75;
}

.article-body p {
    margin: 0 0 1.3rem;
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.article-body h2,
.article-body h3 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.01em;
    margin: 2.25rem 0 .85rem;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }

.article-body ul,
.article-body ol {
    margin: 0 0 1.3rem 1.1rem;
    padding: 0;
}

.article-body li {
    margin-bottom: .45rem;
}

.article-body blockquote {
    margin: 1.75rem 0;
    padding: .3rem 0 .3rem 1.3rem;
    border-left: 3px solid var(--ed-accent);
    color: var(--ed-ink-soft);
    font-style: italic;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.article-foot {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ed-line);
}

/* --- Sidebar rail -------------------------------------------------------- */

.rail {
    position: sticky;
    top: 92px;
}

@media (max-width: 991.98px) {
    .rail {
        position: static;
        margin-top: 3rem;
    }
}

.rail__block {
    padding: 1.4rem;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background: var(--ed-bg-alt);
    margin-bottom: 1.25rem;
}

.rail__title {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin: 0 0 1rem;
}

.rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rail__list li {
    border-bottom: 1px solid var(--ed-line);
}

.rail__list li:last-child {
    border-bottom: 0;
}

.rail__list a {
    display: block;
    padding: .65rem 0 .65rem .85rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--ed-ink);
    border-left: 3px solid var(--ed-accent);
}

.rail__list a:hover {
    color: var(--ed-accent);
}

/* --- Advertising --------------------------------------------------------- */

.ad-band {
    background: var(--ed-bg-alt);
    border-top: 1px solid var(--ed-line);
    border-bottom: 1px solid var(--ed-line);
    padding: 2rem 0;
}

.ad {
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
}

/* Mid-article placement. Hairlines above and below mark it off from the copy
   so it reads as a break in the page rather than part of the story, without
   the heavier grey band used between sections. */
.ad--inline {
    margin: 2.25rem auto;
    padding: 1.5rem 0;
    border-top: 1px solid var(--ed-line);
    border-bottom: 1px solid var(--ed-line);
}

.ad__label {
    display: block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ed-ink-faint);
    margin-bottom: .6rem;
}

.ad__unit {
    display: block;
    min-height: 90px;
}

/* Preview only — stands in for a live unit so the band can be checked
   without loading the real AdSense tag from localhost. */
.ad__unit--placeholder {
    display: grid;
    place-items: center;
    min-height: 110px;
    border: 1px dashed #cfd5de;
    border-radius: 8px;
    background: #fff;
    color: var(--ed-ink-faint);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
}

/* Don't hold space open for an advert that never arrived */
.ad__unit[data-ad-status="unfilled"] {
    display: none;
}

.ad:has(.ad__unit[data-ad-status="unfilled"]) .ad__label {
    display: none;
}

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

.ed-footer {
    background: var(--ed-dark);
    color: #9aa2ae;
    padding: 3.25rem 0 2.75rem;
    font-size: .92rem;
}

.ed-footer a {
    color: #c3cad4;
}

.ed-footer a:hover {
    color: var(--ed-accent-lit);
}

.ed-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .story,
    .story:hover,
    .story__thumb img,
    .story:hover .story__thumb img {
        transform: none;
        transition: none;
    }
}