/* ==========================================================================
   New Journey Designs — styles.css
   Design tokens first; everything below composes from them.
   Orange #FF5100 is 3.27:1 on white — reserve it for large text (≥24px or
   ≥18.66px bold), buttons, and accents. Body-size orange on white uses
   --color-orange-deep (#CC4100, 4.9:1, WCAG AA).
   ========================================================================== */

:root {
  --color-orange:      #FF5100;
  --color-orange-deep: #CC4100;
  --color-orange-tint: #FFF3EC;
  --color-charcoal:    #222222;
  --color-charcoal-2:  #2E2E2E;
  --color-gray:        #595959;
  --color-line:        #E7E7E7;
  --color-white:       #FFFFFF;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container: 72rem;
  --container-narrow: 42rem;
  --radius: 12px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-charcoal);
  background: var(--color-white);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 var(--space-3); }

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--color-orange-tint);
  border-radius: 4px;
  padding: .1em .35em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

section { scroll-margin-top: 5rem; }

/* Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-6); }

@media (min-width: 48rem) {
  .section { padding-block: var(--space-7); }
}

.eyebrow {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin-bottom: var(--space-2);
}

.section-lede {
  color: var(--color-gray);
  max-width: 38rem;
  margin-bottom: var(--space-5);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}

.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1.1875rem; /* 19px bold on orange: WCAG AA large-text */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  padding: 1rem 1.75rem;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.btn:hover { background: var(--color-orange-deep); }
.btn:active { transform: translateY(1px); }

.btn--small { font-size: 1rem; padding: .625rem 1.125rem; }

.link-arrow {
  font-weight: 600;
  text-decoration: none;
}

.link-arrow:hover { text-decoration: underline; }

/* Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: 0 1px 12px rgba(34, 34, 34, .06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  min-height: 4rem;
}

.site-header__logo img { height: 42px; width: 42px; }

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.site-nav a:not(.btn) {
  color: var(--color-charcoal);
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
}

.site-nav a:not(.btn):hover { color: var(--color-orange-deep); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-charcoal);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 47.9375rem) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-4);
    box-shadow: 0 12px 24px rgba(34, 34, 34, .08);
  }

  .site-nav.is-open { display: flex; }
}

@media (min-width: 48rem) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-6);
}

/* Hero motion loop
   A vector stand-in for a background video: seamless, a few KB, and crisp at
   any size. Every animation below returns to its exact starting state, so the
   loop has no visible seam. All of it is decorative and masked away from the
   left half, where the headline lives. */

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hero__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Narrow screens: the headline sits over the whole hero, so hold the loop back */
@media (max-width: 47.9375rem) {
  .hero__loop { opacity: .5; }
}

/* Nothing to animate while the hero is scrolled past (class set in main.js) */
.hero__media.is-paused * { animation-play-state: paused; }

.hero__mark {
  position: absolute;
  top: 50%;
  right: -8rem;
  transform: translateY(-50%);
  width: 34rem;
  opacity: .05;
}

/* Static first frame: the light pulses only appear once motion is allowed */
.hero__pulses { opacity: 0; }

.hero__traveler {
  offset-path: path("M-120,392 C 190,378 350,300 570,262 S 950,190 1320,104");
  offset-distance: 64%;
  offset-rotate: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: njd-drift 22s ease-in-out infinite;
  }

  .hero__glow--soft { animation-duration: 30s; animation-direction: reverse; }

  .hero__pulses {
    opacity: 1;
    stroke-dasharray: 55 195; /* 250-unit period on a 1000-unit path */
  }

  .hero__pulse { animation: njd-flow 9s linear infinite; }
  .hero__pulse--1 { animation-duration: 13s; opacity: .30; }
  .hero__pulse--2 { animation-duration: 9.5s; animation-delay: -3s; opacity: .42; }
  .hero__pulse--3 { animation-duration: 11s; animation-delay: -6s; opacity: .26; }

  .hero__traveler { animation: njd-travel 19s linear infinite; }

  .hero__traveler-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: njd-beacon 3.2s ease-in-out infinite;
  }
}

