[hidden], .hidden { display: none !important; }
/* =========================
   TOKENS
========================= */
:root{
  /* Brand */
  --primary-50:#f0fdf4; --primary-100:#dcfce7; --primary-300:#86efac; --primary-500:#22c55e; --primary-600:#16a34a;
  --secondary-50:#f8fafc; --secondary-100:#f1f5f9; --secondary-200:#e2e8f0; --secondary-300:#cbd5e1; --secondary-400:#94a3b8; --secondary-500:#64748b; --secondary-600:#475569; --secondary-700:#334155; --secondary-800:#1e293b;

  /* Neutrals */
  --text:#334155; --muted:#64748b; --bg:#f8fafc; --white:#fff;

  /* UI */
  --radius:14px;
  --shadow:0 10px 20px rgba(0,0,0,.08);

  /* Effects */
  --glow-green: 0 10px 26px rgba(34,197,94,.40), 0 2px 6px rgba(34,197,94,.25);
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;color:#0f172a;margin:0 0 .5rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-500);text-decoration:none}
a:hover{color:var(--primary-600)}
[hidden]{display:none!important}

.h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15}
.h2{font-family:"Playfair Display",serif;font-weight:700;color:var(--secondary-800);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:0 0 1rem}
.lead{font-size:1.125rem;color:var(--muted)}
.muted,.text-muted{color:var(--muted)}
.gradient,.gradient-text{background:linear-gradient(90deg,var(--primary-500),var(--primary-300));-webkit-background-clip:text;background-clip:text;color:transparent}

.container{max-width:72rem;margin-inline:auto;padding-inline:1rem}
.section{padding-block:4rem}
@media (min-width:768px){.section{padding-block:6rem}}
.section--alt{background:var(--secondary-50)}

