/* Tokens: copied from the mi-estilo-epr-website skill. PolySans is not free,
       so Inter Tight 400 is used as the skill's stated substitute. */
    :root {
      --color-graphite: #202020;
      --color-canvas-white: #ffffff;
      --color-ash: #efefef;
      --color-fog: #f5f5f5;
      --color-ivory: #ebe6dd;
      --color-steel: #4d4d4d;
      --color-slate: #828282;
      --color-mist: #e8e8e8;
      --color-ember-orange: #ff682c;
      --color-brass: #816729;

      --font-polysans: 'PolySans', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      --spacing-8: 8px;
      --spacing-12: 12px;
      --spacing-16: 16px;
      --spacing-20: 20px;
      --spacing-36: 36px;
      --spacing-40: 40px;
      --spacing-60: 60px;

      --page-max-width: 1200px;
      --section-gap: 80px;
      --card-padding: 40px;
      --element-gap: 20px;

      --radius-tags: 20px;
      --radius-cards: 8px;
      --radius-data: 20px;
      --radius-buttons: 0px;
      --radius-nav-pills: 200px;
      --radius-asymmetric-card: 6px 0px 0px 0px;

      /* Derived (see delivery notes): mobile values built from the skill's own scale */
      --gutter: 16px;
      --card-pad: 20px;
    }

    @media (min-width: 768px) {
      :root { --gutter: 40px; --card-pad: 40px; }
    }

    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

    body {
      font: 400 16px/1.5 var(--font-inter);
      color: var(--color-graphite);
      background: var(--color-canvas-white);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    :focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 3px; }

    .skip-link {
      position: absolute; left: var(--spacing-16); top: -100px; z-index: 100;
      background: var(--color-graphite); color: var(--color-canvas-white);
      padding: 10px 20px; font: 400 16px/1 var(--font-polysans); text-decoration: none;
    }
    .skip-link:focus { top: var(--spacing-16); }

    .container { width: min(100% - (2 * var(--gutter)), var(--page-max-width)); margin-inline: auto; }

    /* Type: PolySans (substitute) at 400 only, -0.02em on every PolySans element */
    h1, h2, h3, .wordmark, .btn, .nav-pill a, .tag, .caption, .card-title {
      font-family: var(--font-polysans);
      font-weight: 400;
      letter-spacing: -0.02em;
    }
    .display { font-size: clamp(40px, 19.2px + 5.6vw, 66px); line-height: 0.91; }
    .heading-lg { font-size: 40px; line-height: 1.2; }
    .heading { font-size: 32px; line-height: 1.19; }
    .subheading { font-size: 18px; line-height: 1.25; }
    .lead { font-size: 18px; line-height: 1.5; color: var(--color-steel); }
    .body { color: var(--color-steel); }
    .small { font-size: 14px; line-height: 1.43; color: var(--color-steel); }

    /* Sections: white and Ash bands, no dividers, no shadows */
    .section { padding-block: calc(var(--section-gap) / 2); }
    .band { background: var(--color-ash); padding-block: var(--spacing-60); }
    @media (max-width: 767px) {
      :root { --section-gap: 60px; }
      .band { padding-block: var(--spacing-40); }
    }

    /* Buttons: 0px radius, 1px Graphite, PolySans 16px */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; padding: 10px 20px;
      font-size: 16px; line-height: 1;
      border: 1px solid var(--color-graphite); border-radius: var(--radius-buttons);
      text-decoration: none; cursor: pointer; touch-action: manipulation;
      transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
    }
    .btn-primary { background: var(--color-graphite); color: var(--color-canvas-white); }
    .btn-primary:hover { background: var(--color-steel); border-color: var(--color-steel); }
    .btn-ghost { background: transparent; color: var(--color-graphite); }
    .btn-ghost:hover { background: var(--color-mist); }

    .link {
      color: inherit; text-decoration: underline;
      text-decoration-color: var(--color-ember-orange);
      text-decoration-thickness: 1px; text-underline-offset: 3px;
    }

    /* Header */
    .header-grid {
      display: grid; grid-template-columns: 1fr auto; align-items: center;
      row-gap: var(--spacing-12); column-gap: var(--spacing-16);
      padding-block: var(--spacing-20);
    }
    .wordmark { font-size: 18px; line-height: 1; color: var(--color-graphite); text-decoration: none; white-space: nowrap; }
    .header-cta { justify-self: end; }
    .nav-pill {
      grid-column: 1 / -1; grid-row: 2;
      display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-8);
      background: var(--color-ash); border-radius: var(--radius-nav-pills);
      padding: var(--spacing-8) 18px;
    }
    .nav-pill a {
      position: relative; font-size: 14px; line-height: 28px;
      color: var(--color-graphite); text-decoration: none; white-space: nowrap;
      transition: color 150ms ease-out;
    }
    .nav-pill a::after { content: ""; position: absolute; inset: -8px -6px; } /* 44px touch area */
    .nav-pill a:hover { color: var(--color-steel); }
    .header-cta { white-space: nowrap; }
    @media (max-width: 480px) {
      .nav-pill { padding-inline: 14px; gap: 6px; }
      .nav-pill a { font-size: 13px; }
    }
    @media (max-width: 420px) { .nav-optional { display: none; } }
    @media (max-width: 360px) {
      .wordmark { font-size: 16px; }
      .header-cta { padding-inline: 12px; }
      .nav-pill { padding-inline: 12px; gap: 4px; }
      .nav-pill a { font-size: 13px; }
    }
    @media (min-width: 900px) {
      .header-grid { grid-template-columns: 1fr auto 1fr; }
      .nav-pill { grid-column: 2; grid-row: 1; justify-content: center; gap: var(--element-gap); }
      .nav-pill a { font-size: 16px; }
      .header-cta { grid-column: 3; }
    }

    /* Hero */
    .hero-grid { display: grid; gap: var(--spacing-40); align-items: center; }
    .hero-copy .lead { margin-top: var(--element-gap); max-width: 32em; }
    .actions { display: flex; flex-direction: column; gap: var(--spacing-12); margin-top: var(--spacing-36); }
    @media (min-width: 560px) { .actions { flex-direction: row; flex-wrap: wrap; } }
    @media (min-width: 900px) {
      .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--spacing-60); }
    }

    .data-panel {
      background: var(--color-ash); border-radius: var(--radius-cards);
      padding: var(--card-pad); display: grid; gap: var(--element-gap);
    }
    @media (min-width: 900px) { .data-panel { padding: var(--spacing-36); } }
    .data-panel > .card-title { font-size: 32px; line-height: 1.19; color: var(--color-graphite); }
    .stat-row { display: grid; gap: var(--element-gap); }
    @media (min-width: 480px) { .stat-row { grid-template-columns: 1fr 1fr; } }

    .data-card {
      background: var(--color-canvas-white); border-radius: var(--radius-data);
      padding: var(--spacing-20);
    }
    .stat-label { font-size: 14px; line-height: 1.43; font-weight: 500; color: var(--color-steel); }
    .numeral { font-family: var(--font-polysans); font-weight: 400; letter-spacing: -0.02em; font-size: 32px; line-height: 1.19; color: var(--color-graphite); margin-block: 4px; }
    .numeral-lg { font-size: 40px; line-height: 1.2; }
    .source { margin-top: var(--spacing-12); font-size: 14px; line-height: 1.43; color: var(--color-steel); }
    .source .caption { color: var(--color-brass); font-size: 13px; }

    /* Credentials strip: text only */
    .caption { font-size: 13px; line-height: 1.38; color: var(--color-brass); display: inline-flex; align-items: center; gap: var(--spacing-8); }
    .caption::before { content: ""; width: 6px; height: 6px; border-radius: 200px; background: var(--color-ember-orange); }
    .cred-list { list-style: none; padding: 0; margin-top: var(--spacing-20); display: grid; gap: var(--spacing-20); }
    .cred-list li { border-top: 1px solid var(--color-mist); padding-top: var(--spacing-16); }
    .cred-list h3 { font-size: 18px; line-height: 1.25; }
    .cred-list p { margin-top: var(--spacing-8); font-size: 15px; line-height: 1.5; color: var(--color-steel); }
    @media (min-width: 900px) { .cred-list { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-40); } }

    /* What I do + asymmetric card */
    .split { display: grid; gap: var(--spacing-40); align-items: start; }
    .split .lead { margin-top: var(--element-gap); }
    @media (min-width: 900px) { .split { grid-template-columns: 1fr 1.15fr; gap: var(--spacing-60); } }
    .asym-card {
      background: var(--color-ash); border-radius: var(--radius-asymmetric-card);
      padding: var(--spacing-36) var(--spacing-20) var(--spacing-40) var(--spacing-20);
    }
    @media (min-width: 768px) { .asym-card { padding: 70px var(--spacing-40) var(--spacing-60) var(--spacing-60); } }
    .asym-card .heading { margin-bottom: var(--element-gap); }
    .deliverables { list-style: none; padding: 0; display: grid; gap: var(--spacing-20); counter-reset: d; }
    .deliverables li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--spacing-12); counter-increment: d; }
    .deliverables li::before { content: counter(d); font: 400 18px/1.25 var(--font-polysans); letter-spacing: -0.02em; color: var(--color-brass); }
    .deliverables h4 { font: 400 18px/1.25 var(--font-polysans); letter-spacing: -0.02em; }
    .deliverables p { margin-top: 4px; color: var(--color-steel); }
    .what-body { margin-top: var(--spacing-16); max-width: 32em; color: var(--color-steel); }

    /* Byline: name and city */
    .byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-12); margin-top: var(--element-gap); }
    .byline-name { font: 400 18px/1.25 var(--font-polysans); letter-spacing: -0.02em; color: var(--color-graphite); }
    .byline-place { font-size: 14px; line-height: 1.43; color: var(--color-steel); padding-left: var(--spacing-12); border-left: 1px solid var(--color-mist); }

    /* Steps */
    .steps { display: grid; gap: var(--element-gap); margin-top: var(--spacing-36); }
    @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
    .step { background: var(--color-canvas-white); border-radius: var(--radius-cards); padding: var(--card-pad); }
    .step .heading { margin-top: var(--spacing-20); }
    .step .body { margin-top: var(--spacing-12); }
    .tag {
      display: inline-block; padding: 4px 12px; border-radius: var(--radius-tags);
      background: var(--color-fog); color: var(--color-brass); font-size: 13px; line-height: 1.38;
    }
    .band .tag { background: var(--color-fog); }
    .ivory .tag, .bg-card .tag { background: var(--color-canvas-white); }
    .after-steps { margin-top: var(--spacing-36); }

    /* Who I help */
    .who-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-36); }
    .who-list li { background: var(--color-fog); color: var(--color-graphite); border-radius: var(--radius-tags); padding: 10px 18px; font-size: 15px; line-height: 1.25; }

    /* Background */
    .bg-grid { display: grid; gap: var(--element-gap); margin-top: var(--spacing-36); }
    @media (min-width: 900px) {
      .bg-grid { grid-template-columns: 1fr 1fr; }
      .bg-grid .edu { grid-column: 1 / -1; }
    }
    .bg-card { background: var(--color-ash); border-radius: var(--radius-cards); padding: var(--card-pad); }
    .bg-card.ivory { background: var(--color-ivory); display: flex; flex-direction: column; align-items: flex-start; }
    .bg-card .heading { margin-top: var(--spacing-20); }
    .bg-card .body { margin-top: var(--spacing-12); }
    .stat { margin-top: var(--spacing-20); }
    .bg-card.ivory .stat { margin-top: auto; padding-top: var(--spacing-36); }
    .stat-secondary { margin-top: var(--spacing-36); }
    .stat-secondary .stat-label { margin-bottom: 0; }
    .edu { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-8) var(--spacing-40); padding: var(--spacing-20) var(--card-pad); }
    .edu .subheading { margin: 0; }
    .edu .body { margin: 0; }

    /* Contact */
    .contact-actions { display: grid; gap: var(--element-gap); justify-items: start; }
    .contact-email { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
    .contact-actions .small { margin-bottom: 4px; }
    @media (min-width: 900px) { .contact-actions { padding-top: 6px; } }

    /* Footer */
    .site-footer { padding-block: var(--spacing-40); }
    .footer-row { display: flex; flex-direction: column; gap: var(--spacing-12); }
    @media (min-width: 768px) { .footer-row { flex-direction: row; justify-content: space-between; align-items: baseline; } }
  
/* Blog additions. Tokens, header, buttons, tags and footer come from the home page styles above.
   Derived values that are not in the style reference: 680px reading column, 18px article body
   (an Inter size in the reference, at its 1.5 maximum leading), 28px and 20px article headings,
   60px gap above article headings, Ash band behind the article list. */
.post-header { padding-top: var(--spacing-36); }
.crumbs { font-size: 14px; line-height: 1.43; color: var(--color-steel); }
.crumbs a { color: inherit; }
.post-header h1 {
  font-size: clamp(32px, 22px + 3vw, 48px); line-height: 1.1;
  margin-top: var(--spacing-20); max-width: 22em; color: var(--color-graphite);
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 4px var(--spacing-16);
  margin-top: var(--spacing-20); font-size: 14px; line-height: 1.43; color: var(--color-steel);
}
.post-body { max-width: 680px; margin-top: var(--spacing-36); padding-bottom: var(--spacing-60); }
.post-body > * + * { margin-top: var(--spacing-20); }
.post-body p, .post-body li { font-size: 18px; line-height: 1.5; color: var(--color-steel); }
.post-body h2 { font-size: 28px; line-height: 1.2; margin-top: var(--spacing-60); color: var(--color-graphite); }
.post-body h3 { font-size: 20px; line-height: 1.25; margin-top: var(--spacing-36); color: var(--color-graphite); }
@media (min-width: 768px) { .post-body h2 { font-size: 32px; line-height: 1.19; } }
.post-body ul, .post-body ol { padding-left: 1.25em; display: grid; gap: var(--spacing-8); }
.post-body strong { font-weight: 600; color: var(--color-graphite); }
.post-body .btn { margin-top: var(--spacing-8); }

.table-wrap { overflow-x: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-mist); }
.post-body th { font-family: var(--font-inter); font-weight: 600; color: var(--color-graphite); }
.post-body td { color: var(--color-steel); }