@keyframes njd-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-3%, 2.5%) scale(1.08); }
}

/* One full dash period; end state matches the start, so it never jumps */
@keyframes njd-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -250; }
}

@keyframes njd-travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes njd-beacon {
  0%, 100% { transform: scale(1);   opacity: .16; }
  50%      { transform: scale(1.6); opacity: .05; }
}

.hero__content { position: relative; max-width: 46rem; }

.hero h1 { margin-bottom: var(--space-4); }

.hero__sub {
  font-size: 1.25rem;
  color: var(--color-gray);
  max-width: 36rem;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Stakes
   ========================================================================== */

.stakes { background: var(--color-orange-tint); }

.stakes__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.stakes__item {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  border: 1px solid rgba(255, 81, 0, .12);
}

.stakes__item h3 { margin-bottom: var(--space-2); }
.stakes__item p { margin: 0; color: var(--color-gray); }

.stakes__closer {
  margin: var(--space-5) 0 0;
  font-weight: 600;
  max-width: 34rem;
}

/* Guide
   ========================================================================== */

.guide__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 48rem) {
  .guide__inner { grid-template-columns: auto 1fr; }
}

.guide__mark {
  width: 9rem;
  margin-inline: auto;
}

.guide__photo {
  width: min(18rem, 70vw);
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--color-orange);
}

.guide__body { max-width: 40rem; }

/* Plan (3 steps)
   ========================================================================== */

.plan__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: var(--space-5);
}

.plan__step {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
}

.plan__num {
  display: block;
  font-size: 3rem; /* large text: orange on white is AA-safe */
  font-weight: 800;
  line-height: 1;
  color: var(--color-orange);
  margin-bottom: var(--space-3);
}

.plan__step h3 { margin-bottom: var(--space-2); }
.plan__step p { margin: 0; color: var(--color-gray); }

/* Services
   ========================================================================== */

.services { background: var(--color-orange-tint); }

.services__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Cap at 3 columns so 6 cards always land as a balanced 3x2 (or 2x3) grid */
@media (min-width: 64rem) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

.service {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  border: 1px solid rgba(255, 81, 0, .12);
}

.service svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-orange);
  margin-bottom: var(--space-3);
}

.service h3 { margin-bottom: var(--space-2); }
.service p { margin: 0; color: var(--color-gray); }

/* Findable (AI search / answer engines)
   ========================================================================== */

.findable { border-block: 1px solid var(--color-line); }

.findable__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: var(--space-5);
}

.findable__item h3 { margin-bottom: var(--space-2); }
.findable__item p { margin: 0; color: var(--color-gray); }

.findable__item svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke: var(--color-orange);
  margin-bottom: var(--space-3);
}

/* Success vision (dark band)
   ========================================================================== */

/* Background photo: winding road at dusk (Pexels, © Aleksandar — free license).
   Heavy charcoal overlay keeps white text WCAG-safe over the image. */
.vision {
  background:
    linear-gradient(rgba(28, 28, 28, .74), rgba(28, 28, 28, .74)),
    var(--color-charcoal) url("/assets/img/vision-road.jpg") center / cover no-repeat;
  color: var(--color-white);
  text-align: center;
}

.vision h2 { color: var(--color-white); }

.vision__lede {
  font-size: 1.25rem;
  max-width: 40rem;
  margin: 0 auto var(--space-3);
  color: rgba(255, 255, 255, .85);
}

.vision__contrast {
  color: rgba(255, 255, 255, .6);
  max-width: 34rem;
  margin: 0 auto var(--space-5);
}

/* Work teaser
   ========================================================================== */

.work__list {
  display: grid;
  gap: var(--space-4);
}

.work__card {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .work__card { grid-template-columns: 1fr 1fr; }
}

