/* =============================================================================
   mockups.css — the listing work the site shows off.
   =============================================================================

   Every visual on the marketing pages that depicts a brochure, a social post,
   a document or a published listing site is built from this file. It is a
   faithful rendering of the "Noir Estate" brand system preset the product
   actually ships (backend `brand_system_presets.py`, preset id 6): bone ground,
   full-bleed near-black bands, Work Sans at 200 for display and 300 for body,
   letterspaced caps for labels, and no rounded corners anywhere.

   Two rules keep this honest, and both matter more than they look:

   1. TOKENS ARE COPIED, NOT INVENTED. The `--mk-*` values below are the
      preset's own token values. If the preset changes, change them here — do
      not eyeball a near-miss, because the whole point of these visuals is that
      a visitor is looking at real output, not a marketing illustration of it.

   2. THIS IS THE AGENT'S BRAND, NOT OURS. Nothing in here uses Mareto green,
      Mareto blue, or Newsreader. The site's own chrome (browser bars, "Ready"
      pills, app furniture) stays in the Mareto palette from styles.css and
      wraps these pieces; the pieces themselves are the agent's. Mixing the two
      is the single easiest way to make this look fake again.

   The pieces are sized by their container, not by fixed pixels: every one is
   built from `em` off a `--mk-scale` font-size set on the outer element, so the
   same markup renders as a 150px thumbnail on the product hero and a 320px
   brochure in the feature band without a second set of rules.
   ============================================================================= */

.mk {
  /* --- Noir Estate tokens (preset 6) ------------------------------------ */
  --mk-bg: #f1f0ee;
  --mk-surface: #ffffff;
  --mk-text: #1c1d1b;
  --mk-muted: #8b8b86;
  --mk-accent: #23281f;
  --mk-divider: #d8d6d1;
  --mk-inverse-bg: #0e0f0e;
  --mk-inverse-text: #f1f0ee;
  /* The muted tone reversed out of the dark bands. A flat hex can't sit on
     both the bone ground and a photograph, so this one stays a transparency. */
  --mk-inverse-muted: rgba(241, 240, 238, 0.72);

  /* Type. Work Sans is self-hosted through the Fonts API (astro.config.mjs);
     var(--font-worksans) is the hashed family it generates. */
  --mk-font: var(--font-worksans), -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mk-display-weight: 200;
  --mk-body-weight: 300;
  --mk-label-tracking: 0.32em;
  --mk-eyebrow-tracking: 0.28em;

  /* Everything below is em-relative to this, so a piece scales as a whole —
     type, rules and padding together. The value comes from the piece's OWN
     rendered width in container units (see .mk-fit and the per-piece defaults),
     NOT from a pixel number chosen at the call site.

     That matters because these bands are fluid: a fixed 13px set on a spread
     that renders 400px wide on desktop is nearly double the right size when
     the same band is 280px on a tablet, and the page silently overflows its
     own sheet. `--mk-scale` remains as an override for the rare fixed-size
     placement; prefer letting the piece size itself. */
  font-size: var(--mk-scale, 1rem);

  font-family: var(--mk-font);
  font-weight: var(--mk-body-weight);
  color: var(--mk-text);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

/* Photography is pulled toward grey and down in brightness so the ink stays
   the loudest thing on the page — the preset's defining move. `--mk-photo`
   lets a caller dial it back where the photo is the subject (the published
   site, where the agent's visitor sees true colour). */
.mk img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--mk-photo, grayscale(0.3) contrast(1.04));
}

/* Every piece is wrapped in .mk-fit, which is what `cqw` below measures. The
   wrapper also carries the caller's width, shadow and offsets, so the piece
   itself never has layout imposed on it from outside. */
.mk-fit { container-type: inline-size; width: 100%; }

/* Per-piece defaults, tuned so each piece's content fills its own aspect ratio
   at any width. Change one only alongside a look at the piece at both its
   smallest (a 28px row thumbnail) and largest (a feature band) rendering. */
.mk-cover  { font-size: var(--mk-scale, 7.2cqw); }
.mk-spread { font-size: var(--mk-scale, 3.05cqw); }
.mk-social { font-size: var(--mk-scale, 3.5cqw); }
.mk-sheet  { font-size: var(--mk-scale, 5.6cqw); }
.mk-site   { font-size: var(--mk-scale, 2.9cqw); }

