/* KICC · universal tile + measure system.
 *
 * ONE source of truth for card geometry across every public page: counties,
 * venues, institutions, sectors, marketplace, streams, travel and the chapter
 * carousels. Before this sheet the sizes were per-page: `#countyFull` carried
 * seven hand-written breakpoints, the marketplace had its own `mkt-card` block,
 * `hierarchy-grid` had a third set in hierarchy-mobile.css, and the two chapter
 * carousels used two different `flex-basis` values plus a 64px vertical stagger
 * on every even tile. Measured at 1440×900, one row of the same gallery rendered
 * three widths and two heights.
 *
 * TWO CARD MODELS EXIST IN THIS CODEBASE — this sheet must never confuse them:
 *
 *   A · OVERLAY (`.media-tile`, i.e. the county cards). The card's height
 *       comes from an empty sizer div `.tile-ratio` that is in normal flow;
 *       `.tile-media` and `.tile-body` are `position:absolute; inset:0` layers
 *       painted on top of it. Touching their position turns one card into two
 *       stacked boxes — an empty plate with the photo underneath. Model A is
 *       therefore sized ONLY through `.tile-ratio`.
 *
 *   B · STACKED (`.hierarchy-tile`, `.mkt-card`, `.prod-card`, `.tm-tile`).
 *       A real flex column: media box, then copy, then actions. These get the
 *       shared ratio, the clamped type scale and the bottom-pinned action row.
 *
 * Tokens — override per section when a section genuinely needs another rhythm,
 * never re-declare a pixel width:
 *   --kicc-measure    content max width
 *   --kicc-tile-min   narrowest acceptable tile
 *   --kicc-gap        grid gutter, fluid
 *   --kicc-ratio      stacked media ratio (portrait catalogue)
 *   --kicc-ratio-wide overlay sizer ratio (county / venue catalogue)
 *   --kicc-slide      carousel slide width
 */

:root{
  --kicc-measure: 1480px;
  --kicc-tile-min: clamp(158px, 13.5vw, 224px);
  --kicc-gap: clamp(8px, 1vw, 16px);
  --kicc-ratio: 4 / 5;
  --kicc-ratio-wide: 16 / 10;
  --kicc-radius: 14px;
  --kicc-slide: clamp(248px, 27vw, 392px);
  --kicc-pad: clamp(10px, 1.05vw, 16px);
  --kicc-title: clamp(.84rem, .3vw + .78rem, 1.02rem);
  --kicc-body: clamp(9.5px, .18vw + 9px, 11.5px);
  --kicc-meta: clamp(9px, .16vw + 8.6px, 10.5px);
}

/* ── 1 · MEASURE ───────────────────────────────────────────────────────────
   The page column is capped so a 2560px display stops stretching a five-word
   line across the full width. Section backgrounds stay full-bleed. */
body:not(.admin-shell) #app .wrap,
body:not(.admin-shell) #app .wrap.page-head,
body:not(.admin-shell) #app .wrap.mkt-head{
  max-width: var(--kicc-measure);
  margin-inline: auto;
  padding-inline: clamp(12px, 1.5vw, 26px);
  width: 100%;
  box-sizing: border-box;
}

/* ── 2 · EVERY CARD GRID, ONE RULE ─────────────────────────────────────────
   `auto-fill` + `minmax(min, 1fr)` gives identical tile widths in every row and
   an even column count with no breakpoints at all. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(
  .hierarchy-grid,
  .ven-grid,
  .inst-grid,
  .sector-grid,
  .market-grid,
  .prod-grid,
  .mkt-grid,
  #venueGrid,
  #instGrid,
  #productGrid,
  #countyGrid,
  #countyFull,
  #countyFull.view-grid,
  #countyFull.view-strip,
  .kicc-grid
){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kicc-tile-min)), 1fr)) !important;
  gap: var(--kicc-gap) !important;
  align-items: stretch !important;
}
/* Model B can absorb stretch and equalise with 1fr rows; Model A cannot — its
   height is owned by the sizer, so rows stay content-sized. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.hierarchy-grid,.ven-grid,.inst-grid,.sector-grid,.market-grid,.prod-grid,.mkt-grid,#venueGrid,#instGrid,#productGrid){
  grid-auto-rows: 1fr;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-grid,#countyFull.view-strip,#countyGrid){
  grid-auto-rows: auto;
  align-items: start !important;
}

/* Deliberate density: about ten county cards above the fold at 1080p, so the
   catalogue is a catalogue and not a poster wall. */
