/* Tabib4D v3 — Dark Apothecary Editorial */
@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#040d07;
  --bg-elev:#081f10;
  --bg-card:rgba(16,185,129,.04);
  --bg-card-h:rgba(16,185,129,.08);
  --border:rgba(16,185,129,.1);
  --border-h:rgba(16,185,129,.22);
  --emerald:#10b981;
  --jade:#059669;
  --mint:#34d399;
  --gold:#c9a96e;
  --gold-dim:rgba(201,169,110,.15);
  --text:#d0ddd0;
  --text-m:rgba(200,220,200,.55);
  --text-d:rgba(200,220,200,.3);
  --white:#f0f7f0;
  --radius:14px;
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'DM Sans','Segoe UI',sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Subtle pattern overlay */
body::before{content:'';position:fixed;inset:0;opacity:.02;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30Z' fill='none' stroke='%2310b981' stroke-width='.5'/%3E%3C/svg%3E")}

a{color:var(--emerald);text-decoration:none;transition:color .2s}
a:hover{color:var(--mint)}
img{max-width:100%;height:auto;display:block}

/* Container */
.wrap{max-width:1160px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}

/* ─── HEADER ─── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(4,13,7,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--font-d);font-size:1.6rem;font-weight:700;text-decoration:none;display:flex;gap:3px;letter-spacing:-.5px}
.logo em{font-style:normal;color:var(--white)}.logo b{color:var(--emerald);font-weight:700}
.logo small{font-size:.55em;color:var(--gold);vertical-align:super;margin-left:2px;font-family:var(--font-b);font-weight:600}
nav{display:flex;gap:2rem;align-items:center}
nav a{font-size:.82rem;font-weight:600;color:var(--text-m);letter-spacing:.3px}
nav a:hover,nav a.on{color:var(--emerald)}
.mob-btn{display:none;background:0;border:0;color:var(--white);font-size:1.5rem;cursor:pointer;padding:8px;line-height:1}
@media(max-width:768px){
  nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;flex-direction:column;background:rgba(4,13,7,.98);padding:2rem 1.5rem;gap:1.5rem;z-index:99}
  nav.open{display:flex}nav a{font-size:1.1rem}
  .mob-btn{display:block}
}

/* ─── SECTION SPACING ─── */
.sec{padding:4rem 0}
.sec-sm{padding:2.5rem 0}
.sec-hdr{margin-bottom:2rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sec-hdr h2{font-family:var(--font-d);font-size:1.8rem;font-weight:700;color:var(--white);letter-spacing:-.3px}
.sec-hdr a{font-size:.82rem;font-weight:600;color:var(--emerald)}

/* Gold ornamental divider */
.divider{text-align:center;padding:3rem 0;color:var(--gold);opacity:.4;font-size:1.2rem;letter-spacing:1rem}

/* ═══ A04: MAGAZINE HERO ═══ */
.hero{padding-top:84px}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1.25rem;min-height:440px}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr;min-height:auto}}

.hero-feat{position:relative;border-radius:var(--radius);overflow:hidden;display:block;text-decoration:none;color:inherit}
.hero-feat img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .6s}
.hero-feat:hover img{transform:scale(1.03)}
.hero-feat .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,13,7,.88) 0%,rgba(4,13,7,.2) 50%,transparent)}
.hero-feat .info{position:absolute;bottom:0;left:0;right:0;padding:2rem}
.hero-feat h2{font-family:var(--font-d);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--white);line-height:1.25;margin:.75rem 0 .5rem}
.hero-feat .meta{font-size:.78rem;color:rgba(200,220,200,.5)}

.hero-side{display:flex;flex-direction:column;gap:1rem}
.side-card{flex:1;display:grid;grid-template-columns:100px 1fr;gap:1rem;align-items:center;padding:1rem;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);text-decoration:none;color:inherit;transition:all .3s}
.side-card:hover{background:var(--bg-card-h);border-color:var(--border-h);color:inherit}
.side-card img{width:100px;height:72px;object-fit:cover;border-radius:8px}
.side-card .cat-s{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.side-card h3{font-size:.85rem;font-weight:600;color:var(--white);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-card .meta{font-size:.7rem;color:var(--text-d);margin-top:2px}

/* ═══ F08: STATS BAR ═══ */
.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 0}
.stats-row{display:flex;justify-content:space-around;text-align:center;flex-wrap:wrap;gap:1.5rem}
.stats-row .s{flex:1;min-width:120px}
.stats-row .n{font-family:var(--font-d);font-size:2.2rem;font-weight:700;color:var(--white);line-height:1}
.stats-row .n b{color:var(--emerald)}
.stats-row .l{font-size:.72rem;color:var(--text-d);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}

/* ═══ CATEGORY CARDS ═══ */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:768px){.cat-row{grid-template-columns:1fr}}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:5/3;display:block;text-decoration:none}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-card:hover img{transform:scale(1.05)}
.cat-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,13,7,.88),rgba(4,13,7,.15))}
.cat-card .info{position:absolute;bottom:0;left:0;right:0;padding:1.5rem}
.cat-card h3{font-family:var(--font-d);font-size:1.25rem;font-weight:700;color:var(--white);margin-bottom:.25rem}
.cat-card p{font-size:.78rem;color:rgba(200,220,200,.55);line-height:1.5}
.cat-card .cnt{display:inline-block;margin-top:.5rem;font-size:.68rem;font-weight:700;color:var(--emerald);text-transform:uppercase;letter-spacing:.5px}