/* Shared atoms ------------------------------------------------------------ */
.mk-eyebrow {
  font-size: 0.54em;
  font-weight: 400;
  letter-spacing: var(--mk-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-label {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: var(--mk-label-tracking);
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-display {
  font-weight: var(--mk-display-weight);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
}
.mk-price {
  font-weight: var(--mk-body-weight);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.mk-hair { height: 1px; background: var(--mk-divider); }
.mk-hair--rev { background: rgba(241, 240, 238, 0.28); }

/* On the dark ground the muted tones flip together with the ink. */
.mk-rev { color: var(--mk-inverse-text); }
.mk-rev .mk-eyebrow,
.mk-rev .mk-label { color: var(--mk-inverse-muted); }

/* Elevation is a hairline, never a stack — but these pieces sit ON the
   marketing page, where they need to read as physical objects lifted off the
   band. So the shadow lives on a wrapper, outside the brand system. */
.mk-lift { box-shadow: 0 24px 60px -30px rgba(14, 15, 14, 0.55); }
.mk-lift--soft { box-shadow: 0 18px 44px -28px rgba(14, 15, 14, 0.45); }


/* =============================================================================
   BROCHURE COVER
   Full-bleed photograph, darkened, with the address set at hairline weight
   over it and a rule separating the price from the agency line.
   ============================================================================= */
.mk-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mk-inverse-bg);
  color: var(--mk-inverse-text);
}
.mk-cover__photo { position: absolute; inset: 0; }
.mk-cover__photo img { filter: grayscale(0.35) brightness(0.62) contrast(1.06); }
/* Same reasoning as the social scrim: the cover has to hold reversed type over
   whatever photograph the listing has, including a bright one. */
.mk-cover__photo::after {
  content: '';
  position: absolute;
  inset: 25% 0 0;
  background: linear-gradient(to bottom, rgba(14, 15, 14, 0) 0%, rgba(14, 15, 14, 0.72) 88%);
}
.mk-cover__body {
  position: relative;
  height: 100%;
  padding: 1.8em 1.65em;
  display: flex;
  flex-direction: column;
}
.mk-cover__addr {
  font-size: 1.95em;
  margin-top: auto;   /* the address sits on the baseline of the cover */
}
.mk-cover__sub {
  font-size: 0.66em;
  color: var(--mk-inverse-muted);
  margin: 1em 0 0;
}
.mk-cover__rule { margin: 1.2em 0 0.95em; }
.mk-cover__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2em;
}
/* The price never wraps; the agency mark takes the wrapping instead and stays
   flush right, so the two never crowd into each other mid-number. */
.mk-cover__price { font-size: 0.88em; white-space: nowrap; }
.mk-cover__foot .mk-label { text-align: right; max-width: 46%; line-height: 1.7; }

/* The compact variant used in thumbnails: shorter, no sub-line, tighter pad.
   The eyebrow goes too — at tile scale it sets under 6px, where letterspaced
   caps stop being words and become noise across the photograph. */
.mk-cover--tile { aspect-ratio: 4 / 3.2; }
.mk-cover--tile .mk-cover__body { padding: 1.2em 1.2em; }
.mk-cover--tile .mk-cover__addr { font-size: 1.3em; }
/* The agency mark goes for the same reason: two letterspaced words wrapping
   across a 40px column read as damage, not as a mark. */
.mk-cover--tile .mk-eyebrow,
.mk-cover--tile .mk-cover__foot .mk-label { display: none; }


/* =============================================================================
   BROCHURE SPREAD
   A titled band across the top, then prose beside a spec list on the left and
   stacked frames on the right. This is the piece that has to carry "laid out
   like a design studio did it", so it is the one with real copy in it.
   ============================================================================= */
.mk-spread {
  background: var(--mk-bg);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  /* A page never spills past its own edge. Without this the spec list runs out
     of the bottom of the sheet at narrow widths and the piece stops reading as
     a printed page at all. */
  overflow: hidden;
}
.mk-spread__band {
  background: var(--mk-inverse-bg);
  color: var(--mk-inverse-text);
  padding: 0.9em 1.7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.mk-spread__band-title { font-size: 0.86em; font-weight: var(--mk-display-weight); }
.mk-spread__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.7em;
  padding: 1.55em 1.7em;
}
.mk-spread__h { font-size: 1.05em; line-height: 1.2; }
.mk-spread__text {
  font-size: 0.62em;
  line-height: 1.85;
  color: #54554f;
  margin: 0.9em 0 0;
}
.mk-specs { list-style: none; margin: 1.1em 0 0; padding: 0; }
.mk-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.6em;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--mk-divider);
}
.mk-specs dt, .mk-specs .mk-specs__k {
  font-size: 0.85em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-specs .mk-specs__v { font-variant-numeric: tabular-nums; }
.mk-frames { display: grid; grid-template-rows: 1fr 1fr; gap: 0.7em; min-height: 0; }
.mk-frame { overflow: hidden; background: #e3e2df; }
/* The flat frame is a deliberate rest in the rhythm — the preset's moss accent
   as a plain field, which is how the real spread breaks up two photos. */
.mk-frame--flat { background: var(--mk-accent); }


/* =============================================================================
   SOCIAL POSTS
   4:5 portrait. Two kinds only: a photo post with the text reversed out of a
   darkened image, and a type-only post on the bone ground. Alternating them is
   what makes a row of three read as a designed set instead of three crops.
   ============================================================================= */
.mk-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75em; }
.mk-post {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mk-inverse-bg);
  color: var(--mk-inverse-text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mk-post__photo { position: absolute; inset: 0; }
.mk-post__photo img { filter: grayscale(0.35) brightness(0.55) contrast(1.05); }
/* A scrim under the text. Dimming the whole photo is not enough on its own:
   a bright frame (the pool shots) still leaves the reversed caption sitting on
   near-white, and the caption has to stay legible on ANY photo the agent
   drops in — which is the same reason a real template carries a scrim. */
.mk-post__photo::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, rgba(14, 15, 14, 0) 0%, rgba(14, 15, 14, 0.78) 82%);
}
.mk-post__body { position: relative; padding: 0.85em; }
.mk-post__head { font-size: 0.92em; font-weight: var(--mk-display-weight); line-height: 1.1; margin: 0.55em 0 0; }
.mk-post__meta { font-size: 0.52em; color: var(--mk-inverse-muted); margin-top: 0.45em; }
.mk-post__tag { font-size: 0.46em; letter-spacing: var(--mk-label-tracking); text-transform: uppercase; color: var(--mk-inverse-muted); }

