/* Receipts - the build log. Hand-authored page, not a Framer export.

   Everything here is scoped under .rc- so it can never collide with Framer's
   hashed .framer-xxxxxx classes (receipts.html also loads site-fixes.css, which
   targets those).

   The palette, type and radii are lifted from the Framer build so this page sits
   inside the same design language as the home page. Framer's own colour tokens
   are referenced by their UUID names with a literal fallback, the way
   site-fixes.css does it - but those tokens are only defined on Framer-built
   pages, so here the fallback is what actually paints. They are kept so a future
   re-export that drops a token variable on this page still resolves.

   Measured off the built home page (see the numbers in section 1).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. Tokens, taken from the home page's computed styles.
        page             #f8f6f3   body background
        surface          #ebe9e4   work cards, contact rows, filter pills
        ink              #2a3132   body copy, card titles
        muted            #5f6566   nav links, standfirsts
        navy             #001666   Libre Baskerville display headings
        orange           #ff5900   wordmark, CTA, accents
        line             #ccc9c4   hairlines / perforations
      Type: display is Libre Baskerville italic 400 at -0.025em, line-height 1.2.
      Body is DM Sans. Radii are 16px (cards) and 8px (pills).
   --------------------------------------------------------------------------- */
:root {
  --rc-page:    var(--token-b7198f72-14e6-45fb-a5b2-8f9db6415f9a, #f8f6f3);
  --rc-surface: var(--token-13a7ab62-f476-46f4-931a-fa3f9513dd06, #ebe9e4);
  --rc-sunk:    var(--token-fc75e4ec-060c-4b0a-9442-8002befda720, #e0deda);
  --rc-ink:     var(--token-0ba7cc43-9dd6-43f5-bf85-fd56e07a2fea, #2a3132);
  --rc-muted:   var(--token-5dfdec3b-3139-426d-b9fc-d1b5ecf28487, #5f6566);
  --rc-navy:    var(--token-73d49074-7cb1-4544-8200-13a6de5ede41, #001666);
  --rc-orange:  var(--token-a2418e68-b41d-46d1-9e27-1a488bd30077, #ff5900);
  --rc-line:    var(--token-e0429981-3549-463b-a2ac-f4b9a54d3fec, #ccc9c4);

  --rc-sans: "DM Sans", "DM Sans Placeholder", sans-serif;
  --rc-serif: "Libre Baskerville", "Libre Baskerville Placeholder", serif;
  /* Receipt tape wants a monospace, but the site ships no mono webfont and this
     page is not worth another 30KB download. A system stack costs nothing and is
     used for metadata only - dates, entry numbers, code - never for prose. */
  --rc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* A receipt is a narrow column of tape. The home page's 1267px content width
     would make these cards read as a feed, not a roll. */
  --rc-measure: 760px;
  --rc-gutter: 24px;
}

/* ---------------------------------------------------------------------------
   2. Reset + page frame.
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body.rc-body {
  margin: 0;
  background: var(--rc-page);
  color: var(--rc-ink);
  font-family: var(--rc-sans);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rc-shell {
  max-width: calc(var(--rc-measure) + var(--rc-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--rc-gutter);
}

/* Skip link - the page is a list of links, so a keyboard user should be able to
   jump the nav. Visually hidden until focused. */
.rc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--rc-ink);
  color: var(--rc-page);
  font-size: 15px;
  text-decoration: none;
}
.rc-skip:focus { left: 16px; top: 16px; }

/* ---------------------------------------------------------------------------
   3. Nav. Matched to the built pages: an 80px bar, 8px gap, Work left, wordmark
   centred, Receipts right. Measured off index.html - each side link is an 80px
   flex box with 40px horizontal padding, which is what balances the wordmark, so
   those numbers are load-bearing.

   (Until 2026-09-20 site-fixes.css rules 1 and 5 hid both side links and their
   wrappers, leaving the nav as the wordmark alone. Both rules are retired now
   that Receipts is a real page; see the notes left in their place.)
   --------------------------------------------------------------------------- */
.rc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 80px;
}
.rc-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  /* Framer sizes its two side links from their own text (117.75px and 126px),
     which leaves the wordmark a few pixels off centre. Giving both the same
     min-width centres it exactly, at a box width that matches the wider of the
     two, so the bar still reads the same as the built pages. */
  min-width: 126px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--rc-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.rc-nav-link:hover { color: var(--rc-orange); }
.rc-nav-link:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: -4px; border-radius: 4px; }
/* The page you are on is named, not linked-looking. */
.rc-nav-link[aria-current="page"] { color: var(--rc-ink); }

/* NOT LAUNCHED YET. Receipts is live and reachable, but it is not being
   announced in the nav, so the built pages hide both side links (site-fixes.css
   rules 1 and 5). This page has its own hand-written nav, which those rules do
   not fully reach - rule 5 would hide "Work" and leave "Receipts" on its own,
   pulling the wordmark off centre. Hide both here so this page matches.

   TO LAUNCH THE NAV: delete this rule, and rules 1 and 5 in site-fixes.css. */
.rc-nav-link { display: none; }

/* The side links' padding is what centres the wordmark, so it cannot simply be
   dropped on a phone. Halve it and let the labels come closer instead. */
@media (max-width: 809.98px) {
  /* 2 x 126 + the 136px wordmark + gaps overflows a 375px screen. Shrink the
     boxes, keeping them equal so the wordmark stays centred. */
  .rc-nav-link { min-width: 84px; padding: 0 8px; font-size: 15px; }
}
.rc-wordmark {
  display: block;
  padding: 24px;
  font-family: var(--rc-serif);
  font-size: 24px;
  line-height: 26.4px;
  color: var(--rc-orange);
  text-align: center;
  text-decoration: none;
}
/* The second line is set italic and indented on the built pages. */
.rc-wordmark i { display: block; font-style: italic; padding-left: 1.5ch; }
.rc-wordmark:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: 4px; }

/* ---------------------------------------------------------------------------
   4. Page head. The display face is the home page's: Libre Baskerville italic,
   navy, tight tracking. Sized down from the home page's 80px h1 because this
   page's column is 760px, not 1267px.
   --------------------------------------------------------------------------- */
.rc-head { padding: 24px 0 8px; text-align: center; }

.rc-eyebrow {
  margin: 0 0 20px;
  font-family: var(--rc-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.rc-title {
  margin: 0;
  font-family: var(--rc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 68px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--rc-navy);
}

.rc-standfirst {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--rc-muted);
}
.rc-standfirst b { font-weight: 500; color: var(--rc-ink); }

/* ---------------------------------------------------------------------------
   5. The torn edge.

   A repeating radial-gradient mask: each tile is opaque except for a circle
   centred on the bottom edge, which bites a scallop out of it. The second mask
   layer is the body of the element, stopped one tooth short so the two meet.
   -webkit-mask is kept for older WebKit.

   Applied to the entry cards (section 7). The post itself is left on bare paper:
   a tear at the foot of a long read would sit a screen or two below anything it
   could plausibly be tearing off.
   --------------------------------------------------------------------------- */
.rc-torn {
  --rc-tooth: 11px;
  background: var(--rc-surface);
  border-radius: 16px 16px 0 0;
  -webkit-mask:
    radial-gradient(var(--rc-tooth) at 50% 100%, #0000 98%, #000 100%)
      50% 100% / calc(var(--rc-tooth) * 2) var(--rc-tooth) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--rc-tooth) + 1px) no-repeat;
  mask:
    radial-gradient(var(--rc-tooth) at 50% 100%, #0000 98%, #000 100%)
      50% 100% / calc(var(--rc-tooth) * 2) var(--rc-tooth) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--rc-tooth) + 1px) no-repeat;
}

/* Stand-in for the filter row when there is only one tag and therefore no
   choice to offer, so the list starts at the same place either way. */
.rc-filters-none { height: 88px; }
/* ---------------------------------------------------------------------------
   6. Tag filters. Same pills as the home page's work filter: 40px tall, 8px
   radius, surface when idle, ink when active.

   Only tags that actually have entries behind them are rendered - receipts.js
   builds the row from the manifest. That mirrors site-fixes.css rule 6, which
   hides the work filters ("AI", "Front-End") with no case studies behind them.
   --------------------------------------------------------------------------- */
.rc-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 48px 0 40px;
}
.rc-filter {
  appearance: none;
  height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--rc-surface);
  color: var(--rc-ink);
  font-family: var(--rc-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rc-filter:hover { background: var(--rc-sunk); }
.rc-filter[aria-pressed="true"] { background: var(--rc-ink); color: var(--rc-page); }
.rc-filter:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   7. The receipt. The whole list is one slip: a column header, a line item per
   entry, and a total - which is how a receipt actually works, and which reads
   as a log far better than a column of separate cards did.

   .rc-torn (section 5) supplies the fill, the top corners and the bottom edge.
   The bottom padding has to clear the teeth or the total sits in them.

   Every line is a link. The mono columns are metadata; the title is the only
   thing set in the body face, so the eye runs down the titles and the numbers
   stay out of the way until they are wanted.
   --------------------------------------------------------------------------- */
.rc-receipt {
  padding: 26px 28px calc(22px + var(--rc-tooth));
}

/* Column headers, and the total, share the till-print voice. */
.rc-receipt-head,
.rc-receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--rc-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-receipt-total b { font-weight: 500; color: var(--rc-ink); }

/* The rule under the header and above the total is doubled, the way a till
   receipt separates its sections from its items. */
.rc-rule {
  height: 0;
  margin: 10px 0;
  border-top: 1px dashed var(--rc-line);
}
.rc-rule-double {
  height: 6px;   /* enough gap that the two lines read as two, not as one thick one */
  margin: 10px 0;
  border-top: 1px dashed var(--rc-line);
  border-bottom: 1px dashed var(--rc-line);
}

/* ---- A line item -------------------------------------------------------- */
.rc-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 -10px;           /* the hover fill bleeds past the text, not the slip */
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}
.rc-row:hover { background: rgba(42, 49, 50, 0.055); }
/* A mask clips everything the element paints, outlines included, so the focus
   ring has to be drawn inside the row rather than around it. */
.rc-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--rc-orange);
}

