.art-hero{ position:relative; min-height:clamp(24rem,58vh,34rem); display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 3rem) 0 clamp(2.5rem,6vw,5rem); overflow:hidden; background:var(--void); }
.art-hero-bg{ position:absolute; inset:0; z-index:0; }
.art-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.art-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,22,14,.55) 0%,rgba(10,22,14,.25) 45%,rgba(10,22,14,.7) 100%); }
.art-hero .wrap{ position:relative; z-index:1; width:100%; }

.art-glass{
  background:rgba(18,34,23,.42);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
  border:1px solid rgba(243,239,230,.16);
  border-radius:24px;
  padding:clamp(1.6rem,4vw,3.2rem);
  max-width:60rem;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .art-glass{ background:rgba(15,36,23,.9); }
}
.art-glass .crumbs{ color:var(--paper); opacity:.8; }
.art-glass .crumbs a{ color:inherit; }
.art-glass h1{ font-weight:800; font-size:clamp(1.85rem,4vw,3.35rem); line-height:1.04;
  letter-spacing:-.03em; color:var(--bone); margin:1.1rem 0 0; text-wrap:balance; }
.art-glass h1 em{ font-weight:200; font-style:italic; color:var(--lime); }

.art-meta{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; margin-top:1.6rem;
  font-size:.85rem; color:var(--paper); }
.art-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.art-meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--emerald); flex:0 0 auto; }
.art-tag{ display:inline-block; padding:.34rem .8rem; border-radius:100px;
  border:1px solid rgba(243,239,230,.28); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--lime); }

.art-body{ padding:clamp(3.5rem,9vw,7rem) 0 clamp(2rem,5vw,4rem); }
.art-grid{ display:grid; grid-template-columns:minmax(0,15.5rem) minmax(0,1fr); gap:clamp(2rem,6vw,5.5rem); align-items:start; }

.art-nav{ position:sticky; top:calc(var(--nav-h) + 2rem); }
.art-nav p{ font-size:var(--step-sm); letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft); margin-bottom:1.1rem; }
.art-nav ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  border-left:1px solid var(--bone-3); }
.art-nav a{ display:block; padding:.62rem 0 .62rem 1.1rem; margin-left:-1px;
  border-left:2px solid transparent; font-size:.92rem; line-height:1.35;
  color:var(--ink-soft); transition:color .3s var(--ease), border-color .3s var(--ease); }
.art-nav a:hover{ color:var(--ink); }
.art-nav a.is-active{ color:var(--ink); font-weight:600; border-left-color:var(--emerald); }
.art-nav .art-nav-kw{ display:block; font-size:.74rem; color:var(--emerald-deep);
  letter-spacing:.04em; margin-top:.16rem; font-weight:600; }

.prose{ max-width:68ch; }
.prose > * + *{ margin-top:1.35rem; }
.prose h2{ font-weight:800; font-size:clamp(1.6rem,4.2vw,2.5rem); line-height:1.05;
  letter-spacing:-.03em; margin-top:clamp(3rem,7vw,5rem); scroll-margin-top:calc(var(--nav-h) + 2rem); }
