/* 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-stage: #F4EBDD;      /* product image stage: mockup PNGs are transparent, garments are black */
  --fpf-white: #FFFFFF;
  --fpf-red: #BF3826;        /* CTAs and caution — dark enough that cream or white text on it clears 4.5:1 (was #D1432F, 3.9:1) */
  /* 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: #E85C46;   /* the red as TEXT on the charcoal: 5.1:1 (the fill red is 3.9:1, fine for a button, not for 12px type) */
  --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(100dvh - 3rem); overflow: auto; }
}

.fpf-shot {
  background: var(--fpf-stage);
  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: var(--fpf-stage); 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,
.face-felons .fpf-stickybuy .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,
.face-felons .fpf-stickybuy .btn-primary:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 #0B0A09; }
.face-felons .addform .btn-primary:active,
.face-felons .fpf-stickybuy .btn-primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #0B0A09; }

/* --- phone buy bar, product page ------------------------------------------- */
/* Price + the same ADD TO EVIDENCE BAG button, pinned to the bottom of the
   viewport under 768px so it is on screen before any scrolling. It submits the
   in-page form (form="addform"), so it borrows that button's styling above and
   adds no colours or type of its own. The body gets matching bottom padding so
   the bar never sits over the footer or the in-page button at full scroll. */
.fpf-stickybuy { display: none; }
@media (max-width: 767px) {
  .fpf-stickybuy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: stretch; gap: 1rem;
    height: 64px; padding: 0 1rem env(safe-area-inset-bottom);
    background: var(--fpf-ink); border-top: 1px solid var(--fpf-rule);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .45);
  }
  .fpf-stickybuy-price {
    align-self: center; font-size: 1.5rem; font-weight: 700; color: var(--fpf-cream); white-space: nowrap;
  }
  .face-felons .fpf-stickybuy .btn-primary {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    margin: 6px 0; padding: 0 1rem; box-shadow: 3px 3px 0 #0B0A09;
  }
  body.fpf-product { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Stepped aside while the in-page button is on screen (set by the product page
   script). Outside the media block so it also wins under 768px. */
.fpf-stickybuy.is-off { display: none; }

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

.fpf-freeship { margin: 0 0 1rem; font-size: .88rem; color: var(--fpf-cream); }
.fpf-twins { margin: -.4rem 0 1rem; font-size: .88rem; color: var(--fpf-dim); }
.fpf-twins a { color: var(--fpf-cream); text-decoration: underline; text-underline-offset: 3px; }
.fpf-twins a:hover { color: var(--fpf-red); }
.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-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.fpf-size-tab {
  font-family: var(--fpf-caps); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--fpf-dim); border: 1px solid var(--fpf-rule); border-radius: 999px;
  padding: .4rem .9rem; cursor: pointer;
}
.fpf-size-tab.is-on { background: var(--fpf-red); border-color: var(--fpf-red); color: var(--fpf-white); }
.fpf-size-tab:focus-visible { outline: 2px solid var(--fpf-red); outline-offset: 2px; }
.fpf-size-for { display: none; }
.fpf-size-for.is-on { display: block; }
/* no script: the tabs never run, so every table shows under its heading */
.fpf-size-for:only-of-type, .no-js .fpf-size-for { display: block; }
.fpf-size-h { font-family: var(--fpf-display); color: var(--fpf-cream); margin: 0 0 .4rem; font-size: .95rem; }
.fpf-size-h span { font-family: inherit; font-weight: 400; color: var(--fpf-dim); font-size: .82rem; font-family: var(--fpf-caps); letter-spacing: .04em; }
.fpf-size td b { color: var(--fpf-cream); }
.fpf-size-note { font-size: .8rem; color: var(--fpf-dim); margin: 0 0 .6rem; }
.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).
   Must start exactly where site.css stops hiding the nav behind the toggle (max-width: 960px):
   at 920 it forced the menu open beside the toggle on half-screen windows (2026-10-06). */
@media (min-width: 961px) {
  .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; }
/* Opened from the menu button (phones and narrow windows) the menu drops over the photo: it
   needs a solid panel of its own, or the links vanish into the picture (2026-10-06). */
