/*
Theme Name: Dr Naeem Research
Theme URI: https://drnaeem.co.uk
Author: Dr Muhammad Naeem
Description: Custom WordPress theme for Dr Muhammad Naeem — Systematic Thematic Analysis, the PRICE Model, AI in Qualitative Research, the Conductive Approach and Agnoseology.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: drnaeem
*/


  :root{
    --ink:#1e1b2e; --soft:#5b5772; --faint:#8b87a0;
    --bg:#f7f6fb; --card:#ffffff; --line:#e8e6f2;
    --indigo:#4f46e5; --violet:#7c3aed; --fuchsia:#c026d3;
    --blue:#2563eb; --orange:#ea580c; --teal:#0d9488; --rose:#e11d48;
    --amber:#f59e0b; --green:#16a34a; --sky:#0284c7;
    --hero1:#1e1b4b; --hero2:#4c1d95; --hero3:#701a75;
    --grad:linear-gradient(100deg,#4f46e5,#7c3aed 50%,#c026d3);
    --serif:'Fraunces',Georgia,serif;
    --sans:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}

  /* Visible keyboard-focus outline for every interactive element. The
     original design relied on hover states only; this adds parity for
     keyboard/screen-reader users navigating the real <a> links without
     changing anything for mouse users (only shows on :focus-visible). */
  a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px
  }

  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16.5px}
  h1,h2,h3,h4,.serif{font-family:var(--serif);letter-spacing:-.01em}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;min-height:66px;gap:12px}
  .brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;cursor:pointer;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav-links{display:flex;gap:2px;flex-wrap:nowrap;flex-shrink:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .brand{flex-shrink:0}
  .nav-links button{background:none;border:none;color:var(--soft);font-size:.9rem;font-weight:600;padding:8px 12px;cursor:pointer;border-radius:999px;font-family:var(--sans);white-space:nowrap;flex-shrink:0}
  .nav-links button:hover{color:var(--indigo);background:#eef2ff}
  .nav-links button.active{color:#fff;background:var(--grad)}

  /* Each WordPress page load renders exactly one .page block (this is
     a real multi-page site now, not the original single-page JS app),
     so it's always shown by default — no JS/class toggle required. */
  .page{display:block;animation:fade .4s ease}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  .narrow{max-width:860px;margin:0 auto;padding:0 24px}

  /* HERO */
  .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--hero1) 0%,var(--hero2) 55%,var(--hero3) 100%);color:#fff;padding:92px 0 84px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(600px 300px at 85% 15%, rgba(192,38,211,.35), transparent 60%),
    radial-gradient(500px 320px at 10% 90%, rgba(79,70,229,.45), transparent 60%);}
  .hero .wrap{position:relative}
  .kicker{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f0abfc;margin-bottom:24px;font-weight:700}
  .hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.14;max-width:850px;font-weight:600}
  .hero h1 em{font-style:italic;background:linear-gradient(90deg,#f0abfc,#fcd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p.sub{margin-top:24px;max-width:730px;color:#ddd6fe;font-size:1.13rem}
  .cta-row{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;padding:14px 28px;border-radius:12px;font-size:.98rem;font-weight:700;cursor:pointer;border:none;text-decoration:none;font-family:var(--sans)}
  .btn-gold{background:linear-gradient(90deg,#fbbf24,#f59e0b);color:#3b2f0b;box-shadow:0 8px 24px rgba(245,158,11,.35)}
  .btn-gold:hover{transform:translateY(-2px)}
  .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4)}
  .btn-ghost:hover{background:rgba(255,255,255,.2)}

  .statbar{position:relative;margin-top:-38px;z-index:5}
  .statbar .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:0 14px 34px rgba(30,27,75,.10);text-align:center}
  .stat .n{font-family:var(--serif);font-size:1.7rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat .l{font-size:.82rem;color:var(--soft);font-weight:600;margin-top:2px}

  section.block{padding:70px 0}
  .block h2{font-size:1.9rem;margin-bottom:8px}
  .g-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .block .lead{color:var(--soft);max-width:780px;margin-bottom:38px;font-size:1.03rem}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;cursor:pointer;transition:.22s;display:flex;flex-direction:column;position:relative;overflow:hidden}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--ac,var(--indigo))}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(30,27,75,.14)}
  .card .icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#fff;background:var(--ac,var(--indigo));margin-bottom:16px}
  .card .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ac,var(--indigo));font-weight:800;margin-bottom:8px}
  .card h3{font-size:1.16rem;margin-bottom:8px;line-height:1.35}
  .card p{font-size:.93rem;color:var(--soft);flex:1}
  .card .more{margin-top:16px;color:var(--ac,var(--indigo));font-weight:700;font-size:.9rem}

  .two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
  @media(max-width:860px){.two-col{grid-template-columns:1fr}}

  .answer-box{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #ddd6fe;border-left:5px solid var(--ac,var(--violet));padding:22px 26px;border-radius:14px;margin:0 0 30px;font-size:1.04rem}
  .answer-box b{color:var(--ac,var(--violet))}

  /* PROCESS DIAGRAMS */
  .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:34px 0}
  .flow .f-step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center;position:relative;box-shadow:0 6px 18px rgba(30,27,75,.06)}
  .flow .f-step .fn{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--serif);font-size:1.1rem}
  .flow .f-step h5{font-family:var(--sans);font-size:.88rem;font-weight:800;line-height:1.35;margin-bottom:6px}
  .flow .f-step p{font-size:.78rem;color:var(--soft);line-height:1.5}
  .c1{background:#2563eb}.c2{background:#0d9488}.c3{background:#f59e0b}.c4{background:#ea580c}.c5{background:#7c3aed}.c6{background:#c026d3}

  /* PRICE FUNNEL */
  .funnel{margin:38px auto;max-width:640px}
  .fun-row{color:#fff;margin:0 auto 10px;border-radius:14px;padding:16px 22px;display:flex;gap:18px;align-items:center;box-shadow:0 10px 24px rgba(30,27,75,.16)}
  .fun-row .fl{font-family:var(--serif);font-size:1.9rem;font-weight:700;flex:0 0 44px;text-align:center;opacity:.95}
  .fun-row h5{font-family:var(--sans);font-size:1rem;font-weight:800;margin-bottom:2px}
  .fun-row p{font-size:.83rem;opacity:.92;line-height:1.5}
  .fw1{width:100%;background:linear-gradient(90deg,#e11d48,#f43f5e)}
  .fw2{width:92%;background:linear-gradient(90deg,#ea580c,#f59e0b)}
  .fw3{width:84%;background:linear-gradient(90deg,#0284c7,#38bdf8)}
  .fw4{width:76%;background:linear-gradient(90deg,#16a34a,#4ade80)}
  .fw5{width:68%;background:linear-gradient(90deg,#7c3aed,#a78bfa)}
  .fun-tip{max-width:640px;margin:0 auto;text-align:center;font-weight:800;color:var(--violet);font-size:.95rem}

  /* 3Vs venn */
  .venn{display:flex;justify-content:center;gap:-20px;margin:30px 0;flex-wrap:wrap}
  .venn .v{width:170px;height:170px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:18px;margin:0 -14px;mix-blend-mode:multiply}
  .venn .v b{font-family:var(--serif);font-size:1.15rem}
  .venn .v span{font-size:.72rem;line-height:1.4;opacity:.95}
  .v1{background:rgba(79,70,229,.85)}.v2{background:rgba(192,38,211,.8)}.v3{background:rgba(13,148,136,.85)}

  .steps{counter-reset:step;margin:26px 0}
  .step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .step .num{counter-increment:step;flex:0 0 44px;height:44px;border-radius:14px;background:var(--ac,var(--indigo));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;font-weight:700}
  .step .num::before{content:counter(step)}
  .step h4{font-family:var(--sans);font-weight:800;font-size:1rem;margin-bottom:4px}
  .step p{font-size:.94rem;color:var(--soft)}

  .cite-box{background:linear-gradient(135deg,#1e1b4b,#4c1d95);color:#e0d7fe;border-radius:16px;padding:26px 28px;margin:34px 0;font-size:.93rem;box-shadow:0 14px 34px rgba(30,27,75,.25)}
  .cite-box .cb-title{color:#fcd34d;text-transform:uppercase;font-size:.72rem;letter-spacing:.16em;margin-bottom:10px;font-weight:800;font-family:var(--sans)}
  .cite-box a{color:#f0abfc}

  .faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--card);overflow:hidden}
  .faq summary{padding:17px 22px;cursor:pointer;font-weight:700;font-size:.97rem;list-style:none;position:relative}
  .faq summary::after{content:"+";position:absolute;right:20px;color:var(--violet);font-size:1.2rem;font-weight:800}
  .faq details[open] summary::after{content:"–"}
  .faq details[open] summary{color:var(--violet)}
  .faq details p{padding:0 22px 18px;font-size:.94rem;color:var(--soft)}

  .pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px;align-items:center}
  .pill{border-radius:999px;padding:6px 15px;font-size:.82rem;font-weight:700;color:#fff}
  .pill.lead-pill{background:var(--ink)}
  .pk{background:#2563eb}.pc{background:#ea580c}.pt{background:#7c3aed}

  .pub-group h3{font-size:1.25rem;margin:36px 0 10px}
  .pub{padding:15px 18px;border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:10px;font-size:.94rem}
  .pub b{color:var(--indigo)}
  .pub a{color:var(--fuchsia);text-decoration:none;font-weight:700}
  .pub a:hover{text-decoration:underline}
  .pub .venue{font-style:italic;color:var(--soft)}

  .about-grid{display:grid;grid-template-columns:290px 1fr;gap:46px;align-items:start}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr}}
  .portrait{background:linear-gradient(160deg,var(--hero1),var(--hero2) 60%,var(--hero3));border-radius:20px;color:#fff;padding:32px;text-align:center;box-shadow:0 18px 40px rgba(30,27,75,.25)}
  .portrait .initials{width:112px;height:112px;margin:0 auto 18px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid #f0abfc;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2.4rem;color:#f0abfc;font-weight:700}
  .portrait h3{font-size:1.25rem;margin-bottom:4px}
  .portrait p{font-size:.85rem;color:#ddd6fe}
  .portrait .links{margin-top:20px;display:flex;flex-direction:column;gap:9px}
  .portrait .links a{color:#fff;background:rgba(255,255,255,.12);border-radius:10px;padding:10px;text-decoration:none;font-size:.87rem;font-weight:600}
  .portrait .links a:hover{background:rgba(255,255,255,.24)}
  .about-text p{margin-bottom:16px}
  .cred{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:26px}
  .cred div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.88rem}
  .cred b{display:block;color:var(--indigo)}

  /* BLOG */
  .post-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px!important;margin-bottom:18px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
  .post-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--ac,var(--indigo))}
  .post-card:hover{transform:translateX(6px);box-shadow:0 14px 34px rgba(30,27,75,.12)}
  .post-card .meta{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ac,var(--indigo));font-weight:800;margin-bottom:8px}
  .post-card h3{font-size:1.22rem;margin-bottom:8px}
  .post-card p{font-size:.94rem;color:var(--soft)}
  .post-card .read{margin-top:12px;font-weight:800;color:var(--ac,var(--indigo));font-size:.9rem}

  .article{padding:56px 0}
  .article .a-meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ac,var(--violet));font-weight:800;margin-bottom:14px}
  .article h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.2;margin-bottom:18px;max-width:820px}
  .article .byline{color:var(--faint);font-size:.9rem;margin-bottom:30px}
  .article h2{font-size:1.45rem;margin:38px 0 14px}
  .article h3{font-size:1.15rem;margin:28px 0 10px}
  .article p{margin-bottom:16px}
  .article .back{display:inline-block;margin-bottom:26px;color:var(--violet);font-weight:700;cursor:pointer;font-size:.9rem}
  .article blockquote{border-left:4px solid var(--ac,var(--violet));background:var(--card);padding:16px 22px;border-radius:0 12px 12px 0;margin:20px 0;font-style:italic;color:var(--soft)}
  .author-box{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-top:38px}
  .author-box .ab-i{flex:0 0 62px;height:62px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.3rem}
  .author-box p{font-size:.87rem;color:var(--soft);margin:0}
  .author-box b{color:var(--ink)}

  footer{background:linear-gradient(135deg,var(--hero1),var(--hero2));color:#c4b5fd;padding:50px 0;margin-top:50px}
  footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;font-size:.88rem}
  footer a{color:#f0abfc;text-decoration:none;font-weight:600}
  footer .fbrand{font-family:var(--serif);color:#fff;font-size:1.15rem;margin-bottom:8px}

  .page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--hero1),var(--hero2) 60%,var(--hero3));color:#fff;padding:60px 0 48px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 88% 10%, rgba(192,38,211,.3), transparent 60%)}
  .page-hero .wrap{position:relative}
  .page-hero h1{font-size:clamp(1.7rem,3.5vw,2.5rem);max-width:880px;line-height:1.22}
  .page-hero p{margin-top:14px;color:#ddd6fe;max-width:780px}

  /* CONTRIBUTIONS CAROUSEL */
  .carousel{position:relative;margin:56px auto 0;max-width:1160px;padding:0 24px}
  .car-track{position:relative;border-radius:22px;overflow:hidden;min-height:280px;box-shadow:0 20px 50px rgba(30,27,75,.22)}
  .slide{color:#fff;padding:46px 84px 46px 54px;display:none;flex-direction:column;justify-content:center;animation:fade .6s ease;min-height:280px}
  .slide.on{display:flex}
  .slide .s-kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.85;margin-bottom:12px}
  .slide h3{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.25;max-width:760px;margin-bottom:12px}
  .slide p{max-width:700px;font-size:.98rem;opacity:.92;margin-bottom:20px}
  .slide .s-btn{align-self:flex-start;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff;padding:11px 24px;border-radius:10px;font-weight:700;cursor:pointer;font-family:var(--sans);font-size:.92rem}
  .slide .s-btn:hover{background:rgba(255,255,255,.3)}
  .s1{background:linear-gradient(120deg,#1e3a8a,#2563eb)}
  .s2{background:linear-gradient(120deg,#7c2d12,#ea580c)}
  .s3{background:linear-gradient(120deg,#4c1d95,#7c3aed)}
  .s4{background:linear-gradient(120deg,#831843,#c026d3)}
  .s5{background:linear-gradient(120deg,#134e4a,#0d9488)}
  .car-dots{display:flex;gap:9px;justify-content:center;margin-top:16px}
  .car-dots button{width:11px;height:11px;border-radius:50%;border:none;background:#cfcbe4;cursor:pointer;padding:0}
  .car-dots button.on{background:var(--violet);transform:scale(1.25)}
  .car-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.25);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;z-index:4}
  .car-prev{left:36px}.car-next{right:36px}
  .car-arrow:hover{background:rgba(255,255,255,.45)}

  /* THEORY DIAGRAMS */
  .theory-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px;margin-bottom:28px;box-shadow:0 8px 24px rgba(30,27,75,.06)}
  .theory-card h3{font-size:1.4rem;margin-bottom:4px}
  .theory-card .t-src{font-size:.83rem;color:var(--faint);font-weight:600;margin-bottom:16px}
  .theory-card p{font-size:.95rem;color:var(--soft);margin-bottom:12px}
  .diagram{display:flex;justify-content:center;margin:24px 0}
  .quote-ev{background:#faf5ff;border:1px solid #e9d5ff;border-left:5px solid var(--fuchsia);border-radius:0 12px 12px 0;padding:18px 22px;margin:18px 0;font-size:.96rem}
  .quote-ev .q{font-style:italic;color:var(--ink)}
  .quote-ev .src{display:block;margin-top:8px;font-size:.85rem;font-weight:700;color:var(--fuchsia)}
  .levels{max-width:520px;margin:24px auto}
  .level{color:#fff;border-radius:12px;padding:14px 20px;margin-bottom:10px;font-size:.9rem;box-shadow:0 8px 20px rgba(30,27,75,.15)}
  .level b{display:block;font-size:.98rem}
  .cite-badge{display:inline-block;background:#eef2ff;color:var(--indigo);border-radius:999px;padding:2px 12px;font-size:.76rem;font-weight:800;margin-left:8px;white-space:nowrap}


/* ---- WordPress integration shims ---- */
.nav-links a{background:none;border:none;color:var(--soft);font-size:.9rem;font-weight:600;padding:8px 12px;cursor:pointer;border-radius:999px;font-family:var(--sans);text-decoration:none;display:inline-block;white-space:nowrap;flex-shrink:0}
.nav-links a:hover{color:var(--indigo);background:#eef2ff}
.nav-links a.active{color:#fff;background:var(--grad)}
a.btn{text-decoration:none;display:inline-block}
img{max-width:100%;height:auto}
.article img{border-radius:14px;margin:20px 0}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.wp-block-navigation{display:none}

/* ---- Hamburger toggle button: hidden on desktop, shown on mobile ---- */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
.nav-hamburger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
a.card,a.post-card,a.back{text-decoration:none;color:inherit}
a.card,a.post-card{display:block}
a.card h3,a.post-card h3{color:var(--ink)}
a.card:visited,a.post-card:visited,a.back:visited{color:inherit}

/* ---- Small-screen refinements ----
   The original design targeted desktop widths and had almost no phone-
   sized breakpoints. These don't change anything above ~700px; below
   it they shrink the nav, hero padding and headline sizes so a 10-item
   menu and large hero text stay comfortable on a phone screen. */
@media(max-width:700px){
  .nav-inner{padding:10px 16px}
  .brand{font-size:1.1rem}
  .nav-hamburger{display:flex}
  .nav-links{
    display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;
    gap:6px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:12px 16px 18px;
    box-shadow:0 12px 24px rgba(30,27,46,.08);
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height .3s ease,opacity .2s ease
  }
  .nav-links.open{max-height:80vh;opacity:1;visibility:visible;overflow-y:auto}
  .nav-links a,.nav-links button{font-size:.95rem;padding:12px 14px;width:100%;text-align:left;border-radius:10px}
  .nav-links a:not(.active),.nav-links button:not(.active){background:transparent;border:1px solid var(--line)}
  body.nav-open{overflow:hidden}
  .wrap,.narrow{padding:0 16px}
  .hero{padding:56px 0 48px}
  .hero h1{font-size:clamp(1.6rem,7vw,2.2rem)}
  .page-hero{padding:40px 0 32px}
  .page-hero h1{font-size:clamp(1.4rem,6vw,1.9rem)}
  .article h1{font-size:clamp(1.4rem,6vw,1.9rem)}
  .slide{padding:32px 24px;min-height:auto}
  footer .wrap{flex-direction:column;gap:20px}
  .card,.post-card{padding:20px}
  .venn .v{width:130px;height:130px;padding:12px;font-size:.85rem}
  .btn{padding:13px 22px;font-size:.92rem}
}

/* Long DOI/reference URLs and unbroken words shouldn't force horizontal
   scrolling on narrow screens. */
.article,.narrow,.post-card{overflow-wrap:break-word;word-break:break-word}

@media(max-width:420px){
  .wrap,.narrow{padding:0 14px}
  .hero h1{font-size:clamp(1.4rem,8vw,1.9rem)}
  .page-hero h1{font-size:clamp(1.25rem,7vw,1.6rem)}
  .article h1{font-size:clamp(1.25rem,7vw,1.6rem)}
  .card,.post-card{padding:16px}
  .brand{font-size:1rem}
  .venn .v{width:110px;height:110px;font-size:.75rem;padding:8px}
}

/* ---- Page-to-page slide transition (mobile nav taps) ----
   This is a real multi-page WordPress site now (each nav click loads
   an actual new page), not the original single-page JS app - so a
   slide animation between pages needs the browser's View Transitions
   API rather than JS. It's progressive enhancement: browsers that
   don't yet support it (e.g. Firefox) just navigate instantly as
   normal, with no error and no missing functionality. */
@view-transition{navigation:auto}

@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:drnaeem-slide-out .28s ease-in both}
  ::view-transition-new(root){animation:drnaeem-slide-in .28s ease-out both}

  @keyframes drnaeem-slide-in{from{transform:translateX(-6%);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes drnaeem-slide-out{from{transform:translateX(0);opacity:1}to{transform:translateX(6%);opacity:0}}
}