.rc-row-no,
.rc-row-date,
.rc-row-time {
  flex: none;
  font-family: var(--rc-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rc-muted);
}
/* Fixed columns so the numbers line up down the slip rather than tracking the
   length of the titles beside them. Wide enough for the longest each will hold:
   "NO. 000" and a date with a three-letter month. */
.rc-row-no { width: 64px; }
.rc-row-date { width: 104px; }
.rc-row-time { text-align: right; color: var(--rc-ink); }

/* The shipped stamp. An outline rather than a fill: it is a mark on the line
   item, not a second thing competing with the title for attention. */
.rc-badge {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--rc-line);
  border-radius: 4px;
  font-family: var(--rc-mono);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rc-muted);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.rc-row:hover .rc-badge { border-color: var(--rc-orange); color: var(--rc-orange); }

.rc-row-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--rc-ink);
}

/* Leader dots, the thing that makes a printed line item read as one. Baseline
   alignment is what drops them onto the type's baseline rather than centring
   them in the row. */
.rc-row-lead {
  /* Shrinks far faster than the title beside it (shrink is weighted by basis,
     so the 100 is what makes 24px outrank a ~330px title): the leader gives up
     its width before a title is forced to wrap. A long enough title still
     wraps, and should. */
  flex: 1 100 24px;
  min-width: 0;
  height: 0;
  border-bottom: 1px dotted var(--rc-line);
  transform: translateY(-4px);
}
.rc-row:hover .rc-row-title { text-decoration: underline; text-decoration-color: var(--rc-orange); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Empty state - shown when a filter matches nothing, or before the first entry
   is written. Sits inside the slip, in place of the rows. */
.rc-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--rc-muted);
}
.rc-empty p { margin: 0; }
.rc-empty p + p { margin-top: 6px; font-size: 15px; }

