/* Cross Market Intelligence — plain CSS, no external fonts or CDNs.

   The page is LIGHT, and that is the whole point of it. The palette used to
   be sampled from the application — the same dark navy the screenshots are
   drawn in — so the captures dissolved into the page they sat on and the
   detail in them, which is the entire argument of this page, could not be
   made out. The ground is now a light blue-grey from the same navy family,
   so every capture reads as a dark object sitting on a light page. Body text
   sits on `.prose`, a lighter card again, because the reading measure is much
   narrower than the screenshots and without a card it looked stranded in the
   middle of a wide column.

   The accents are still the application's own — the blue of the
   "Intelligence" wordmark carrying links, the orange it marks section labels
   with carrying headings — but both are darkened to hold 4.5:1 on a light
   ground rather than the light-on-dark values they had. */
*,*::before,*::after{box-sizing:border-box}
/* `color-scheme: light` so the browser's own furniture — scrollbars, the
   canvas behind the page — matches. Without it a visitor whose machine is in
   dark mode gets a dark scrollbar down the edge of a light page. */
html{font-size:16px;-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;min-height:100vh;line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;
  color:#1a2331;background:#dbe3ee}
a{color:#14507d;text-decoration:underline;text-underline-offset:2px}
a:hover{color:#0d3a5c}
a:focus-visible{outline:2px solid #14507d;outline-offset:2px}
.wrap{max-width:42rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
header.site-header{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #adbcd0;text-align:center}
header.site-header h1{margin:0 0 .35rem;font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#14507d}
header.site-header img.logo{width:130px;height:auto;margin-top:1.25rem;margin-bottom:.75rem}
nav.site-nav{margin-top:.85rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem 1rem;font-size:.95rem}
nav.site-nav a{text-decoration:none;font-weight:500}
nav.site-nav a:hover{text-decoration:underline}
main h2{margin:1.75rem 0 .65rem;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:#9a5300}
main p,main li{color:#2c3849}
main p{margin:0 0 .85rem}
main ul{margin:0 0 1rem;padding-left:1.35rem}
main li{margin-bottom:.4rem}
.lead{font-size:1.05rem;color:#1a2331}
.card{background:#f6f9fc;border:1px solid #c3d0e2;border-radius:8px;padding:1.15rem 1.25rem;margin:1rem 0 1.5rem}
.card h2{margin-top:0}
code,.mono{font-family:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  font-size:.88em;background:#e7edf6;padding:.1em .35em;border-radius:3px;word-break:break-word}
.meta{color:#56657a;font-size:.92em}
/* Body text sits on its own card. The reading measure is far narrower than
   the screenshots either side of it, so without a ground the prose read as
   a stranded ribbon down the middle of a wide column; on a card it reads as
   a deliberate element the pictures are hung around. Lighter than the page,
   not darker — the page is the mid tone here, cards go up and screenshots
   go down. */
.prose{background:#f6f9fc;border:1px solid #c3d0e2;border-radius:12px;
  padding:1.25rem 1.5rem .4rem;margin:1.25rem 0 1.5rem;
  box-shadow:0 1px 3px rgba(20,45,80,.06)}
.prose > h2:first-child{margin-top:.25rem}
@media (max-width:480px){.prose{padding:1rem 1.1rem .15rem;border-radius:10px}}
/* Screenshots. Every capture is wider than the text column, so max-width takes
   them to the full column width; the height cap only bites on the tall ones.
   The border is dark rather than light: these captures are near-black, and on
   a light page a pale edge would read as a gap rather than a frame. */
figure{margin:1.5rem 0 1.75rem}
.shot{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:42rem;
  border:1px solid #8fa3bd;border-radius:8px;
  box-shadow:0 2px 12px -4px rgba(16,32,56,.35)}
figcaption{margin-top:.7rem;text-align:center;font-size:.88rem;color:#56657a;
  max-width:32rem;margin-left:auto;margin-right:auto}
/* The three damage diagrams are one thing seen three ways, and each is wide and
   short. Spaced out like separate figures they read as three unrelated strips,
   so they stack tight against each other under a single caption. */
.graphset{display:flex;flex-direction:column;gap:.5rem}
.graphset .shot{max-height:none}
/* The two phone captures are tall and narrow — side by side they occupy the
   column properly and read as one device rather than two. The 24rem cap is
   what stops a wide monitor blowing each one up past the capture's own
   resolution and blurring it. Below 480px there is not enough width for
   both, so they stack. */
.phones{display:flex;gap:.75rem;align-items:flex-start;justify-content:center}
.phones .shotlink{flex:0 1 auto;min-width:0;max-width:24rem;margin:0}
.phones .shot{max-height:none;width:100%}
@media (max-width:480px){.phones{flex-direction:column;align-items:center}
  .phones .shotlink{max-width:min(100%,16rem)}}
footer.site-footer{margin-top:2.5rem;padding-top:1rem;border-top:1px solid #adbcd0;font-size:.88rem;color:#56657a;text-align:center}
footer.site-footer p{margin:0 0 .4rem;color:inherit}
footer.site-footer a{color:#14507d}
@media (max-width:480px){.wrap{padding:1.15rem 1rem 2.5rem}header.site-header h1{font-size:1.4rem}}

/* Header nav links are pill buttons, each prefixed with its own mark. The
   colours are all derived from currentColor, so this same block sits in every
   project stylesheet unchanged and picks up whatever palette the page has. */
nav.site-nav {
  gap: 0.5rem;
}

nav.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  line-height: 1.35;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}

nav.site-nav a:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, currentColor 58%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

nav.site-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

nav.site-nav .ico {
  flex: none;
}

/* The back button, top left of every page but the homepage. Like the nav
   pills above, its colours come from currentColor, so this same block works
   on every theme on the site. */
nav.backnav {
  padding: 1rem 0 0 1.25rem;
}

.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  line-height: 1.35;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  transition: border-color 0.15s, background 0.15s;
}

.backbtn:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, currentColor 58%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.backbtn svg {
  flex: none;
}

/* Each screenshot links to its own full-size file: the captures are denser
   than any column can show them, so the image itself is the way in, and the
   browser's Back returns to the page. Same pattern as the Renault galleries. */
.shotlink{display:block;width:fit-content;margin-inline:auto;cursor:zoom-in;
  border-radius:8px}
.shotlink:hover .shot{border-color:currentColor}

/* The mark is a prefix to the title now, not a block standing under it.
   On its own it cost roughly 150px at the top of every page and pushed the
   first screenshot below the fold — costly on a site a reader gives a few
   minutes. Inline it identifies the project just as well. `1.5em` sizes it
   off the h1, so it tracks the heading at every breakpoint, and the h1
   wraps rather than squashing the mark on a narrow screen. */
header.site-header h1{display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap}
header.site-header img.logo{width:1.5em;height:1.5em;object-fit:contain;
  margin:0;flex:none;border-radius:0}

/* ── Wide screens ────────────────────────────────────────────────────────────
   Everything on the page is sized in rem, so raising the root size scales the
   whole thing at once — type, spacing, column and screenshots together —
   rather than leaving 16px text stranded in the middle of a 27-inch monitor.

   The column is `min(92vw, …)`, so it takes nearly the whole window on a large
   display and screenshots grow with it. Prose does not grow all the way with
   it: a paragraph keeps a 44rem measure, because past about ninety characters
   a line is harder to read, not easier. Cards take the same 44rem so the page
   has two widths rather than three — one for reading, one for pictures. */
@media (min-width: 1280px) {
  html { font-size: 17px; }
  .wrap { max-width: min(92vw, 68rem); }
  main p, main ul, main ol { max-width: 44rem; margin-inline: auto; }
  .card, .notice { max-width: 44rem; margin-inline: auto; }
  /* The prose card carries the measure now, so it is 47rem — 44rem of text
     plus its own padding — and the paragraphs inside it fill it rather than
     taking a second 44rem cap and overflowing the padding. */
  .prose { max-width: 47rem; margin-inline: auto; }
  .prose p, .prose ul, .prose ol { max-width: none; }
}
@media (min-width: 1800px) {
  html { font-size: 18px; }
  .wrap { max-width: min(92vw, 76rem); }
}
@media (min-width: 2400px) {
  html { font-size: 19px; }
  .wrap { max-width: min(92vw, 84rem); }
}