/* Self-contained: tokens, reset, header, list, footer. All rules .lc3-. */

:root {
    /* Ground and text */
    --lc3-bg:          #ffffff;
    --lc3-ink:         #020817;
    --lc3-ink-body:    #333333;
    --lc3-ink-bold:    #000000;   /* swapped at 768px */
    --lc3-ink-sub:     #212121;
    --lc3-ink-legal:   #1d3557;
    --lc3-inverse:     #ffffff;

    /* Lines and washes */
    --lc3-line:        #edeef0;
    --lc3-line-hair:   #333333;
    --lc3-wash:        #edf2f4;

    /* Accent color, fixed across sites. */
    --lc3-accent:      #3061ff;
    --lc3-accent-2:    #5a8dff;
    --lc3-star:        #fed030;
    --lc3-star-off:    rgba(255, 255, 255, 0.45);

    /* Geometry */
    --lc3-radius:      8px;
    --lc3-radius-chip: 6px;
    --lc3-container:   768px;
    --lc3-gutter:      8px;
    --lc3-header-h:    56px;
    --lc3-rule:        3px;

    /* Rhythm */
    --lc3-card-pad:    32px;
    --lc3-card-gap:    32px;
    --lc3-head-gap:    20px;
    --lc3-media-gap:   16px;
    --lc3-para-gap:    24px;
    --lc3-cta-gap:     24px;

    /* Type */
    --lc3-sans:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lc3-h1:          30px;
    --lc3-h1-lh:       1.2;
    --lc3-h2:          20px;
    --lc3-h2-lh:       1.5;
    --lc3-rank:        18px;
    --lc3-body:        18px;
    --lc3-body-lh:     1.625;
    --lc3-cta:         18px;
    --lc3-bestfor:     17px;
    --lc3-small:       12px;
    --lc3-legal:       14px;
    --lc3-legal-lh:    28px;

    /* Media overlay */
    --lc3-ov-inset:    12px;
    --lc3-ov-star:     12px;
    --lc3-ov-save:     12px;
    --lc3-ov-score:    12px;

    /* Surfaces */
    --lc3-shadow:      0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --lc3-cta-fill:    linear-gradient(to right, var(--lc3-accent), var(--lc3-accent-2));
    --lc3-scrim:       linear-gradient(to top right, rgba(0, 0, 0, 0.85), transparent 55%);
    --lc3-scrim-h:     45%;

    /* Glyph, inlined so the row costs no request. */
    --lc3-star-shape:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    /* Wash behind a card with no image. */
    --lc3-empty-weave: repeating-linear-gradient(135deg, rgba(48, 97, 255, 0.05) 0 12px, transparent 12px 24px);
}

body.lc3-template *,
body.lc3-template *::before,
body.lc3-template *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.lc3-template {
    margin: 0;
    padding: 0;
    background: var(--lc3-bg);
    color: var(--lc3-ink);
    font-family: var(--lc3-sans);
    font-size: var(--lc3-body);
    line-height: var(--lc3-body-lh);
}
/* The whole reset sits at zero specificity so each component's own rule wins. */
:where(body.lc3-template) a { color: var(--lc3-accent); text-decoration: none; }
:where(body.lc3-template) h1,
:where(body.lc3-template) h2 { margin: 0; font-weight: 700; -webkit-font-smoothing: auto; }
:where(body.lc3-template) p { margin: 0 0 var(--lc3-para-gap); -webkit-font-smoothing: antialiased; }
:where(body.lc3-template) ol,
:where(body.lc3-template) ul { margin: 0; padding: 0; list-style: none; }
:where(body.lc3-template) img { max-width: 100%; height: auto; }
/* Bold text carries the two-tier colour. The accent and the button label set
   their own, so neither is repainted at the wide breakpoint. */
:where(body.lc3-template) strong,
:where(body.lc3-template) b { color: var(--lc3-ink-bold); font-weight: 700; }

.lc3-container {
    max-width: var(--lc3-container);
    margin: 0 auto;
    padding: 0 var(--lc3-gutter);
}

