/* Boost Business Financing.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the typefaces, and the one band this site has that
 * the skeleton does not: WHAT THE MONEY LIFTS.
 *
 * UNBOUNDED OVER BE VIETNAM PRO. Unbounded is wide and round-shouldered, and
 * it carries the forward lean the brand's name asks for without shouting;
 * Be Vietnam Pro is a plain, open text face that keeps the small print
 * credible under it. Be Vietnam Pro has no variable cut on Google Fonts, so
 * it ships as two static files, 400 and 600, and asks for 700 get the 600.
 *
 * BURNT ORANGE ON WARM WHITE, with near-black stone ink. #c2410c is 5.2:1 on
 * white and 4.6:1 on the accent wash, so it is allowed to be type -- the
 * eyebrows, the links. #9a3412 is the deeper shade for fills that carry
 * text and for hover. The bright #fb923c appears only on the dark ink band,
 * where it clears 7:1.
 */

@font-face {
  font-family: "Unbounded";
  src: url("display.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("text.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("text-600.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --ink: #1c1917;
  --ink-soft: #292524;
  --text: #44403c;
  --muted: #6b6159;

  --accent: #c2410c;
  --accent-deep: #9a3412;
  --accent-wash: #fdf0e6;
  --accent-line: #f3c9a9;

  --good: #9a3412;
  --good-wash: #fbe7d8;
  --warn: #854d0e;

  --paper: #fffdfa;
  --card: #ffffff;
  --tint: #f8f1e9;
  --rule: #ebe1d6;
  --rule-firm: #d8c9b8;

  --ask-ink: #d9d0c7;
  --ask-accent: #fb923c;

  --shadow: 28, 25, 23;

  --display: "Unbounded", system-ui, sans-serif;
  --body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Unbounded is already wide; at 700 it is a slab. 600, tracked in a
     touch, keeps the headlines energetic rather than loud. */
  --display-weight: 600;
  --display-track: -0.02em;

  --radius: 14px;
  --radius-sm: 8px;

  --hero-bg: linear-gradient(165deg, #fde9da 0%, var(--paper) 60%);
  --head-bg: linear-gradient(165deg, #fdeee3 0%, var(--paper) 72%);
}

/* Unbounded sets about a fifth wider than the grotesques the skeleton's
   type scale was drawn for, so at the skeleton's sizes the front door's
   headline ran to five lines. The same scale, stepped down to suit the face. */
.h1 {
  font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.15rem);
  line-height: 1.08;
}
.h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  line-height: 1.14;
}
.h3 {
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------ *
 * WHAT THE MONEY LIFTS -- the band this site has and the skeleton does not.
 *
 * The brand's idea is that funding is a boost to something already working,
 * so the programme is decided by what the money lifts and how long the lift
 * has to hold. Four situations, each a card: the photograph of it, what it
 * is, what gets lifted, how long the lift lasts -- drawn as a three-cell bar,
 * weeks / months / years, so the length reads before the words do -- and the
 * programme that length usually points to, with the reason.
 * ------------------------------------------------------------------ */
.lifts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  counter-reset: lift;
}

.lift {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(var(--shadow), 0.07);
  counter-increment: lift;
}

.lift__shot {
  margin: 0;
}

.lift__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lift__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}

.lift__when {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.lift__when::before {
  content: counter(lift, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.lift__say {
  margin: 0 0 20px;
  color: var(--text);
}

.lift__facts {
  margin: 0;
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.lift__facts dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.lift__facts dd {
  margin: 0;
  color: var(--ink-soft);
}

/* How long the lift has to last: weeks, months, years, lit where it runs. */
.lift__span {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 2px 0 8px;
}

.lift__span span {
  padding: 6px 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--tint);
  border-radius: 999px;
}

.lift__span .is-on {
  color: #ffffff;
  background: var(--accent-deep);
}

.lift__fits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 0;
  list-style: none;
}

.lift__fits a {
  display: inline-block;
  padding: 5px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.lift__fits a:hover {
  background: var(--accent-wash);
}

.lift__why {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

@media (max-width: 900px) {
  .lifts {
    grid-template-columns: 1fr;
  }
  .lift__body {
    padding: 22px 20px 24px;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #fffdfa;
  --nav-ink: #1c1917;
  --nav-ink-soft: #6b6159;
  --nav-rule: #ebe1d6;
  --nav-hover: #c2410c;
  --nav-panel: #ffffff;
  --nav-cta-bg: #c2410c;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.9375rem;
  --nav-weight: 600;
  --nav-track: 0.01em;
  --nav-case: none;

  --foot-bg: #1c1917;
  --foot-ink: #b9afa6;
  --foot-head: #ffffff;
  --foot-rule: #3a332e;
  --foot-link: #fdf6ef;
}

/* The front door and the application page open with the form, and on a
   phone the form comes first. The head's full top padding would leave a
   band of empty wash between the navbar and the first question. */
@media (max-width: 760px) {
  .head--form {
    padding-top: 18px;
  }
  .head--form .frame {
    padding: 6px;
  }
}

/* The legal pages: numbered heads inside the prose, set smaller than a
   band's h2 so a long document reads as one document. */
.legal h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}