/* ═══════════════════════════════════════════════════════════
   Application-level additions to the v2 design.

   style.css is a verbatim copy of designs/v2 and is meant to stay that
   way, so anything Laravel needs on top of the design lives here.
   ═══════════════════════════════════════════════════════════ */

/* Honeypot.
   Must be genuinely reachable in the DOM — bots skip display:none — but
   invisible to people and to assistive tech. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* The design's .form__status only animates opacity; give the error state
   a little more presence now that it carries real server messages. */
.form__status.is-err{ color:#C4432B; }

/* Disabled submit while the AJAX request is in flight. */
.btn[disabled]{
  opacity:.6;
  cursor:progress;
  transform:none !important;
  box-shadow:none !important;
}

/* ═══════════════════════════════════════════════════════════
   Insights cards that link to an article
   ═══════════════════════════════════════════════════════════ */

a.post{ color:inherit; text-decoration:none; }
.post--linked{ cursor:pointer; }
.post__go{
  margin-top:auto;
  font:500 .78rem/1 var(--f-mono);
  letter-spacing:.04em; color:var(--jade);
  opacity:0; transform:translateY(4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.post--linked:hover .post__go,
.post--linked:focus-visible .post__go{ opacity:1; transform:none; }

/* Touch devices have no hover, so the affordance has to be permanent. */
@media (hover:none){
  .post__go{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════
   Blog article
   Built on the v2 tokens declared in style.css :root.
   ═══════════════════════════════════════════════════════════ */

.article{ position:relative; overflow:hidden; }
.article__aura{
  position:absolute; left:50%; top:-14rem; translate:-50% 0;
  width:min(120vw,900px); aspect-ratio:1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(20,161,131,.16), transparent 70%),
    radial-gradient(closest-side, rgba(222,155,46,.11), transparent 66%);
  background-position:35% 35%, 70% 60%;
  background-repeat:no-repeat;
  background-size:72% 72%, 60% 60%;
}

.article__head{
  position:relative;
  padding-block:clamp(7.5rem,13vw,10rem) clamp(2rem,4vw,3rem);
  max-width:52rem;
}

.crumbs{
  display:flex; align-items:center; gap:.55rem; margin-bottom:1.6rem;
  font:400 .78rem/1 var(--f-mono); color:var(--ink-mut);
}
.crumbs a{ color:var(--ink-mut); transition:color .3s; }
.crumbs a:hover{ color:var(--jade); }
.crumbs span{ opacity:.5; }

.article__title{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(2rem,1.2rem + 3vw,3.4rem);
  line-height:1.06; letter-spacing:-.03em;
  margin-bottom:1.2rem; text-wrap:balance;
}
.article__excerpt{
  font-size:clamp(1.06rem,1rem + .4vw,1.25rem);
  line-height:1.55; color:var(--ink-mut); margin-bottom:1.8rem;
}
.article__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
  font:400 .82rem/1.6 var(--f-mono); color:var(--ink-mut);
}
.article__meta span[aria-hidden]{ opacity:.45; }

/* Body copy: one measure, generous rhythm, nothing decorative. */
.article__body{
  max-width:44rem;
  padding-bottom:clamp(2.5rem,5vw,4rem);
  font-size:clamp(1.02rem,1rem + .22vw,1.12rem);
  line-height:1.75;
}
.article__body > * + *{ margin-top:1.35rem; }
.article__body p{ color:var(--ink); }
.article__standfirst{
  font-size:clamp(1.1rem,1rem + .5vw,1.28rem);
  line-height:1.6; font-weight:300;
  padding-left:1.2rem; border-left:2px solid var(--jade);
}
.article__body h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);
  line-height:1.2; letter-spacing:-.025em;
  margin-top:2.8rem;
}
.article__body h2 + p{ margin-top:.9rem; }

/* Sub-headings for posts that nest numbered points under each section.
   Deliberately close to body size — the weight and colour carry the shift,
   so a run of them does not read as a second column of h2s. */
.article__body h3{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.06rem,1rem + .4vw,1.22rem);
  line-height:1.3; letter-spacing:-.015em;
  color:var(--jade);
  margin-top:1.9rem;
}
.article__body h2 + h3{ margin-top:1.2rem; }
.article__body h3 + p{ margin-top:.6rem; }

.article__body a{ color:var(--jade); text-decoration:underline; text-underline-offset:3px; }
/* Lists. `li{list-style:disc}` would render an ordered list as bullets and
   throw away the numbering, so the two are styled separately. */
.article__body ul,
.article__body ol{ padding-left:1.5rem; }
.article__body li{ margin-top:.6rem; padding-left:.2rem; }
.article__body ul li{ list-style:disc; }
.article__body ol li{ list-style:decimal; }
.article__body ol li::marker{ font-weight:600; color:var(--jade); }
.article__body li strong{ color:var(--ink); }

.article__body strong{ font-weight:600; }

/* Closing call to action */
.article__foot{
  position:relative; overflow:hidden;
  max-width:44rem; text-align:center;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.8rem,4vw,2.8rem);
    margin-bottom: 50px;
}
.article__spark{
  width:42px; height:42px; margin:0 auto 1.1rem;
  fill:var(--jade); opacity:.8;
}
.article__foot h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);
  line-height:1.15; letter-spacing:-.025em; margin-bottom:.7rem;
}
.article__foot p{ color:var(--ink-mut); margin-bottom:1.6rem; }
.article__cta{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

/* Keep reading */
.more{ padding-block:clamp(3rem,6vw,5rem); }
.more__heading{
  font:500 .78rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--jade); margin-bottom:1.5rem;
}
.more__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(.9rem,1.8vw,1.25rem);
}
.more__card{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.4rem,2.5vw,1.9rem);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.more__card:hover{
  transform:translateY(-5px); box-shadow:var(--shadow-lg);
  border-color:rgba(15,122,99,.25);
}
.more__card time{
  font:400 .74rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mut);
}
.more__card h3{
  font-family:var(--f-disp); font-weight:600; letter-spacing:-.022em;
  font-size:clamp(1.05rem,1rem + .5vw,1.28rem); line-height:1.24;
}
.more__spark{
  position:absolute; right:-18px; bottom:-18px;
  width:82px; height:82px; opacity:.06;
  transition:transform .6s var(--ease), opacity .5s;
}
.more__spark svg{ width:100%; height:100%; fill:var(--jade); }
.more__card:hover .more__spark{ transform:rotate(90deg) scale(1.15); opacity:.14; }

@media (max-width:720px){
  .article__body h2{ margin-top:2.2rem; }
}