/* ---------------------------------------------------------------------------
   findnewstaff.com — this site's own styles.
   Loaded after paper.css, and only for the four sections this site adds.

   Every colour here is a Paper Air token, never a literal: the Look screen has
   to keep working, and a hex typed in here would be a colour no site — this one
   included — could change afterwards. The spacing is the scale, so the site's
   own Air setting still widens and tightens the page.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- hero */
.fns-hero { padding-block: clamp(var(--space-6), 6vw, var(--space-9)); }

/* ---- A picture behind the words -------------------------------------
   The photograph is a background in every sense but the CSS one: it is a
   real <img>, so it gets a srcset, a width and a height, and is fetched
   with priority — a CSS background image is invisible to all three, and
   this is the largest thing on the page.

   Over it sits a wash, set in the page's own colours rather than a fixed
   grey, so it follows light and dark without a second photograph. It is
   strongest where the words are and fades towards the picture: on a wide
   screen that is left to right, and on a narrow one, where the words sit
   over the middle of the picture, top to bottom. */
.fns-hero.has-behind { position: relative; isolation: isolate; overflow: hidden; }

.fns-hero-behind { position: absolute; inset: 0; z-index: -2; }
.fns-hero-behind img,
.fns-hero-behind picture { width: 100%; height: 100%; object-fit: cover; display: block; }

.fns-hero.has-behind::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 92%, transparent) 46%,
    color-mix(in srgb, var(--paper) 45%, transparent) 78%,
    color-mix(in srgb, var(--paper) 22%, transparent) 100%);
}
/* Without color-mix, the wash is solid rather than absent: a plain page
   beats unreadable words. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .fns-hero.has-behind::after { background: var(--paper); }
}

/* The proof points sit on the picture, so they carry their own surface. */
.fns-hero.has-behind .fns-hero-points li {
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .fns-hero.has-behind::after {
    background: linear-gradient(to bottom,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 62%,
      color-mix(in srgb, var(--paper) 55%, transparent) 100%);
  }
}

.fns-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}
.fns-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); }

.fns-hero-head {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* The accent's one job on this page. It is a second line, not a highlighter:
   colour that means "this is the claim", spent once. */
.fns-hero-accent { display: block; color: var(--accent); }

.fns-hero-tags { list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); }

.fns-hero-do { display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3); }
.fns-hero-foot { font-size: .9rem; margin: 0; }

.fns-hero-points, .fns-hero-points.is-row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
}
.fns-hero-points.is-row { margin-top: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fns-hero-points li {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.fns-hero-points strong { display: block; }
.fns-hero-points span { color: var(--ink-soft); font-size: .93rem; }

.fns-hero-shot img { width: 100%; height: auto; border-radius: var(--radius-lg); }

@media (max-width: 860px) {
  .fns-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- calculator */
.fns-calc-panel {
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  /* Concentric: the inner radius is the outer minus the gap, or the two
     curves fight and it reads as a mistake. */
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
}
.fns-calc-ask { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4); }
.fns-calc-ask .field { margin: 0; }

.fns-calc-answer { margin-top: var(--space-5); }
.fns-calc-figures { list-style: none; margin: 0 0 var(--space-4); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.fns-calc-figures li {
  border: 1px solid var(--paper-edge); border-radius: var(--r-in, var(--radius));
  padding: var(--space-4); background: var(--paper);
}
.fns-calc-figures span { display: block; color: var(--ink-muted); font-size: .85rem; }
.fns-calc-figures strong { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
/* The one figure somebody came for. A tone lives in the text, not in a
   painted box. */
.fns-calc-figures .is-saving strong { color: var(--accent); }

.fns-calc-team { font-weight: 530; }
.fns-calc-note { font-size: .85rem; }

.fns-calc-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.fns-calc-table caption { text-align: left; color: var(--ink-muted); font-size: .85rem;
  padding-bottom: var(--space-2); }
.fns-calc-table th, .fns-calc-table td {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--paper-line); font-variant-numeric: tabular-nums;
}
.fns-calc-table td { color: var(--ink-soft); }

/* ------------------------------------------------------------ explorer */
.fns-explorer-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5); }
.fns-explorer-tabs [aria-selected="true"] { background: var(--ink); color: var(--paper);
  border-color: var(--ink); }

.fns-task-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); }
.fns-task-grid li {
  background: var(--paper-raised); border: 1px solid var(--paper-edge);
  border-radius: var(--radius); padding: var(--space-4);
}
.fns-task-grid strong { display: block; margin-bottom: var(--space-1); }
.fns-task-grid span { color: var(--ink-soft); font-size: .93rem; }

.fns-explorer-panel + .fns-explorer-panel { margin-top: var(--space-6); }
.fns-explorer-do { margin-top: var(--space-5); }

/* ------------------------------------------------------- booking form */
.fns-book-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4); }
.fns-book-small { font-size: .85rem; }
.fns-book-form .field-check label { display: flex; gap: var(--space-3); align-items: flex-start; }

/* ---------------------------------------------------------- blog rail */
.fns-latest-do { margin-top: var(--space-5); }

/* Reduced motion is honoured by paper.css globally; nothing here animates. */

/* ------------------------------------------------- the foot of a post */
.fns-post-cta {
  margin-top: var(--space-7);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
}
.fns-post-cta h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.fns-post-do { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.fns-post-roles { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ------------------------------------------ the panel inside an article */
.prose .fns-inline-cta {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.prose .fns-inline-cta p:last-child { margin-bottom: 0; }