/* ---------------------------------------------------------------------------
   8. Post view. Rendered straight onto the paper rather than into a card - a
   receipt unrolled. Narrower than the list so the prose keeps a ~68ch measure.
   --------------------------------------------------------------------------- */
.rc-post { max-width: 680px; margin: 0 auto; padding-bottom: 16px; }

/* The post's standing head: entry number and tag left, date right, over a
   perforation - the same line the receipt prints for each item. */
.rc-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--rc-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-perf { height: 0; margin: 14px 0; border-top: 1px dashed var(--rc-line); }

.rc-loading { color: var(--rc-muted); }

.rc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 40px;
  font-size: 15px;
  color: var(--rc-muted);
  text-decoration: none;
}
.rc-back:hover { color: var(--rc-orange); }
.rc-back:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: 3px; border-radius: 4px; }
.rc-back svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rc-back:hover svg { transform: translateX(-2px); }

.rc-post-head { margin-bottom: 36px; }
.rc-post-title {
  margin: 14px 0 0;
  font-family: var(--rc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--rc-navy);
}

/* Body copy. 18/30 on the ink, one notch up from the list, because this is the
   part anyone actually reads end to end. */
.rc-prose { font-size: 18px; line-height: 30px; color: var(--rc-ink); }
.rc-prose > :first-child { margin-top: 0; }
.rc-prose p { margin: 0 0 24px; }
.rc-prose strong { font-weight: 700; }