.work__visual {
  background: var(--color-charcoal);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.work__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* For artwork that shouldn't be cropped to the 16:10 frame — a share card
   already has its own proportions and loses its wordmark to a cover crop */
.work__visual--natural { aspect-ratio: auto; }
.work__visual--natural img { height: auto; }

/* For engagements with no single screenshot to show: the disciplines stand in
   for the artwork and carry the breadth of the work instead */
/* A client logo rather than artwork: contain it and give it breathing room,
   so a trimmed-to-the-edge export doesn't run into the corners */
.work__visual--logo {
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.work__visual--logo img {
  width: auto;
  height: auto;
  max-width: min(68%, 17rem);
  max-height: 100%;
  object-fit: contain;
}

.work__body h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
}

.work__body p { color: var(--color-gray); }

.work__meta {
  font-size: .9375rem;
  color: var(--color-gray);
  margin-bottom: var(--space-2);
}

/* Testimonials
   Staged for the Heddi quote the client is writing; .quote-band is the
   full-width dark treatment, .quote-figure works on any background.
   ========================================================================== */

.quote-figure {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.quote-figure blockquote {
  margin: 0;
  font-size: clamp(1.125rem, 2.2vw, 1.4375rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.quote-figure blockquote p:last-child { margin-bottom: 0; }

.quote-figure figcaption {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.quote-figure figcaption span {
  display: block;
  font-weight: 400;
}

.quote-band {
  background: var(--color-charcoal);
  border-block: 1px solid var(--color-charcoal);
  color: var(--color-white);
}

.quote-band .quote-figure figcaption span { color: rgba(255, 255, 255, .7); }

.quote-band .eyebrow { color: var(--color-orange); }

.quote-band .quote-figure { max-width: 46rem; }

/* Lead magnet band (transitional CTA)
   ========================================================================== */

.lead-band {
  border-block: 1px solid var(--color-line);
  background: var(--color-white);
}

.lead-band__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 48rem) {
  .lead-band__inner { grid-template-columns: 1fr auto; }
}

.lead-band h2 { margin-bottom: var(--space-2); }

.lead-band p { color: var(--color-gray); margin: 0; max-width: 34rem; }

.lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lead-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-charcoal);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  min-width: 16rem;
  flex: 1;
}

/* Checkup page
   ========================================================================== */

.checkup-list {
  list-style: none;
  counter-reset: checkup;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.checkup-list li {
  counter-increment: checkup;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-4) 4.75rem;
  position: relative;
}

.checkup-list li::before {
  content: counter(checkup);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-orange);
}

.checkup-list h3 { margin-bottom: var(--space-2); }
.checkup-list p { margin: 0 0 var(--space-2); color: var(--color-gray); }

.checkup-list .ask {
  display: block;
  font-weight: 600;
  color: var(--color-charcoal);
}

/* Contact form
   ========================================================================== */

.contact { background: var(--color-orange-tint); }

.contact-form {
  display: grid;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid rgba(255, 81, 0, .12);
  border-radius: var(--radius);
  padding: var(--space-5);
}

@media (min-width: 48rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .form-field--full,
  .contact-form button { grid-column: 1 / -1; }
}

.form-field { display: grid; gap: var(--space-1); }

.form-field label {
  font-weight: 600;
  font-size: .9375rem;
}

.label-optional {
  font-weight: 400;
  color: var(--color-gray);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-charcoal);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: .75rem .875rem;
  width: 100%;
}

.form-field textarea { resize: vertical; min-height: 8rem; }

.contact-form button { justify-self: start; }

.contact-alt {
  margin: var(--space-4) 0 0;
  color: var(--color-gray);
  font-size: .9375rem;
}

.hidden-field { position: absolute; left: -9999px; }

/* Footer
   ========================================================================== */

.site-footer {
  background: var(--color-charcoal-2);
  color: rgba(255, 255, 255, .75);
  padding-block: var(--space-6);
  font-size: .9375rem;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.site-footer__mark { width: 3rem; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.site-footer a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 600;
}

.site-footer a:hover { color: var(--color-white); }

.site-footer__legal { margin: 0; color: rgba(255, 255, 255, .55); }

/* Case study page
   ========================================================================== */

.case-hero { padding-block: var(--space-7) var(--space-5); }

/* Client logo plate. The Switch mark is white-on-transparent, so it needs a
   dark ground to read at all on this page. */
.case-hero__logo {
  background: var(--color-charcoal);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  width: fit-content;
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-4);
}

