/* Front Porch Felons — bespoke face.
 *
 * Charcoal, cream and one alarm red. A distressed western slab (Rye) for
 * anything that shouts, a plain grotesque (Archivo) for anything that has to be
 * read. Paper grain over the lot at low opacity.
 *
 * The rule this design has to respect above all the styling: the punchline is
 * REAL TEXT in the h1, never baked into artwork. It is what the shop gets found
 * by, and an image of a joke is invisible to a search engine and to anyone
 * using a screen reader.
 */

.face-felons {
  --fpf-ink: #1A1714;        /* charcoal, near-black */
  --fpf-cream: #F4EBDD;      /* primary text */
  --fpf-white: #FFFFFF;
  --fpf-red: #D1432F;        /* CTAs and caution */
  /* Chris's call (2026-09-03): the brand red is the brand red. It measures
     3.87:1 on charcoal, so the a11y sweep lists it on every deploy — that is a
     finding, not a failure, and the deploy ships regardless. Kept as one token
     so the eyebrow and the button are unmistakably the same colour. */
  --fpf-red-text: #D1432F;
  --fpf-rule: rgba(244, 235, 221, .18);
  --fpf-dim: rgba(244, 235, 221, .62);
  /* The approved mockups are set in a heavy condensed slab with clean caps —
     nothing like Rye, which the first pass used and which read as a saloon
     poster. Bevan is the nearest Google slab to the mockup headlines; Oswald
     carries every all-caps supporting role. */
  --fpf-display: 'Bevan', 'Archivo', serif;
  --fpf-caps: 'Oswald', 'Archivo', sans-serif;

  background: var(--fpf-ink);
  color: var(--fpf-cream);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Grain. A repeating SVG turbulence rather than an image request — it is one
   line of CSS, it scales to any viewport, and it costs no round trip.
   `pointer-events:none` matters: without it this sheet swallows every click on
   the page under it. */
.face-felons::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { /* grain is static; nothing to disable */ }

.face-felons h1, .face-felons h2, .face-felons h3,
.face-felons .fpf-punch, .face-felons .fpf-setup {
  font-family: var(--fpf-display);
  font-weight: 400;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------- product page --- */

.fpf-prod { padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(2rem, 5vw, 4rem); }

/* Artwork left, words right on a desktop; stacked on a phone with the artwork
   first, because on a phone the picture is what tells you you are in the right
   place. */
.fpf-prod-in {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .fpf-prod-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* Sticky so the buy button stays reachable while a long joke scrolls. Capped
     to the viewport or a tall panel scrolls itself out of reach. */
  .fpf-buy { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; }
}

.fpf-shot {
  background: #100E0C;
  border: 1px solid var(--fpf-rule);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
/* contain, not cover: these are garment designs. Cropping the edge off a joke
   to fill a box is the one thing this image must never do — and the artwork
   arrives in three different aspect ratios, so a fixed crop would cut some. */
.fpf-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fpf-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.fpf-thumb {
  width: 72px; aspect-ratio: 1; padding: 0; cursor: pointer;
  background: #100E0C; border: 1px solid var(--fpf-rule); border-radius: 6px; overflow: hidden;
}
.fpf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpf-thumb.is-on { border-color: var(--fpf-red); }
.fpf-thumb:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 2px; }

.fpf-crumb { margin: 0 0 1.2rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.fpf-crumb a { color: var(--fpf-dim); text-decoration: none; }
.fpf-crumb a:hover { color: var(--fpf-cream); }

.fpf-setup {
  margin: 0 0 .3rem;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  color: var(--fpf-red-text);
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* The punchline. Big, because it is the product — and a real h1, because it is
   also the search term. */
.fpf-punch {
  margin: 0 0 .8rem;
  font-size: clamp(2rem, 6.5vw, 3.4rem);
  line-height: 1.02;
  color: var(--fpf-white);
  text-wrap: balance;
}
.fpf-joke {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--fpf-dim);
}
.fpf-price {
  margin: 0 0 1.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fpf-cream);
}
.fpf-price span { font-size: .82rem; font-weight: 400; color: var(--fpf-dim); }

/* The buy form is shared markup (lib/pages-modules.mjs buyForm) — styled here,
   never re-implemented, so the Printful availability rules stay in one place. */
.face-felons .addform { display: grid; gap: .9rem; margin: 0 0 1.2rem; }
.face-felons .addform label {
  display: grid; gap: .35rem;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fpf-dim);
}
.face-felons .addform select,
.face-felons .addform input {
  background: #100E0C;
  color: var(--fpf-cream);
  border: 1px solid var(--fpf-rule);
  border-radius: 6px;
  padding: .75rem .8rem;
  font: inherit;
  font-size: 1rem;               /* 16px min, or iOS zooms the page on focus */
}
.face-felons .addform select:focus-visible,
.face-felons .addform input:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 1px; }