/* The type-only post. Left as a bottom-aligned caption it reads as a tile
   whose image failed to load, so it uses the full height instead: the beat
   label sits at the top, the announcement drops to the bottom over a hairline.
   That's a composition rather than an absence. */
.mk-post--type { background: var(--mk-bg); color: var(--mk-text); }
.mk-post--type .mk-post__meta,
.mk-post--type .mk-post__tag { color: var(--mk-muted); }
.mk-post--type .mk-post__body { height: 100%; display: flex; flex-direction: column; }
.mk-post--type .mk-post__head {
  margin-top: auto;
  padding-top: 0.65em;
  border-top: 1px solid var(--mk-divider);
}

/* Stories are the same post at 9:16 — the calendar shows both. */
.mk-post--story { aspect-ratio: 9 / 16; }

/* Five-up: a week of the calendar. The tiles are a third the width of a hero
   post, so the type has to come down independently — at the row's own scale
   the headline would fill the tile edge to edge. */
.mk-social--strip { grid-template-columns: repeat(5, 1fr); font-size: var(--mk-scale, 2.1cqw); }
.mk-social--strip .mk-post__head { font-size: 1.05em; }
.mk-social--strip .mk-post__tag { font-size: 0.6em; letter-spacing: 0.2em; }
@media (max-width: 640px) {
  /* Three of the five, so the tiles stay wide enough to read. */
  .mk-social--strip { grid-template-columns: repeat(3, 1fr); }
  .mk-social--strip > *:nth-child(n + 4) { display: none; }
}


/* =============================================================================
   DOCUMENT SHEET
   The pricing strategy / marketing plan / CMA pages. A document is mostly
   typography, so this is the one piece where the type IS the picture: a
   letterspaced running head, a hairline rule, a heading, and real text.
   ============================================================================= */
.mk-sheet {
  background: var(--mk-surface);
  aspect-ratio: 17 / 22;
  padding: 1.55em 1.45em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mk-sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--mk-divider);
}
.mk-sheet__title { font-size: 1.02em; line-height: 1.15; margin: 1.15em 0 0; }
.mk-sheet__text {
  font-size: 0.56em;
  line-height: 1.9;
  color: #54554f;
  margin: 0.9em 0 0;
}
/* Text below the fold of a small sheet fades rather than being cut mid-word,
   so the piece reads as a page continuing past the crop. */
