/* ===============================================================
   fourskills.co
   Implements docs/SITE_DESIGN.md — palette "river and sagebrush".
   No gradients, no shadows, no colours beyond the five tokens.
   =============================================================== */

/* Bricolage Grotesque, self-hosted (SIL OFL, see assets/fonts/OFL.txt).
   Served from our own origin rather than Google Fonts so the site keeps
   its no-third-party-requests property — same reason there is no
   analytics and no cookie banner. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --river: #1c4a47;  /* headings, nav, footer, deepest rung, primary buttons */
  --sand:  #f5f2eb;  /* page background */
  --sage:  #dcd6c8;  /* card borders, dividers, light rung tint */
  --clay:  #c75b39;  /* accent — elements only, never small text on sand */
  --soil:  #26261f;  /* body text */

  /* Derived from the five tokens only. No new hues. */
  --rung-tint: color-mix(in srgb, var(--sage) 55%, white);
  --muted: color-mix(in srgb, var(--soil) 55%, var(--sand));

  --display: "Bricolage Grotesque", Archivo, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 680px;
  --speed: 150ms;
}

@supports not (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --rung-tint: #eeeae0;
    --muted: #6d6b60;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--soil);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--river);
  margin: 0 0 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; margin-top: 2.25rem; }
h3 { font-size: 1.1rem; }

@media (min-width: 45rem) {
  h1 { font-size: 2.5rem; }
}

p { margin: 0 0 1.1rem; }

/* Links are clay and underlined. Clay is never used for paragraph text
   itself — contrast on sand is borderline at small sizes. */
a { color: var(--clay); text-decoration: underline; }
a:hover { color: var(--clay); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .btn,
  .copy-btn,
  .rung,
  .ladder-card,
  .download { transition: background-color var(--speed), color var(--speed),
                          border-color var(--speed); }
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.15rem;
}

main { flex: 1 0 auto; padding: 1.75rem 0 3.5rem; }

/* Holds the nav and the content. On a phone it does nothing and the nav
   stays the sticky row it has always been; past --side-nav-at it becomes
   two columns and the nav moves alongside. Mobile is still the case that
   matters most, so it is the one that needs no code. */
.shell { flex: 1 0 auto; }

/* ---------------------------------------------------------------
   Wordmark
   --------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--sage); }

.site-header .wrap {
  padding-top: 0.85rem;
  padding-bottom: 0.7rem;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--river);
  text-decoration: none;
}

.wordmark:hover { color: var(--river); }

/* ---------------------------------------------------------------
   Nav — text links in one wrapping row, no hamburger
   --------------------------------------------------------------- */
.site-nav {
  border-bottom: 1px solid var(--sage);
  background: var(--sand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.site-nav a {
  font-size: 0.9rem;
  padding: 0.3rem 0;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover { color: var(--river); }

.site-nav a[aria-current="page"] {
  color: var(--river);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Side nav — only once there is genuinely room beside 680px of text.
   Below this the nav stays exactly what it was: a wrapping sticky row.
   --------------------------------------------------------------- */
@media (min-width: 62rem) {
  .shell {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, var(--measure));
    justify-content: center;
    align-items: start;
    gap: 3rem;
    padding: 0 1.15rem;
  }

  /* The sticky row becomes a sticky column. The bottom border was there
     to separate nav from content when they were stacked; side by side
     there is nothing to separate, so it goes. */
  .site-nav {
    position: sticky;
    top: 2.25rem;
    border-bottom: 0;
    background: transparent;
  }

  .site-nav .wrap {
    display: block;
    max-width: none;
    padding: 0;
  }

  .site-nav a {
    display: block;
    padding: 0.28rem 0;
    line-height: 1.35;
  }

  /* The four skills read as a set: indented under the two links that
     come before them, with the numbers hanging in the margin. */
  .site-nav .nav-skill { padding-left: 1.6rem; text-indent: -1.6rem; }
  .site-nav .nav-num { display: inline-block; width: 1.6rem; text-indent: 0; }

  .site-nav a[aria-current="page"] { color: var(--river); }

  main { padding-top: 2rem; }
  main > .wrap { max-width: none; padding: 0; }

  /* Header and footer span the nav plus the content, so the wordmark
     sits above the nav's left edge rather than above the prose. */
  .site-header .wrap,
  .site-footer .wrap { max-width: calc(16.5rem + var(--measure)); }
}

/* The 01–04 numbering carried into the nav, so the four skills read as a
   set rather than as four unrelated links. Decorative — the skill name is
   the label, so keep the number out of the accessible name's way by
   leaving it quiet rather than hiding it. */
.nav-num {
  font-family: var(--display);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sage);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.9rem;
}

.site-footer p { margin: 0 0 0.25rem; }

.site-footer .tagline {
  font-family: var(--display);
  font-weight: 600;
  color: var(--river);
}

/* ---------------------------------------------------------------
   Email gate
   --------------------------------------------------------------- */
.gate {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 3rem 0 4rem;
}

.gate-card { max-width: 30rem; }

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.75rem;
  max-width: 24rem;
}

label { font-size: 0.9rem; font-weight: 600; }

input[type="email"] {
  font: inherit;
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--sage);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  width: 100%;
}