/* ═══ G08: BENTO GRID ═══ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.bento{grid-template-columns:1fr}.bento .b-lg,.bento .b-w{grid-column:span 1;grid-row:span 1}}
.b-lg{grid-column:span 2;grid-row:span 2}
.b-w{grid-column:span 2}
.b-card{border-radius:var(--radius);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);transition:all .3s;display:flex;flex-direction:column}
.b-card:hover{border-color:var(--border-h);transform:translateY(-4px);box-shadow:0 12px 40px rgba(16,185,129,.08)}
.b-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.b-img{position:relative;overflow:hidden}
.b-lg .b-img{aspect-ratio:4/3}
.b-card:not(.b-lg) .b-img{aspect-ratio:16/9}
.b-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.b-card:hover .b-img img{transform:scale(1.04)}
.b-body{padding:1.25rem;flex:1;display:flex;flex-direction:column}
.b-body h3{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--white);line-height:1.35;margin-bottom:.5rem}
.b-lg .b-body h3{font-size:1.2rem}
.b-body p{font-size:.82rem;color:var(--text-m);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-body .meta{font-size:.72rem;color:var(--text-d);margin-top:.75rem}

/* Pill badge */
.pill{display:inline-block;padding:4px 14px;border-radius:100px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--bg)}
.b-img .pill{position:absolute;top:12px;left:12px}

/* ═══ BREAK IMAGE ═══ */
.break{margin:0 -1.5rem;border-radius:0;overflow:hidden;max-height:280px}
.break img{width:100%;height:280px;object-fit:cover}
@media(min-width:1200px){.break{margin:0;border-radius:var(--radius)}}

/* ═══ F04: TABBED CONTENT ═══ */
.tab-bar{display:flex;gap:.5rem;margin-bottom:2rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{padding:10px 22px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--text-m);font-family:var(--font-b);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .25s;white-space:nowrap}
.tab-btn:hover{border-color:var(--border-h);color:var(--white)}
.tab-btn.on{background:var(--emerald);border-color:var(--emerald);color:var(--bg)}
.tab-panel{display:none}.tab-panel.on{display:block}

/* Tab articles grid */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}

/* ═══ T03: HERO QUOTE ═══ */
.quote-sec{padding:4.5rem 0;text-align:center}
.quote-sec blockquote{max-width:700px;margin:0 auto;font-family:var(--font-d);font-size:clamp(1.3rem,3vw,1.7rem);font-style:italic;color:rgba(200,220,200,.7);line-height:1.6;position:relative}
.quote-sec blockquote::before,.quote-sec blockquote::after{font-family:Georgia,serif;font-size:3.5rem;color:var(--gold);opacity:.35;position:absolute}
.quote-sec blockquote::before{content:"\201C";top:-.8rem;left:-1.5rem}
.quote-sec blockquote::after{content:"\201D";bottom:-1.5rem;right:-1rem}
.quote-sec cite{display:block;margin-top:1.5rem;font-size:.82rem;color:var(--gold);font-style:normal;font-weight:600;letter-spacing:.3px}