.rc-prose h2 {
  margin: 48px 0 16px;
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--rc-ink);
}
.rc-prose h3 {
  margin: 36px 0 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--rc-ink);
}

.rc-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rc-line);
  transition: text-decoration-color 0.2s ease;
}
.rc-prose a:hover { text-decoration-color: var(--rc-orange); }

.rc-prose ul, .rc-prose ol { margin: 0 0 24px; padding-left: 24px; }
.rc-prose li { margin-bottom: 8px; }
.rc-prose li::marker { color: var(--rc-muted); }

/* The pull-line. The one blockquote a post is allowed gets the display face, so
   it reads as the line worth stealing rather than as an indent. */
.rc-prose blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--rc-orange);
  font-family: var(--rc-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: var(--rc-navy);
}
.rc-prose blockquote p { margin: 0; }

/* Code. Terminal output on a receipt should look like till print: mono on the
   dark ink, which is the same fill as the tag pills. */
.rc-prose pre {
  margin: 0 0 24px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--rc-ink);
  color: var(--rc-page);
  font-family: var(--rc-mono);
  font-size: 14px;
  line-height: 22px;
  overflow-x: auto;
}
.rc-prose pre code { font: inherit; background: none; padding: 0; color: inherit; }
.rc-prose code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--rc-sunk);
  font-family: var(--rc-mono);
  font-size: 0.85em;
}

.rc-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 16px;
  background: var(--rc-surface);
}
.rc-prose figure { margin: 32px 0; }
.rc-prose figcaption {
  font-size: 14px;
  line-height: 22px;
  color: var(--rc-muted);
  text-align: center;
}

/* Tables print like the receipt on the landing page: mono, dashed rules, the
   last column right-aligned because that is where a number belongs. A two-column
   table is a spec block - label muted and lettered like a column header, value
   in the body colour. */
.rc-prose .rc-table {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  font-family: var(--rc-mono);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}
.rc-prose .rc-table th {
  padding: 0 12px 9px 0;
  border-bottom: 1px dashed var(--rc-line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-prose .rc-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px dashed var(--rc-line);
  vertical-align: top;
  color: var(--rc-ink);
}
.rc-prose .rc-table th:last-child,
.rc-prose .rc-table td:last-child { padding-right: 0; text-align: right; }
.rc-prose .rc-table tr:last-child td { border-bottom: 0; }

.rc-prose .rc-table-spec td:first-child {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-muted);
  /* The label column is metadata, so it holds its line rather than wrapping
     under the value it belongs to. */
  white-space: nowrap;
}

.rc-prose hr {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px dashed var(--rc-line);
}

/* ---------------------------------------------------------------------------
   8b. "Where it lives" - the links to the finished thing, printed at the foot of
   a shipped post. Built from the manifest, and set as receipt lines so it reads
   as the last few rows of the slip rather than as a footer of buttons.
   --------------------------------------------------------------------------- */
