/* ==========================================================================
   IntentLab.Studio brand layer
   --------------------------------------------------------------------------
   Loads after Source's screen.css, so on any conflict this file wins.

   Rules for editing this file:
     1. Never write a raw hex value here. Every colour comes from tokens.css.
        If you need a colour that does not exist yet, add it to tokens.css
        first and reference it here. That is what keeps the site, the guide
        and future material in agreement.
     2. Everything of ours is prefixed il-. Source's own classes are prefixed
        gh-. Keeping them separate means a Source update cannot silently
        break our layouts, and we cannot silently break theirs.
     3. Media queries cannot read custom properties. `@media (min-width:
        var(--bp-md))` silently never matches. Write the literal value and
        put the token name in a comment beside it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Self-hosted. No request leaves the site to fetch these, which is faster
   and means the page cannot be left unstyled by someone else's outage.
   Paths are relative to this file, which lives in assets/css/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. GLOBAL BRAND LAYER
   Applies everywhere, including Source's own post and archive pages, so a
   blog post looks like it belongs to the same site as the homepage.
   -------------------------------------------------------------------------- */

body {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
}

h1, h2, h3, h4, h5, h6,
.gh-card-title,
.gh-footer-logo,
.gh-navigation-brand .gh-navigation-logo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
  text-wrap: balance;
}

a { color: var(--color-accent-deep); }

/* Source renders the site title as text when no logo image is set, which is
   exactly what we want. This is the wordmark. */
.gh-navigation-brand .gh-navigation-logo.is-title {
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

/* Shared button. Used on both templates. */
.il-btn {
  display: inline-block;
  background: var(--color-accent-deep);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-weight: var(--weight-body-strong);
  font-size: var(--text-md);
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.il-btn:hover,
.il-btn:focus-visible {
  background: var(--color-surface-dark);
  color: var(--color-surface);
  transform: translateY(-1px);
}

/* Small uppercase label above a section heading. */
.il-kicker {
  font-family: var(--font-body);
  font-weight: var(--weight-body-strong);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

/* One shared measure for running text. Roughly 65 characters, which is where
   the eye stops having to hunt for the start of the next line. */
.il-measure { max-width: 38rem; }

/* Page gutter. Set once, here, so no section can forget it. */
.il-wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}

/* --------------------------------------------------------------------------
   2b. FOOTER
   Source ships a footer bar with the site name, a secondary nav and the Ghost
   credit, plus a row of social icons. Three things needed fixing:
   the site name used Source's heading font rather than ours; the secondary nav
   rendered the signup link as plain text with no emphasis; and the social
   icons sat above the bar, which made LinkedIn look more important than the
   only call to action down there. The icons are moved below the bar in
   footer.hbs; the rest is here.
   -------------------------------------------------------------------------- */

.gh-footer-logo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: -0.015em;
  color: var(--color-text-strong);
}

/* The secondary navigation in the footer is the signup call to action, so it
   gets button treatment rather than link treatment. */
.gh-footer-menu .nav a {
  display: inline-block;
  background: var(--color-accent-deep);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-weight: var(--weight-body-strong);
  font-size: var(--text-md);
  line-height: 1.2;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease;
}
.gh-footer-menu .nav a:hover,
.gh-footer-menu .nav a:focus-visible {
  background: var(--color-surface-dark);
  color: var(--color-surface);
  opacity: 1;
}

/* Quieter than the call to action above them. */
.gh-social-links {
  margin-block: var(--space-xl) 0;
  color: var(--color-text-muted);
}
.gh-social-links svg { width: 18px; height: 18px; }
.gh-social-links a { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .gh-footer-menu .nav a { transition: none; }
}

/* --------------------------------------------------------------------------
   3. THE A-F KEY
   Shared by the homepage and the A-F Calendar page. This is the only place
   on the site where all six category colours appear at once, and that is
   deliberate: it is the loudest thing we own, so it gets used exactly where
   the calendar is being explained and nowhere else.
   -------------------------------------------------------------------------- */

.il-afkey {
  border: 1px solid var(--color-surface-warm-lt);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-illustration-ground);
}
.il-afrow {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: var(--space-sm);
  padding-right: var(--space-md);
  border-top: 1px solid var(--color-surface-warm-lt);
}
.il-afrow:first-child { border-top: 0; }