/* Short answer: the featured card, so it takes the asymmetric radius */
.short-answer { background: var(--color-ash); border-radius: var(--radius-asymmetric-card); padding: var(--card-pad); }
.post-body .short-answer .short-answer-text { margin-top: var(--spacing-12); color: var(--color-graphite); }

/* Related articles and the index list: white cards on an Ash band */
.related { background: var(--color-ash); padding-block: var(--spacing-60); }
.related-list, .post-list { list-style: none; padding: 0; display: grid; gap: var(--element-gap); margin-top: var(--spacing-20); }
.related-list li, .post-card { background: var(--color-canvas-white); border-radius: var(--radius-cards); padding: var(--card-pad); }
.post-card { display: block; color: inherit; text-decoration: none; }
.post-card .subheading { font-size: 20px; margin-top: var(--spacing-12); }
.post-card:hover .subheading {
  text-decoration: underline; text-decoration-color: var(--color-ember-orange);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.related-list .small, .post-card .small { margin-top: var(--spacing-8); }
@media (min-width: 900px) {
  .post-list { grid-template-columns: 1fr 1fr; }
  .related-list { grid-template-columns: repeat(3, 1fr); }
}
.index-head { padding-block: var(--spacing-60) var(--spacing-20); }
.index-head .lead { margin-top: var(--element-gap); max-width: 32em; }
.empty-note { color: var(--color-steel); margin-top: var(--spacing-20); }