/* ============================================================
   LonarX — article + blog index styles
   Layered on top of theme.css. Long-form reading first:
   measured line length, generous rhythm, restrained colour.
   ============================================================ */

.page{position:relative;z-index:1}

/* --- Nav ---
   `transition:all` on a sticky bar animates every property that
   changes on scroll; box-shadow alone is what we actually want. */
.nav{position:sticky;top:0;z-index:90;padding:1rem 0;transition:box-shadow .35s var(--ease-out)}
.nav.scrolled{
  background:hsl(var(--background));
  border-bottom:1px solid hsl(var(--border));box-shadow:var(--shadow-sm);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.brand-mark{
  width:2.1rem;height:2.1rem;border-radius:.6rem;display:grid;place-items:center;
  background:linear-gradient(140deg,hsl(var(--primary)),#F0A324);
  color:#fff;font-size:.95rem;box-shadow:var(--shadow-primary);
}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links > li > a{
  position:relative;display:inline-flex;align-items:center;
  padding:.55rem .8rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:500;color:hsl(var(--muted-foreground));
  transition:color .2s,background-color .2s;
}
.nav-links > li > a:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}
.nav-links > li > a.active{color:hsl(var(--primary));font-weight:600}

/* ============================================================
   Shared pieces also defined in legacy-bridge.css.
   The blog + article pages do NOT load that file, so they are
   repeated here. Without them the banner has no aspect-ratio
   and renders at the image's full natural height.
   ============================================================ */
.page-banner{
  position:relative;overflow:hidden;
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  aspect-ratio:21/6;
  margin-inline:auto;max-width:1200px;
}
.page-banner img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.2s var(--ease-out);
}
.page-banner:hover img{transform:scale(1.08)}
.page-banner-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem;color:#fff;
  background:linear-gradient(100deg,hsl(222 30% 8% / .74),hsl(27 60% 22% / .5));
}
.page-banner-veil h2{color:#fff!important;margin-bottom:.45rem;font-size:clamp(1.4rem,3vw,2.1rem)!important}
.page-banner-veil p{color:hsl(0 0% 100% / .85);max-width:42rem;font-size:.95rem;line-height:1.6}

/* Entrance reveal (paired with enhance.js) */
.rv-armed{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.rv-armed.rv-on{opacity:1;transform:none}

@media(max-width:760px){
  .page-banner{aspect-ratio:16/10}
  .page-banner-veil{padding:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .rv-armed{opacity:1!important;transform:none!important}
}

/* --- Article shell --- */
.article{padding-block:2.5rem 4rem}
.crumbs{
  font-size:.82rem;color:hsl(var(--muted-foreground));
  margin-bottom:2rem;display:flex;gap:.5rem;flex-wrap:wrap;
}
.crumbs a{color:hsl(var(--muted-foreground))}
.crumbs a:hover{color:hsl(var(--primary))}

.art-head{max-width:46rem;margin-inline:auto;text-align:center;margin-bottom:2.5rem}
.art-head h1{
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  margin:1rem 0 1.1rem;letter-spacing:-.035em;line-height:1.06;
}
.art-head .lead{max-width:40rem;margin-inline:auto}
.art-meta{
  display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;
  margin-top:1.5rem;font-size:.82rem;color:hsl(var(--muted-foreground));
}
.art-meta i{color:hsl(var(--primary));margin-right:.35rem}

.art-hero{
  max-width:66rem;margin:0 auto 3rem;
  border-radius:var(--radius-2xl);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.art-hero img{width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover}
.art-hero figcaption{
  padding:.85rem 1.25rem;font-size:.82rem;
  color:hsl(var(--muted-foreground));
  background:hsl(var(--card));border-top:1px solid hsl(var(--border));
  text-align:center;
}

/* --- Body copy: measured for reading --- */
.art-body{max-width:44rem;margin-inline:auto;font-size:1.055rem;line-height:1.78}
.art-body > * + *{margin-top:1.15rem}
.art-body h2{
  font-size:clamp(1.5rem,2.8vw,1.95rem);
  margin-top:3rem;margin-bottom:.35rem;letter-spacing:-.025em;
}
.art-body h3{font-size:1.16rem;margin-top:2rem;margin-bottom:.25rem}
.art-body p{color:hsl(222 12% 26%)}
.art-body strong{color:hsl(var(--foreground));font-weight:650}
.art-body em{font-style:italic}
.art-body a{color:hsl(var(--primary));font-weight:600;text-decoration:underline;text-underline-offset:3px}

.art-body blockquote{
  margin:2rem 0;padding:1.35rem 1.6rem;
  border-left:3px solid hsl(var(--primary));
  background:hsl(var(--primary) / .05);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-size:1.1rem;line-height:1.6;font-weight:500;
  color:hsl(var(--foreground));
}

.art-body ul.ticks,.art-body ol.steps{margin:1.35rem 0;display:grid;gap:.8rem;padding-left:0}
.art-body ul.ticks li{
  position:relative;padding-left:1.9rem;list-style:none;color:hsl(222 12% 26%);
}
.art-body ul.ticks li::before{
  content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;left:0;top:.12rem;color:hsl(var(--success));font-size:.95rem;
}
.art-body ol.steps{counter-reset:s;list-style:none}
.art-body ol.steps li{
  position:relative;padding-left:2.4rem;counter-increment:s;color:hsl(222 12% 26%);
}
.art-body ol.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:.05rem;
  width:1.65rem;height:1.65rem;border-radius:50%;
  display:grid;place-items:center;
  background:hsl(var(--primary));color:#fff;
  font-size:.78rem;font-weight:700;
}

.callout{
  margin:2.25rem 0;padding:1.5rem 1.6rem;
  border:1px solid hsl(var(--primary) / .3);
  background:hsl(var(--primary) / .05);
  border-radius:var(--radius-xl);
}
.callout h3{margin:0 0 .45rem;font-size:1.05rem}
.callout p{margin:0;font-size:.98rem}

/* --- In-article CTA --- */
.art-cta{
  max-width:46rem;margin:4rem auto 0;text-align:center;
  padding:2.5rem 2rem;border-radius:var(--radius-2xl);
  background:linear-gradient(140deg,hsl(222 24% 12%),hsl(27 55% 20%));
  color:#fff;box-shadow:var(--shadow-xl);
}
.art-cta h2{color:#fff!important;margin-bottom:.6rem;font-size:clamp(1.4rem,3vw,1.9rem)!important}
.art-cta p{color:hsl(0 0% 100% / .8);max-width:34rem;margin:0 auto 1.75rem;font-size:.97rem}

/* --- Related posts --- */
.more{max-width:66rem;margin:4rem auto 0}
.more > h2{font-size:1.35rem;margin-bottom:1.5rem;text-align:center}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.more-card{
  display:block;overflow:hidden;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.more-card:hover{box-shadow:var(--shadow-lg);border-color:hsl(var(--primary) / .3);transform:translateY(-4px)}
.more-media{height:170px;overflow:hidden}
.more-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.more-card:hover .more-media img{transform:scale(1.07)}
.more-body{padding:1.25rem 1.35rem 1.5rem}
.more-body h3{font-size:1.08rem;margin:.6rem 0 .35rem}
.more-body p{font-size:.88rem;color:hsl(var(--muted-foreground));line-height:1.6}

/* ============================================================
   Blog index
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.post{
  display:flex;flex-direction:column;overflow:hidden;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);
  transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.post:hover{box-shadow:var(--shadow-xl);border-color:hsl(var(--primary) / .3);transform:translateY(-5px)}
.post-media{height:185px;overflow:hidden;position:relative}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease-out)}
.post:hover .post-media img{transform:scale(1.08)}
.post-body{padding:1.35rem 1.45rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1.14rem;margin:.65rem 0 .5rem;line-height:1.3}
.post-body p{font-size:.9rem;color:hsl(var(--muted-foreground));line-height:1.62;flex:1}
.post-more{
  margin-top:1.1rem;font-size:.87rem;font-weight:600;color:hsl(var(--primary));
  display:inline-flex;align-items:center;gap:.4rem;
}
.post:hover .post-more i{transform:translateX(4px)}
.post-more i{transition:transform .3s var(--ease-out);font-size:.72rem}
.post-time{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.6rem}

/* All posts render identically in an even row */
.post.featured{grid-column:auto;flex-direction:column}
.post.featured .post-media{height:185px;width:100%;flex-shrink:0}
.post.featured .post-body{padding:1.35rem 1.45rem 1.6rem;justify-content:flex-start}
.post.featured h3{font-size:1.14rem;margin:.65rem 0 .5rem}
.post.featured p{font-size:.9rem}

/* --- Footer --- */
.footer{border-top:1px solid hsl(var(--border));padding-block:3rem 2rem;background:hsl(var(--muted) / .5);margin-top:5rem}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:hsl(var(--muted-foreground))}
.footer a{color:hsl(var(--muted-foreground))}
.footer a:hover{color:hsl(var(--primary))}

/* --- Responsive --- */
@media(max-width:1000px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .post-grid{grid-template-columns:1fr}
}
@media(max-width:900px){ .nav-links,.nav .btn{display:none} }
@media(max-width:700px){
  .post-grid,.more-grid{grid-template-columns:1fr}
  .art-body{font-size:1rem}
}

/* ============================================================
   Mobile navigation
   Nav links are hidden under 900px, so these pages need a
   hamburger + drawer or there is no navigation at all.
   ============================================================ */
.hamburger{
  display:none;width:2.6rem;height:2.6rem;flex-shrink:0;
  border-radius:var(--radius-sm);
  border:1px solid hsl(var(--border));
  background:hsl(var(--card));
  place-items:center;color:hsl(var(--foreground));
}
.drawer{
  position:fixed;inset:0;z-index:120;
  background:hsl(var(--background));
  padding:1.25rem;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .4s var(--ease-out);
}
.drawer.open{transform:translateX(0)}
.drawer a{
  display:block;padding:.9rem .5rem;
  border-bottom:1px solid hsl(var(--border));
  font-weight:500;color:hsl(var(--foreground));
}
.drawer a:hover{color:hsl(var(--primary))}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}

/* Hide nav underline (theme.css animates ::after on .nav-links) */
.nav-links > li > a::after{display:none}

@media(max-width:900px){
  .hamburger{display:grid}
}