.il-afchip {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-sm);
  color: var(--color-illustration-ground);
  padding-block: 0.7rem;
}
.il-afchip-a { background: var(--color-cat-a); }
.il-afchip-b { background: var(--color-cat-b); }
.il-afchip-c { background: var(--color-cat-c); }
.il-afchip-d { background: var(--color-cat-d); }
.il-afchip-e { background: var(--color-cat-e); }
.il-afchip-f { background: var(--color-cat-f); }

.il-afname {
  font-weight: var(--weight-body-strong);
  font-size: var(--text-sm);
  padding-block: 0.7rem;
  color: var(--color-text);
}
.il-afnote {
  display: block;
  font-weight: var(--weight-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. SIGNUP
   The form itself is Ghost's. We only style the shell around it so it reads
   as ours. Do not restyle the input's behaviour, only its surface.
   -------------------------------------------------------------------------- */

.il-signup {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 4vw, 2.5rem);

  /* The box carries id="signup", so /the-a-f-calendar/#signup jumps here.
     Without this the box lands flush against the top of the window and the
     site header sits over it. This leaves a gap so the heading is readable
     on arrival. No smooth-scroll is set on purpose: nothing on this site
     animates unless a person asked for it, and a click-triggered jump is
     the least surprising behaviour. */
  scroll-margin-top: var(--space-xl);
}
.il-signup h2 {
  color: var(--color-text-on-dark-2);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  margin: 0 0 var(--space-sm);
}
.il-signup-say { margin: 0 0 var(--space-lg); font-size: var(--text-md); }

/* Ghost's own form markup is reused verbatim (partials/email-subscription.hbs)
   so the members JS keeps working. We restyle its surface only, never its
   behaviour. .gh-form and .gh-button are Source's class names. */
.il-signup .gh-form { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: flex-start; }
.il-signup .gh-form > p[data-members-error] {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-cat-a);
}
.il-signup .gh-button {
  flex: 0 0 auto;
  background: var(--color-accent);
  color: var(--color-surface-dark);
  font-family: var(--font-body);
  font-weight: var(--weight-body-strong);
  font-size: var(--text-md);
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.18s ease;
}
.il-signup .gh-button:hover,
.il-signup .gh-button:focus-visible { background: var(--color-surface-mint); }