/* Chunky screen-print button with a hard offset shadow, per the brief. The
   offset collapses on press so the button feels like it takes the weight. */
.face-felons .addform .btn-primary {
  background: var(--fpf-red);
  color: var(--fpf-white);
  border: 3px solid rgba(0,0,0,.4);
  border-radius: 4px;
  box-shadow: 4px 4px 0 #0B0A09;
  padding: .95rem 1.3rem;
  font-family: var(--fpf-caps);
  font-weight: 600;
  letter-spacing: .1em;
  font-size: 1.05rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.face-felons .addform .btn-primary:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 #0B0A09; }
.face-felons .addform .btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #0B0A09; }

.face-felons .soldout {
  font-family: var(--fpf-display);
  color: var(--fpf-red-text);
  font-size: 1.2rem;
}

.fpf-trust {
  margin: 0 0 1.4rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--fpf-dim);
}

.fpf-sizing { border-top: 1px solid var(--fpf-rule); border-bottom: 1px solid var(--fpf-rule); padding: .9rem 0; }
.fpf-sizing summary {
  cursor: pointer;
  font-family: var(--fpf-display);
  font-size: .95rem;
  color: var(--fpf-cream);
}
.fpf-sizing summary:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 2px; }
.fpf-sizing-bd { padding-top: .9rem; font-size: .9rem; color: var(--fpf-dim); }
.fpf-size { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.fpf-size th, .fpf-size td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--fpf-rule); }
.fpf-size th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fpf-cream); }

.fpf-desc { margin-top: 1.4rem; color: var(--fpf-dim); line-height: 1.65; }
.fpf-sku { margin-top: 1.2rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,235,221,.4); }

.fpf-rate {
  border-top: 1px solid var(--fpf-rule);
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  text-align: center;
}
.fpf-rate p {
  margin: 0;
  font-family: var(--fpf-display);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--fpf-dim);
}

/* The grain sits above everything at z-index 9999 and is decorative. Anything
   that must stay clickable or visible above it says so explicitly. */
.face-felons .skip:focus { z-index: 10000; }

/* ------------------------------------------------------------- chrome --- */
/*
 * The Look owns the masthead, nav and footer, and left alone they render in the
 * theme's forest green — which on a charcoal page reads as two different
 * websites stacked on top of each other. A face that composes its own page has
 * to take the chrome with it or it is only ever a panel in someone else's site.
 */