.mk-sheet__flow {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
          mask-image: linear-gradient(#000 62%, transparent 100%);
}
.mk-sheet__figure { margin-top: 1em; background: var(--mk-bg); overflow: hidden; }
.mk-sheet__caption {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0 0.7em 0.7em;
  font-size: 0.42em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

/* A simple bar chart, drawn from real numbers rather than faked with divs of
   arbitrary height — the comps chart on the pricing page. */
.mk-bars { display: flex; align-items: flex-end; gap: 0.45em; height: 4.2em; padding: 0.7em; }
.mk-bars__b { flex: 1; background: var(--mk-divider); }
.mk-bars__b--on { background: var(--mk-accent); }


/* =============================================================================
   PUBLISHED LISTING SITE
   What the agent's buyer actually sees. Photography runs at true colour here
   (--mk-photo), because this is the one surface where the photo is the product
   and the brand system is the frame around it.
   ============================================================================= */
.mk-site { --mk-photo: none; background: var(--mk-bg); }
.mk-site__hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mk-inverse-bg); }
.mk-site__hero img { filter: brightness(0.78) contrast(1.03); }
/* The hero eyebrow reverses out of whatever the top of the photo happens to
   be. Scrim rather than more brightness reduction, so the photograph itself
   stays true where it isn't carrying type. */
.mk-site__hero::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, rgba(14, 15, 14, 0) 0%, rgba(14, 15, 14, 0.68) 90%);
}
.mk-site__hero-copy { z-index: 1; }
.mk-site__hero-copy { position: absolute; left: 1.35em; right: 1.35em; bottom: 1.1em; color: var(--mk-inverse-text); }
.mk-site__addr { font-size: 1.5em; margin-top: 0.45em; }
.mk-site__meat {
  padding: 1.05em 1.35em 1.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.mk-site__meta { font-size: 0.62em; color: var(--mk-muted); }
.mk-site__price { font-size: 0.94em; margin-top: 0.35em; }
.mk-site__cta {
  flex-shrink: 0;
  background: var(--mk-inverse-bg);
  color: var(--mk-inverse-text);
  font-size: 0.5em;
  letter-spacing: var(--mk-label-tracking);
  text-transform: uppercase;
  padding: 1.1em 1.9em;
}
.mk-site__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mk-divider); }
.mk-site__strip > span { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e3e2df; }


/* =============================================================================
   BROWSER CHROME
   Mareto's own furniture, not the brand system's — this is the frame the site
   is being previewed IN, so it stays in the site palette from styles.css.
   ============================================================================= */
