/* ============================================================
   Reference:d — scoped layer
   Ported from  projects/ReferenceD/Reference_d brand book v2/tokens.css

   Reference:d is not a PNTXV brand. It is the show, with its own identity,
   and this file exists so one band of this page can be set in it without the
   two systems touching anywhere else.

   THE RULE THIS FILE ENFORCES
   ---------------------------
   Every token is declared on .refd, never on :root, and every name is
   prefixed --refd-. That is not tidiness — both systems ship a token called
   --ink and a token called --paper, at different values:

       PNTXV        --ink #0A0A0A   --paper #F5F2EC
       Reference:d  --ink #0E0E0C   --paper #F4EFE6

   so pasting the show's tokens.css in at :root would quietly repaint every
   card, rule and footer on the site by two or three points of value. Scoped
   and prefixed, nothing leaks either way.

   Only what the band uses is ported. This is not the whole system — read the
   brand book before making anything else with the name on it.
   ============================================================ */

.refd {
  /* ---------- Grounds ---------- */
  --refd-paper:     #F4EFE6;   /* warm off-white */
  --refd-paper-2:   #ECE5D6;
  --refd-ink:       #0E0E0C;   /* near-black, green undertone */
  --refd-ink-2:     #1A1A17;

  /* ---------- Neutrals — biased warm ---------- */
  --refd-n-100:     #E8E2D3;
  --refd-n-200:     #D8D2C5;
  --refd-n-300:     #B7B1A4;
  --refd-n-400:     #8A857A;
  --refd-n-500:     #5A564E;

  /* ---------- Accent ----------
     Rule of one: ONE accent per touchpoint. The band is one touchpoint, so
     one of these is live at a time and it is spent on a single element —
     the chip, or the underline, or the play blob. Never all three. */
  --refd-cobalt:    #2E4BFF;
  --refd-acid:      #C7F23C;
  --refd-accent:    var(--refd-cobalt);
  --refd-accent-ink:#0E0E0C;   /* legible text ON the accent */

  /* ---------- Type ---------- */
  --refd-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --refd-font-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --refd-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Two tracking values, one per voice. Nothing is left to inherit. */
  --refd-tracking-display: -0.02em;
  --refd-tracking-caps:     0.08em;

  --refd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The band sits inside a PNTXV page whose body face is Space Grotesk, so the
   body face has to be asserted rather than inherited. */
.refd {
  font-family: var(--refd-font-body);
  letter-spacing: 0;
}

/* ---------- Wordmark ----------
   The colon points, the lowercase d answers it. ":d" is the reference mark
   and carries the accent AS ONE UNIT — the colon and the d are never
   coloured apart. Never uppercased: the wordmark is exempt from any
   text-transform on the line it sits in. No stroke, no spacing round the
   colon, no dot or hyphen in its place, and no arrow after it — the colon
   already points, so a trailing ↳ says it twice. */
.refd-wordmark {
  font-family: var(--refd-font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  letter-spacing: var(--refd-tracking-display);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.refd-wordmark .refd-mark { color: var(--refd-accent); }

/* ---------- Ref. NN chip ----------
   The system's most repeated element. wdth 100, because it sits inline with
   running display type. */
.refd-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--refd-font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 5px 10px 6px;
  background: var(--refd-accent);
  color: var(--refd-accent-ink);
  letter-spacing: var(--refd-tracking-display);
}

/* ---------- Display voice ---------- */
.refd-display {
  font-family: var(--refd-font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  letter-spacing: var(--refd-tracking-display);
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

/* ---------- Prose ---------- */
.refd-lede {
  font-family: var(--refd-font-body);
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---------- Mono caps voice ---------- */
.refd-meta {
  font-family: var(--refd-font-mono);
  font-size: 11px;
  letter-spacing: var(--refd-tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Separators ----------
   //  between two THINGS      Dan Chan // cinematographer
   /   between VALUES in one   01 / 10
   The middot is retired. ↳ is a verb and never stands between two items;
   → has been dropped from the glyph set entirely. */
.refd-sep::before      { content: "/";  }
.refd-sep-hard::before { content: "//"; }
.refd-sep,
.refd-sep-hard {
  font-family: var(--refd-font-mono);
  letter-spacing: 0;
  padding: 0 0.45em;
  font-weight: 400;
  opacity: 0.55;
}

/* ============================================================
   THE BAND — pntxv.com, under the work grid
   Layout lives here rather than in the JSX or index.html so that every rule
   belonging to the show is in one file and can be lifted out in one move.

   PNTXV owns the frame: square corners, 2px ink border, hard offset shadow,
   orange on hover, and --paper-pure for the ground so the band sits in the
   same card system as the nine above it. Reference:d owns everything inside.
   ============================================================ */

.refd-band {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  background: var(--paper-pure);
  color: var(--refd-ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 0 var(--ink);
  cursor: pointer;
  margin-bottom: 24px;                  /* the work grid's own gap; the band
                                           sits above the nine cards */
  transition: transform 140ms cubic-bezier(0.2,0,0,1), box-shadow 140ms;
}
.refd-band:hover {
  transform: translate(-2px,-2px);
  box-shadow: 10px 10px 0 0 var(--orange);
}

.refd-band-still {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--paper-pure);
}
.refd-band-still img {
  width: 100%; height: 100%; display: block;
  /* contain, not cover. This is the published YouTube cover — a designed
     artefact with its own margins, header band and burnt-in type. Cropping it
     is vandalism, and the spare space is the card's own white anyway.

     Worth knowing: the cover's header band is --accent: var(--paper) in the
     show's tokens, #F4EFE6. Against Reference:d paper it met the panel with no
     seam at all. On white there is a small warm step and the cover reads as a
     plate laid on the card — a deliberate trade for matching the work cards.
     If the band ever moves off white, take the seam back with it. */
  object-fit: contain;
  object-position: center top;

  /* Grey until hovered, like every other image in the work grid — same
     grayscale + --imgc contrast the .poster rule uses, so the Tweaks panel's
     photo-contrast slider moves this with the cards.

     Worth knowing what this greys: the cover is a designed artefact, so the
     filter takes its warm #F4EFE6 header band and burnt-in wordmark with it.
     The band reads neutral until hover, then warms up with the picture. It
     also softens the step between the cover's paper and the card's white,
     which is the one thing the white ground had cost.

     The "always colour on touch" half of this lives in index.html, with the
     .poster and .bts-img rule — one rule for every image that goes colour on a
     phone, so this can never drift from the cards. */
  filter: grayscale(1) contrast(var(--imgc, 1.05));
  transition: filter 300ms cubic-bezier(0.2,0,0,1);
}
.refd-band:hover .refd-band-still img {
  filter: grayscale(0) contrast(var(--imgc, 1.05));
}

.refd-band-txt {
  padding: clamp(24px,3vw,40px);
  display: flex; flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.refd-band-eyebrow {
  font-family: var(--font-mono);        /* JetBrains Mono — both systems ship it */
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--refd-n-500);
}
.refd-band-eyebrow i { color: var(--refd-accent); font-style: normal; }
.refd-band .refd-wordmark { font-size: clamp(38px,4.6vw,62px); }
.refd-band .refd-lede { color: var(--refd-n-500); }

/* The one accent use: a filled block, the first of the four the brand book
   sanctions. Everything the cover already says — Ref. 01, the credit, the pull
   quote — is deliberately not repeated in the panel. */
.refd-band-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--refd-accent);
  color: var(--refd-paper);             /* cobalt is dark; paper is the legible pair */
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 18px;
}
.refd-band-cta b { font-weight: 400; }

@media (max-width: 900px) {
  .refd-band { grid-template-columns: 1fr; }
}