/* ===========================================================
   Espressimo — Single Magazine template (hero · content+TOC · CTA · recommended)
   + Magazine archive. Mirrors the guide styles (esp-mz… namespace) and adds the
   magazine-specific blocks: quote, figure+caption, icon-cards, blend/badge cards.
   =========================================================== */

.esp-mzh, .esp-mzc, .esp-mzcta, .esp-mzrec, .esp-mzarch { font-family: 'Dialect PM', sans-serif; }

/* ── Hero ── */
.esp-mzh__crumbs { display:flex; align-items:center; gap:8px; padding:12px 48px; border-bottom:1px solid #e6dad4; font-size:18px; color:#522c25; }
.esp-mzh__crumb { color:#75605a; text-decoration:none; opacity: 1; transition:opacity .2s; }
.esp-mzh__crumb:hover { opacity: 1; color: #522c25; }
.esp-mzh__crumb--current { opacity: 1; font-weight:700; color: #522c25; }
.esp-mzh__crumb-sep { opacity:.3; }
.esp-mzh__head { background:#f6ede3; border-bottom:1px solid #e6dad4; }
.esp-mzh__head-inner { padding:56px 48px; max-width:1000px; }
.esp-mzh__eyebrow { display:block; color:#c46500; font-size:18px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.esp-mzh__title { color:#522c25; font-size:64px; line-height:1.06; font-weight:700; letter-spacing:.02em; margin:12px 0 0; }
.esp-mzh__subtitle { color:#75605a; font-size:26px; opacity: 1; line-height:1.5; margin:16px 0 0; }
.esp-mzh__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:28px; color:#522c25; font-size:17px; opacity:.7; }
.esp-mzh__meta-item { display:inline-flex; align-items:center; gap:8px; }
.esp-mzh__meta-item svg, .esp-mzh__share svg { color:#c46500; }
.esp-mzh__share { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0; border-radius:0 !important; cursor:pointer; color:#522c25 !important; font:inherit; display:inline-flex; align-items:center; gap:8px; transition:color .2s; }
.esp-mzh__share:hover, .esp-mzh__share:focus { background:none !important; color:#8B3A00 !important; }
.esp-mzh__share svg { color:#c46500; }
.esp-mzh__share:hover svg { color:#8B3A00; }
.esp-mzh__img { aspect-ratio:21/8; overflow:hidden; border-top:1px solid #e6dad4; }
.esp-mzh__img img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; }

/* ── Content (TOC + article) ── */
.esp-mzc { display:flex; gap:48px; align-items:flex-start; padding:56px 48px; }
.esp-mzc__toc-wrap { width:260px; flex-shrink:0; position:sticky; top:92px; align-self:flex-start; }
.esp-mzc__toc-label { color:#75605a; font-size:15px; letter-spacing:.14em; text-transform:uppercase; opacity: 1; margin:0 0 16px; }
.esp-mzc__toc { display:flex; flex-direction:column; border-right:2px solid #e6dad4; }
.esp-mzc__toc-link { margin-right:-2px; border-right:2px solid transparent; padding:8px 16px 8px 0; font-size:19px; color:#75605a; opacity: 1; text-decoration:none; transition:all .2s; }
.esp-mzc__toc-link:hover { opacity: 1; color:#8B3A00; }
.esp-mzc__toc-link.is-active { border-right-color:#c46500; color:#8B3A00; opacity: 1; font-weight:700; }
.esp-mzc__shop { margin-top:32px; display:flex; align-items:center; justify-content:center; gap:4px; background:#8B3A00; color:#fff; font-size:18px; letter-spacing:.04em; text-decoration:none; padding:12px; border-radius:8px; transition:background-color .2s; }
.esp-mzc__shop:hover { background:#a34500; }
.esp-mzc__article { flex:1; min-width:0; max-width:760px; }
.esp-mzc__section { scroll-margin-top:100px; margin-bottom:8px; }
.esp-mzc__h2, .esp-mzc__from-content h2 { color:#522c25; font-size:34px; font-weight:700; letter-spacing:.02em; margin:28px 0 14px; scroll-margin-top:100px; }
.esp-mzc__text p, .esp-mzc__from-content p { color:#522c25; font-size:19px; line-height:1.75; margin:0 0 16px; }
.esp-mzc__text strong { font-weight:700; }
.esp-mzc__from-content { color:#522c25; }
.esp-mzc__from-content img { max-width:100%; height:auto; border-radius:12px; }

/* Quote */
.esp-mzc__quote { margin:28px 0; padding:8px 24px; border-right:4px solid #c46500; color:#8B3A00; font-size:26px; line-height:1.4; font-weight:700; font-style:italic; }

/* Figure + caption */
.esp-mzc__figure { margin:28px 0; }
.esp-mzc__figure img { width:100%; height:auto; border-radius:16px; display:block; }
.esp-mzc__figure figcaption { color:#75605a; opacity: 1; font-size:15px; margin-top:10px; text-align:center; }

/* Icon cards (tips) */
.esp-mzc__iconcards { display:grid; grid-template-columns:repeat(var(--esp-mzc-cols,2),1fr); gap:16px; margin:32px 0; }
.esp-mzc__iconcard { background:#fff; border:1px solid #e6dad4; border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:6px; }
.esp-mzc__iccard-title { display:flex; align-items:center; gap:8px; color:#522c25; font-size:21px; font-weight:700; }
.esp-mzc__icon { width:36px; height:36px; border-radius:10px; background:#f6ede3; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.esp-mzc__icon svg { color:#c46500; }
.esp-mzc__iccard-text { color:#522c25; opacity:.7; font-size:17px; line-height:1.6; }

/* Blend / badge cards */
.esp-mzc__blends { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:32px 0; }
.esp-mzc__blend { background:#f6ede3; border:1px solid #e6dad4; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.esp-mzc__blend-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.esp-mzc__blend-name { color:#8B3A00; font-size:28px; font-weight:700; line-height:1; }
.esp-mzc__blend-badge { color:#fff; font-size:14px; padding:4px 12px; border-radius:999px; }
.esp-mzc__blend-sub { color:#c46500; font-size:19px; font-weight:700; }
.esp-mzc__blend-text { color:#522c25; font-size:18px; opacity:.75; line-height:1.7; }

/* Plain cards */
.esp-mzc__cards { display:grid; grid-template-columns:repeat(var(--esp-mzc-cols,2),1fr); gap:20px; margin:32px 0; }
.esp-mzc__card { background:#f6ede3; border:1px solid #e6dad4; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.esp-mzc__card-title { color:#8B3A00; font-size:28px; font-weight:700; line-height:1; }
.esp-mzc__card-text { color:#522c25; font-size:18px; opacity:.75; line-height:1.7; }

/* Inline button */
.esp-mzc__btn { display:inline-flex; align-items:center; gap:4px; background:#8B3A00; color:#fff; font-size:19px; letter-spacing:.04em; text-decoration:none; padding:12px 24px; border-radius:8px; margin:16px 0; transition:background-color .2s; }
.esp-mzc__btn:hover { background:#a34500; }

/* Author box */
.esp-mzc__author { display:flex; align-items:center; gap:16px; background:#f6ede3; border:1px solid #e6dad4; border-radius:16px; padding:24px; margin-top:48px; }
.esp-mzc__author-avatar { width:64px; height:64px; border-radius:999px; background:#8B3A00; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; flex-shrink:0; }
.esp-mzc__author-name { color:#522c25; font-size:22px; font-weight:700; margin:0; }
.esp-mzc__author-bio { color:#75605a; font-size:18px; opacity: 1; line-height:1.4; margin:2px 0 0; }

/* ── CTA ── */
.esp-mzcta { background:#522c25; text-align:center; padding:64px 48px; }
.esp-mzcta__title { color:#fff9f2; font-size:44px; line-height:1.1; font-weight:700; letter-spacing:.03em; max-width:820px; margin:0 auto; }
.esp-mzcta__subtitle { color:#fff9f2; font-size:22px; opacity:.7; margin:16px auto 0; max-width:780px; line-height:1.5; }
.esp-mzcta__buttons { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:32px; }
.esp-mzcta__btn { display:inline-flex; align-items:center; gap:8px; font-size:22px; letter-spacing:.04em; text-decoration:none; padding:14px 32px; border-radius:8px; transition:background-color .2s,border-color .2s; }
.esp-mzcta__btn--primary { background:#c46500; color:#fff; }
.esp-mzcta__btn--primary:hover { background:#a34500; }
.esp-mzcta__btn--ghost { border:2px solid rgba(255,249,242,.4); color:#fff9f2; }
.esp-mzcta__btn--ghost:hover { background:rgba(255,249,242,.1); }
.esp-mzcta__footnote { color:#c46500; font-size:22px; font-weight:700; margin-top:28px; }
.esp-mzcta__footnote img.emoji { height:1em !important; width:1em !important; vertical-align:-0.1em; margin:0 .15em; display:inline; }

/* ── Recommended grid ── */
.esp-mzrec { border-top:1px solid #e6dad4; background:#f6ede3; padding:56px 48px; }
.esp-mzrec__title { color:#522c25; font-size:44px; font-weight:700; letter-spacing:.03em; margin:0 0 8px; }
.esp-mzrec__subtitle { color:#75605a; font-size:20px; opacity: 1; margin:0 0 36px; }
.esp-mzrec__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.esp-mzrec__card { display:flex; flex-direction:column; background:#fff9f2; border:1px solid #e6dad4; border-radius:12px; overflow:hidden; text-decoration:none; position:relative; transition:border-color .2s, box-shadow .3s; }
.esp-mzrec__card:hover { border-color:#c46500; box-shadow:0 8px 30px rgba(82,44,37,.08); }
.esp-mzrec__badge { position:absolute; top:16px; inset-inline-start:16px; right:auto; left:auto; z-index:3; color:#fff !important; font-size:13px; line-height:1.4; padding:4px 12px; border-radius:999px; }
.esp-mzrec__card:hover .esp-mzrec__badge { color:#fff !important; }
.esp-mzrec__img { aspect-ratio:1/1; background:#f6ede3; overflow:hidden; }
.esp-mzrec__img img { width:100% !important; height:100% !important; object-fit:contain !important; mix-blend-mode:multiply; padding:32px; box-sizing:border-box; }
.esp-mzrec__body { padding:24px; display:flex; flex-direction:column; gap:8px; border-top:1px solid #e6dad4; flex:1; }
.esp-mzrec__brand { color:#c46500; font-size:15px; font-weight:700; letter-spacing:.08em; }
.esp-mzrec__name { color:#522c25; font-size:24px; font-weight:700; line-height:1.15; margin:0; }
.esp-mzrec__desc { color:#75605a; font-size:16px; opacity: 1; line-height:1.35; margin:0; }
.esp-mzrec__tags { display:flex; flex-wrap:wrap; gap:6px; }
.esp-mzrec__tag { font-size:13px; color:#522c25; background:#f6ede3; border:1px solid #e6dad4; border-radius:999px; padding:2px 10px; }
.esp-mzrec__rating { display:flex; align-items:center; gap:6px; }
.esp-mzrec__stars { display:inline-flex; gap:2px; color:#c46500; }
.esp-mzrec__rtext { color:#75605a; font-size:14px; opacity: 1; }
.esp-mzrec__footer { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid #e6dad4; }
.esp-mzrec__prices { display:flex; align-items:baseline; gap:8px; }
.esp-mzrec__price { color:#522c25; font-size:26px; font-weight:700; display:inline-flex; align-items:baseline; gap:.2em; }
.esp-mzrec__old { color:#522c25; font-size:17px; opacity:.3; text-decoration:line-through; display:inline-flex; align-items:baseline; gap:.2em; }
.esp-mzrec__cart { flex-shrink:0; width:40px; height:40px; border-radius:8px; background:#8B3A00; color:#fff; display:flex; align-items:center; justify-content:center; transition:background-color .2s; }
.esp-mzrec__cart:hover { background:#a34500; }

/* ── Magazine archive (listing) ── */
.esp-mzarch { background:#fff9f2; padding:56px 48px; }
.esp-mzarch__head { max-width:760px; margin:0 0 36px; }
.esp-mzarch__eyebrow { display:block; color:#c46500; font-size:18px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.esp-mzarch__title { color:#522c25; font-size:48px; line-height:1.1; font-weight:700; letter-spacing:.02em; margin:10px 0 0; }
.esp-mzarch__subtitle { color:#75605a; font-size:21px; opacity: 1; line-height:1.5; margin:14px 0 0; }
.esp-mzarch__grid { display:grid; grid-template-columns:repeat(var(--esp-mzarch-cols,3),1fr); gap:28px; }
.esp-mzarch__card { display:flex; flex-direction:column; background:#fff; border:1px solid #e6dad4; border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .2s, box-shadow .3s, transform .2s; }
.esp-mzarch__card:hover { border-color:#c46500; box-shadow:0 8px 30px rgba(82,44,37,.08); transform:translateY(-2px); }
.esp-mzarch__img { aspect-ratio:16/10; background:#f6ede3; overflow:hidden; }
.esp-mzarch__img img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform .4s; }
.esp-mzarch__card:hover .esp-mzarch__img img { transform:scale(1.04); }
.esp-mzarch__body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.esp-mzarch__meta { display:flex; align-items:center; gap:10px; font-size:14px; color:#522c25; }
.esp-mzarch__cat { color:#c46500; font-weight:700; letter-spacing:.06em; }
.esp-mzarch__date { opacity: 1; color: #75605a; }
.esp-mzarch__date::before { content:"·"; margin-inline-end:10px; opacity:.6; }
.esp-mzarch__name { color:#522c25; font-size:24px; font-weight:700; line-height:1.25; margin:0; transition:color .2s; }
.esp-mzarch__card:hover .esp-mzarch__name { color:#8B3A00; }
.esp-mzarch__excerpt { color:#75605a; font-size:16px; opacity: 1; line-height:1.55; margin:0; }
.esp-mzarch__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:14px; }
.esp-mzarch__more { display:inline-flex; align-items:center; gap:4px; color:#8B3A00; font-size:17px; font-weight:700; }
.esp-mzarch__read { display:inline-flex; align-items:center; gap:6px; color:#75605a; opacity: 1; font-size:14px; }
.esp-mzarch__read svg { color:#c46500; }
.esp-mzarch__pager { display:flex; justify-content:center; gap:8px; margin-top:44px; }
.esp-mzarch__page { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid #e6dad4; border-radius:10px; background:#fff; color:#522c25; text-decoration:none; font-size:18px; transition:all .2s; }
a.esp-mzarch__page:hover { border-color:#c46500; color:#8B3A00; }
.esp-mzarch__page.current { background:#8B3A00; border-color:#8B3A00; color:#fff; }

/* ── Responsive ── */
@media (max-width:1024px) {
    .esp-mzh__crumbs, .esp-mzh__head-inner { padding-left:24px; padding-right:24px; }
    .esp-mzh__title { font-size:40px; }
    .esp-mzh__subtitle { font-size:21px; }
    .esp-mzc { flex-direction:column; padding:40px 24px; gap:32px; }
    .esp-mzc__toc-wrap { display:none; }
    .esp-mzc__iconcards, .esp-mzc__cards, .esp-mzc__blends { grid-template-columns:1fr; }
    .esp-mzcta { padding:48px 24px; } .esp-mzcta__title { font-size:34px; }
    .esp-mzrec { padding:48px 24px; } .esp-mzrec__title { font-size:34px; }
    .esp-mzrec__grid { grid-template-columns:repeat(2,1fr); }
    .esp-mzarch { padding:40px 24px; } .esp-mzarch__title { font-size:36px; }
    .esp-mzarch__grid { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px) {
    .esp-mzh__title { font-size:32px; }
    .esp-mzrec__grid { grid-template-columns:1fr; }
    .esp-mzarch__grid { grid-template-columns:1fr !important; }
}