/* ============================================================================
   resources.css — the learning centre and the article pages.
   ----------------------------------------------------------------------------
   Loaded only by /resources/ and its articles.

   THE CARD ART. There is no photography for these pieces and there may never
   be. Rather than leave seven grey boxes or buy stock images of laptops, each
   card carries a generated field built from the brand tokens: a ground, a
   large soft orb of the piece's accent colour, and a fine rule grid over the
   top. The accent is keyed to the piece in the page module, so the same
   article always looks the same and the grid reads as a designed set.

   THE RULE THAT SHAPES ALL OF IT: every overlaid card title sits on Midnight
   Green, never on the accent. Paper White on Midnight Green measures 15.8:1,
   and the scrim is what guarantees the composite under the title is Midnight
   and not the field behind it.

   ---- WHAT v3.0 "ATLAS" CHANGED HERE ----------------------------------------

   This sheet was written against the 2026-08-13 extension tokens, and in v3
   those four became the core of the system under new names:

     --deep   -> folded into Midnight Green. It is now the same value as
                 --ground and --ink; there is no second dark. Every ground in
                 this file reads --ground, which is the name that survives.
     --chrome -> Surface Steel. Promoted: link, eyebrow and label colour on
                 light grounds. 7.4:1 on white.
     --signal -> Landfall.   --beacon -> Meridian.

   Landfall and Meridian are now SIGNAL ONLY: "Neither is brand furniture."
   Seven article cards each wearing a permanent accent hue is decoration, and
   v3's avoid list names that case exactly — "the moment green means 'nice
   green', it stops meaning shipped." So the five card fields no longer key off
   the signal pair. They are tonal variation of the three colours that ARE
   allowed to be furniture: Midnight Green, Surface Steel, True North. See the
   .rc-art--* block for the ladder.

   --spark-ink is gone with no replacement: v3 has no text-legal orange, and on
   a light ground True North "is a fill, a rule, or a shape" with no exception.
   Everywhere this file set small orange type it now sets Surface Steel.
   ========================================================================= */

.rc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the reading path ---------------------------------------------------- */
.rc-top {
  display: grid;
  gap: 34px;
  align-items: start;
  margin-bottom: 46px;
}
@media (min-width: 900px) { .rc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }

.rc-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.rc-path a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 15px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
/* Joined to the spark-glow family (2026-08-25 rollout): the ring and the
   14px bloom every linked card on the site now answers with. The 2px step
   stays; it was already inside the published ceiling. */
.rc-path a:hover { border-color: var(--spark); transform: translateX(2px); box-shadow: 0 0 0 1px var(--spark), 0 0 14px color-mix(in srgb, var(--spark) 30%, transparent); }
/* The step number. Was --spark-ink, the burnt orange v2 kept so that an
   orange-flavoured label could exist on light. v3 deletes it outright, so the
   number takes the colour v3 actually assigns to a mono label on a light
   ground: Surface Steel, 7.4:1 on the white card. */
.rc-path-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--primary);
  flex: none;
}
.rc-path-t { display: block; min-width: 0; }
.rc-path-t b { display: block; font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; line-height: 1.3; }
.rc-path-t i { display: block; font-style: normal; font-size: 12px; color: var(--faint); font-family: var(--font-mono); margin-top: 4px; }

/* ---- toolbar ------------------------------------------------------------- */
.rc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.rc-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-f {
  font: 600 var(--step--1)/1 var(--font-display);
  padding: 9px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.rc-f:hover { border-color: var(--primary); color: var(--ink); }
.rc-f[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rc-f:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.rc-search input {
  font: 500 var(--step--1)/1 var(--font-body);
  padding: 11px 16px;
  min-width: min(300px, 70vw);
  border-radius: var(--pill);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
}
.rc-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.rc-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 16px 0 22px;
}

/* ---- the grid ------------------------------------------------------------ */
.rc-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.rc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

.rc-card { min-width: 0; }
.rc-card[hidden] { display: none; }
@media (min-width: 900px) {
  .rc-card--big { grid-column: span 2; }
  .rc-card--big .rc-media { aspect-ratio: 16 / 8; }
  .rc-card--big .rc-title { font-size: var(--step-2); }
}

.rc-hit {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-release) var(--ease), box-shadow var(--t-release) var(--ease), border-color var(--t-release) var(--ease);
}
/* Same family as every other linked card since the 2026-08-25 rollout:
   spark border, 1px ring, 14px bloom, 2px lift. The steel-tint border and
   the floating shadow this carried predate the family. */
.rc-hit:hover { transform: translateY(-2px); border-color: var(--spark); box-shadow: 0 0 0 1px var(--spark), 0 0 14px color-mix(in srgb, var(--spark) 30%, transparent); }
.rc-hit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---- the generated art --------------------------------------------------- */
.rc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ground);
}
.rc-art { position: absolute; inset: 0; display: block; background: var(--ground); }

/* The orb: the piece's accent, blurred into a field. It never touches type.
   Sized and placed to stay in the TOP-RIGHT quadrant. The first version ran
   118% wide across the whole tile, which on a one-column card left the white
   title sitting on a near-white wash: the accent had swallowed the ground the
   title depends on. On a big featured card the same numbers looked fine, which
   is exactly how this kind of defect ships. */