/* =========================
   HEADER / NAV
========================= */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .2s ease}
.site-header.is-scrolled{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.header-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
/* ===== Header logo sizing ===== */
:root {
  /* tweak as you like */
  --logo-h: 42px;
  --logo-h-lg: 48px;
}

.brand { display:flex; align-items:center; line-height:1; }
.brand img.logo,
.brand svg.logo,
.brand picture img.logo {
  height: var(--logo-h);
  width: auto;
  display: block;
}

/* room for a taller logo in the sticky header */
.header-wrap { min-height: 68px; }

/* bump on wider screens */
@media (min-width: 900px){
  .brand img.logo,
  .brand svg.logo,
  .brand picture img.logo { height: var(--logo-h-lg); }
}

/* if your exported PNG has extra whitespace, this helps keep it visually centered */
.brand { gap: .25rem; }

.nav-desktop{display:flex;gap:1.25rem;align-items:center}
.site-header .nav-desktop a{color:var(--secondary-600);font-weight:500;padding:.25rem 0}
.site-header .nav-desktop a:hover{color:var(--primary-500)}

.nav-toggle{display:none;background:transparent;border:0;font-size:28px;line-height:1;padding:.5rem;cursor:pointer;position:relative;z-index:1002}
#mobile-menu{display:none;background:#fff;border-top:1px solid var(--secondary-100);padding:.75rem 1rem;position:relative;z-index:1001}
#mobile-menu a{display:block;padding:.5rem .75rem;border-radius:10px;color:var(--secondary-600);font-weight:500}
#mobile-menu a:hover{background:var(--secondary-50);color:#0f172a}

@media (min-width:900px){.nav-desktop{display:flex}.nav-toggle{display:none}#mobile-menu{display:none!important}}
@media (max-width:900px){.nav-desktop{display:none!important}.nav-toggle{display:inline-flex}body.is-menu-open #mobile-menu{display:block!important}}

.site-header .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:.65rem 1.35rem!important;border-radius:9999px}
.site-header .js-subscribe.pill.btn-outline{background:#fff;color:var(--primary-600);border:2px solid var(--primary-500);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.site-header .js-subscribe.pill.btn-outline:hover{background:var(--primary-50);color:var(--primary-600);box-shadow:var(--glow-green)}
.site-header.is-scrolled .js-subscribe.pill.is-filled{border:0;color:#fff;background:linear-gradient(90deg,var(--primary-500),var(--primary-300));box-shadow:0 6px 16px rgba(34,197,94,.30)}
.site-header.is-scrolled .js-subscribe.pill.is-filled:hover{color:#fff;background:linear-gradient(90deg,var(--primary-600),var(--primary-400))!important;box-shadow:var(--glow-green)}
.site-header .btn-primary{background:var(--primary-500);color:#fff;border-color:var(--primary-500)}
.site-header .btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600);color:#fff;box-shadow:var(--glow-green)}
#mobile-menu .js-subscribe.pill{display:inline-flex;margin-top:.25rem;padding:.75rem 1.6rem;border-radius:999px;border:2px solid var(--primary-500);color:var(--primary-600);background:#fff}
.site-header .js-subscribe.pill:focus-visible{outline:3px solid rgba(34,197,94,.35);outline-offset:3px;box-shadow:var(--glow-green)}
.site-header .js-subscribe.pill:active{transform:translateY(1px)}
.no-scroll{overflow:hidden}

/* =========================
   GRID / CARDS
========================= */
.grid-2,.grid-3,.grid-4{display:grid;gap:1.5rem}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
@media (min-width:768px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border-radius:.75rem;box-shadow:0 6px 18px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .2s ease,transform .06s ease}
.card:hover{box-shadow:0 10px 28px rgba(0,0,0,.10)}
.card-img{height:12rem;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:1.5rem}
.card-title{font-size:1.1rem;margin:.25rem 0 .5rem}
.meta{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.9rem}
.sep{margin:0 .35rem;color:var(--secondary-300)}
.badge,.pill{display:inline-block;background:var(--primary-100);color:var(--primary-600);font-weight:600;border-radius:.5rem;padding:.25rem .6rem;font-size:.8rem}
.pill.small{font-size:.75rem;padding:.15rem .5rem}
.pill-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 0}

/* =========================
   BUTTONS
========================= */
.btn{
  --btn-bg:transparent; --btn-border:#22c55e; --btn-fg:#22c55e;
  display:inline-block;text-decoration:none;background-color:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--btn-border);border-radius:.5rem;padding:.875rem 1.25rem;font-weight:600;
  transition:transform .06s ease,box-shadow .2s ease,background-color .28s ease,color .28s ease,border-color .28s ease
}
.btn:active{transform:translateY(1px)}
.btn-primary{--btn-bg:#22c55e;--btn-border:#22c55e;--btn-fg:#fff;box-shadow:0 8px 20px rgba(34,197,94,.25)}
.btn-primary:hover{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:var(--glow-green)}
.btn-outline{--btn-bg:transparent;--btn-border:#22c55e;--btn-fg:#22c55e}
.btn-outline:hover{background:var(--primary-50);box-shadow:var(--glow-green)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* =========================
   FOOTER
========================= */
.footer{background:#0f172a;color:#fff}
.footer a{color:#cbd5e1;text-decoration:none}
.footer a:hover{color:#fff}
.footer-divider{border-top:1px solid #334155;margin-top:2rem;padding-top:2rem}
.footer-link{display:block;color:var(--secondary-300);text-decoration:none;font-size:.95rem;margin-bottom:.5rem;transition:color .2s}
.footer-link:hover{color:#fff}
.footer-link.small{font-size:.875rem;color:var(--secondary-400)}
.footer-link.small:hover{color:#fff}

/* =========================
   NEWSLETTER CTA
========================= */
section.newsletter{background:var(--primary-600);color:#fff;text-align:center}
section.newsletter .container{max-width:48rem}
.section.section--alt.newsletter{background:var(--primary-600)}
section.newsletter h2{color:#fff;font-size:1.75rem;margin:0 0 .75rem}
section.newsletter p{color:#e6ffef;margin:0 0 1.75rem}
section.newsletter .pill.small{display:inline-block;margin-bottom:.75rem;background:var(--primary-100);color:var(--primary-600)}
section.newsletter a{color:#fff;text-decoration:underline}
section.newsletter a:hover{opacity:.9}
.newsletter-form{display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.25rem}
section.newsletter .input{min-width:260px;padding:.9rem 1rem;border-radius:.5rem;border:0;background:#fff;color:#0f172a}
section.newsletter .input::placeholder{color:var(--secondary-500)}
section.newsletter .input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
section.newsletter .news-cta{padding:.9rem 1.25rem;border-radius:.5rem;font-weight:600;border:0;background:var(--secondary-800);color:#fff;transition:background .2s ease,box-shadow .2s ease}
section.newsletter .news-cta:hover{background:#0f172a;box-shadow:0 8px 18px rgba(0,0,0,.22)}
section.newsletter .small{color:#dbeafe}
section.newsletter label.small{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:start}
section.newsletter input[type="checkbox"]{accent-color:var(--primary-300)}
section.newsletter .alert{margin-top:.9rem;padding:.8rem 1rem;border-radius:10px}
section.newsletter .alert.success{background:rgba(255,255,255,.08);color:#bbf7d0;border:1px solid rgba(255,255,255,.25)}
section.newsletter .alert.error,section.newsletter .alert.err{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}

/* Honeypot */
.hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* =========================
   POST LAYOUT
========================= */
.post-hero{margin:0;background:var(--secondary-50)}
.post-hero img{width:100%;height:clamp(220px,48vw,520px);display:block;object-fit:cover}

.post-header{
  max-width:46rem;
  margin:0 auto;
  padding:1.25rem 1rem 0;
}
.post-title{font-family:"Playfair Display",serif;font-size:clamp(1.8rem, 2.2vw, 2.4rem);line-height:1.2;margin:1rem 0 .4rem;color:var(--secondary-800)}
.post-meta{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.95rem}
.post-meta .dot{opacity:.6}

.post-body{max-width:46rem;margin:1.25rem auto 2.5rem;padding:0 1rem;color:var(--text);line-height:1.75}
.post-body h2{margin-top:2rem;margin-bottom:.75rem;font-family:"Playfair Display",serif;color:var(--secondary-800)}
.post-body h3{margin-top:1.25rem;margin-bottom:.5rem;font-weight:600;color:var(--secondary-700)}
.post-body p{margin:.6rem 0}
.post-body ul,.post-body ol{margin:.5rem 0 .9rem 1.25rem}
.post-body li{margin:.35rem 0}

.post-body img{display:block;max-width:100%;width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);margin:1.1rem auto 1.25rem}
.post-body figure{margin:1.1rem 0 1.25rem;text-align:center}
.post-body figcaption{font-size:.87rem;color:var(--muted);margin-top:.35rem}

/* Related */
.related{max-width:72rem;margin:2.5rem auto 3rem;padding:0 1rem}
.related-title{font-family:"Playfair Display",serif;font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:1rem;color:var(--secondary-800)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.related-grid{grid-template-columns:1fr}}
.related-card{display:grid;grid-template-rows:auto 1fr;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 8px 20px rgba(0,0,0,.06);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.related-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.08)}
.related-img{aspect-ratio:16/9;overflow:hidden}
.related-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.related-card:hover .related-img img{transform:scale(1.03)}
.related-body{padding:.9rem 1rem 1.1rem}
.related-name{color:var(--secondary-800);font-weight:600;margin:0}
.related-meta{color:var(--muted);font-size:.9rem;margin:.25rem 0 0}

/* =========================
   EXPLORE MORE PROJECTS
========================= */
.explore-projects{background:var(--secondary-50);text-align:center}
.explore-projects h3{margin-bottom:2rem;font-family:"Playfair Display",serif;color:var(--secondary-800)}
.explore-projects .grid-3{gap:2rem;justify-items:center}
.explore-projects .card{text-align:left;max-width:380px;transition:transform .15s ease,box-shadow .3s ease}
.explore-projects .card:hover{transform:translateY(-4px)}
.explore-projects .card-img{height:200px;overflow:hidden;border-radius:.5rem .5rem 0 0}
.explore-projects .card-img img{width:100%;height:100%;object-fit:cover}
.explore-projects .btn{margin-top:1rem}

/* =========================
   ABOUT PAGE
========================= */
.page-header{text-align:center;margin-bottom:1.75rem}
.page-header .h1.gradient-text{font-size:clamp(1.8rem,2.2vw,2.3rem);line-height:1.25;margin-bottom:.6rem}
.page-header .lead{color:var(--secondary-600);max-width:46rem;margin-inline:auto}

.section.hero,.page .section.hero{padding-block:3rem;background:var(--primary-50)}
.about-grid{display:grid;gap:2rem;align-items:center;justify-items:center;max-width:900px;margin-inline:auto}
@media (min-width:768px){.about-grid{grid-template-columns:1fr 1fr}}

.avatar{width:96px;height:96px;border-radius:14px;object-fit:cover;display:block;box-shadow:0 10px 20px rgba(0,0,0,.08)}
.about-avatar{text-align:center;margin-bottom:1.5rem}

.page .content p{margin-bottom:1rem;line-height:1.7;color:var(--secondary-700)}

.about-portrait{float:right;width:min(38%,360px);margin:.25rem 0 1rem 1.5rem}
.about-portrait img,.about-portrait .media-rounded,.about-portrait .Img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);object-fit:cover}
.page .content::after{content:"";display:table;clear:both}
.about-titlebar{display:flex;align-items:center;gap:.9rem;justify-content:flex-start}
@media (max-width:900px){
  .about-portrait{float:none;width:min(68%,320px);margin:0 auto 1rem}
  .about-titlebar{display:grid;justify-items:center;text-align:center}
  .page-header .lead{margin-inline:auto}
}

/* =========================
   DIVIDERS
========================= */
.divider{border:0;border-top:1px solid var(--secondary-200);margin:3rem 0 2rem}

/* =========================
   AUTHOR BIO
========================= */
.author-bio{
  background: var(--secondary-100);
  border: 1px solid var(--secondary-200);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem auto 0;
  max-width: 800px;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.author-container{display:flex;align-items:center;gap:1rem}
.author-avatar{
  width:60px;height:60px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.author-text p{margin:0;color:var(--secondary-700);line-height:1.7;font-size:1rem}
@media (max-width:600px){
  .author-container{flex-direction:column;align-items:flex-start}
}

/* =========================
   PRO TIP (STACKED)
========================= */
.pro-tip{
  display:block;
  background:var(--primary-50);
  border-left:4px solid var(--primary-500);
  border-radius:10px;
  padding:1rem 1.25rem;
  margin:1.5rem 0;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.pro-tip-header{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 .5rem 0;font-weight:600;color:var(--secondary-800);
}
.pro-tip .icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--primary-500);color:#fff;font-size:.9rem;font-weight:700;flex-shrink:0;
}
.pro-tip p{display:block;margin:0;color:var(--secondary-700);line-height:1.6}

/* =========================
   HERO (FINAL, CLAMPED HEIGHT)
========================= */
.hero.section{background:var(--primary-50);overflow:hidden;padding-block:3rem}
.hero-grid{display:grid;gap:1.75rem;align-items:center}
@media (min-width:768px){
  .hero-grid{grid-template-columns:1fr 1fr}
}
.hero-media{width:100%}
@media (max-width:767px){
  .hero-media{order:-1;height:clamp(220px,60vw,360px)}
}
@media (min-width:768px){
  .hero-media{height:clamp(320px,36vw,460px)}
}
.hero-media img{
  width:100%;
  height:100% !important; /* overrides global img{height:auto} */
  object-fit:cover;
  border-radius:.75rem;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}
/* ===== HARD OVERRIDES: HERO IMAGE SIZE ===== */
section.hero .hero-grid{
  display:grid;
  gap:1.5rem;
  align-items:center;
}
@media (min-width:768px){
  section.hero .hero-grid{ grid-template-columns:1fr 1fr; }
}

/* Make sure the container and picture behave */
section.hero .hero-media{ display:block; width:100%; }
section.hero .hero-media > *{ display:block; width:100%; }

/* Force the actual image height (beats global img{height:auto}) */
section.hero .hero-media img{
  display:block;
  width:100% !important;
  height:clamp(260px, 34vw, 420px) !important;  /* desktop range */
  object-fit:cover !important;
  border-radius:.75rem;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* Mobile: image above text + taller clamp if needed */
@media (max-width:767px){
  section.hero .hero-media{ order:-1; }
  section.hero .hero-media img{
    height:clamp(220px, 65vw, 360px) !important;
  }
}
/* =========================
   CONTACT & THANK-YOU PAGES
========================= */

/* Form container */
.form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  display: block;
  width: 100%;
}

/* Group labels + inputs */
.form-group {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group label {
  font-weight: 600;
  color: var(--secondary-800);
  font-size: 0.95rem;
}

.req {
  color: var(--primary-600);
  margin-left: 0.15rem;
}

/* Inputs + textarea */
.input,
.textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--secondary-300);
  border-radius: 10px;
  font-family: inherit;
  background: #fff;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
}

/* Submit button */
.form-actions {
  margin-top: 1rem;
}

.form-actions .btn-primary {
  width: 100%;
  text-align: center;
  padding: 0.9rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  background: var(--primary-500);
  color: #fff;
  border: 2px solid var(--primary-500);
  box-shadow: 0 6px 18px rgba(34,197,94,0.25);
  transition: all 0.25s ease;
}

.form-actions .btn-primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  box-shadow: var(--glow-green);
}

/* Alert message (success or error) */
.alert {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  text-align: center;
  font-size: 1rem;
}

.alert.success {
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  color: var(--secondary-800);
  animation: fadeInUp 0.6s ease both;
}

/* Optional fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Thank-You Page */
.thank-you,
.page-thankyou {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.thank-you h1,
.page-thankyou h1 {
  color: var(--secondary-800);
  margin-bottom: 1rem;
}

.thank-you p,
.page-thankyou p {
  color: var(--secondary-600);
  font-size: 1.1rem;
  line-height: 1.7;
}

.thank-you .btn,
.page-thankyou .btn {
  margin: 0.5rem;
}
.post-intro p { margin: 1rem 0; }

.post-content h2,
.post-content .h2 { margin-top: 2rem; margin-bottom: 0.75rem; }

.post-content ul,
.post-content ol { 
  margin: 0.75rem 0 1.25rem;
  padding-left: 1.25rem;  /* indent bullets/numbers */
  line-height: 1.7;
}

.post-content li + li { margin-top: 0.25rem; }
/* Linked project list */
.project-links {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 2rem;
  display: grid;
  gap: 0.3rem;
}

.project-links a {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.project-links a:hover {
  color: var(--primary-500);
  text-decoration: underline;
}

/* Smooth scrolling for internal anchors */
html {
  scroll-behavior: smooth;
}
/* Tutorials/Projects listing cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.25rem;
}

.card { background: #fff; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.06); overflow: hidden; }
.card-media { display:block; }
.card-media img,
.card-media-placeholder {
  width: 100%;
  height: 200px;              /* matches Projects cards */
  object-fit: cover;
  display: block;
  background: #f3f5f7;
}
.card-body { padding: 1rem 1rem 1.25rem; }
.card-title { margin: .35rem 0 .25rem; line-height: 1.25; }
.card .meta { color: var(--text-muted,#667085); font-size: .875rem; display:flex; align-items:center; gap:.5rem; }
.card .pill.small { font-size: .75rem; }

/* Post page niceties */
.pro-tip { margin: 1rem 0 1.5rem; padding: .9rem 1rem; border-left: 4px solid var(--brand, #0a9952); background:#f2fbf6; }
.steps { counter-reset: step; padding-left: 1.25rem; }
.steps > .step { margin-bottom: 1.25rem; }
.steps > .step > h3 { margin: .25rem 0 .5rem; }
.step-img img { width:100%; height:auto; border-radius: 10px; }
/* Keep header aligned to body and remove awkward gaps */
.post-header { margin: var(--space-6) 0 var(--space-2); }
.post-header__inner { max-width: 70ch; margin: 0 auto; text-align: center; }
.post-title { margin: 0 0 .5rem; line-height: 1.15; }

/* Meta line tidy */
.post-meta { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted, #6b7280); font-size: .95rem; }
.post-meta .dot { opacity: .6; }

/* Don’t show a stray dash / placeholder before hydration */
.js-readtime:empty,
.js-readtime[data-fallback=""]:empty { display: none; }
/* Remove decorative # before headings inside post content */
.post-body h2::before,
.post-body h3::before,
.post-body h4::before {
  content: none !important;
}
/* Pinterest block */
.pin-section {
  margin-top: 2.5rem;
  padding: 1.25rem;
  background: var(--surface, #f8f9fb);
  border-radius: 16px;
}

.pin-title {
  margin: 0 0 .25rem;
}

.pin-note {
  margin: 0 0 1rem;
  color: var(--muted, #6b7280);
}

.pin-image img,
.pin-section img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;      /* keeps it from getting huge on desktop */
  margin: 0 auto 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* optional: center the CTA button */
.pin-cta {
  text-align: center;
}
/* ------------------------------------------------------------
   Step-by-Step Blocks (Tutorial Pages)
------------------------------------------------------------- */

.step-block {
  margin-bottom: 2.5rem;
  padding: 1.8rem 1.6rem;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.step-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: #222;
}

.step-body p {
  margin-bottom: 1rem;
  line-height: 1.65;
}

.step-block img {
  margin-top: 1.2rem;
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
}

/* Make steps easier to skim on mobile */
@media (max-width: 680px) {
  .step-block {
    padding: 1.4rem 1.2rem;
  }
  .step-title {
    font-size: 1.2rem;
  }
}
.step-body ol { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.step-body ol > li { margin: .25rem 0 .25rem; }
.step-block { margin-bottom: 2.5rem; padding: 1.8rem 1.6rem; background:#fff; border:1px solid #eaeaea; border-radius:14px; box-shadow:0 4px 10px rgba(0,0,0,.04); }
.step-title { font-size:1.35rem; font-weight:700; margin:0 0 .8rem; line-height:1.25; }
.step-body p { margin:0 0 1rem; line-height:1.65; }
.step-body ol { padding-left:1.25rem; margin:.5rem 0 1rem; }
.step-body ol>li { margin:.25rem 0; }
.step-block img { margin-top:1.2rem; border-radius:10px; width:100%; height:auto; display:block; }
.pin-for-later .pin-image {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  display: block;
  margin: 1.5rem auto 0;
}
.pin-for-later {
  text-align: center;
}

.pin-for-later .pin-image {
  margin-left: auto;
  margin-right: auto;
  display: block;
}