@media (max-width: 960px) {
  body.fpf-home .nav.is-open,
  .face-felons .nav.is-open {
    background: var(--fpf-ink);
    border-top: 1px solid var(--fpf-rule);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .55);
  }
  /* and the header strip above it, so the headline doesn't show between logo and menu */
  body.fpf-home .topstack:has(.nav.is-open),
  body.fpf-home .topstack:has(.nav.is-open) .masthead { background: var(--fpf-ink); }
}
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 {
  /* The badge IS the brand and the approved mockup lets it dominate the
     corner. Clamped: ~96px on a phone, growing with the viewport to 122px on
     a desktop, so the one-row header never has to fight it at mid widths. */
  height: clamp(96px, 9vw, 122px);
  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: #C43A27; 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: var(--fpf-stage); 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: var(--fpf-stage); 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: var(--fpf-stage); }
.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;
}

/* --- you might also like ------------------------------------------------- */
.fpf-related { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--fpf-rule); }
.fpf-related .fpf-h2-or { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.fpf-related .fpf-h2-or a { color: var(--fpf-red-text); text-decoration: none; border-bottom: 2px solid currentColor; }
.fpf-related .fpf-h2-or a:hover { color: var(--fpf-cream); }
.fpf-related-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.fpf-related-card {
  display: grid; gap: .4rem; text-decoration: none;
  background: #100E0C; border: 1px solid var(--fpf-rule); border-radius: 10px; padding: .8rem;
  transition: border-color .15s ease;
}
.fpf-related-card:hover { border-color: var(--fpf-red); }
.fpf-related-img { display: block; aspect-ratio: 1; background: var(--fpf-stage); border-radius: 6px; overflow: hidden; }
.fpf-related-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fpf-related-h { font-family: var(--fpf-display); color: var(--fpf-cream); font-size: .92rem; line-height: 1.15; }
.fpf-related-p { color: var(--fpf-red-text); font-weight: 700; font-size: .85rem; }

/* --- the two shirts ------------------------------------------------------- */
.fpf-shirts { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--fpf-rule); }
.fpf-shirts-sub { text-align: center; color: var(--fpf-dim); margin: -.4rem auto 1.6rem; max-width: 42rem; }
.fpf-shirts-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.fpf-shirt {
  background: #100E0C; border: 1px solid var(--fpf-rule); border-radius: 10px;
  padding: 1.3rem 1.4rem 1.1rem; display: grid; gap: .45rem; align-content: start;
}
.fpf-shirt-tag { font-family: var(--fpf-caps); font-size: .74rem; letter-spacing: .14em; color: var(--fpf-red-text); margin: 0; }
.fpf-shirt-h { font-family: var(--fpf-display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--fpf-cream); margin: 0; }
.fpf-shirt-blank { font-family: var(--fpf-caps); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fpf-dim); margin: 0 0 .4rem; }
.fpf-shirt-p { margin: 0; color: var(--fpf-dim); font-size: .95rem; line-height: 1.5; }
.fpf-shirt-p b { color: var(--fpf-cream); font-weight: 700; }
.fpf-shirts-foot { text-align: center; color: var(--fpf-dim); font-size: .88rem; margin: 1.4rem auto 0; max-width: 46rem; }
.fpf-shirt-price { font-family: var(--fpf-caps); font-size: .6em; color: var(--fpf-red-text); letter-spacing: .06em; vertical-align: middle; white-space: nowrap; }
.fpf-ladder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* "Don't see what you want?" — a real tap target (>= 44px) on a phone, never a hairline link. */
.fpf-ask { margin: .9rem 0 0; font-size: .9rem; line-height: 1.4; }
.fpf-ask a { display: block; min-height: 44px; padding: .7rem 0; color: var(--fpf-cream); text-decoration: underline; text-underline-offset: 3px; }
.fpf-ask a:hover { color: var(--fpf-red); }
.fpf-shirts .fpf-ask { text-align: center; max-width: 46rem; margin: .6rem auto 0; }

/* product page: compact note under the buy form */
.fpf-shirts-note { border-top: 1px solid var(--fpf-rule); padding: .9rem 0 .2rem; margin-top: .6rem; }
.fpf-shirts-noteh { font-family: var(--fpf-display); font-size: .95rem; color: var(--fpf-cream); margin: 0 0 .5rem; }
.fpf-shirts-row { margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; color: var(--fpf-dim); }
.fpf-shirts-row b { color: var(--fpf-cream); }
.fpf-shirts-row span { color: var(--fpf-cream); }
.fpf-shirts-more { display: inline-block; margin-top: .2rem; font-size: .82rem; color: var(--fpf-red-text); text-decoration: none; border-bottom: 1px solid currentColor; }
.fpf-shirts-more:hover { color: var(--fpf-cream); }