.il-signup input[type="email"],
.il-signup .gh-form-input {
  flex: 1 1 13rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-text-muted);
  background: var(--color-text);
  color: var(--color-text-on-dark);
}
.il-signup input[type="email"]::placeholder { color: var(--color-text-muted); }
.il-signup input[type="email"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.il-signup .il-btn {
  background: var(--color-accent);
  color: var(--color-surface-dark);
}
.il-signup .il-btn:hover,
.il-signup .il-btn:focus-visible {
  background: var(--color-surface-mint);
  color: var(--color-surface-dark);
}
.il-fineprint {
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Full-width signup. Used on the homepage below the two-column block, so the
   left column of text and the right column holding the A-F key can be equal
   height instead of one running far past the other.

   The markup is four siblings (heading, line, form, fine print) and grid areas
   pair them into two stacks without needing extra wrapper divs. */
.il-signup-wide { margin-top: clamp(2rem, 4vw, 3rem); }

@media (min-width: 52rem) {         /* 832px, where two stacks stop crowding */
  .il-signup-wide {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "title form"
      "say   fine";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: var(--space-sm);
    align-content: start;
  }
  .il-signup-wide h2             { grid-area: title; align-self: end; margin: 0; }
  .il-signup-wide .il-signup-say { grid-area: say;   margin: 0; }
  .il-signup-wide .gh-form       { grid-area: form;  align-self: end; }
  .il-signup-wide .il-fineprint  { grid-area: fine;  margin: 0; }
}

/* Attribution. The A-F system originates with Danielle Colada. This credit
   appears wherever the guide is described. */
.il-credit {
  border-top: 1px solid var(--color-surface-warm-lt);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.il-credit p {
  max-width: 44rem;
  margin: 0;
  /* --text-md, not --text-sm. tokens.css calls 16px "the floor for running
     text" and this is running text, not a label. The 14px sizes elsewhere in
     this file are all labels, captions or fine print. */
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.il-credit a { color: var(--color-accent-deep); }

/* --------------------------------------------------------------------------
   5. HOMEPAGE
   Six sections, in the order the reader meets them.
   -------------------------------------------------------------------------- */

.il-hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.il-hero h1 {
  font-size: clamp(2.5rem, 7.4vw, 5.25rem);
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 16ch;
  margin: 0;
}
/* The second line of the hook carries the turn, so it changes colour. The
   rhetorical structure is visible before the sentence is read. */
.il-hero h1 .il-turn { display: block; color: var(--color-accent-deep); }

.il-hero-sub {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.45;
  max-width: 30ch;
  color: var(--color-text);
}
.il-hero-who {
  margin: var(--space-md) 0 0;
  font-size: 1.1875rem;
  color: var(--color-text);
  max-width: 42ch;
}
.il-hero .il-btn { margin-top: var(--space-xl); }

.il-trade {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-surface-warm-lt);
  border-bottom: 1px solid var(--color-surface-warm-lt);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.il-trade-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
.il-trade h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); margin: 0 0 var(--space-lg); }
.il-trade p { max-width: 38rem; }
.il-lede { font-size: 1.1875rem; }

/* The one dark beat on the page. The brand guide calls for near-black used
   sparingly as a statement, so it appears once, here, and nowhere else. */
.il-ethos {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.il-ethos .il-pull {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark-2);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.il-ethos p { max-width: 38rem; color: var(--color-text-on-dark); }
.il-ethos p + p { margin-top: var(--space-lg); }
/* The beat after the thesis. Needs more air above it than a normal paragraph
   so the thesis line is not crowded by what it sets up. */
.il-ethos .il-ethos-after { margin-top: var(--space-xl); }

.il-ethos .il-thesis {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-accent);
  margin-top: var(--space-xl);
}

.il-you { padding-block: clamp(3rem, 7vw, 5rem); }
.il-you h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); margin: 0 0 var(--space-xl); }
.il-qlist {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  max-width: 46rem;
}
.il-qlist li {
  padding: 1.1rem 0 1.1rem var(--space-lg);
  border-top: 1px solid var(--color-surface-warm-lt);
  font-size: 1.125rem;
  line-height: 1.45;
  position: relative;
}
.il-qlist li:last-child { border-bottom: 1px solid var(--color-surface-warm-lt); }
.il-qlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.il-offer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-surface-warm-lt);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.il-offer h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); margin: 0 0 var(--space-xl); }
.il-cards { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: start; }
.il-card {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-warm-lt);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.il-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(28 28 26 / 7%); }
.il-card h3 { font-size: 1.3125rem; margin: 0 0 var(--space-sm); }
.il-card p { margin: 0; }
.il-rate {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-surface-warm-lt);
  font-weight: var(--weight-body-strong);
  font-size: var(--text-sm);
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
}

.il-bio { padding-block: clamp(3rem, 7vw, 5rem); }
.il-bio h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin: 0 0 var(--space-lg); }
.il-bio p { max-width: 38rem; }

/* --------------------------------------------------------------------------
   6. THE A-F CALENDAR PAGE
   The standalone signup page. This is the URL handed to the summit, so it
   loads fast and does one job.
   -------------------------------------------------------------------------- */

.il-afpage { padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(2rem, 4vw, 3rem); }
.il-afpage h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  max-width: 14ch;
  line-height: 1.05;
  margin: 0;
}
.il-afpage h1 .il-sub { display: block; color: var(--color-accent-deep); }
.il-afpage .il-lede {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.45;
  max-width: 36ch;
}

.il-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.il-split p { max-width: 36rem; margin-top: 0; }
.il-split p + p { margin-top: var(--space-md); }

.il-who { border-top: 1px solid var(--color-surface-warm-lt); padding-block: clamp(2rem, 4vw, 3rem); }
.il-who p { max-width: 42rem; margin: 0; }
.il-who .il-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  color: var(--color-text-strong);
  margin-bottom: var(--space-xs);
}

/* --------------------------------------------------------------------------
   7. BREAKPOINTS
   Literal values only. See rule 3 at the top of this file for why.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {          /* --bp-md, 768px */
  .il-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 52rem) {          /* 832px, where the split stops crowding */
  .il-split { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 56rem) {          /* 896px */
  .il-trade-grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   Every transition on this site responds to something the reader did. None
   of it starts on its own. Even so, a reader who has asked their system for
   less motion gets none at all.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .il-btn, .il-card, .il-signup .gh-button { transition: none; }
  .il-btn:hover, .il-btn:focus-visible, .il-card:hover { transform: none; }
}