@media (min-width: 1800px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-grid,#countyFull.view-strip){grid-template-columns: repeat(8, minmax(0,1fr)) !important}
}
@media (min-width: 1500px) and (max-width: 1799px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-grid,#countyFull.view-strip){grid-template-columns: repeat(7, minmax(0,1fr)) !important}
}

/* ── 3A · MODEL A — OVERLAY CARD (counties, media-tile) ────────────────────
   Only the sizer is touched. `.tile-media` and `.tile-body` keep their absolute
   overlay, which is what puts the photograph and the wordmark in the same box. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .media-tile .tile-ratio,
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyGrid .media-tile .tile-ratio{
  aspect-ratio: var(--kicc-ratio-wide) !important;
  height: auto !important;
  min-height: 0 !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .media-tile,
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyGrid .media-tile{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: var(--kicc-radius) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyFull .media-tile .tile-body,
html[data-kicc-motion-engine] body:not(.admin-shell) #app #countyGrid .media-tile .tile-body{
  padding: clamp(9px, .8vw, 13px) !important;
  justify-content: flex-end !important;
}
/* Type inside the overlay scales with the tile, so a 160px card is readable and
   a 260px card is not shouty — one rule instead of four breakpoints. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(h2,h3){
  font-size: var(--kicc-title) !important;
  line-height: 1.2 !important;
  margin: 3px 0 2px !important;
  overflow-wrap: anywhere;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(.county-description,p){
  font-size: var(--kicc-body) !important;
  line-height: 1.38 !important;
  margin: 0 0 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(.county-code,.badge,.muted-xs,.county-links a){
  font-size: var(--kicc-meta) !important;
  line-height: 1.5 !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile .county-links{gap: 8px !important; margin-top: 4px !important}

/* ── 3B · MODEL B — STACKED CARD ───────────────────────────────────────────
   Media box keeps the shared ratio; the copy is a column with the action row
   pinned to the bottom, so two cards with different copy still line up. */
body:not(.admin-shell) #app :is(.hierarchy-tile,.mkt-card,.prod-card){
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  border-radius: var(--kicc-radius);
  overflow: hidden;
}
body:not(.admin-shell) #app :is(.hierarchy-tile__media,.pc-media,.tile-ratio){
  position: relative;
  width: 100% !important;
  aspect-ratio: var(--kicc-ratio) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
body:not(.admin-shell) #app :is(.hierarchy-grid,.ven-grid,.inst-grid,.sector-grid) .hierarchy-tile__media{
  aspect-ratio: var(--kicc-ratio-wide) !important;
}
body:not(.admin-shell) #app :is(.hierarchy-tile__media,.pc-media) :is(img,video,picture){
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body:not(.admin-shell) #app :is(.hierarchy-tile__body,.tile-body,.mkt-card > div){
  padding: var(--kicc-pad) !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
body:not(.admin-shell) #app :is(.hierarchy-tile,.mkt-card,.prod-card) :is(h2,h3){
  font-size: var(--kicc-title) !important;
  line-height: 1.24 !important;
  margin: 0 0 2px !important;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:not(.admin-shell) #app :is(.hierarchy-tile,.mkt-card,.prod-card) p{
  font-size: var(--kicc-body) !important;
  line-height: 1.42 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:not(.admin-shell) #app :is(.hierarchy-tile,.mkt-card,.prod-card) :is(.btn,a.btn){margin-top: auto}
body:not(.admin-shell) #app :is(.hierarchy-tile,.mkt-card,.prod-card) .btn{
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: var(--kicc-meta) !important;
  border-radius: 9px !important;
  white-space: nowrap;
}

/* ── 4 · CAROUSEL: EQUAL SLIDES, NO STAGGER ────────────────────────────────
   Both chapters used different flex-basis (min(78%,950px) vs min(53%,610px)),
   16/10 vs 4/5 windows, and pushed every even tile down 64px — the exact defect
   reported. One slide width, one ratio, no offset. */