.mk-browser { background: #fff; border-radius: 12px; overflow: hidden; }
.mk-browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #f4f5f7;
  border-bottom: 1px solid #ececf0;
}
.mk-browser__dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.mk-browser__dots i { width: 8px; height: 8px; border-radius: 99px; background: #e4e4ea; display: block; }
.mk-browser__url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #6a6a73;
  background: #fff;
  border-radius: 6px;
  padding: 6px 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-browser__live {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: #1f8a5b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mk-browser__live i { width: 6px; height: 6px; border-radius: 99px; background: #46c98a; display: block; }


/* =============================================================================
   ASSET CARD
   The Mareto-side wrapper: a white card with our label and status pill, whose
   body is one of the pieces above. This is the seam between the two palettes —
   our chrome outside, the agent's brand inside.
   ============================================================================= */
.mk-asset {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 20px 46px -28px rgba(30, 60, 120, 0.4);
}
.mk-asset__head { display: flex; align-items: center; gap: 9px; }
.mk-asset__name { font-size: 12px; font-weight: 700; color: #16161d; }
.mk-asset__badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  color: #1f8a5b;
  background: #e6f5ec;
  white-space: nowrap;
}
.mk-asset__badge--amber { color: #b97400; background: #fdf0d9; }
/* A thumbnail of an asset: a crop of its own photography in the brand's
   treatment, rather than a coloured square standing in for it.
   Appearance only — it carries NO width or height, because it is used at
   26px in an asset card, 28px in an app row, 32px in the home-page build list
   and 34px in the review queue, and each of those sizes belongs to the layout
   that hosts it. Set the size on the element alongside this class. */
.mk-thumb {
  flex-shrink: 0;
  overflow: hidden;
  background: var(--mk-inverse-bg);
}
.mk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) brightness(0.72); }

.mk-asset__swatch { width: 26px; height: 26px; }
.mk-asset__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mk-asset__body > * { flex: 1; min-height: 0; }


/* =============================================================================
   PLACEMENT HELPERS
   How the pieces sit on a marketing band. These are page-layout concerns, not
   brand-system ones, which is why they live down here away from the tokens.
   ============================================================================= */

/* Fill the band's content width. */
.mk-fill { width: 100%; }
.mk-browser.mk-fill { width: 100%; }

/* The brochure pair: the cover beside the spread it opens to.
   An earlier version floated the cover ON the spread, the way a photographer
   would stack real print — but the spread's whole left column is prose, so the
   overlap buried the one piece of evidence the section is making a claim
   about. They stand side by side instead; the cover is the taller portrait
   piece and sits a little lower, which keeps the pair from reading as two
   panels of one grid. */
.mk-stack { display: flex; align-items: center; justify-content: center; gap: 16px; }
.mk-stack__cover { flex: 0 0 34%; max-width: 195px; transform: translateY(4%); }
.mk-stack__spread { flex: 1 1 auto; min-width: 0; max-width: 400px; }

@media (max-width: 640px) {
  .mk-stack { flex-direction: column; gap: 14px; }
  .mk-stack__cover { flex: none; width: 62%; max-width: none; transform: none; }
  .mk-stack__spread { width: 100%; max-width: none; }
}

/* The before/after pair on the agents page.
   `.mk-before` is deliberately NOT a `.mk` piece — it has no brand system,
   which is the point. It is set in the browser's own UI font, centred, with an
   untreated crop, the way an unstyled listing card looks. Don't "improve" it. */
.mk-before {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px -22px rgba(30, 80, 50, 0.35);
  opacity: 0.9;
  font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
  text-align: center;
}
/* Matches .mk-cover--tile's ratio so the pair sits at one height and the
   comparison is between the two treatments, not two card shapes. */
.mk-before__photo { aspect-ratio: 4 / 3.2; overflow: hidden; background: #eceef0; }
.mk-before__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-before__meat { padding: 11px 12px; }
.mk-before__label { font-size: 10px; font-weight: 600; color: #9a9aa3; }
.mk-before__price { font-size: 14px; font-weight: 600; color: #7a7a83; margin-top: 4px; }

.mk-after {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #1f8a5b;
  box-shadow: 0 18px 40px -20px rgba(30, 80, 50, 0.45);
}
.mk-after__meat { padding: 11px 12px; }
.mk-after__label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #1f8a5b; }
.mk-after__price { font-size: 14px; font-weight: 700; color: #16161d; margin-top: 4px; }

/* Three documents fanned like a printed packet. The centre sheet is the one
   being read, so it is larger, upright and on top; the outer two rotate away
   from it. Percentage widths keep the fan proportional as the band narrows. */
.mk-fan { position: relative; }
.mk-fan__c { position: relative; z-index: 2; width: 40%; max-width: 215px; }
.mk-fan__l,
.mk-fan__r { position: absolute; z-index: 1; width: 36%; max-width: 196px; }
.mk-fan__l { transform: rotate(-7deg) translate(-62%, 3%); }
.mk-fan__r { transform: rotate(6deg) translate(62%, -3%); }

/* Under ~560px the rotated sheets overhang the band and get clipped, and three
   documents at a third of a phone's width are unreadable anyway. Show the one
   that carries the chart. */
@media (max-width: 560px) {
  .mk-fan__l, .mk-fan__r { display: none; }
  .mk-fan__c { width: 62%; max-width: none; }
}

/* An app row whose leading tile is a thumbnail of the asset it names. */
.mk-row {
  background: #fff;
  border-radius: 10px;
  padding: 11px 15px;
  box-shadow: 0 12px 30px -22px rgba(30, 80, 50, 0.35);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mk-row__thumb { width: 28px; height: 28px; border-radius: 4px; }
/* The review-queue leading tile: taller than it is wide, like the document. */
.mk-queue__thumb { width: 34px; height: 34px; border-radius: 7px; }
/* A brochure standing in a line of text, at page proportion. */
.mk-inline-thumb { width: 38px; flex-shrink: 0; }
.mk-row__name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #16161d;
}
.mk-row .mk-asset__badge { margin-left: 0; }


/* =============================================================================
   Small screens
   The pieces are already fluid, but a 3-up social row and a two-column spread
   both stop working under ~520px of piece width. Below that the spread drops
   its frames and the social row becomes two.
   ============================================================================= */
@media (max-width: 720px) {
  /* One column and no frames — and no fixed ratio either. Holding 4:3 with
     half the content left a third of the sheet empty, which reads as a page
     that failed to render rather than a page that is simply shorter. */
  .mk-spread { aspect-ratio: auto; }
  .mk-spread__body { grid-template-columns: 1fr; gap: 1em; }
  .mk-frames { display: none; }
}
@media (max-width: 480px) {
  /* Scoped away from the calendar strip, which sets its own columns further
     up. Unscoped, these two rules were later in the file and won, cutting a
     five-day strip down to two tiles. */
  .mk-social:not(.mk-social--strip) { grid-template-columns: repeat(2, 1fr); }
  .mk-social:not(.mk-social--strip) > *:nth-child(3) { display: none; }
}