input[type="email"]:focus { border-color: var(--river); }

.btn {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid var(--river);
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  background: var(--river);
  color: var(--sand);
}

.btn:hover { background: var(--soil); border-color: var(--soil); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.form-msg { min-height: 1.4rem; font-size: 0.9rem; margin: 0; }
.form-msg[data-state="error"] { color: #8f3a22; }
.form-msg[data-state="ok"] { color: var(--river); }

/* ---------------------------------------------------------------
   Ladder cards — the one memorable thing
   Rungs run top to bottom: Try it, Make it a routine, Automate it.
   Each bar is wider than the one above it, so the stack steps down
   toward the bottom-most, widest, deepest rung.
   --------------------------------------------------------------- */
.ladder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .ladder-grid { grid-template-columns: 1fr 1fr; gap: 1.15rem; }
}

/* The grid carries its own top margin for when it opens a page. Under a
   heading that margin doubles up, so pull it back in. */
h2 + .ladder-grid { margin-top: 1rem; }

.ladder-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--sage);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.ladder-card:hover { border-color: var(--river); color: inherit; }

.card-left { min-width: 0; }

.skill-num {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.skill-name {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--river);
}

.rungs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 8.75rem;
}

.rung {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  padding: 0.4rem 0.4rem;
  border-radius: 4px;
  margin-left: auto;
  background: var(--rung-tint);
  color: var(--river);
}

/* Widths step outward toward the bottom. Counting from the last child
   keeps the steps even whether the card has two rungs or three. */
.rung:last-child { width: 100%; }
.rung:nth-last-child(2) { width: 82%; }
.rung:nth-last-child(3) { width: 64%; }

/* The deepest rung the card reaches. */
.rung:last-child {
  background: var(--river);
  color: var(--sand);
}

/* On skill pages the rungs are anchor links into the sections below. */
a.rung:hover { color: var(--sand); background: var(--soil); }

.skill-header { margin: 0 0 2rem; }

/* ---------------------------------------------------------------
   Prompt block — something you take, not something you read
   --------------------------------------------------------------- */
.prompt-block {
  background: #fff;
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 1.5rem;
}

.prompt-block .prompt-text {
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 0.9rem;
}

.copy-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 44px;
  width: 100%;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid var(--clay);
  border-radius: 8px;
  background: var(--clay);
  color: var(--sand);
}

@media (min-width: 40rem) {
  .copy-btn { width: auto; }
}

.copy-btn:hover,
.copy-btn[data-copied="true"] {
  background: var(--river);
  border-color: var(--river);
}

/* A short aside under a prompt block — how to feed it, not what to ask. */
.prompt-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: -0.9rem 0 1.5rem;
}

/* ---------------------------------------------------------------
   Callout — a bonus move beside the ladder, not a rung on it.
   Same white-on-sage card as .ladder-card so it belongs, but full
   width and left-aligned so it never reads as a fourth rung.
   --------------------------------------------------------------- */
.callout {
  background: #fff;
  border: 1px solid var(--sage);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 2rem 0 0;
}

.callout h3 {
  margin-top: 0;
  color: var(--river);
}

.callout > :last-child { margin-bottom: 0; }

/* The prompt inside a callout sits on the card, so it drops the card
   treatment and keeps only the monospace and the copy button. */
.callout .prompt-block {
  border: 0;
  border-left: 3px solid var(--sage);
  border-radius: 0;
  padding: 0 0 0 1rem;
  margin: 0 0 1.1rem;
}

/* ---------------------------------------------------------------
   Page furniture
   --------------------------------------------------------------- */
.subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  margin-top: -0.2rem;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.section { margin-top: 2.5rem; scroll-margin-top: 4rem; }

/* ---------------------------------------------------------------
   First steps — the numbered list on the home page. The numerals are
   set in the display face to rhyme with the 01–04 skill numbering.
   --------------------------------------------------------------- */
.first-steps {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.first-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
}

.first-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.first-steps strong { color: var(--river); }

/* ---------------------------------------------------------------
   The end-to-end flow under an Automate section. Each step is a card
   with a numbered badge, a name, and a sentence about what happens.

   The number comes from a CSS counter rather than from markup. It used
   to be a hardcoded <span> inside an <ol>, which meant that if the
   stylesheet was stale or missing the browser drew its own list numbers
   next to the hand-written ones and every step read "1 1 A document
   arrives". Now an unstyled render is just an ordinary numbered list.

   Stays vertical at every width. An earlier version turned it into four
   columns on desktop, which squeezed each step's sentence into two or
   three words a line. The steps are prose, and prose needs the measure.
   --------------------------------------------------------------- */
.tools-lede {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 1.4rem 0 0.6rem;
}

.tool-flow {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  counter-reset: flowstep;
}