body:not(.admin-shell) #app .tm-track{
  display: flex !important;
  gap: var(--kicc-gap) !important;
  padding: 4px 2px 20px;
  align-items: flex-start;
}
body:not(.admin-shell) #app .tm-tile,
body:not(.admin-shell) #app .tm-gallery[data-tm-table="products"] .tm-tile{
  flex: 0 0 var(--kicc-slide) !important;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
}
body:not(.admin-shell) #app #chapter-makers .tm-tile:nth-child(even){margin-top: 0 !important}
/* Measured before this rule: two slides in the same row rendered 486px and
   243px tall — the products gallery kept its own 4/5 override, so one row had
   two shapes. A carousel row is one height, always. */
body:not(.admin-shell) #app .tm-gallery .tm-window,
body:not(.admin-shell) #app .tm-gallery[data-tm-table="products"] .tm-window,
body:not(.admin-shell) #app .tm-window{
  aspect-ratio: var(--kicc-ratio-wide) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: var(--kicc-radius) !important;
}
/* Equal slide heights: the media box is fixed by the ratio above, so the copy
   block must not be allowed to grow one slide past another. */
body:not(.admin-shell) #app .tm-tile{height: 100% !important}
body:not(.admin-shell) #app .tm-copy h3{-webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden}
body:not(.admin-shell) #app .tm-copy p{display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
body:not(.admin-shell) #app .tm-copy{
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 12px !important;
  border-bottom: 0 !important;
  flex: 1 1 auto;
}
body:not(.admin-shell) #app .tm-copy h3{font-size: var(--kicc-title) !important; margin: 2px 0 4px !important}
body:not(.admin-shell) #app .tm-copy p{font-size: var(--kicc-body) !important; line-height: 1.42 !important}
body:not(.admin-shell) #app .tm-price{font-size: clamp(.95rem, .45vw + .8rem, 1.2rem) !important; margin-bottom: 6px !important}
body:not(.admin-shell) #app .tm-metadata,
body:not(.admin-shell) #app .tm-badge{font-size: var(--kicc-meta) !important}
body:not(.admin-shell) #app .tm-badge{padding: 5px 10px !important; top: 10px !important; left: 10px !important; border-radius: 999px !important}

/* ── 5 · NARROW SCREENS ────────────────────────────────────────────────────
   Below 560px a derived tile would fall under a usable tap target, so the grid
   becomes two columns of 1fr; at 340px and below (iPhone SE class), one. The carousel shows one
   slide plus a peek, which signals swiping without cutting a card in half. */
@media (max-width: 560px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-grid,#countyFull.view-strip,#countyGrid,.hierarchy-grid,.ven-grid,.inst-grid,.sector-grid,.market-grid,.prod-grid,.mkt-grid,#venueGrid,#instGrid,#productGrid,.kicc-grid){
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  body:not(.admin-shell) #app .tm-tile,
  body:not(.admin-shell) #app .tm-gallery[data-tm-table="products"] .tm-tile{flex: 0 0 86% !important}
  :root{--kicc-radius: 12px; --kicc-pad: 10px}
}
@media (max-width: 340px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyFull.view-grid,#countyFull.view-strip,#countyGrid,.hierarchy-grid,.ven-grid,.inst-grid,.sector-grid,.market-grid,.prod-grid,.mkt-grid,#venueGrid,#instGrid,#productGrid,.kicc-grid){
    grid-template-columns: 1fr !important;
  }
}

/* ── 6 · DATA TABLES: same density everywhere ─────────────────────────────── */
body:not(.admin-shell) #app table.tbl :is(th,td){
  padding: 7px 10px !important;
  line-height: 1.35;
  font-size: var(--kicc-meta);
}

/* ── 7 · ACCESSIBILITY ───────────────────────────────────────────────────── */
body:not(.admin-shell) #app :is(.hierarchy-tile,.tm-tile,.mkt-card,.prod-card,.media-tile) :is(a,button):focus-visible{
  outline: 3px solid #FFCD05;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  body:not(.admin-shell) #app .tm-tile{transition: none !important; transform: none !important}
}
@media (forced-colors: active){
  body:not(.admin-shell) #app :is(.hierarchy-tile,.tm-tile,.mkt-card,.prod-card,.media-tile){border: 1px solid CanvasText}
}

/* ── 8 · ORBIT CAROUSEL — the last hardcoded surface ───────────────────────
   `.orbit-screen` carried literal `width:350px;height:285px` inside a fixed
   `height:420px` stage, with a 278×255 override under 700px. On a 1024px laptop
   the three visible screens rendered 350/350/350 but the stage clipped the
   tallest caption, and on a tablet the same 350px card sat inside a 420px well
   with 90px of dead space. The carousel is a sized surface like any other, so it
   takes the same tokens: a fluid stage, a ratio-locked screen, one radius. */
