/* /next-24h "Forecast" — page styles on the v4 tokens from public/home-v4/chrome.css.
   Both themes come from those tokens; nothing here hard-codes a colour. Layout is grid/gap only,
   so nothing depends on collapsing margins. Spec §6. */

/* WHY (2026-09-15): every colour here comes from --v4-*, which flips to the DARK
   values whenever the phone prefers dark (chrome.css:15 makes dark the default
   palette). But the page also loads public/styles.css, whose body is a fixed
   #f5f7fa. The result was --v4-text (#e3ebf8) on #f5f7fa: measured 1.12:1 across
   39 elements, the <h1> "The next 24 hours" included — the whole page invisible
   in dark mode, on a page in the top nav. Paint the body from the same token set
   the content uses — and, unlike public/recorded-floods.css:11, which sets only
   the background, also declare the colour scheme below: a dark ground alone
   leaves the browser resolving system colours for a light one, which paints
   unclassed links at ~2.5:1 on it. Both halves, always. */
/* This page paints its own ground from the token set, so it owns the colour
   scheme too (styles.css pins `color-scheme: light` for the legacy light body —
   whoever owns the background owns the scheme). Without this the browser would
   paint links and native controls for a light page on top of a dark one. */
body {
    background: var(--v4-bg, #f5f7fa);
    color: var(--v4-text, #2c3e50);
    color-scheme: light dark;
}
:root[data-theme="dark"] body { color-scheme: dark; }
:root[data-theme="light"] body { color-scheme: light; }

.fc {
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: 20px;
    padding-block: 28px 56px;
    display: grid;
    gap: 34px;
    color: var(--v4-text);
    font-family: var(--v4-font);
}

/* ── review fixtures ─────────────────────────────────────────────────────────── */
.fc-fixture-banner {
    margin: 0;
    padding: 10px 14px;
    border: 1px dashed var(--v4-accent);
    border-radius: 10px;
    background: var(--v4-panel-alt);
    color: var(--v4-text);
    font-size: .9rem;
}

/* ── masthead ────────────────────────────────────────────────────────────────── */
.fc-masthead { display: grid; gap: 6px; background: none; padding: 0; box-shadow: none; color: var(--v4-text); }
.fc-masthead h1 {
    margin: 0;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* ── lead: headline + brief beside the figures ───────────────────────────────── */
.fc-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.fc-lead-text { display: grid; gap: 16px; min-width: 0; }
.fc-headline {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
    line-height: 1.35;
    font-weight: 600;
    text-wrap: balance;
}
.fc-brief { display: grid; gap: 8px; }
.fc-brief p { margin: 0; color: var(--v4-muted); line-height: 1.55; max-width: 65ch; }

/* ── Met Office line, three states ───────────────────────────────────────────── */
.fc-mof { margin: 0; font-size: .92rem; line-height: 1.5; }
.fc-mof[data-state="none"],
.fc-mof[data-state="unavailable"] { color: var(--v4-muted); }
.fc-mof[data-state="warnings"] {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--v4-border);
    border-radius: 12px;
    background: var(--v4-panel);
}
.fc-mof-head { margin: 0; font-weight: 600; }
.fc-mof-when { color: var(--v4-muted); font-weight: 400; }
.fc-mof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid var(--v4-border);
    color: inherit;
    text-decoration: none;
}
.fc-mof-row:hover .fc-mof-txt { text-decoration: underline; }
.fc-mof-pill {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--v4-border);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.fc-mof--amber .fc-mof-pill { border-color: var(--v4-high); color: var(--v4-high); }
.fc-mof--red .fc-mof-pill { border-color: var(--v4-sev); color: var(--v4-sev); }
.fc-mof-txt { flex: 1 1 14rem; min-width: 0; }
.fc-mof-src { margin: 0; color: var(--v4-muted); font-size: .82rem; }

/* ── figures: tiles, read at a glance, not sentences ─────────────────────────── */
.fc-figures { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fc-figure {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "note value";
    align-items: center;
    gap: 2px 14px;
    padding: 12px 14px;
    border: 1px solid var(--v4-border);
    border-left: 3px solid var(--v4-border);
    border-radius: 12px;
    background: var(--v4-panel);
}
.fc-figure-label {
    grid-area: label;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v4-muted);
}
.fc-figure-value {
    grid-area: value;
    font-size: 1.7rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.fc-figure-note { grid-area: note; font-size: .82rem; color: var(--v4-muted); line-height: 1.4; }
.fc-figure-chips { grid-area: value; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* A word, not a number, should not shout like one. */
.fc-figure[data-state="unavailable"] .fc-figure-value { font-size: 1rem; color: var(--v4-muted); }
.fc-figure[data-state="quiet"] .fc-figure-value { color: var(--v4-muted); }
.fc-figure[data-state="quiet"] { border-left-color: var(--v4-border); }
.fc-figure[data-state="warning"] { border-left-color: var(--v4-high); }
.fc-figure[data-state="warning"] .fc-figure-value { color: var(--v4-high); }
.fc-figure[data-state="severe"] { border-left-color: var(--v4-sev); }
.fc-figure[data-state="alert"] { border-left-color: var(--v4-typical); }

.fc-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .74rem;
    white-space: nowrap;
    border: 1px solid currentColor;
}
.fc-chip b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.fc-chip--severe { color: var(--v4-sev); }
.fc-chip--warning { color: var(--v4-high); }
.fc-chip--alert { color: var(--v4-typical); }

/* A gauge's level now, where a model expects it, and its typical high. */
.fc-bar-mini {
    position: relative;
    display: block;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--v4-panel-alt);
    overflow: hidden;
}
.fc-bar-now { position: absolute; left: 0; top: 0; bottom: 0; background: var(--v4-rain); opacity: .85; }
.fc-bar-pred { position: absolute; top: 0; bottom: 0; background: var(--v4-high); opacity: .85; }
/* The high mark must read against BOTH fills, so it is the text colour with a light halo, not
   another red — red on the red "rise" fill was invisible. */
.fc-bar-high {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--v4-text);
    box-shadow: 0 0 0 1px var(--v4-panel);
}