/* ---------------------------------------------------------------- header */

.lc3-header {
    width: 100%;
    background: var(--lc3-bg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.lc3-header-inner {
    max-width: var(--lc3-container);
    margin: 0 auto;
    padding: 0 var(--lc3-gutter);
    height: var(--lc3-header-h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc3-logo { display: inline-flex; align-items: center; }
.lc3-logo-img { display: block; width: 150px; height: auto; }

/* ------------------------------------------------------------------ lede */

.lc3-page { padding-top: 8px; }
.lc3-lede { padding: 0; }

.lc3-disclosure-bar { width: 100%; }
.lc3-disclosure {
    max-width: var(--lc3-container);
    margin: 0 auto;
    padding: 12px calc(var(--lc3-gutter) + 4px) 0;
    font-size: var(--lc3-small);
    line-height: 1.5;
    color: #5c6270;
    text-align: center;
}
.lc3-disclosure a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.lc3-headline {
    margin: 0;
    padding: 0 4px 12px;
    font-size: var(--lc3-h1);
    line-height: var(--lc3-h1-lh);
    color: var(--lc3-ink-bold);
    text-align: center;
    text-wrap: balance;
}

/* Line under the H1. Sized off the H1 token and centred with it; the muted ink
   the byline's own sentence cell uses. */
.lc3-deck {
    margin: 0;
    padding: 0 4px 12px;
    font-size: calc(var(--lc3-h1) * 0.58);
    line-height: 1.35;
    font-style: normal;
    color: var(--lc3-ink-sub);
    text-align: center;
    text-wrap: balance;
}

.lc3-byline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 0 8px;
    padding-top: 4px;
    font-size: var(--lc3-small);
    line-height: 1.3333;
    text-transform: uppercase;
    color: var(--lc3-ink-bold);
}
.lc3-byline-cell { padding: 0 12px; }
.lc3-byline-cell + .lc3-byline-cell { border-left: 1px solid var(--lc3-line-hair); }
.lc3-byline-disc { color: var(--lc3-ink-bold); }
/* Byline cell naming the reviewer: the face and the name on one baseline, at
   the row's own size and colour. The face carries its edge in the markup as
   well, so the box is reserved before the file arrives and the row cannot
   reflow around it. */
.lc3-byline-by {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lc3-byline-face {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--lc3-line-hair);
}
/* Byline cell holding a sentence rather than a label: its own centred line at
   every width, in sentence case and the muted ink, at the row's own size. */
.lc3-byline-cell.lc3-byline-note {
    flex-basis: 100%;
    padding-top: 4px;
    border-left: 0;
    text-transform: none;
    color: var(--lc3-ink-sub);
}

/* Full bleed on a phone: the negative inline margin cancels the container
   gutter, which is zero at the wide breakpoint where the corners round. */
.lc3-hero {
    position: relative;
    margin: 0 calc(var(--lc3-gutter) * -1) 16px;
    overflow: hidden;
}
.lc3-hero img { display: block; width: 100%; height: auto; }

.lc3-intro {
    padding-bottom: var(--lc3-para-gap);
    margin-bottom: var(--lc3-para-gap);
    border-bottom: var(--lc3-rule) solid var(--lc3-line);
    color: var(--lc3-ink-body);
}
.lc3-intro p { margin: 0 0 var(--lc3-para-gap); }
.lc3-intro p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ list */

/* An item is bounded by a rule and nothing else: no frame, no ground, no box. */
.lc3-item {
    padding-bottom: var(--lc3-card-pad);
    margin-bottom: var(--lc3-card-gap);
    border-bottom: var(--lc3-rule) solid var(--lc3-line);
    scroll-margin-top: 16px;
}
.lc3-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

/* Rank chip, name, separator and opening line wrap as one paragraph. */
.lc3-head {
    margin: 0 0 var(--lc3-head-gap);
    font-size: var(--lc3-h2);
    line-height: var(--lc3-h2-lh);
    color: var(--lc3-ink-bold);
}
.lc3-rank {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: var(--lc3-radius-chip);
    background: var(--lc3-wash);
    font-size: var(--lc3-rank);
    white-space: nowrap;
}
.lc3-brand { color: var(--lc3-accent); font-weight: 700; }
a.lc3-brand:hover { text-decoration: underline; }
.lc3-sep { color: inherit; }
.lc3-title { color: inherit; }

/* 16:9 media block. The frame reserves the box before bytes arrive, so the list
   does not shift as media resolves; the media fills it and is cropped. */
.lc3-media {
    position: relative;
    display: block;
    margin: var(--lc3-media-gap) 0;
    border-radius: var(--lc3-radius);
    overflow: hidden;
    box-shadow: var(--lc3-shadow);
    background: var(--lc3-bg);
}
.lc3-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.lc3-photo,
.lc3-videoel {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.lc3-videoel { background: #000; }

/* Still laid under the clip, on the same fit and the same centre, so the two
   frame one source identically. Emitted only on a block that carries a still
   element of its own. */
.lc3-still {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.lc3-media-fill .lc3-videoel { background: transparent; }

/* Corner scrim so the overlay group stays legible over any photo. Held to the
   lower band of the frame, so a portrait crop keeps its subject uncovered. */
.lc3-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--lc3-scrim-h);
    z-index: 1;
    pointer-events: none;
    background: var(--lc3-scrim);
}

/* Overlay group, floating at the bottom left of the media. It takes no click:
   the anchor and the video under it receive every pointer event. */
.lc3-overlay {
    position: absolute;
    left: var(--lc3-ov-inset);
    bottom: var(--lc3-ov-inset);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    line-height: 1;
    pointer-events: none;
    color: var(--lc3-inverse);
}
.lc3-score { display: inline-flex; align-items: center; gap: 6px; }
.lc3-stars { display: inline-flex; align-items: center; gap: 4px; }
.lc3-score b {
    color: inherit;
    font-size: var(--lc3-ov-score);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.lc3-reviews { font-size: var(--lc3-ov-score); font-weight: 400; }

/* Second line of the group, set as a chip so the figure holds against the
   photo behind it rather than against the scrim alone. */
.lc3-save {
    padding: 4px 8px;
    border-radius: var(--lc3-radius-chip);
    background: var(--lc3-accent);
    color: var(--lc3-inverse);
    font-size: var(--lc3-ov-save);
    font-weight: 600;
}

/* One glyph, three fill states, drawn with a mask so no image request is made. */
.lc3-star {
    width: var(--lc3-ov-star);
    height: var(--lc3-ov-star);
    display: inline-block;
    background: var(--lc3-star-off);
    -webkit-mask: var(--lc3-star-shape) center / contain no-repeat;
    mask: var(--lc3-star-shape) center / contain no-repeat;
}
.lc3-star.is-on { background: var(--lc3-star); }
.lc3-star.is-half { background: linear-gradient(90deg, var(--lc3-star) 50%, var(--lc3-star-off) 50%); }

/* The same three parts inline under the heading, for a card with no media. */
.lc3-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 var(--lc3-media-gap);
    padding: 10px 12px;
    border-radius: var(--lc3-radius);
    background-color: var(--lc3-wash);
    background-image: var(--lc3-empty-weave);
    line-height: 1;
    color: var(--lc3-ink);
}
/* The chip keeps its own ground and text colour here too, at the row's size. */
.lc3-meta .lc3-save { font-size: var(--lc3-small); }
.lc3-meta .lc3-star { background: rgba(2, 8, 23, 0.20); }
.lc3-meta .lc3-star.is-on { background: var(--lc3-star); }
.lc3-meta .lc3-star.is-half { background: linear-gradient(90deg, var(--lc3-star) 50%, rgba(2, 8, 23, 0.20) 50%); }

/* ------------------------------------------------------------------ body */

.lc3-body { margin: 0; }
.lc3-sell,
.lc3-text {
    font-size: var(--lc3-body);
    line-height: var(--lc3-body-lh);
    color: var(--lc3-ink-body);
}
.lc3-sell a {
    color: var(--lc3-accent);
    font-weight: 700;
}
.lc3-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- best for */

/* One delineated row above the button: a hairline, the label, the line beside
   it. Under 480px the two columns leave the line too narrow to read, so they
   stack. */
.lc3-bestfor {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 14px;
    margin: var(--lc3-cta-gap) 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--lc3-line);
    border-bottom: 1px solid var(--lc3-line);
}
.lc3-bestfor-k {
    font-size: var(--lc3-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lc3-accent);
}
.lc3-bestfor-v {
    font-size: var(--lc3-bestfor);
    line-height: 1.5;
    color: var(--lc3-ink);
}

@media (max-width: 479px) {
    .lc3-bestfor { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------- actions */

.lc3-actions { margin: var(--lc3-cta-gap) 0 0; }
/* The row already carries the gap, so the button closes up behind it. */
.lc3-bestfor + .lc3-actions { margin-top: 16px; }
.lc3-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border-radius: var(--lc3-radius);
    background: var(--lc3-cta-fill);
    box-shadow: var(--lc3-shadow);
    color: var(--lc3-inverse);
    font-size: var(--lc3-cta);
    font-weight: 700;
    /* Fixed line box, so the button is the same height at both label sizes. */
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lc3-cta:hover { color: var(--lc3-inverse); transform: scale(1.05); }
/* One flex item, so a wrapping label carries its glyph with it. */
.lc3-label { display: block; }
.lc3-chev { margin-left: 0.25em; white-space: nowrap; }

/* ---------------------------------------------------------------- footer */

.lc3-footer {
    margin-top: 40px;
    padding-top: 32px;
    background: var(--lc3-wash);
    border-top: 2px dashed var(--lc3-line);
}
.lc3-footer-inner {
    max-width: var(--lc3-container);
    margin: 0 auto;
    padding: 40px var(--lc3-gutter);
}
.lc3-footer-legal,
.lc3-copyright {
    margin: 0 0 20px;
    font-size: var(--lc3-legal);
    line-height: var(--lc3-legal-lh);
    color: var(--lc3-ink-legal);
}
.lc3-footer-legal a { color: var(--lc3-accent); text-decoration: underline; }
.lc3-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-bottom: 20px;
}
.lc3-footer-nav a { font-size: var(--lc3-legal); color: var(--lc3-ink-legal); text-decoration: underline; }
.lc3-copyright { margin-bottom: 0; }

/* ----------------------------------------------------------- breakpoints */

/* One token swap per breakpoint rather than a rule per element. */

@media (min-width: 640px) {
    :root {
        --lc3-ov-inset: 24px;
        --lc3-ov-star:  15px;
        --lc3-ov-save:  16px;
    }
    .lc3-page { padding-top: 16px; }
    .lc3-logo-img { width: 180px; }
    .lc3-headline { padding-bottom: 20px; }
    .lc3-deck { padding-bottom: 20px; }
    .lc3-byline { margin-bottom: 16px; }
}

@media (min-width: 768px) {
    :root {
        --lc3-ink-bold: #2b2d42;
        --lc3-rank:     20px;
    }
    .lc3-byline { margin-bottom: 20px; }
}

@media (min-width: 1024px) {
    :root {
        --lc3-gutter:    0px;
        --lc3-h1:        48px;
        --lc3-h1-lh:     1.25;
        --lc3-h2:        24px;
        --lc3-rank:      17.6px;
        --lc3-cta:       20px;
        --lc3-ov-score:  14px;
    }
    .lc3-hero { border-radius: var(--lc3-radius); }
}

/* Visible focus for every interactive target. */
body.lc3-template a:focus-visible,
body.lc3-template video:focus-visible {
    outline: 2px solid var(--lc3-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.lc3-template * { transition: none !important; animation: none !important; }
    .lc3-cta:hover { transform: none; }
}