body:not(.admin-shell) #app .orbit-stage{
  height: auto !important;
  min-height: clamp(300px, 34vw, 460px);
  aspect-ratio: 16 / 7;
  max-height: 62vh;
}
body:not(.admin-shell) #app .orbit-screen{
  width: clamp(232px, 26vw, 400px) !important;
  height: auto !important;
  aspect-ratio: var(--kicc-ratio-wide);
  margin-left: calc(clamp(232px, 26vw, 400px) / -2) !important;
  top: clamp(12px, 2.4vw, 44px) !important;
  border-radius: var(--kicc-radius) !important;
  max-height: calc(clamp(300px, 34vw, 460px) - clamp(24px, 4vw, 88px));
}
body:not(.admin-shell) #app .orbit-screen :is(h3){
  font-size: clamp(1.05rem, 1.9vw, 2rem) !important;
  line-height: 1.15 !important;
}
body:not(.admin-shell) #app .orbit-screen :is(p,.orbit-code){
  font-size: clamp(10px, .9vw, 12px) !important;
  line-height: 1.5 !important;
}
body:not(.admin-shell) #app .orbit-caption{inset: auto clamp(12px, 1.6vw, 24px) clamp(12px, 1.6vw, 23px) !important}
body:not(.admin-shell) #app :is(.orbit-description,.orbit-pop){
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 700px){
  body:not(.admin-shell) #app .orbit-stage{min-height: 300px; aspect-ratio: 4 / 3}
  body:not(.admin-shell) #app .orbit-screen{width: 78vw !important; margin-left: -39vw !important; top: 12px !important}
}

/* ── 9 · THE UTILITY `.g4` GRID IS NOT A TILE GRID ─────────────────────────
   `class="grid g4"` on #countyFull is what kept the county catalogue at a fixed
   four columns regardless of width: `.g4{grid-template-columns:repeat(4,1fr)}`
   is re-declared in both approved-design.css and the reference page, so any
   surface that opted into the shared token grid by id still fought a naked class
   rule at a lower specificity than it looked. Where a grid owns tiles, the token
   grid wins outright — no per-page column count may survive. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .grid.g4:is(.kicc-grid,[id$="Grid"],[id$="Full"],.hierarchy-grid,.market-grid){
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kicc-tile-min)), 1fr)) !important;
  gap: var(--kicc-gap) !important;
}

/* ── 10 · EQUAL HEIGHTS, ENFORCED LAST ─────────────────────────────────────
   Measured at 1440×900 after 962d9b7: two county cards in the same row were
   346 px and 321 px, and two carousel slides were 499 px and 515 px. Cause: the
   card height was still being derived from how many lines of copy the record
   happened to carry (a one-line description vs a two-line one), not from the
   grid. A tile row is one rectangle; the copy is clamped into it.

   Model A (overlay cards: counties, media tiles) — the card itself carries the
   ratio and the photograph is absolutely inset, so body copy can never add
   height. Model B (stacked cards: carousel, marketplace) — the media box is
   fixed by its ratio and the copy block reserves exactly two title lines plus
   two body lines. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile{
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(.tile-media,.tile-ratio){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(img,video,picture){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile .tile-body{
  position: absolute !important;
  inset: auto 0 0 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Model B — stacked cards. Reserve the copy lines, clamp the overflow. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.tm-tile,.mkt-card,.prod-card,.hierarchy-tile){
  height: 100% !important;
  align-self: stretch !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .tm-gallery .tm-window,
html[data-kicc-motion-engine] body:not(.admin-shell) #app .tm-gallery[data-tm-table="products"] .tm-window{
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .tm-copy{
  min-height: 176px !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .tm-copy h3{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(2 * 1.24em) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .tm-copy p{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(2 * 1.42em) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ── 8 · NEVER A BLANK CARD ────────────────────────────────────────────────
   Measured at 375px before this rule: county cards below the fold rendered as
   flat grey boxes — `.tile-media` present, no image decoded yet, background
   color(srgb .897 .892 .868 / .8). A card must look like a card the moment it
   is painted, whether or not its photograph has been fetched. The tint is the
   warm paper tone; the ratio box always has height, so nothing collapses. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.media-tile,.tile-ratio,.tile-media,.hierarchy-tile__media,.pc-media){
  background-color: var(--ui-card, #17191C) !important;
  background-image: linear-gradient(135deg, rgba(255,207,5,.10), rgba(20,17,12,.55) 62%) !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Once the real photograph is decoded it covers the gradient; until then the
   card reads as intentional, not broken. */