.prose h2 em{ font-weight:200; font-style:italic; color:var(--emerald); }
.prose h3{ font-weight:700; font-size:clamp(1.12rem,2.8vw,1.4rem); margin-top:2.4rem; letter-spacing:-.015em; }
.prose p{ font-size:var(--step-body); line-height:1.68; color:var(--ink-soft); }
.prose .standfirst{ font-size:clamp(1.14rem,3vw,1.42rem); line-height:1.5; color:var(--ink); font-weight:500; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose a:not(.btn){ color:var(--emerald-deep); text-decoration:underline; text-underline-offset:3px; }
.prose ul,.prose ol{ padding-left:1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.prose li{ font-size:var(--step-body); line-height:1.6; color:var(--ink-soft); }
.prose li::marker{ color:var(--emerald); }

.prose figure{ margin-top:clamp(2.2rem,5vw,3.4rem); }
.prose .media{ position:relative; overflow:hidden; border-radius:18px; aspect-ratio:16/9; }
.prose .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prose figcaption{ margin-top:.8rem; font-size:.85rem; color:var(--ink-soft); opacity:.85; }

.art-note{ border-left:3px solid var(--emerald); background:var(--bone-2);
  padding:1.3rem 1.5rem; border-radius:0 12px 12px 0; }
.art-note p{ color:var(--ink); font-size:1rem; }
.art-note b{ display:block; margin-bottom:.35rem; }

.art-cta-magnet{ background:var(--bone-2); border-radius:24px;
  padding:clamp(1.8rem,5vw,3.4rem); margin-top:clamp(3.5rem,8vw,6rem); }
.art-cta-magnet .eyebrow{ color:var(--emerald-deep); }
.art-cta-magnet h2{ font-weight:800; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.05;
  letter-spacing:-.03em; margin-top:1rem; }
.art-cta-magnet h2 em{ font-weight:200; font-style:italic; color:var(--emerald-deep); }
.art-cta-magnet > p{ margin-top:1rem; max-width:52ch; color:var(--ink-soft); }

.art-cta-work{ background:var(--pine); color:var(--bone); border-radius:24px;
  padding:clamp(1.8rem,5vw,3.4rem); margin-top:1.4rem; }
.art-cta-work h2{ font-weight:800; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.05;
  letter-spacing:-.03em; margin-top:1rem; color:var(--bone); }
.art-cta-work h2 em{ font-weight:200; font-style:italic; color:var(--lime); }
.art-cta-work p{ margin-top:1rem; max-width:52ch; color:var(--paper); }
.art-cta-work .btn{ margin-top:1.8rem; }

.art-related{ padding:clamp(3.5rem,9vw,7rem) 0; background:var(--bone-2); }
.art-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.2rem,3vw,2rem); margin-top:clamp(2rem,5vw,3.5rem); }
.art-card{ background:var(--bone); border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease); }
.art-card:hover{ transform:translateY(-6px); }
.art-card .thumb{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.art-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.art-card:hover .thumb img{ transform:scale(1.05); }
.art-card-body{ padding:1.5rem 1.6rem 1.8rem; }
.art-card .cat{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--emerald-deep); }
.art-card h3{ margin-top:.7rem; font-weight:700; font-size:1.16rem; line-height:1.25; letter-spacing:-.02em; }
.art-card .date{ margin-top:.9rem; font-size:.82rem; color:var(--ink-soft); }

@media (max-width:900px){
  .art-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .art-nav{ position:static; }
  .art-nav ol{ border-left:none; border-top:1px solid var(--bone-3); padding-top:.4rem; }
  .art-nav a{ border-left:none; border-top:2px solid transparent; margin-left:0; padding-left:0; }
  .art-nav a.is-active{ border-left-color:transparent; }
  .prose{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .art-card,.art-card .thumb img{ transition:none; }
}

.art-split{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.art-split-col{ border-radius:20px; padding:clamp(1.4rem,3.4vw,2.1rem); background:var(--bone-2); }
.art-split-col.is-team{ background:var(--pine); }
.prose .art-split-col p{ margin:0; font-size:clamp(1.08rem,2.2vw,1.28rem); line-height:1.4; font-weight:500; color:var(--ink); }
.prose .art-split-col .art-split-who{ margin-bottom:.7rem; font-size:.74rem; line-height:1.2; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--emerald-deep); }
.prose .art-split-col.is-team p{ color:var(--bone); }
.prose .art-split-col.is-team .art-split-who{ color:var(--lime); }
.art-split::after{ content:"+"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--emerald); color:var(--void); font-weight:800; font-size:1.35rem; line-height:1;
  box-shadow:0 0 0 6px var(--bone); }
@media (max-width:640px){
  .art-split{ grid-template-columns:1fr; gap:1.8rem; }
  .art-split::after{ width:2.2rem; height:2.2rem; font-size:1.15rem; box-shadow:0 0 0 4px var(--bone); }
}