.case-hero__logo img { width: 11rem; height: auto; }

.case-hero__sub {
  font-size: 1.25rem;
  color: var(--color-gray);
  max-width: 40rem;
}

.case-glance {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-4);
  margin-block: var(--space-5);
}

.case-glance dt {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: var(--space-1);
}

.case-glance dd { margin: 0; font-weight: 600; }

.case-section { padding-block: var(--space-5); }

.case-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

.case-img {
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  margin-block: var(--space-4) var(--space-5);
  width: 100%;
}

/* Phone screenshots: shown near their native width rather than stretched,
   so a mobile capture stays sharp */
.case-img--phone {
  max-width: 20rem;
  margin-inline: auto;
}

.case-figure {
  margin: var(--space-4) 0 var(--space-5);
}

.case-figure .case-img { margin-block: 0; }

.case-figure figcaption {
  font-size: .875rem;
  color: var(--color-gray);
  text-align: center;
  margin-top: var(--space-2);
}

.case-placeholder {
  background: var(--color-orange-tint);
  border: 1px dashed rgba(255, 81, 0, .35);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-block: var(--space-4);
  color: var(--color-orange-deep);
  font-weight: 600;
  font-size: .9375rem;
}

.cta-band {
  background: var(--color-charcoal);
  color: var(--color-white);
  text-align: center;
}

.cta-band h2 { color: var(--color-white); }

.cta-band p {
  color: rgba(255, 255, 255, .75);
  max-width: 34rem;
  margin: 0 auto var(--space-5);
}

/* Utility pages (thanks / 404)
   ========================================================================== */

.page-simple {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-7);
}

.page-simple .container { max-width: 34rem; }

.page-simple p { color: var(--color-gray); margin-bottom: var(--space-5); }

/* Scroll animation (JS adds .is-hidden before observing; no-JS stays visible)
   ========================================================================== */

[data-animate].is-hidden {
  opacity: 0;
  transform: translateY(12px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}

/* Blog index
   The card is a lighter cousin of .work__card: same visual-then-body shape and
   the same 16:10 frame, but stacked on a narrow column instead of two-up,
   because an article list is read top to bottom rather than scanned.
   ========================================================================== */

.blog-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.blog-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.blog-card:last-child { border-bottom: 0; padding-bottom: 0; }

.blog-card__visual {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fallback) center / cover no-repeat, var(--color-charcoal);
}

.blog-card__visual img { width: 100%; height: 100%; object-fit: cover; }

.blog-card__body { display: grid; gap: var(--space-2); }

.blog-card__meta {
  margin: 0;
  font-size: .875rem;
  color: var(--color-gray);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.blog-card h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin: 0; }

.blog-card h2 a { color: inherit; text-decoration: none; }

/* Hovering anywhere on the card lights up both the headline and the cue, so the
   whole row reads as one target even though it is three separate links. */
.blog-card:hover h2 a,
.blog-card:hover .blog-card__cue { color: var(--color-orange-deep); }

.blog-card__cue { display: inline-block; }

.blog-card p { margin: 0; color: var(--color-gray); }

@media (min-width: 48rem) {
  .blog-card {
    grid-template-columns: 15rem 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}

/* Article page
   ========================================================================== */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: .9375rem;
  color: var(--color-gray);
}

.article-figure { margin: 0 0 var(--space-5); }

/* The frame holds the article's own share card as a background. If the Unsplash
   photo ever stops resolving, that card shows through instead of a broken
   image, so a page publishing months from now degrades to on-brand rather than
   to broken. The photo covers it completely whenever it loads. */
.article-figure__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fallback) center / cover no-repeat, var(--color-charcoal);
}

.article-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-figure figcaption {
  margin-top: var(--space-2);
  font-size: .8125rem;
  color: var(--color-gray);
}

/* Body copy runs slightly larger than the site default. These are 1,000-word
   reads rather than scannable marketing sections, and the extra measure of
   line height is what makes that bearable on a phone. */
