/* Shared styles for /research and /newsroom. Header and footer identical to the ablatic.ai homepage. */
:root{
  --sand:#f2ece0; --sand-dark:#ece5d8; --sand-mid:#e2d9c9; --sand-lift:#f8f4eb;
  --ink:#29231c; --ink-2:#5c5143; --ink-3:#827769; --ink-4:#b9b0a4;
  --border:#dad2c3; --border-md:#ccc2b2;
  --green:#4A7C59; --green-md:#3A6347; --green-lt:#6BA580;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:clip }

/* Sticky-footer shell: body is a flex column, the content <main> grows to fill the
   viewport, so the dark <footer> sits flush at the bottom on short pages and flows
   below content on long ones. */
body{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  overflow-x:hidden;
  background:var(--sand); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--green); text-decoration:none }
a:hover{ color:var(--green-md) }

/* The growing content area between nav and footer. Covers both the index
   <main class="page"> and the article <main class="section ..."> uniformly. */
body > main{ flex:1 0 auto; display:flex; flex-direction:column; width:100% }

/* NAV (verbatim from homepage) */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(242,236,224,0.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 2rem;
}
.nav-inner{
  max-width:1160px; margin:0 auto; height:60px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700;
  color:var(--ink); text-decoration:none; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:0.5rem;
}
.logo svg{ display:block; height:28px; width:112px }  /* explicit width: WebKit blows up viewBox-only SVGs to 100% otherwise */
.nav-right{ display:flex; align-items:center; gap:1.5rem }
.nav-link{
  font-size:0.875rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; transition:color 150ms;
}
.nav-link:hover,.nav-link[aria-current="page"]{ color:var(--ink) }
.nav-cta{
  background:var(--green); color:#fff; padding:0.45rem 1.1rem; border-radius:6px;
  font-size:0.85rem; font-weight:600; text-decoration:none;
  font-family:'Plus Jakarta Sans',sans-serif; transition:background 150ms;
}
.nav-cta:hover{ background:var(--green-md); color:#fff }
.lang-switch{ display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; font-weight:600 }
.lang-switch a{ text-decoration:none }
/* Mobile burger (CSS-only, verbatim from homepage) */
.nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.nav-burger{ display:none }

/* PAGE HERO */
.page-hero{ background:var(--sand); padding:4.75rem 2rem 0 }
.page-hero-inner{ max-width:1160px; margin:0 auto; width:100% }
.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--green); margin-bottom:1.25rem;
}
.eyebrow::before{ content:""; width:24px; height:1.5px; background:var(--green) }
.page-title{
  font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(1.8rem,3.4vw,2.35rem); line-height:1.1; color:var(--ink); margin:0;
  max-width:26ch;
}

/* CONTENT WRAP. As a flex child of <main> it grows so short pages still reach the footer. */
.section{
  max-width:calc(1160px + 4rem); width:100%; margin:0 auto; padding:2.5rem 2rem 5rem;
  flex:1 0 auto; display:flex; flex-direction:column;
}
.section-narrow{ max-width:760px }

/* INDEX ENTRY LIST (populated state). Grows so the list area always reaches the footer. */
.entry-list{ border-top:1px solid var(--border); flex:1 0 auto }
.entry{
  display:block;
  padding:1.75rem 0.5rem; border-bottom:1px solid var(--border);
  transition:background 150ms, padding-left 150ms;
}
.entry:hover{ background:var(--sand-lift); padding-left:1rem }
/* One horizontal meta line above the title: label + date · time on the left, tag pinned right. */
.entry .side{
  display:flex; align-items:center; gap:0.55rem;
  margin-bottom:0.8rem; font-size:0.85rem; color:var(--ink-2);
}
.entry .side .posted{
  font-size:0.7rem; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-4);
}
.entry .side .d-time{ color:var(--ink-4); font-size:0.82rem }
.entry .side .d-time::before{ content:"·"; margin:0 0.4rem; color:var(--ink-4) }
.entry .side .tag{
  margin-left:auto; padding:0.14rem 0.7rem; border-radius:999px;
  background:var(--sand-mid); color:var(--ink-2); font-size:0.72rem; letter-spacing:0.03em;
}
.entry h2{
  font-family:'Outfit',sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:-0.01em;
  color:var(--ink); margin:0 0 0.45rem; line-height:1.2;
}
.entry p{ margin:0; color:var(--ink-2); font-size:0.98rem; max-width:68ch }
@media(max-width:560px){
  .entry .side{ flex-wrap:wrap; gap:0.35rem 0.55rem }
  .entry .side .tag{ margin-left:0 }
}

/* EMPTY STATE (launch). Calm, editorial: a short green rule above one Outfit line and a
   muted secondary line, floated into the vertical centre of the space below the hero.
   No box, no dashed border. */