.tool-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sage);
  border-radius: 10px;
  background: #fff;
  counter-increment: flowstep;
}

.tool-step + .tool-step { margin-top: 1.35rem; }

/* The badge. When real vendor logos land this is what they replace —
   see assets/logos/README.md — at the same 36px, resized and nothing
   else, which is all their brand terms allow. */
.tool-step::before {
  content: counter(flowstep);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sage);
  border-radius: 50%;
  background: var(--rung-tint);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--river);
}

.tool-step img {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Connector into the step above. */
.tool-step + .tool-step::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: -1.05rem;
  border-left: 0.32rem solid transparent;
  border-right: 0.32rem solid transparent;
  border-top: 0.42rem solid var(--sage);
}

.tool-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--river);
  align-self: end;
  line-height: 1.25;
}

.tool-role {
  font-size: 0.9rem;
  color: var(--muted);
  align-self: start;
  line-height: 1.45;
  margin-top: 0.15rem;
}

.tool-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

/* Quiet aside, not a second callout — a sage rule rather than a card,
   so it cannot compete with the competitor callout on the same page. */
.pro-tip {
  border-left: 3px solid var(--sage);
  padding-left: 1rem;
  margin: 0 0 1.1rem;
}

.pro-tip strong { color: var(--river); }

.next-link {
  display: block;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sage);
  font-weight: 600;
}

.download {
  display: inline-block;
  min-height: 44px;
  margin: 0 0 2rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--river);
  border-radius: 8px;
  background: var(--river);
  color: var(--sand);
  font-weight: 600;
  text-decoration: none;
}

.download:hover { background: var(--soil); border-color: var(--soil); color: var(--sand); }

.library-group { margin-top: 2.5rem; }
.library-group h2 { margin-bottom: 0.9rem; }

/* Back-link to wherever the prompt is explained in full. */
.library-source {
  font-size: 0.9rem;
  margin: -0.6rem 0 0;
}

/* A skill can carry more than one prompt. The h3 and its lede separate
   the extras from the headline prompt without starting a new group. */
.library-group h3 { margin-top: 2rem; }

.prompt-lede {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------
   Custom-instructions reveal — a collapsed <details> so a real,
   lived-in example sits on the page without taking it over. Same
   white-on-sage card as the rest; the triangle turns when it opens.
   --------------------------------------------------------------- */
/* A divider that lifts the reveal off the body text above it, so the
   example reads as a separate aside rather than more wall of text. */
.ci-divider {
  border: 0;
  border-top: 1px solid var(--sage);
  margin: 2rem 0 1.5rem;
}

.ci-reveal {
  background: #fff;
  border: 1px solid var(--sage);
  border-radius: 8px;
  margin: 1.5rem 0 1.5rem;
  overflow: hidden;
}

/* The summary is a tinted bar so the whole thing reads as one clickable
   object, not a paragraph that happens to have a triangle. */
.ci-reveal > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: var(--river);
  background: var(--rung-tint);
}

.ci-reveal > summary:hover { background: var(--sage); }

.ci-reveal > summary::-webkit-details-marker { display: none; }

.ci-reveal > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--clay);
  transition: transform var(--speed) ease;
}

.ci-reveal[open] > summary::before { transform: rotate(90deg); }

.ci-body {
  padding: 0.4rem 1rem 0.6rem;
  border-top: 1px solid var(--sage);
}

.ci-body h3 {
  font-size: 1rem;
  margin: 1.2rem 0 0.4rem;
  color: var(--river);
}

.ci-body p { margin: 0 0 0.9rem; }

.ci-body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Worked examples under a Try it block — filled-in versions of the
   prompt to get the reader's own started. Lighter than the copyable
   prompt above: a sage rule down the side, not a card.
   --------------------------------------------------------------- */
.examples-lede {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.examples {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.examples li {
  border-left: 3px solid var(--sage);
  padding-left: 1rem;
  margin: 0 0 0.9rem;
}

.examples li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   The pro star — marks Automate it as the optional next-level rung,
   the one you reach for once the routine is already working.
   --------------------------------------------------------------- */
.pro-star {
  color: var(--clay);
  font-size: 0.9em;
  margin-left: 0.1em;
}

/* On the deepest (river) rung of a ladder card the clay star would sit
   dark-on-dark, so lift it toward the sand text it sits beside. */
.rung:last-child .pro-star { color: #e8a48c; }

/* The rung key on the home page — what the three rungs mean, read as a
   legend beside the cards. Same sage rule as the worked examples. */
.ladder-key {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.ladder-key li {
  border-left: 3px solid var(--sage);
  padding-left: 1rem;
  margin: 0 0 0.9rem;
}

.ladder-key li:last-child { margin-bottom: 0; }
.ladder-key strong { color: var(--river); }

/* Fine print at the foot of a page — a not-sponsored note on Pro tips.
   Set off with the same sage rule as the next-link, quieter type. */
.disclaimer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sage);
  font-size: 0.85rem;
  color: var(--muted);
}