/* ═══ INLINE CTA ═══ */
.cta-bar{padding:1.5rem 2rem;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cta-bar h3{font-family:var(--font-d);font-size:1.15rem;font-weight:700;color:var(--white);flex:1;min-width:200px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;font-family:var(--font-b);font-weight:700;font-size:.85rem;text-decoration:none;transition:all .3s;cursor:pointer;border:0}
.btn-em{background:linear-gradient(135deg,var(--emerald),var(--jade));color:var(--bg)}
.btn-em:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(16,185,129,.3);color:var(--bg)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#a8884e);color:var(--bg)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,169,110,.3);color:var(--bg)}

/* ═══ C05: NEWSLETTER ═══ */
.nl-card{max-width:640px;margin:0 auto;padding:2.5rem;border-radius:20px;background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(201,169,110,.05));border:1px solid var(--border);text-align:center}
.nl-card h3{font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.nl-card p{color:var(--text-m);font-size:.9rem;margin-bottom:1.5rem}
.nl-form{display:flex;gap:.75rem;max-width:420px;margin:0 auto}
@media(max-width:480px){.nl-form{flex-direction:column}}
.nl-form input{flex:1;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:rgba(16,185,129,.03);color:var(--white);font-family:var(--font-b);font-size:.88rem;outline:0}
.nl-form input:focus{border-color:var(--emerald)}
.nl-form input::placeholder{color:var(--text-d)}

/* ═══ ARTICLE PAGE ═══ */
.art-page{padding:84px 0 3rem}
.art-page .wrap{max-width:760px}
.breadcrumb{font-size:.78rem;color:var(--text-d);margin-bottom:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text-m)}
.art-hero-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;margin-bottom:2rem}
.art-hero-img img{width:100%;height:100%;object-fit:cover}
.art-header{margin-bottom:2.5rem}
.art-header h1{font-family:var(--font-d);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;color:var(--white);line-height:1.2;margin:.75rem 0}
.art-meta{font-size:.82rem;color:var(--text-d);display:flex;gap:1rem;flex-wrap:wrap}
.art-body{font-size:1rem;line-height:1.85;color:var(--text)}
.art-body h2{font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--white);margin:2.5rem 0 1rem;letter-spacing:-.2px}
.art-body h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--white);margin:2rem 0 .75rem}
.art-body p{margin-bottom:1.25rem}
.art-body ul,.art-body ol{margin:1rem 0 1.5rem 1.5rem}
.art-body li{margin-bottom:.5rem;color:var(--text-m)}
.art-body li strong{color:var(--white)}
.art-body strong{color:var(--white)}
.art-body a{color:var(--emerald);text-decoration:underline;text-decoration-color:rgba(16,185,129,.3);text-underline-offset:3px}
.art-body a:hover{text-decoration-color:var(--emerald)}
.art-body blockquote{border-left:3px solid var(--gold);padding:1rem 1.5rem;margin:1.5rem 0;background:var(--bg-card);border-radius:0 12px 12px 0;color:var(--text-m);font-style:italic}
.info-box{padding:1.25rem 1.5rem;border-radius:12px;background:rgba(16,185,129,.04);border:1px solid rgba(16,185,129,.12);margin:1.5rem 0;font-size:.92rem;line-height:1.7}
.info-box strong{color:var(--emerald)}
.cta-box{padding:2rem;border-radius:var(--radius);background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(201,169,110,.06));border:1px solid rgba(16,185,129,.15);text-align:center;margin:2.5rem 0}
.cta-box h3{font-family:var(--font-d);font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.5rem}
.cta-box p{color:var(--text-m);font-size:.88rem;margin-bottom:1rem}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.tag{padding:4px 14px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);font-size:.72rem;color:var(--text-m);font-weight:600}
.related{padding:3rem 0;border-top:1px solid var(--border);margin-top:3rem}
.related h3{font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:1.5rem}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.rel-card{border-radius:var(--radius);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);transition:all .3s;text-decoration:none;color:inherit;display:block}
.rel-card:hover{border-color:var(--border-h);transform:translateY(-3px);color:inherit}
.rel-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rel-card .body{padding:1rem}
.rel-card h4{font-family:var(--font-d);font-size:.92rem;font-weight:700;color:var(--white);line-height:1.35}

/* ═══ CATEGORY PAGE ═══ */
.cat-page{padding:84px 0 3rem}
.cat-banner{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:21/7;margin-bottom:2.5rem}
@media(max-width:768px){.cat-banner{aspect-ratio:16/7}}
.cat-banner img{width:100%;height:100%;object-fit:cover}
.cat-banner .ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(4,13,7,.85),rgba(4,13,7,.3))}
.cat-banner .info{position:absolute;top:50%;left:2rem;transform:translateY(-50%)}
.cat-banner h1{font-family:var(--font-d);font-size:clamp(1.6rem,4vw,2.5rem);font-weight:700;color:var(--white);margin-bottom:.35rem}
.cat-banner p{font-size:.95rem;color:rgba(200,220,200,.6);max-width:500px}

/* ═══ FOOTER ═══ */
.ftr{padding:3rem 0;border-top:1px solid var(--border);margin-top:3rem}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
@media(max-width:768px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-family:var(--font-d);font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:1rem;letter-spacing:.3px}
.ftr p,.ftr-links a{font-size:.82rem;color:var(--text-d);line-height:1.7}
.ftr-links{list-style:none}.ftr-links li{margin-bottom:.5rem}
.ftr-links a:hover{color:var(--emerald)}
.ftr-btm{text-align:center;padding-top:2rem;border-top:1px solid rgba(16,185,129,.06);font-size:.78rem;color:var(--text-d)}
.ftr-btm a{color:var(--emerald)}

/* ═══ ABOUT PAGE ═══ */
.about-page{padding:84px 0 3rem}
.about-page .wrap{max-width:760px}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-grid,.stats-row,.cat-row,.bento,.quote-sec blockquote,.nl-card{animation:fadeUp .6s ease-out both}
.stats-row{animation-delay:.1s}.cat-row{animation-delay:.15s}