.empty{
  margin:auto 0; padding:2.5rem 1.5rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.empty::before{
  content:""; width:32px; height:2px; background:var(--green);
  border-radius:2px; margin-bottom:1.6rem;
}
.empty-line{
  margin:0;
  font-family:'Outfit',sans-serif; font-weight:500; letter-spacing:-0.01em;
  font-size:clamp(1.2rem,2.6vw,1.6rem); line-height:1.35; color:var(--ink);
}
.empty-sub{
  margin:0.7rem 0 0; max-width:44ch;
  font-size:0.97rem; color:var(--ink-3); line-height:1.6;
}

/* ARTICLE */
.article-head{ margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--border) }
.article-head .meta{ font-size:0.85rem; color:var(--ink-3); margin-bottom:1rem }
.article-head h1{
  font-family:'Outfit',sans-serif; font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(2rem,4.5vw,2.9rem); line-height:1.1; color:var(--ink); margin:0 0 1rem;
}
.article-head .authors{ font-size:0.98rem; color:var(--ink-2); margin:0 }
.article-links{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.5rem }
.abtn{
  display:inline-block; padding:0.6rem 1.2rem; border-radius:8px; font-size:0.9rem; font-weight:600;
  border:1.5px solid var(--border-md); background:transparent; color:var(--ink-2); transition:all 150ms;
}
.abtn:hover{ border-color:var(--ink-3); color:var(--ink) }
.abtn-green{ background:var(--green); border-color:var(--green); color:#fff }
.abtn-green:hover{ background:var(--green-md); border-color:var(--green-md); color:#fff }
.article-body{ font-size:1.07rem; color:var(--ink) }
.article-body h2{
  font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-0.01em;
  font-size:1.55rem; margin:2.75rem 0 1rem; line-height:1.2;
}
.article-body h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.2rem; margin:2rem 0 0.7rem }
.article-body p{ margin:0 0 1.3rem; color:var(--ink-2) }
.article-body a{ text-decoration:underline; text-underline-offset:2px }
.article-body img{ max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border); margin:1.75rem 0 }
.article-body figure{ margin:1.75rem 0 }
.article-body figcaption{ font-size:0.85rem; color:var(--ink-3); margin-top:0.5rem; text-align:center }
.article-body blockquote{
  margin:1.75rem 0; padding:0.5rem 0 0.5rem 1.25rem; border-left:3px solid var(--green-lt);
  color:var(--ink-2); font-style:italic;
}
.article-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.9em;
  background:var(--sand-mid); padding:0.12em 0.4em; border-radius:4px;
}
.article-body pre{
  background:var(--ink); color:var(--sand); padding:1.1rem 1.25rem; border-radius:12px;
  overflow-x:auto; font-size:0.88rem; line-height:1.6; margin:1.75rem 0;
}
.article-body pre code{ background:none; padding:0; color:inherit }
.article-body ul,.article-body ol{ margin:0 0 1.3rem; padding-left:1.4rem; color:var(--ink-2) }
.article-body li{ margin:0.4rem 0 }
.back-top{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.92rem; color:var(--green);
  margin-bottom:2rem; transition:color 150ms;
}
.back-top:hover{ color:var(--green-md) }
.back-link{ display:inline-block; margin-top:3rem; font-size:0.92rem }

/* FOOTER (verbatim from homepage) */
footer{ background:var(--ink); padding:2.5rem 2rem }
.footer-inner{
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-logo{
  font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:700;
  color:rgba(255,255,255,0.75); letter-spacing:-0.01em;
}
.footer-links{ display:flex; align-items:center; flex-wrap:wrap; gap:0.75rem 1.5rem }
.footer-links a{
  font-size:0.82rem; color:rgba(255,255,255,0.6); text-decoration:none; transition:color 150ms;
}
.footer-links a:hover{ color:rgba(255,255,255,0.9) }
.footer-social{ display:inline-flex; align-items:center; color:rgba(255,255,255,0.6); transition:color 150ms }
.footer-social:hover{ color:rgba(255,255,255,0.9) }
.footer-social svg{ width:18px; height:18px; fill:currentColor; display:block }

/* RESPONSIVE */
@media(max-width:640px){
  nav{ padding:0 } .nav-inner{ padding:0 2rem }
  .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:10px 8px; cursor:pointer; margin-right:-8px; flex:0 0 auto }
  .nav-burger span{ display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease,opacity .2s ease }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0 }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
  .nav-right{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(242,236,224,0.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); box-shadow:0 14px 30px rgba(41,35,28,0.12); padding:0.25rem 1.25rem 1.25rem; max-height:calc(100dvh - 60px); overflow-y:auto; display:none }
  .nav-toggle:checked ~ .nav-right{ display:flex }
  .nav-right .nav-link{ display:block; padding:0.95rem 0.1rem; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--border) }
  .nav-right .lang-switch{ padding:1rem 0.1rem 0.25rem }
  .nav-right .nav-cta{ margin-top:1.1rem; text-align:center; padding:0.75rem 1.1rem; font-size:0.95rem }
}
@media(max-width:500px){
  nav{ padding:0 } .nav-inner{ padding:0 1.25rem }
  .page-hero{ padding:3.25rem 1.25rem 0 } .section{ padding:2rem 1.25rem 4rem }
  .empty{ padding:2rem 1rem } .empty-line{ font-size:1.2rem }
  footer{ padding:2rem 1.25rem }
}