:root{
  --bg:#fff;
  --panel:#fff;
  --ink:#0b0b12;
  --muted:#565662;
  --ring:#e9e9ef;
  --chip:#f5f7fb;
  --g1:#7c3aed; /* purple */
  --g2:#22d3ee; /* cyan   */
  --wrap:1240px; /* center width (used for smart bleed) */

  /* Cover/thumbnail focal Y (can be overridden per-image) */
  --cover-y:38%;
  --thumb-y:38%;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
}


/* -----------------------------------------
   SHELL
   ----------------------------------------- */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:56px 20px 56px;

  /* Fill remaining height so footer pushes to bottom */
  flex:1 0 auto;
}
.card{}

/* -----------------------------------------
   HERO
   ----------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:minmax(360px,1.12fr) minmax(320px,.88fr);
  gap:42px;
  align-items:start;
}
.kicker{ color:var(--muted); font-weight:800; text-transform:none; margin:2px 0 12px; }
h1{
  margin:0 0 18px;                 /* logo no longer overlaps, so no top margin */
  font-weight:900; line-height:1.02; letter-spacing:-.2px;
  font-size:clamp(30px,4.5vw,56px); word-break:break-word;
}
.title-accent{font-weight:900}
.title-gradient{
  background:linear-gradient(90deg,var(--g1),var(--g2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.year{color:var(--muted);font-weight:800}

/* Meta list */
.meta{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:10px; row-gap:6px; margin:22px 0 0;
}
.meta dt{ color:#111; font-weight:800; }
.meta dt::after{ content:":"; margin-left:4px; color:inherit; }
.meta dd{ margin:0; color:#111; font-weight:600 }

/* -----------------------------------------
   CONTENT
   ----------------------------------------- */
.section{ margin-top:26px }
.section h2{ font-size:18px; margin:0 0 10px; font-weight:900; color:#111; letter-spacing:.2px; }

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.chip{ padding:.45rem .8rem;border-radius:999px;border:1px solid var(--ring);
       background:var(--chip);font-weight:700;font-size:.95rem; }

/* CTA */
.ctaRow{display:flex;gap:14px;align-items:center;margin:24px 0 8px;flex-wrap:wrap}
.btn{
  --pad-x:30px;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px var(--pad-x);border-radius:9999px;font-weight:900;text-decoration:none;color:#111;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--g1),var(--g2)) border-box;
  border:3px solid transparent;box-shadow:0 6px 18px rgba(124,58,237,.14),0 2px 0 rgba(0,0,0,.04);
  transition:box-shadow .2s, transform .02s;
}
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn:hover{box-shadow:0 8px 22px rgba(34,211,238,.20),0 3px 0 rgba(0,0,0,.05)}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted);font-weight:600}

.hr{height:1px;background:var(--ring);margin:18px 0 12px}

/* cover + thumbs */
.coverWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.cover{
  width:90%; height:100%;
  object-fit:cover;
  /* default shows a bit more top; override with inline --cover-y or utility classes */
  object-position:50% var(--cover-y,38%);
  border-radius:18px; background:#fafafa;
}
.noimg{ display:grid; place-items:center; color:#999; background:#fafafa; border-radius:18px; }
.thumbRow{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; justify-content:flex-end; }
.thumb{
  width:118px; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid var(--ring);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.thumb img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  object-position:50% var(--thumb-y,38%);
}

/* Optional utility classes for quick per-image tweaks */
.cover--top     { --cover-y:0%;  }
.cover--high    { --cover-y:25%; }
.cover--slight  { --cover-y:38%; }
.cover--center  { --cover-y:50%; }
.thumb--top     { --thumb-y:0%;  }
.thumb--high    { --thumb-y:25%; }
.thumb--slight  { --thumb-y:38%; }
.thumb--center  { --thumb-y:50%; }

/* socials */
.socials{display:flex;gap:12px;margin-top:14px}
.sbtn{
  width:38px;height:38px;border-radius:12px;display:inline-grid;place-items:center;
  border:1px solid var(--ring);background:#f8f9fb;color:#111;text-decoration:none;
}
.sbtn svg{width:20px;height:20px}



/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */
@media (max-width:1200px){
  .wrap{ padding:12px 20px 48px; }
  .hero{ gap:34px; }
  .thumb{ width:100px; }
}
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; gap:28px; }
  .thumbRow{ justify-content:flex-start; }
}
@media (max-width:768px){
  :root{ --wrap:640px; }
  .wrap{ padding:12px 16px 40px; }

  /* keep logo above title with the same spacing */
  .brand{ transform:none; }
  .brandImg{ height:34px; }
  .siteHeader{ margin-bottom:35px; }
  h1{ margin-top:0; }

  .kicker{ margin:0 0 10px; }

  .meta{ grid-template-columns:1fr; row-gap:0; margin-top:12px; }
  .meta dt{ font-size:.95rem; opacity:.9; }
  .meta dt::after{ content:":"; }
  .meta dd{ padding:0 0 10px; border-bottom:1px solid var(--ring); }
  .meta dd:last-of-type{ border-bottom:0; }

  .coverWrap{ border-radius:22px; padding:12px; }
  .cover{ border-radius:14px; }
  .thumbRow{ gap:10px; margin-top:14px; }
  .thumb{ width:84px; border-radius:14px; }

  .chips{ gap:8px; margin-top:12px; }
  .chip{ font-size:.92rem; padding:.42rem .72rem; }
  .ctaRow{ flex-direction:column; align-items:stretch; gap:10px; margin:16px 0 6px; }
  .btn{ --pad-x:20px; width:100%; justify-content:center; padding:13px var(--pad-x); }

  .siteFooter{ margin-top:auto; padding:24px 16px 40px; font-size:.83rem; }
  .footerNav{ gap:18px; margin-bottom:10px; }
  .footerCopy{ font-size:.83rem; }
}
@media (max-width:420px){
  .thumb{ width:74px; }
  .btn{ padding:12px 16px; }
  body{ font-size:15px; }
}