/* NEVER `.mkt-card` here. This selector used to include the marketplace card,
   which has no `.tile-media` wrapper: the product photograph became an
   absolutely-positioned layer covering the whole 251px card, so the title, the
   county, the price and the buttons sat on top of a photograph with the theme's
   ink — measured on the live page as photo-over-text, no readable description,
   and no way to tell one listing from another without tapping it. The media box
   owns the absolute layer; the card is a flow column (Model B). */
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.media-tile,.hierarchy-tile) :is(img,video)[src],
html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(.tile-media,.tile-ratio,.pc-media,.kmt-media) :is(img,video){
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Two columns on a 375px phone: 156px cards clear the fold instead of one
   416px slab per screen. */
@media (max-width: 560px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile .tile-body{
    padding: 7px 8px 8px !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile :is(.county-description,p){
    display: none !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app :is(#countyFull,#countyGrid) .media-tile .tile-ratio{
    aspect-ratio: 3 / 4 !important;
  }
}

/* ── 10 · MARKETPLACE TILE (.kmt-*) ─────────────────────────────────────────
   Measured on the live page before this block, at 375x812 and 1440x900:
   `.mkt-card` was 251px / 225px tall and its <img> was 249px / 223px tall — the
   photograph WAS the card, absolutely positioned over it, with the title, the
   county, the price and three buttons painted on top in theme ink. That is the
   whole complaint: "little to no description, the user has to click to know
   what's that", and "a crooked understanding of fit to screen". A 168px-wide
   phone card cannot hold a 16/10 photograph and four lines of copy in the same
   box, so the two are separated here: media on top, copy on a solid plate below.
   Nothing is hover-only; every tile states its county, category, name, a line of
   the seller's own words, its price and its actions at every width. */

html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card{
  display:flex !important;
  flex-direction:column !important;
  background:var(--ui-card,#17191C) !important;
  border:1px solid var(--ui-line,rgba(128,128,128,.26)) !important;
  border-radius:var(--kicc-radius) !important;
  overflow:hidden !important;
  height:100% !important;
  min-height:0 !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-media{
  position:relative !important;
  display:block !important;
  width:100% !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#0E1114 !important;
  flex:0 0 auto !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-media :is(img,video){
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-still[hidden]{display:none !important}
/* A film badge, so a shopper knows tapping opens a clip and not a photo set. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-tag{
  position:absolute !important; top:8px !important; left:8px !important;
  font-size:9.5px !important; font-weight:700 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; padding:3px 7px !important; border-radius:999px !important;
  background:rgba(11,11,11,.72) !important; color:#FFCD05 !important;
  -webkit-text-fill-color:#FFCD05 !important; backdrop-filter:blur(4px);
}

/* Copy plate. The card owns the ink, not the photograph behind it. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-body{
  display:flex !important; flex-direction:column !important; gap:3px !important;
  padding:var(--kicc-pad) !important; flex:1 1 auto !important; min-width:0 !important;
  background:var(--ui-card,#17191C) !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-kicker{
  margin:0 !important; font-size:var(--kicc-meta) !important; line-height:1.3 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--ui-muted,#9AA3AC) !important; -webkit-text-fill-color:var(--ui-muted,#9AA3AC) !important;
  font-weight:600 !important; opacity:1 !important;
  display:block !important; -webkit-line-clamp:none !important; overflow:visible !important;
  white-space:nowrap !important; text-overflow:ellipsis !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-name,
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-name a{
  font-family:var(--font-ui,inherit) !important;
  font-size:var(--kicc-title) !important; line-height:1.28 !important;
  margin:1px 0 0 !important; font-weight:700 !important; letter-spacing:0 !important;
  color:var(--ui-ink,#F7F4EE) !important; -webkit-text-fill-color:var(--ui-ink,#F7F4EE) !important;
  text-decoration:none !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-name{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important; min-height:calc(2 * 1.28em) !important;
}
/* The description is the point of this pass: two lines of the seller's own
   words, always present, never behind a tap. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-desc{
  margin:0 !important; font-size:var(--kicc-body) !important; line-height:1.42 !important;
  color:var(--ui-ink,#F7F4EE) !important; -webkit-text-fill-color:var(--ui-ink,#F7F4EE) !important;
  opacity:.74 !important; font-weight:400 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:calc(2 * 1.42em) !important;
}
/* Price is the price, not "the second paragraph". The old nth-of-type rule
   painted whatever paragraph happened to be second in gold bold. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-price{
  margin:4px 0 0 !important; font-size:calc(var(--kicc-title) * 1.06) !important;
  line-height:1.2 !important; font-weight:800 !important; letter-spacing:-.01em !important;
  color:#FFCD05 !important; -webkit-text-fill-color:#FFCD05 !important;
  display:block !important; -webkit-line-clamp:none !important; overflow:visible !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-actions{
  display:flex !important; flex-wrap:wrap !important; gap:5px !important;
  margin-top:auto !important; padding-top:8px !important; align-items:center !important;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-actions form{margin:0 !important; display:inline-flex !important}
/* Three CTAs do not fit a 168px phone card. View + Add stay everywhere; Buy now
   is a checkout shortcut that already exists on the listing page. */
@media (max-width:560px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-actions .btn.gold{display:none !important}
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-actions .btn{
    min-height:34px !important; padding:6px 9px !important; font-size:11px !important;
  }
}

/* ── 11 · MARKETPLACE DENSITY: the count must follow the screen ─────────────
   The complaint was literal: "you used a crooked understanding of fit to
   screen, even in small or big screens it's the same number of tiles". The
   shared token is clamp(158px,13.5vw,224px), which on a 375px phone yields two
   168px cards — a photograph and a title squeezed into 146px of text — and on a
   1440px screen yields six 213px cards, which is a contact sheet, not a shop.
   The marketplace therefore gets its own tile floor: one honest column on a
   phone, two on a tablet, four to five on a desktop. Nothing is hard-coded to a
   count; each floor produces the count the width can actually carry. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-grid{
  --kicc-tile-min: 262px;
  gap: clamp(10px, 1.1vw, 18px) !important;
  align-items: stretch !important;
}
@media (min-width: 900px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-grid{--kicc-tile-min: 292px}
}
@media (min-width: 1400px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-grid{--kicc-tile-min: 318px}
}
@media (max-width: 560px){
  /* One column, edge to edge. Two 168px tiles side by side cannot show a
     description, and showing no description is the defect being fixed. */
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-media{
    aspect-ratio: 16 / 9 !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-name{
    font-size: 1.02rem !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .mkt-card .kmt-desc{
    font-size: 12.5px !important;
    -webkit-line-clamp: 3 !important; line-clamp: 3 !important;
  }
}

/* ── 12 · RAIL: reserved, not inserted ──────────────────────────────────────
   The personal rail arrives from /marketing/rail at ~2-3s (it resolves a market,
   a season and a weather call). The first version appended it into the flow when
   the response landed, which pushed the entire 24-tile catalogue down by ~300px
   after the visitor had already started reading — the pop-in visible in the
   screen recording, measured as CLS 0.77 on /marketplace. The box and its
   skeleton are now in the served HTML, so the layout is final at first paint and
   the picks merely fill it. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail{
  margin:0 0 1.1rem !important;
  min-height:186px;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail[data-state="done"]{min-height:0}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail-sk{
  display:block; border:1px solid var(--ui-line,rgba(128,128,128,.22));
  border-radius:var(--kicc-radius); padding:var(--kicc-pad); background:rgba(255,255,255,.03);
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail-sk-head{
  display:block; height:14px; width:170px; border-radius:6px; margin-bottom:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.14),rgba(255,255,255,.07));
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail-sk-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:8px;
}
html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail-sk-row i{
  display:block; height:58px; border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
}
@media (max-width:560px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail{min-height:150px}
  html[data-kicc-motion-engine] body:not(.admin-shell) #app .kicc-rail-sk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 13 · FILTER: one swipeable line on a phone ─────────────────────────────
   Measured at 375x812: #mktChips rendered 286px tall — 14 wrapped pills eating
   a third of the first screen before a single listing was visible, and the
   catalogue started below the fold on every phone. On touch widths it is now a
   single horizontal rail the thumb drags, 44px tall, with the active chip
   scrolled into view by the browser. */
@media (max-width: 900px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app #mktChips{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    gap:7px !important;
    padding-bottom:6px !important;
    margin-bottom:1rem !important;
    scrollbar-width:none;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app #mktChips::-webkit-scrollbar{display:none}
  html[data-kicc-motion-engine] body:not(.admin-shell) #app #mktChips .mkt-chip{
    flex:0 0 auto !important; scroll-snap-align:start;
    min-height:40px !important; padding:9px 13px !important; font-size:12px !important;
  }
}


/* ── 14 · MARKETPLACE COLUMN COUNT: why section 11 lost, and the fix ────────
   Section 11 asked for one column on a phone and got two 167.5px tiles anyway.
   Cause measured in the browser: the shared grid rule at line ~274 is written
   as `:is(#countyFull,#countyFull.view-grid,...,.mkt-grid,...)`, and :is()
   takes the specificity of its strongest argument — #countyFull.view-grid, an
   ID plus a class. That rule therefore carries two IDs and beat every
   .mkt-grid override, including the `!important` one in section 11, so
   grid-template-columns never changed at any width. A rule written with a
   doubled `#app#app` matches the same element, carries two IDs itself, and —
   being later in the file — wins the tie. The count now genuinely follows the
   viewport: 1 / 2 / 3 / 4 / 5. */
html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-grid{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: clamp(10px,1.1vw,18px) !important;
}
@media (max-width:560px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-grid{
    grid-template-columns: minmax(0,1fr) !important; gap: 12px !important;
  }
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-card .kmt-media{aspect-ratio:16/9 !important}
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-card .kmt-name{font-size:1.02rem !important}
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-card .kmt-desc{
    font-size:12.5px !important; -webkit-line-clamp:3 !important; line-clamp:3 !important;
  }
}
@media (min-width:561px) and (max-width:899px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (min-width:900px) and (max-width:1199px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (min-width:1600px){
  html[data-kicc-motion-engine] body:not(.admin-shell) #app#app .mkt-grid{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  }
}

/* ============================================================================
   · NATIONAL SECTOR DIRECTORY — entity tiles
   /national-sector/{slug} rendered its entities as text rows: a name, a
   two-line blurb and a phone number, on a page whose neighbours (county grids,
   institution grids, marketplace) all show a picture. The cards here are the
   same tile as everywhere else, so the column count has to follow the viewport
   the same way: auto-fill with a minimum track instead of a fixed 1/2/3.
   ========================================================================== */
.nat-sector-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  gap:18px;
}
.nat-sector-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ui-surface,#fff);border:1px solid var(--ui-line,rgba(11,11,11,.10));
  border-radius:18px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
}
.nat-sector-card:hover{transform:translateY(-3px);border-color:rgba(179,38,30,.32);box-shadow:0 18px 44px rgba(11,11,11,.10)}
.nat-sector-card__media{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,205,5,.16),rgba(11,11,11,.06));
  text-decoration:none;
}
.nat-sector-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.nat-sector-card__initials{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 1.5rem/1 'Fraunces',serif;color:rgba(11,11,11,.34);letter-spacing:.04em;
}
html[data-theme="dark"] .nat-sector-card__initials{color:rgba(255,248,239,.40)}
.nat-sector-card__badge{
  position:absolute;bottom:10px;left:10px;z-index:2;
  background:#FFCD05;color:#0B0B0B;border-radius:99px;
  font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 10px;
}
.nat-sector-card__badge--quiet{background:rgba(11,11,11,.72);color:#FFF8EF}
.nat-sector-card__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.nat-sector-card__body h3 a{color:inherit;text-decoration:none}
.nat-sector-card__body h3 a:hover{color:#B3261E}

/* · hierarchy tile — initials plate and film marker
   Not every institution owns a photograph yet. The tile then shows its initials
   on a warm plate instead of a black rectangle, and a film badge marks the tiles
   that carry motion. Same geometry in every grid that uses .hierarchy-tile. */
.hierarchy-tile__initials{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,205,5,.18),rgba(11,11,11,.08));
  font:600 1.9rem/1 'Fraunces',serif;letter-spacing:.05em;color:rgba(11,11,11,.42);
}
html[data-theme="dark"] .hierarchy-tile__initials{
  background:linear-gradient(135deg,rgba(255,205,5,.14),rgba(255,248,239,.05));
  color:rgba(255,248,239,.52);
}
.hierarchy-tile__film{
  position:absolute;bottom:10px;left:10px;z-index:2;
  background:#FFCD05;color:#0B0B0B;border-radius:99px;
  font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 10px;
}