.face-felons .masthead,
.face-felons .topstack { background: var(--fpf-ink); border-bottom: 1px solid var(--fpf-rule); }
.face-felons .masthead a { color: var(--fpf-cream); }
.face-felons .nav { background: var(--fpf-ink); }
.face-felons .nav a {
  color: var(--fpf-dim);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.face-felons .nav a:hover,
.face-felons .nav a[aria-current="page"] { color: var(--fpf-cream); }
/* The mockup's nav is a quiet row of caps — the kit's rounded red pill on
   CONTACT shouted over it. Square shoulders, stamp red, no pill. */
.face-felons .nav a.nav-cta {
  background: var(--fpf-red);
  color: var(--fpf-white);
  border-radius: 3px;
  padding: .45rem .9rem;
}
.face-felons .nav a.nav-cta:hover { color: var(--fpf-white); background: #dd4c37; }
/* One row on a desktop: brand left, links right, like the mockup. The kit
   stacks nav under the brand; mobile keeps that (the toggle depends on it). */
@media (min-width: 920px) {
  .face-felons .masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .face-felons .masthead-in { flex: 0 0 auto; }
  .face-felons .nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
}

.face-felons .footer { background: #12100E; color: var(--fpf-dim); border-top: 1px solid var(--fpf-rule); }
.face-felons .footer a { color: var(--fpf-dim); }
.face-felons .footer a:hover { color: var(--fpf-cream); }
.face-felons .footer-col h3,
.face-felons .footer-motto { color: var(--fpf-cream); font-family: var(--fpf-display); }

/* One column when there is no artwork to show. Without this the grid holds a
   half-page void on the right and the buy panel sits marooned in a narrow
   gutter — which is exactly what an unphotographed product looked like. */
.fpf-prod-in.is-textonly { grid-template-columns: minmax(0, 42rem) !important; }

/* ============================================================= home page === */

/* Announcement bar — below the hero on the home page, per the mockup, whose
   photograph runs clean to the top of the viewport. */
.fpf-bar {
  background: var(--fpf-red);
  color: var(--fpf-white);
  display: grid;
  text-align: center;
  padding: .55rem 1rem;
}
.fpf-bar-line {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--fpf-caps);
  font-size: .78rem;
  letter-spacing: .12em;
  font-weight: 500;
  opacity: 0;
  transition: opacity .5s ease;
}
.fpf-bar-line.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fpf-bar-line { transition: none; } }

/* --- header floats over the hero photograph, home page only ---------------- */
/* Same trick the concept face uses: the photo runs to the very top and the
   masthead sits on it. Scoped to .fpf-home so every other page keeps a solid
   header it can be read against. */
body.fpf-home .topstack {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
}
body.fpf-home .masthead,
body.fpf-home .topstack,
body.fpf-home .nav { background: transparent; border-bottom: 0; }
body.fpf-home .masthead { background: linear-gradient(rgba(10,9,8,.72), rgba(10,9,8,0)); }

/* The lockup is baked on black; lighten-blend sinks the black into whatever
   dark surface it sits on, which is the closest thing to the transparency the
   source file should have had. */
.face-felons .brand-logo {
  height: 92px;
  width: auto;
  /* The lockup now carries real alpha (near-black keyed out), so no blend
     trickery — a blend depends on what happens to be behind it. */
}
/* The lockup already says the name — the text next to it would say it twice. */
.face-felons .brand-txt, .face-felons .motto { display: none; }

.face-felons .nav a {
  font-family: var(--fpf-caps);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .14em;
}

/* --- hero ------------------------------------------------------------------ */
.fpf-hero {
  position: relative;
  background: var(--fpf-ink);
  display: grid;
  align-content: end;
  min-height: min(92vh, 56rem);
  /* clearance for the floating header */
  padding-top: 7rem;
}
.fpf-hero.has-shot {
  background-image: linear-gradient(100deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.45) 45%, rgba(15,12,10,.12) 75%), var(--bg-url);
  background-size: cover;
  background-position: var(--bg-focus, center);
}
/* Left-aligned, per the mockup: the words own the left half, the dog owns the
   right. Centered was the first pass's biggest departure from the art. */