.rc-live { max-width: 680px; margin: 56px auto 0; }
.rc-live-head {
  margin: 0 0 4px;
  font-family: var(--rc-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-live-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease;
}
.rc-live-row:hover { background: rgba(42, 49, 50, 0.055); }
.rc-live-row:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: 2px; }

.rc-live-label {
  flex: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  color: var(--rc-ink);
}
.rc-live-url {
  flex: none;
  font-family: var(--rc-mono);
  font-size: 12px;
  color: var(--rc-muted);
  white-space: nowrap;
}
/* Same nudge the rest of the site gives an outbound arrow. */
.rc-live-row .rc-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--rc-muted);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.18s ease;
}
.rc-live-row:hover .rc-arrow { transform: translate(2px, -2px); color: var(--rc-orange); }
.rc-live-row:hover .rc-live-label {
  text-decoration: underline;
  text-decoration-color: var(--rc-orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* End-of-post tear, then the link back to the roll. */
.rc-post-foot { margin-top: 56px; border-top: 1px dashed var(--rc-line); padding-top: 28px; }
.rc-post-foot .rc-back { margin: 0; }

/* ---------------------------------------------------------------------------
   9. Footer. The built pages close on the wordmark and a copyright line; the
   "Let's talk." block above it belongs to the home page, so it is not repeated
   here - just a way back to the work.
   --------------------------------------------------------------------------- */
.rc-foot { padding: 80px 0 56px; text-align: center; }
.rc-foot-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
  font-size: 16px;
}
.rc-foot-links a {
  color: var(--rc-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.rc-foot-links a:hover { color: var(--rc-orange); }
.rc-foot-links a:focus-visible { outline: 2px solid var(--rc-orange); outline-offset: 4px; border-radius: 4px; }
.rc-copy {
  margin: 12px 0 0;
  font-family: var(--rc-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--rc-muted);
}

/* ---------------------------------------------------------------------------
   10. Tablet and phone. Framer's breakpoints are 1199.98px and 809.98px; the
   same ones are used here so this page changes shape where the rest of the site
   does.
   --------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  :root { --rc-gutter: 20px; }

  .rc-title { font-size: 44px; }
  .rc-standfirst { font-size: 17px; line-height: 27px; }
  .rc-filters { margin: 36px 0 28px; }

  .rc-receipt { padding: 22px 18px calc(18px + var(--rc-tooth)); }

  /* One line will not hold a title and three mono columns at this width, so the
     row becomes two: the metadata prints across the top, the title below it.
     order + flex-basis rather than a second markup path. */
  .rc-row { flex-wrap: wrap; gap: 0 12px; padding: 12px 8px; margin: 0 -8px; }
  .rc-row-no { order: 1; width: auto; }
  .rc-row-date { order: 2; width: auto; }
  /* The stamp joins the metadata line rather than hanging off the title, which
     at this width would leave it stranded on a line of its own. */
  .rc-badge { order: 3; }
  .rc-row-time { order: 4; margin-left: auto; }
  .rc-row-lead { display: none; }
  .rc-row-title { order: 5; flex-basis: 100%; margin-top: 3px; font-size: 17px; line-height: 25px; }

  .rc-live { margin-top: 44px; }
  .rc-live-row { flex-wrap: wrap; gap: 0 10px; }
  .rc-live-label { flex-basis: 100%; font-size: 16px; }
  .rc-live-url { font-size: 11px; }

  /* Date and entry number stack rather than shrink in the post head. */
  .rc-meta { flex-direction: column; gap: 2px; }

  .rc-post-title { font-size: 34px; }
  .rc-prose { font-size: 17px; line-height: 29px; }
  .rc-prose h2 { font-size: 23px; line-height: 31px; margin-top: 40px; }
  .rc-prose blockquote { font-size: 21px; line-height: 32px; padding-left: 18px; }
  .rc-prose pre { padding: 16px; font-size: 13px; }
  .rc-prose .rc-table { font-size: 12px; }
  .rc-prose .rc-table-spec td:first-child { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-row, .rc-live-row, .rc-badge, .rc-arrow, .rc-back svg, .rc-filter { transition: none; }
}