.article-body p,
.article-body li { font-size: 1.125rem; line-height: 1.7; }

.article-body h2 { margin-top: var(--space-5); }

.article-body h3 { margin-top: var(--space-4); }

.article-body > div > :first-child { margin-top: 0; }

.article-body ul,
.article-body ol { padding-left: 1.25rem; margin-bottom: var(--space-4); }

.article-body li { margin-bottom: var(--space-2); }

/* Pull quote. Reuses .quote-figure's type scale and adds the orange rule so it
   reads as a break in the argument rather than as a caption. */
.article-body .quote-figure {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-orange);
}

.article-body .quote-figure blockquote p { color: var(--color-charcoal); }

/* Copyable example. The content pack draws a hard line between a pull quote and
   a prompt the reader is meant to paste into an AI tool; these are the latter,
   so they get monospace and a border instead of display type. Styling them like
   the pull quote above would tell the reader to admire text meant to be used. */
.prompt {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #FAFAFA;
}

.prompt__label {
  margin: 0 0 var(--space-2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
}

.prompt__body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375rem !important;
  line-height: 1.6 !important;
  white-space: pre-wrap;
}

/* Mid-article ask. Deliberately the quieter of the two CTAs: it interrupts a
   reader mid-argument, so it is a bordered block on the same measure as the
   body copy rather than a full-bleed band. */
.inline-cta {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid rgba(255, 81, 0, .28);
  border-radius: var(--radius);
  background: var(--color-orange-tint);
}

.inline-cta__heading {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
  font-weight: 700;
}

.inline-cta p { margin: 0 0 var(--space-3); font-size: 1rem !important; }

.inline-cta .link-arrow { font-size: 1rem; }

/* Closing ask. */
.article-cta {
  background: var(--color-orange-tint);
  border-block: 1px solid rgba(255, 81, 0, .18);
}

.article-cta h2 { margin-bottom: var(--space-3); }

.article-cta > .container > p {
  color: var(--color-gray);
  margin-bottom: var(--space-4);
}

.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.related__list a { font-weight: 600; font-size: 1.0625rem; }

.related__list p { margin: var(--space-1) 0 0; color: var(--color-gray); }

/* Blog search
   Hidden until main.js reveals it, so a visitor without JavaScript sees the
   full list rather than a search box that does nothing.
   ========================================================================== */

.blog-search { margin-bottom: var(--space-4); }

.blog-search input[type="search"] {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-charcoal);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: .875rem 1rem;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.blog-search input[type="search"]::placeholder { color: var(--color-gray); }

.blog-search__status {
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
  font-size: .9375rem;
  color: var(--color-gray);
}

.blog-card[hidden] { display: none; }

/* From the blog (homepage)
   Every article is in the markup, fenced; the edge function drops the ones that
   have not published and this rule shows only the first that survived. That is
   what makes the homepage move to the new article on publish day with no
   redeploy and no JavaScript.
   ========================================================================== */

.home-blog { border-block: 1px solid var(--color-line); }

.home-blog__list { list-style: none; margin: 0; padding: 0; }

.home-blog__item:not(:first-of-type) { display: none; }

.home-blog__item {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.home-blog__visual {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--fallback) center / cover no-repeat, var(--color-charcoal);
}

.home-blog__visual img { width: 100%; height: 100%; object-fit: cover; }

.home-blog__body { display: grid; gap: var(--space-2); align-content: start; }

.home-blog__meta {
  margin: 0;
  font-size: .875rem;
  color: var(--color-gray);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-blog__body h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin: 0; }

.home-blog__body h3 a { color: inherit; text-decoration: none; }

.home-blog__item:hover h3 a,
.home-blog__item:hover .link-arrow { color: var(--color-orange-deep); }

.home-blog__body > p { margin: 0; color: var(--color-gray); }

.home-blog__all { margin: var(--space-5) 0 0; }

@media (min-width: 48rem) {
  .home-blog__item { grid-template-columns: 22rem 1fr; align-items: center; }
}