.fpf-hero-in {
  width: 100%;
  padding-bottom: clamp(2.5rem, 7vw, 5.5rem);
  text-align: left;
  max-width: 72rem;
}
.fpf-hero-h {
  margin: 0 0 .6rem;
  /* Wide enough for the mockup's four-line break — at 13em "PROBABLY
     SHOULDN'T" split across lines and made five. */
  max-width: 15.5em;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  color: var(--fpf-cream);
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.fpf-divider {
  margin: 0 0 .8rem;
  color: var(--fpf-red-text);
  font-size: .9rem;
  letter-spacing: .1em;
}
.fpf-hero-sub {
  margin: 0 0 1.8rem;
  font-family: var(--fpf-caps);
  font-size: clamp(.82rem, 1.8vw, 1rem);
  letter-spacing: .18em;
  color: var(--fpf-cream);
}
.fpf-hero-act {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  flex-wrap: wrap;
}

/* The stamp: square-shouldered, dark rough edge, condensed caps. */
.fpf-btn {
  display: inline-block;
  background: var(--fpf-red);
  color: var(--fpf-white);
  text-decoration: none;
  font-family: var(--fpf-caps);
  font-weight: 600;
  letter-spacing: .12em;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  padding: .95rem 1.9rem;
  border: 3px solid rgba(0,0,0,.4);
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.4);
}
.fpf-btn:hover { background: #dd4c37; color: var(--fpf-white); }
.fpf-scroll {
  color: var(--fpf-cream);
  font-family: var(--fpf-caps);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The strip of promises that closes the hero in the mockup. */
.fpf-trustbar {
  background: rgba(8,7,6,.92);
  border-top: 1px solid rgba(244,235,221,.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fpf-trustbar p {
  margin: 0;
  padding: .9rem 1.6rem;
  font-family: var(--fpf-caps);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--fpf-cream);
}
.fpf-trustbar p + p { border-left: 1px solid rgba(244,235,221,.14); }
@media (max-width: 700px) {
  .fpf-trustbar { display: grid; grid-template-columns: 1fr 1fr; }
  .fpf-trustbar p + p { border-left: 0; }
}

/* --- collections ----------------------------------------------------------- */
.fpf-cols { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.fpf-colhead { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.fpf-h2 {
  font-family: var(--fpf-display);
  font-size: clamp(1.6rem, 4.6vw, 2.8rem);
  color: var(--fpf-cream);
  text-align: center;
  margin: 0 0 .5rem;
}
.fpf-colsub {
  margin: 0;
  font-family: var(--fpf-caps);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--fpf-dim);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.fpf-bolt { width: 22px; height: 12px; color: var(--fpf-red-text); }

.fpf-tiles {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
/* Poster tiles: the card art is the whole tile. */
.fpf-tile.is-poster {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(244,235,221,.1);
  transition: transform .15s ease, border-color .15s ease;
}
.fpf-tile.is-poster img { display: block; width: 100%; height: auto; }
.fpf-tile.is-poster:hover { transform: translateY(-4px); border-color: var(--fpf-red); }
/* Typographic fallback for a collection with no poster yet. */
.fpf-tile:not(.is-poster) {
  display: grid;
  text-decoration: none;
  background: #100E0C;
  border: 1px solid var(--fpf-rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.fpf-tile:not(.is-poster):hover { border-color: var(--fpf-red); transform: translateY(-3px); }
.fpf-tile-img { display: block; aspect-ratio: 4 / 3; background: #0B0A09; overflow: hidden; }
.fpf-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpf-tile-bd { display: grid; gap: .5rem; padding: 1.1rem 1.2rem 1.4rem; }
.fpf-tile-h { font-family: var(--fpf-display); font-size: 1.05rem; color: var(--fpf-white); }
.fpf-tile-p { font-size: .86rem; line-height: 1.5; color: var(--fpf-dim); }
.fpf-tile-cta { font-family: var(--fpf-caps); font-size: .72rem; letter-spacing: .16em; color: var(--fpf-red-text); }

/* --- bestsellers ----------------------------------------------------------- */
.fpf-best { padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--fpf-rule); }
.fpf-best-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.fpf-card {
  display: grid;
  gap: .5rem;
  text-decoration: none;
  background: #100E0C;
  border: 1px solid var(--fpf-rule);
  border-radius: 10px;
  padding: 1rem;
  transition: border-color .15s ease;
}
.fpf-card:hover { border-color: var(--fpf-red); }
.fpf-card-img { display: block; aspect-ratio: 1; background: #0B0A09; border-radius: 6px; overflow: hidden; }
.fpf-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpf-card-h { font-family: var(--fpf-display); color: var(--fpf-white); font-size: 1rem; }
.fpf-card-p { color: var(--fpf-cream); font-weight: 700; }
.fpf-card-cta { font-family: var(--fpf-caps); font-size: .7rem; letter-spacing: .16em; color: var(--fpf-red-text); }

/* --- email capture --------------------------------------------------------- */
.fpf-mail { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--fpf-rule); text-align: center; }
.fpf-mail-sub { margin: -1.2rem 0 1.6rem; font-family: var(--fpf-caps); letter-spacing: .12em; color: var(--fpf-dim); }
.fpf-mail-form { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.fpf-mail-form input[type=email] {
  flex: 1 1 18rem;
  max-width: 24rem;
  background: #100E0C;
  color: var(--fpf-cream);
  border: 1px solid var(--fpf-rule);
  border-radius: 4px;
  padding: 1rem;
  font: inherit;
  font-size: 1rem;
}
.fpf-mail-form input[type=email]:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 1px; }
.fpf-mail-form .fpf-btn { cursor: pointer; font-size: .9rem; }

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


/* ==================================================== interior pages ======= */
/*
 * About, Shop, Contact and every other kit-rendered page are built from theme
 * tokens, so the face converts them ALL by redefining the tokens rather than
 * chasing classes. Notably --canvas: the kit's "light" sections went parchment
 * cream, which against the felons charcoal read as a different website — here
 * "light" means a slightly lifted charcoal panel, and cream is TEXT, never a
 * surface.
 */
.face-felons {
  --marsh:      #1A1714;
  --marsh-2:    #211C18;
  --marsh-3:    #2A241F;
  --line:       #3A322B;

  --canvas:     #211C18;
  --canvas-2:   #2A241F;
  --canvas-3:   #3A322B;

  --rust:       #D1432F;
  --rust-hi:    #DD5340;
  --water:      #A79E93;
  --wheat:      #F4EBDD;

  --on-dark:    #F4EBDD;
  --on-dark-mut:#A79E93;
  --on-light:   #F4EBDD;
  --on-light-mut:#C4BBAE;

  --display: 'Bevan', 'Archivo', serif;
  --body:    'Archivo', system-ui, -apple-system, sans-serif;
  --r: 4px;
}

/* The page header band: flat charcoal with a red rule, not a marsh gradient. */
.face-felons .page-hd {
  background: var(--fpf-ink);
  border-bottom: 2px solid var(--fpf-red);
}
.face-felons .page-hd h1 { color: var(--fpf-cream); }

/* Buttons everywhere get the stamp treatment the face established. */
.face-felons .btn-primary {
  background: var(--fpf-red);
  color: var(--fpf-white);
  border: 3px solid rgba(0,0,0,.4);
  border-radius: 4px;
  font-family: var(--fpf-caps);
  font-weight: 600;
  letter-spacing: .1em;
}
.face-felons .btn-primary:hover { background: #dd4c37; color: var(--fpf-white); }

/* Shop grid cards on the charcoal ground. */
.face-felons .prodcard {
  background: #100E0C;
  border: 1px solid var(--fpf-rule);
  border-radius: 10px;
}
.face-felons .prodcard:hover { border-color: var(--fpf-red); }
.face-felons .prodcard-img { background: #0B0A09; }
.face-felons .prodcard-bd h3 { font-family: var(--fpf-display); color: var(--fpf-white); }
.face-felons .prodcard-cat,
.face-felons .prodcard-pre { color: var(--fpf-red-text); font-family: var(--fpf-caps); letter-spacing: .1em; }

/* Forms (contact, and anything else the kit renders). */
.face-felons input:not([type=checkbox]):not([type=radio]),
.face-felons textarea,
.face-felons select {
  background: #100E0C;
  color: var(--fpf-cream);
  border: 1px solid var(--fpf-rule);
  border-radius: 4px;
}
.face-felons input:focus-visible,
.face-felons textarea:focus-visible,
.face-felons select:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 1px; }
.face-felons label { color: var(--fpf-dim); }

.face-felons .notice {
  background: #211C18;
  border-left: 3px solid var(--fpf-red);
  color: var(--fpf-cream);
}
.face-felons a { color: var(--fpf-cream); }
.face-felons .longform a { color: var(--fpf-red-text); }

/* The skip link is a keyboard-navigation control, not brand surface — it gets
   readable colours even though the brand red elsewhere is allowed to fail the
   sweep (Chris's call, 2026-09-03). */
.face-felons .skip:focus {
  background: var(--fpf-cream);
  color: #1A1714;
}