.rc-art i {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  right: -18%;
  top: -34%;
  border-radius: 50%;
  opacity: .5;
  filter: blur(3px);
  background: radial-gradient(circle at 42% 46%, var(--rc-a, var(--chrome)) 0%, transparent 66%);
}
/* the rule grid: structure, so the field reads as a system rather than a smudge */
.rc-art b {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--paper) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 14%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  /* an alpha stencil, not a colour: black here means "keep", and the token
     file has no name for that because it is not a value in the palette. */
  mask-image: linear-gradient(200deg, #000 5%, transparent 68%);
  -webkit-mask-image: linear-gradient(200deg, #000 5%, transparent 68%);
}

/* THE FOUR FIELDS (recoloured 2026-08-26, DJ's call). The five-slot version
   was a tonal ladder of the three furniture colours, built when the law said
   Landfall and Meridian were signal-only and could not decorate anything,
   and the old comment here said so. That law has been rewritten: /brand-os/
   now publishes Landfall as the colour of things shipped and Meridian as
   the colour of things in motion, working across the whole site under those
   roles, and the footer folders moved to the same rule on 2026-08-25. This
   grid follows: the four primaries, each undiluted, no ladder.

   Assignment is computed from the post index in resources.mjs rather than
   hand-set per piece, which is what stops the rotation drifting back into
   the arbitrary spread it had (chrome and signal twice each, deep once).

   Every one of these is an orb behind a scrim on a Midnight ground. That is
   a FILL, never type, and that distinction is the whole legality argument:
   Landfall fails as text on white at 1.7:1 and Meridian at 3.0:1, but a
   blurred fill carries no glyphs and owes no ratio. The white title never
   touches the orb, which stays in the top-right quadrant by construction. */
.rc-art--truenorth { --rc-a: var(--spark); }   /* True North */
.rc-art--landfall  { --rc-a: var(--signal); }  /* Landfall */
.rc-art--meridian  { --rc-a: var(--beacon); }  /* Meridian */
.rc-art--steel     { --rc-a: var(--chrome); }  /* Surface Steel */
/* Two slot-local trims, kept through the 2026-08-26 recolour:
   Steel keeps the .42 it has always run (v2 backed this slot with
   --grad-chrome, a four-stop gradient between brand colours, which v3 §1.5
   forbids: it is a flat Midnight ground with a Steel field like the rest,
   and .5 read hotter than its neighbours once the gradient went). */
.rc-art--steel i { opacity: .42; }

/* The scrim is what makes an overlaid title legal on ANY of the fields, and it
   has to cover the WHOLE tile, not just the bottom. Four stops: near-solid
   Midnight under the title, half under the middle, and still a third of it at
   the top so the category chip has a ground too. Under the title the composite
   is effectively Midnight Green, where Paper White measures 15.8:1.

   This is a scrim over a ground, not a gradient between brand colours: every
   stop is the same colour at a different alpha. */
.rc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ground) 96%, transparent) 0%,
    color-mix(in srgb, var(--ground) 88%, transparent) 34%,
    color-mix(in srgb, var(--ground) 46%, transparent) 68%,
    color-mix(in srgb, var(--ground) 34%, transparent) 100%
  );
}

.rc-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: var(--pill);
}

.rc-title {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--paper);
}

.rc-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }

/* the quick-summary box, on the card */
.rc-sum {
  display: block;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
  border-left: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
  padding-left: 13px;
}
.rc-sum b {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 5px;
}

.rc-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}

.rc-empty { margin-top: 26px; color: var(--muted); }
.rc-reset {
  font: inherit;
  color: var(--primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- the article page ---------------------------------------------------- */
.rc-lead { display: grid; gap: 30px; align-items: start; }
@media (min-width: 940px) {
  .rc-lead { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; }
  .rc-tldr { position: sticky; top: calc(var(--hd-h) + 18px); }
}

.rc-tldr {
  background: var(--ground);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 24px 24px 26px;
}
.rc-tldr-l {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* The eyebrow on a dark ground is the one place v3 hands to True North by
     name, and the one place True North gained: 5.6:1 on Midnight Green, legal
     for body text, never mind a 10px mono label. --accent, the pale sea glass
     that used to carry this on dark, is deleted. */
  color: var(--spark);
  margin: 0 0 10px;
  max-width: none;
}
.rc-tldr-s { font-size: var(--step--1); line-height: 1.6; color: var(--strong-d); margin: 0; max-width: none; }
.rc-tldr-k { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rc-tldr-k li {
  position: relative;
  padding-left: 20px;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--dim-d);
}
/* The bullet dashes were Signal Green. In v3 that is Landfall and it means
   SHIPPED — six key points in a summary are not six shipped things, and using
   it here is precisely the failure the avoid list names. The eyebrow above is
   already the one warm accent on this panel ("used once per view, twice at
   most"), so the dashes go neutral: --dim-d is 66% Paper on Midnight, 7.6:1,
   which is more than a 2px rule needs. */
.rc-tldr-k li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--dim-d);
}

.rc-article > :first-child { margin-top: 0; }
.rc-article h2 { font-size: var(--step-2); margin-top: 1.8em; }
.rc-next { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--hairline); }

@media (prefers-reduced-motion: reduce) {
  .rc-hit, .rc-path a { transition: none; }
  .rc-hit:hover, .rc-path a:hover { transform: none; }
}