/* ── map ─────────────────────────────────────────────────────────────────────── */
.fc-map-wrap { min-width: 0; }
#fc-map { min-height: 420px; }

/* ── timeline ────────────────────────────────────────────────────────────────── */
.fc-timeline-wrap h2,
.fc-models-wrap h2,
.fc-watch-wrap h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
    letter-spacing: -.01em;
}
#fc-timeline { display: grid; gap: 12px; }

/* ── models ──────────────────────────────────────────────────────────────────── */
.fc-models-wrap { display: grid; gap: 10px; }
.fc-models-intro { margin: 0 0 6px; color: var(--v4-muted); max-width: 70ch; line-height: 1.55; }
#fc-models {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* ── scorecard (server-rendered) ─────────────────────────────────────────────── */
.fc-scores {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--v4-border);
    border-radius: 14px;
    background: var(--v4-panel-alt);
}
.fc-scores h3 { margin: 0 0 12px; font-size: 1rem; letter-spacing: -.01em; }
.fc-score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-score {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto 132px;
    gap: 4px 14px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--v4-border);
}
.fc-score:first-child { padding-top: 0; border-top: 0; }
.fc-score-model { font-weight: 600; }
.fc-score-figures { color: var(--v4-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.fc-score-none { color: var(--v4-muted); font-size: .9rem; font-style: italic; }
.fc-score-trend { color: var(--v4-muted); font-size: .84rem; }
/* The sparkline is drawn at its own size and never stretched: scaling the viewBox would
   magnify the stroke and any text with it. */
.fc-score-spark { color: var(--v4-accent); line-height: 0; justify-self: end; }
.fc-score-spark svg { display: block; width: 132px; height: 30px; }
.fc-score-caption {
    margin: 14px 0 0;
    color: var(--v4-muted);
    font-size: .84rem;
    line-height: 1.5;
    max-width: 72ch;
}

/* ── rail and foot ───────────────────────────────────────────────────────────── */
.fc-rail { display: grid; gap: 16px; }
.fc-foot {
    padding-top: 18px;
    border-top: 1px solid var(--v4-border);
    color: var(--v4-muted);
    font-size: .84rem;
    line-height: 1.6;
}
.fc-foot a { color: inherit; }
.fc-disc { display: block; margin-top: 6px; }

/* ── phone ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fc { padding-inline: 16px; gap: 26px; }
    .fc-lead { grid-template-columns: 1fr; gap: 20px; }
    .fc-score { grid-template-columns: 1fr; align-items: start; }
    .fc-score-spark { justify-self: start; }
    #fc-map { min-height: 320px; }
}

/* ── model columns ───────────────────────────────────────────────────────────── */
.fc-model { display: grid; gap: 8px; align-content: start; }
.fc-model h3 { margin: 0; font-size: 1rem; }
.fc-model-status {
    margin: 0;
    color: var(--v4-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.fc-model-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fc-model-rows li { display: grid; gap: 2px; font-size: .9rem; line-height: 1.45; }
.fc-model-agree:empty { display: none; }
.fc-model-agree { color: var(--v4-muted); font-size: .82rem; }
.fc-model-empty, .fc-model-beyond { margin: 0; color: var(--v4-muted); font-size: .88rem; line-height: 1.5; }
.fc-model-all {
    justify-self: start;
    padding: 8px 12px;
    min-height: 44px;
    border: 1px solid var(--v4-border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.fc-model-easing {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    color: var(--v4-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* ── rain timeline ───────────────────────────────────────────────────────────── */
.fc-chart { margin: 0; display: grid; gap: 6px; }
.fc-chart svg { display: block; width: 100%; height: 132px; color: var(--v4-rain); }
.fc-area { fill: var(--v4-rain); fill-opacity: .38; stroke: var(--v4-rain); stroke-width: 1.5;
    stroke-opacity: .9; vector-effect: non-scaling-stroke; }
.fc-bar--hatched { fill: none; }
.fc-chart figcaption { color: var(--v4-muted); font-size: .84rem; }
.fc-chart-peak { color: var(--v4-muted); font-size: .8rem; justify-self: end; }
.fc-chart-peak b { color: var(--v4-text); font-variant-numeric: tabular-nums; }

/* the hour the map is showing: a line you drag, not a slider you play */
.fc-plot { position: relative; border-radius: 10px; background: var(--v4-panel-alt); }
.fc-plot svg { border-radius: 10px; }
.fc-plot--live { cursor: ew-resize; touch-action: pan-y; }
.fc-plot--live:focus-visible { outline: 3px solid var(--v4-accent); outline-offset: 2px; }
.fc-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
    background: var(--v4-text); opacity: .75; pointer-events: none; }
.fc-cursor-grip { position: absolute; left: 50%; top: -1px; width: 15px; height: 15px; margin-left: -7.5px;
    border-radius: 50%; background: var(--v4-text); box-shadow: 0 0 0 3px var(--v4-bg); }
.fc-axis { display: flex; justify-content: space-between; color: var(--v4-muted); font-size: .76rem;
    font-variant-numeric: tabular-nums; }
.fc-axis:empty { display: none; }

/* this postcode's own weather */
.fc-wx { display: grid; gap: 10px; }
.fc-wx-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.fc-wx-sum { margin: 0; color: var(--v4-muted); font-size: .9rem; }
.fc-wx-sum b { color: var(--v4-text); font-variant-numeric: tabular-nums; }
.fc-wx-days { display: flex; gap: 6px; }
.fc-wx-day { min-height: 36px; padding: 0 12px; border: 1px solid var(--v4-border); border-radius: 999px;
    background: transparent; color: var(--v4-muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.fc-wx-day[aria-pressed="true"] { background: var(--v4-accent); border-color: var(--v4-accent); color: var(--v4-accent-text); }
.fc-wx-cards { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; }
.fc-wx-card { flex: 0 0 auto; min-width: 84px; display: grid; gap: 2px; justify-items: center;
    padding: 10px 8px; border: 1px solid var(--v4-border); border-radius: 12px; background: var(--v4-panel-alt); }
.fc-wx-when { color: var(--v4-muted); font-size: .74rem; white-space: nowrap; }
.fc-wx-icon { font-size: 1.25rem; line-height: 1.2; }
.fc-wx-temp { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fc-wx-mm { color: var(--v4-rain); font-size: .76rem; font-variant-numeric: tabular-nums; }
.fc-wx-prob { color: var(--v4-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.fc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fc-event { display: flex; gap: 10px; font-size: .88rem; align-items: baseline; }
.fc-event-time { color: var(--v4-muted); font-variant-numeric: tabular-nums; min-width: 3.4em; }
.fc-event--model .fc-event-text { color: var(--v4-text); }
.fc-event--ea .fc-event-text { color: var(--v4-text); }
.fc-events-empty { margin: 0; color: var(--v4-muted); font-size: .88rem; }
.fc-lane { display: grid; gap: 6px; }
.fc-lane-head { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--v4-muted); font-size: .82rem; }
/* The mark is small; the thing you tap is not (every control on this page is at least 44px). */
.fc-hint {
    width: 44px; height: 44px; flex: none; margin: -11px 0 -11px -11px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0; color: var(--v4-muted); cursor: pointer;
}
.fc-hint-mark {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--v4-border); border-radius: 50%;
    font: inherit; font-size: .72rem; font-style: italic; font-weight: 700; line-height: 1;
}
.fc-hint:hover .fc-hint-mark, .fc-hint[aria-expanded="true"] .fc-hint-mark {
    border-color: var(--v4-accent); color: var(--v4-accent);
}
.fc-hint-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--v4-panel-alt);
    color: var(--v4-muted); font-size: .84rem; line-height: 1.5; max-width: 68ch; }
.fc-readout { margin: 0; color: var(--v4-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.fc-sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── map overlays ────────────────────────────────────────────────────────────── */
#fc-map .fr-radar { border: 1px solid var(--v4-border); border-radius: 14px; overflow: hidden; }
.fc-dot--severe { fill: var(--v4-sev); }
.fc-dot--warning { fill: var(--v4-high); }
.fc-dot--alert { fill: var(--v4-typical); }
.fc-ring { stroke: var(--v4-rising); opacity: .4; }
.fc-ring.fc-due { opacity: 1; }
.fc-model-dot { fill: var(--v4-accent); }
/* Only the gauges the page is about are marked — see drawOverlays(). Severe and above-typical take
   the site's own tones; a rising one gets a brighter edge so the eye finds it first. */
.fc-gauge { fill: var(--v4-above); }
.fc-gauge--severe { fill: var(--v4-sev, var(--v4-high)); }
.fc-gauge--high { fill: var(--v4-above); }
.fc-gauge--elevated { fill: var(--v4-elevated); }
.fc-gauge--rising { stroke: var(--v4-rising); stroke-width: 2.5; }

/* ── forecast rain frames ────────────────────────────────────────────────────── */
.fc-frame { image-rendering: auto; mix-blend-mode: normal; }
.fc-frame-caption {
    margin: 8px 0 0;
    font-size: .84rem;
    color: var(--v4-muted);
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}
.fc-frame-caption[data-kind="forecast"] { color: var(--v4-accent); font-weight: 600; }
.fc-map-note { margin: 4px 0 0; color: var(--v4-muted); font-size: .78rem; line-height: 1.5; }

/* ── worth watching ──────────────────────────────────────────────────────────── */
#fc-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.fc-watch-group h3 { margin: 0 0 4px; font-size: .95rem; }
.fc-watch-note { margin: 0 0 8px; color: var(--v4-muted); font-size: .82rem; line-height: 1.45; }
.fc-watch-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-watch-group li { font-size: .9rem; line-height: 1.45; }
.fc-watch-where { color: var(--v4-muted); font-size: .84rem; }
.fc-watch-group em { color: var(--v4-muted); font-style: normal; font-size: .8rem; }
.fc-watch-empty { margin: 0; color: var(--v4-muted); max-width: 60ch; line-height: 1.6; }

/* ── rail ────────────────────────────────────────────────────────────────────── */
.fc-rail { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.fc-rail-card { display: grid; gap: 8px; align-content: start; }
.fc-rail-card h3 { margin: 0; font-size: .95rem; }
.fc-rail-card p { margin: 0; color: var(--v4-muted); font-size: .88rem; line-height: 1.5; }
.fc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; }
.fc-sources { margin: 0; display: grid; gap: 6px; font-size: .85rem; }
.fc-source { display: flex; justify-content: space-between; gap: 10px; }
.fc-source dt { color: var(--v4-text); }
.fc-source dd { margin: 0; color: var(--v4-muted); font-variant-numeric: tabular-nums; text-align: right; }
.fc-source dd strong { color: var(--v4-high); font-weight: 600; }
.fc-rail-note { font-size: .78rem !important; }

/* ── location control ────────────────────────────────────────────────────────── */
.fc-loc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fc-loc input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--v4-border);
    border-radius: 10px;
    background: var(--v4-input);
    color: var(--v4-text);
    font: inherit;
    max-width: 11rem;
}
.fc-loc button {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--v4-border);
    border-radius: 10px;
    background: var(--v4-panel);
    /* An explicit token, never `inherit`: inherited colour is how this button ended up
       white-on-white under the site's global <header> rule. */
    color: var(--v4-text);
    font: inherit;
    cursor: pointer;
}
.fc-loc button[type="submit"] { background: var(--v4-accent); color: var(--v4-accent-text); border-color: transparent; }

/* ── folds (open on a wide screen, tap-to-open on a phone) ───────────────────── */
.fc-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.fc-fold > summary::-webkit-details-marker { display: none; }
.fc-fold > summary::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.fc-fold[open] > summary::after { transform: rotate(-135deg); }
@media (min-width: 901px) {
    /* The fold is a phone affordance; on a wide screen the heading is the summary itself. */
    #fc-map-fold > summary { display: none; }
}
.fc-score-more { margin: 8px 0 0; font-size: .84rem; }

/* ── model rows: a level bar instead of a sentence ───────────────────────────── */
.fc-model-rows li { display: grid; gap: 3px; }
.fc-model-name { font-size: .92rem; font-weight: 600; }
.fc-model-when { font-size: .8rem; color: var(--v4-muted); font-variant-numeric: tabular-nums; }

/* ── scorecard: two bars, shorter is better ──────────────────────────────────── */
.fc-score-figures { display: grid; gap: 6px; color: var(--v4-muted); }
.fc-score-bars { color: var(--v4-accent); line-height: 0; }
.fc-score-bars svg { display: block; }
.fc-score-legend { font-size: .8rem; line-height: 1.45; }
.fc-score-legend b { color: var(--v4-text); font-variant-numeric: tabular-nums; }
.fc-score-n { display: block; font-size: .74rem; opacity: .85; }

/* ── keys: tie each swatch to the thing it colours ───────────────────────────── */
.fc-key {
    display: inline-block;
    width: 10px; height: 10px;
    margin: 0 5px 0 0;
    border-radius: 2px;
    vertical-align: baseline;
}
.fc-score-legend .fc-key { margin-left: 10px; }
.fc-score-legend .fc-key:first-child { margin-left: 0; }
.fc-key--model { background: var(--v4-accent); }
.fc-key--base { background: var(--v4-accent); opacity: .22; }
.fc-key--now { background: var(--v4-rain); }
.fc-key--rise { background: var(--v4-high); }
.fc-key--high { background: var(--v4-text); width: 3px; }
/* the rain map's own marks */
.fc-key--warn { background: var(--v4-alert); border-radius: 50%; }
.fc-key--gauge { background: var(--v4-above); border-radius: 50%; }
.fc-key--peak { background: transparent; border: 2px solid var(--v4-rising); border-radius: 50%; }
.fc-key--crossing { background: var(--v4-accent); border-radius: 50%; }
.fc-bar-key { margin: 0 0 4px; font-size: .78rem; color: var(--v4-muted); }
.fc-bar-key .fc-key { margin-left: 12px; }
.fc-bar-key .fc-key:first-child { margin-left: 0; }