/* =====================================================================
   Calcnio guides: magazine layout (/blog, /blog?category=, /blog/<slug>),
   comments and questions, and Admin > Comments.
   Loaded only on those pages, after style.css (whose tokens it uses).
   Brand: blue #1d43c8, navy #0b2a8f, soft #ebf0ff, amber #f5a524.
   ===================================================================== */

:root {
  --amber: #f5a524;
  --amber-ink: #8a5a00;
  --amber-soft: #fff4dc;
  --mag-radius: 18px;
  --mag-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .06);
  --mag-shadow-hover: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 40px rgba(29, 67, 200, .14);
}

/* ---------- category colours: --cat (dot/accent), --cat-ink (text on --cat-soft), three cover tones ---------- */
.cat-all { --cat: #0b2a8f; --cat-ink: #0b2a8f; --cat-soft: #ebf0ff; --c1a: #0b2a8f; --c2a: #1d43c8; --c1b: #0b2a8f; --c2b: #3563f0; --c1c: #1d43c8; --c2c: #5b7cff; }
.cat-loans { --cat: #1d43c8; --cat-ink: #1d43c8; --cat-soft: #e8edff; --c1a: #1d43c8; --c2a: #5b7cff; --c1b: #0b2a8f; --c2b: #3563f0; --c1c: #2f3fbf; --c2c: #7a63f2; }
.cat-mortgages { --cat: #0b6e66; --cat-ink: #0a645d; --cat-soft: #ddf3ef; --c1a: #0b6e66; --c2a: #2fa596; --c1b: #075d70; --c2b: #1f9cb5; --c1c: #0f5f57; --c2c: #46ae80; }
.cat-debt { --cat: #c2531a; --cat-ink: #9f3a0b; --cat-soft: #fdebdf; --c1a: #b4430f; --c2a: #ee8a3e; --c1b: #a3301c; --c2b: #e3664a; --c1c: #97480d; --c2c: #dd9a1e; }
.cat-saving { --cat: #0b7a50; --cat-ink: #096b46; --cat-soft: #def4e8; --c1a: #0b7a50; --c2a: #2fb57a; --c1b: #0a6658; --c2b: #2ca58c; --c1c: #2c7a1e; --c2c: #74b52e; }
.cat-budgeting { --cat: #5232c9; --cat-ink: #4a2db8; --cat-soft: #ece8fd; --c1a: #5232c9; --c2a: #8a73f5; --c1b: #3d2a9c; --c2b: #7357ee; --c1c: #6a2fb8; --c2c: #a86ae0; }
.cat-health { --cat: #4b8a1c; --cat-ink: #356b11; --cat-soft: #eaf5dd; --c1a: #3f7d16; --c2a: #86c13c; --c1b: #2f6b2a; --c2b: #5fae3f; --c1c: #4f7a10; --c2c: #a3b81f; }
.cat-math { --cat: #a3279a; --cat-ink: #8e1d82; --cat-soft: #f8e6f6; --c1a: #8e1d82; --c2a: #d45fc7; --c1b: #6f1f86; --c2b: #b85bd6; --c1c: #a3215f; --c2c: #e0679b; }
.cat-documents { --cat: #b0234b; --cat-ink: #a01f44; --cat-soft: #fce6ec; --c1a: #b0234b; --c2a: #e8607f; --c1b: #8f1d5c; --c2b: #d4508e; --c1c: #b33a2a; --c2c: #ec7a5e; }
.cat-other { --cat: #334155; --cat-ink: #334155; --cat-soft: #eef1f6; --c1a: #334155; --c2a: #64748b; --c1b: #1e293b; --c2b: #475569; --c1c: #3b4a63; --c2c: #7c8aa5; }
.tone-0 { --g1: var(--c1a); --g2: var(--c2a); }
.tone-1 { --g1: var(--c1b); --g2: var(--c2b); }
.tone-2 { --g1: var(--c1c); --g2: var(--c2c); }

/* ---------- category chip ---------- */
.mag-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--cat-soft); color: var(--cat-ink); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mag-chip .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cat); }
a.mag-chip:hover { color: var(--cat-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 35%, transparent); }

/* ---------- typographic cover (guides without a photo) ---------- */
.mag-cover { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; color: #fff;
  background: linear-gradient(205deg, var(--g2, var(--c2a)), var(--g1, var(--c1a)) 78%); }
.mag-cover::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom left, #000 10%, transparent 75%); mask-image: linear-gradient(to bottom left, #000 10%, transparent 75%); }
.mag-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .26), transparent 46%), linear-gradient(to top, rgba(4, 12, 40, .30), transparent 55%); }
.mag-cover.pat-0::before { background: radial-gradient(rgba(255, 255, 255, .30) 1.1px, transparent 1.7px) 0 0 / 15px 15px; }
.mag-cover.pat-1::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 13px); }
.mag-cover.pat-2::before { background: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) 0 0 / 22px 22px; }
.mag-cover.pat-3::before { background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .16) 0 1.5px, transparent 1.5px 17px); }
.mag-cover-icon { position: absolute; z-index: 1; top: 9%; right: 6%; width: 30%; max-width: 150px; height: auto; aspect-ratio: 1; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .26; }
.mag-cover-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 7cqi 7cqi 6.5cqi; }
.mag-cover-text::before { content: ""; width: 30px; height: 3px; border-radius: 2px; background: var(--amber); margin-bottom: 4px; }
.mag-cover-big { font-family: var(--serif); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; text-shadow: 0 1px 12px rgba(4, 12, 40, .18); max-width: 88%; }
.mag-cover-big.size-xl { font-size: clamp(1.75rem, 15cqi, 5.5rem); letter-spacing: -0.03em; }
.mag-cover-big.size-l { font-size: clamp(1.5rem, 10.5cqi, 4rem); }
.mag-cover-big.size-m { font-size: clamp(1.25rem, 8.2cqi, 3rem); }
.mag-cover-big.size-s { font-size: clamp(1.125rem, 6.8cqi, 2.5rem); }
.mag-cover-big em { display: inline-block; font-family: var(--font); font-style: normal; font-weight: 700; font-size: .36em; letter-spacing: .08em; text-transform: uppercase; color: #2b1d00; background: var(--amber); padding: .2em .55em; border-radius: 999px; vertical-align: .38em; margin: 0 .3em; text-shadow: none; }
.mag-cover-sub { font-size: clamp(.75rem, 3.9cqi, 1.125rem); font-weight: 600; line-height: 1.3; opacity: .92; max-width: 92%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container (max-width: 170px) {
  .mag-cover-text { display: none; }
  .mag-cover-icon { top: 50%; right: 50%; transform: translate(50%, -50%); width: 46%; opacity: .9; stroke-width: 1.6; }
}

/* ---------- masthead and category tiles ---------- */
.mag-top { position: relative; padding: 34px 0 26px; border-bottom: 1px solid var(--border); overflow: hidden;
  background: radial-gradient(640px 320px at 92% -12%, rgba(29, 67, 200, .13), transparent 70%), radial-gradient(420px 240px at 64% -8%, rgba(245, 165, 36, .12), transparent 70%), linear-gradient(180deg, #f5f8ff, #fff 85%); }
.mag-top.is-category { background: radial-gradient(640px 320px at 92% -12%, color-mix(in srgb, var(--cat) 18%, transparent), transparent 70%), radial-gradient(420px 240px at 64% -8%, rgba(245, 165, 36, .10), transparent 70%), linear-gradient(180deg, var(--cat-soft), #fff 88%); }
.mag-masthead { display: grid; gap: 18px 40px; align-items: end; }
@media (min-width: 900px) { .mag-masthead { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); } }
.mag-masthead h1 { margin: 0 0 .3em; max-width: 22ch; text-wrap: balance; }
.mag-masthead .lead { margin: 0; font-size: 1.125rem; color: var(--text-2); max-width: 58ch; }
.mag-masthead .breadcrumbs { margin-bottom: 14px; }
.mag-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.is-category .mag-kicker { color: var(--cat-ink); }
.mag-kicker-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 165, 36, .22); }
.mag-cat-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, var(--c2a), var(--c1a)); box-shadow: 0 6px 14px -6px var(--cat); }
.mag-cat-badge svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mag-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--mag-shadow); }
.mag-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mag-search > svg { width: 18px; height: 18px; flex: none; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.mag-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1rem; background: transparent; color: var(--text); padding: 9px 4px; }
.mag-search button { flex: none; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; }
.mag-search button:hover { background: var(--accent); }

.mag-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 136px; gap: 10px; margin: 24px -16px 0; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
.mag-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .mag-tiles { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; scroll-padding: 0 28px; } }
@media (min-width: 1020px) { .mag-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); margin: 26px 0 0; padding: 0; overflow: visible; } }
.mag-tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 118px; padding: 14px 12px 12px; border-radius: 14px; text-decoration: none; color: var(--text); scroll-snap-align: start;
  background: linear-gradient(180deg, var(--cat-soft), #fff 72%); border: 1px solid color-mix(in srgb, var(--cat) 16%, var(--border)); transition: transform .15s, box-shadow .15s, border-color .15s; }
.mag-tile:hover { color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--cat) 55%, transparent); box-shadow: 0 10px 24px -14px var(--cat); }
.mag-tile-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(150deg, var(--c2a), var(--c1a)); box-shadow: 0 6px 14px -8px var(--cat); }
.mag-tile-icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mag-tile-name { font-weight: 650; font-size: .875rem; line-height: 1.25; }
.mag-tile-count { margin-top: auto; padding-top: 4px; font-size: .75rem; color: var(--muted); }
.mag-tile.is-active { background: linear-gradient(150deg, var(--c1a), var(--c2a)); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -14px var(--cat); }
.mag-tile.is-active .mag-tile-count { color: rgba(255, 255, 255, .85); }
.mag-tile.is-active .mag-tile-icon { background: #fff; }
.mag-tile.is-active .mag-tile-icon svg { stroke: var(--cat); }

/* ---------- featured guide + "Also new" ---------- */
.mag-lead { display: grid; gap: 22px; margin: 30px 0 0; }
@media (min-width: 1020px) { .mag-lead { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 30px; } }
.mag-hero { position: relative; display: block; min-height: 400px; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 22px 50px -26px rgba(11, 42, 143, .55); isolation: isolate; }
@media (min-width: 1020px) { .mag-hero { min-height: 470px; } }
.mag-hero:hover { color: #fff; }
.mag-hero-media { position: absolute; inset: 0; z-index: -1; }
.mag-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mag-hero:hover .mag-hero-media img { transform: scale(1.03); }
.mag-hero-media .mag-cover-text { display: none; }
.mag-hero-media .mag-cover-icon { width: 34%; top: 10%; right: 7%; opacity: .3; }
.mag-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 16, 50, 0) 22%, rgba(6, 16, 50, .55) 55%, rgba(6, 16, 50, .92) 100%); }
.mag-hero-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3.4vw, 36px); }
.mag-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mag-flag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--amber); color: #2b1d00; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mag-hero .mag-chip { background: rgba(255, 255, 255, .94); }
.mag-hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; max-width: 26ch; }
.mag-hero-excerpt { color: rgba(255, 255, 255, .86); font-size: 1rem; line-height: 1.55; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-hero .mag-meta { color: rgba(255, 255, 255, .8); }
.mag-hero-go { align-self: flex-start; margin-top: 2px; font-weight: 700; font-size: .9375rem; padding-bottom: 2px; border-bottom: 2px solid var(--amber); }

.mag-fresh { display: flex; flex-direction: column; }
.mag-label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.mag-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.mag-fresh ol { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; }
.mag-fresh li + li { border-top: 1px solid var(--border); }
.mag-fresh a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; text-decoration: none; color: var(--text); height: 100%; }
.mag-fresh-thumb { display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--cat-soft); }
.mag-fresh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mag-fresh a:hover img { transform: scale(1.05); }
.mag-fresh-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mag-fresh-title { font-family: var(--serif); font-weight: 600; font-size: 1.0938rem; line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-fresh a:hover .mag-fresh-title { color: var(--accent); }
.mag-fresh-meta { font-size: .8125rem; color: var(--muted); }

/* ---------- content + sidebar ---------- */
.mag-layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
@media (min-width: 1020px) { .mag-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; } }
.mag-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 20px; }
.mag-section-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.mag-section-head h2::before { content: ""; width: 6px; height: 1.05em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--amber)); }
.mag-section-note { font-size: .875rem; color: var(--muted); }
.mag-section-link { font-weight: 600; font-size: .9375rem; text-decoration: none; }
.mag-result-note { margin: -6px 0 18px; color: var(--text-2); }
.mag-empty { padding: 22px; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface-2); }
.mag-empty p { margin: 0; }

/* ---------- article cards ---------- */
.mag-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mag-card { display: flex; }
.mag-card-link { display: flex; flex-direction: column; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--mag-radius); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--mag-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.mag-card-link:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--mag-shadow-hover); border-color: color-mix(in srgb, var(--cat) 30%, var(--border)); }
.mag-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cat-soft); }
.mag-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.mag-card-link:hover .mag-card-media img { transform: scale(1.045); }
.mag-card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--cat), var(--amber)); opacity: 0; transition: opacity .18s; }
.mag-card-link:hover .mag-card-media::after { opacity: 1; }
.mag-card-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 16px 18px 16px; }
.mag-card-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.22; letter-spacing: -0.012em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-card-link:hover .mag-card-title { color: var(--accent); }
.mag-card-excerpt { color: var(--text-2); font-size: .9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .8125rem; color: var(--muted); }
.mag-card .mag-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.mag-meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mag-meta-item svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mag-meta-comments { margin-left: auto; }
.mag-hero .mag-meta-comments { margin-left: 0; }

/* ---------- pager ---------- */
.mag-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 34px 0 0; }
.mag-pager-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.mag-pager-btn:hover { border-color: var(--accent); color: var(--accent); }
.mag-pager-btn.is-disabled { opacity: .4; }
@media (max-width: 560px) {
  .mag-pager { gap: 6px; }
  .mag-pager-btn { padding: 8px 12px; font-size: .875rem; }
  .mag-pager-btn.is-disabled { display: none; }
  .mag-pager-pages a, .mag-pager-pages span { min-width: 34px; height: 34px; }
}
.mag-pager-pages { display: flex; gap: 4px; }
.mag-pager-pages a, .mag-pager-pages span { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--text-2); }
.mag-pager-pages a:hover { background: var(--accent-soft); color: var(--accent); }
.mag-pager-pages .is-current { background: var(--navy); color: #fff; }
.mag-pager-pages .gap { min-width: 20px; }

/* ---------- sidebar ---------- */
.mag-side { display: grid; gap: 20px; align-content: start; }
@media (min-width: 640px) and (max-width: 1019px) { .mag-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mag-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.mag-box-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.mag-box-title::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--amber); }
.mag-box p { font-size: .9375rem; color: var(--text-2); }
.mag-box-more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9063rem; text-decoration: none; }

.mag-about { position: relative; overflow: hidden; border: 0; color: #fff; background: radial-gradient(260px 160px at 100% 0%, rgba(245, 165, 36, .28), transparent 70%), linear-gradient(155deg, #0b2a8f, #1d43c8 85%); }
.mag-about::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(to bottom left, #000, transparent 60%); mask-image: linear-gradient(to bottom left, #000, transparent 60%); }
.mag-about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mag-about h2 { margin: 0; font-size: 1.375rem; color: #fff; }
.mag-about-mark { width: 40px; height: 40px; flex: none; }
.mag-about-mark rect { fill: #fff; }
.mag-about-mark path { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.mag-about-mark circle { fill: var(--amber); }
.mag-about p { position: relative; z-index: 1; color: rgba(255, 255, 255, .88); margin: 0 0 12px; }
.mag-about-link { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: 1px; }
.mag-about-link:hover { color: #fff; border-bottom-color: #fff; }

.mag-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: mini; }
.mag-mini li { counter-increment: mini; }
.mag-mini a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px; margin: 0 -7px; border-radius: 12px; text-decoration: none; color: var(--text); }
.mag-mini a:hover { background: var(--surface-2); color: var(--text); }
.mag-mini-thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: visible; display: grid; place-items: center; background: linear-gradient(150deg, var(--g2), var(--g1)); }
.mag-mini-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; }
.mag-mini-thumb svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mag-mini-thumb::after { content: counter(mini); position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #2b1d00; font-size: .75rem; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.mag-mini-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mag-mini-title { font-weight: 650; font-size: .9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-mini a:hover .mag-mini-title { color: var(--accent); }
.mag-mini-meta { font-size: .78rem; color: var(--muted); }

.mag-catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mag-catlist a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 550; font-size: .9375rem; }
.mag-catlist a:hover { background: var(--cat-soft); color: var(--cat-ink); }
.mag-catlist a.is-active { background: var(--cat-soft); color: var(--cat-ink); font-weight: 700; }
.mag-catlist .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cat); flex: none; }
.mag-count { margin-left: auto; min-width: 28px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--cat-soft); color: var(--cat-ink); font-size: .78rem; font-weight: 700; }
.mag-catlist a:hover .mag-count, .mag-catlist a.is-active .mag-count { background: #fff; }

.mag-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mag-tools a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 550; font-size: .9375rem; }
.mag-tools a:hover { background: var(--accent-soft); color: var(--accent); }
.mag-tool-icon { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); }
.mag-tool-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mag-follow { background: linear-gradient(160deg, var(--amber-soft), #fff 80%); border-color: #f6dfae; }
.mag-follow p { margin: 0 0 14px; }
.mag-follow-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; font-size: .9063rem; }
.mag-follow-btn:hover { background: var(--accent); color: #fff; }
.mag-follow-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- call to action ---------- */
.mag-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 56px; padding: clamp(24px, 4vw, 36px); border-radius: 22px; color: #fff;
  background: radial-gradient(380px 220px at 100% 100%, rgba(245, 165, 36, .35), transparent 70%), linear-gradient(135deg, #0b2a8f, #1d43c8 70%, #3d62ec); }
.mag-cta h2 { color: #fff; margin: 0 0 4px; }
.mag-cta p { margin: 0; color: rgba(255, 255, 255, .86); }
.mag-cta-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 11px; background: var(--amber); color: #1a1300; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.mag-cta-btn:hover { background: #ffb940; color: #1a1300; }

/* =====================================================================
   Guide page
   ===================================================================== */
.art-hero { position: relative; padding: 30px 0 34px; border-bottom: 1px solid var(--border);
  background: radial-gradient(700px 340px at 95% -10%, color-mix(in srgb, var(--cat) 15%, transparent), transparent 70%), radial-gradient(420px 240px at 55% -10%, rgba(245, 165, 36, .10), transparent 70%), linear-gradient(180deg, var(--cat-soft), #fff 92%); }
.art-hero-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 960px) { .art-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 48px; } }
.art-hero h1 { max-width: 24ch; margin-bottom: .35em; text-wrap: balance; }
.art-hero .lead { font-size: 1.1875rem; color: var(--text-2); max-width: 62ch; margin: 0; }
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.art-readtime { display: inline-flex; align-items: center; gap: 6px; font-size: .8438rem; color: var(--text-2); }
.art-readtime svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.art-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--cat) 14%, var(--border)); font-size: .9375rem; line-height: 1.4; }
.art-byline .avatar { background: var(--navy); color: #fff; }
.art-byline-text { display: flex; flex-direction: column; }
.art-byline-text a { font-weight: 700; color: var(--text); text-decoration: none; }
.art-byline-text a:hover { color: var(--accent); }
.art-byline .muted { font-size: .875rem; }
.art-comments-link { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .875rem; text-decoration: none; box-shadow: var(--mag-shadow); }
.art-comments-link:hover { border-color: var(--accent); color: var(--accent); }
.art-comments-link svg { width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linejoin: round; }
.art-hero-media { margin: 0; }
.art-hero-media img, .art-hero-media .mag-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; box-shadow: 0 26px 50px -28px rgba(11, 42, 143, .5); }
.art-hero-media figcaption { margin-top: 8px; font-size: .75rem; color: var(--muted); text-align: right; }
@media (max-width: 959px) { .art-comments-link { margin-left: 0; } .art-hero-media img, .art-hero-media .mag-cover { border-radius: 16px; } }

.art-main { min-width: 0; }
.art-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }

/* =====================================================================
   Comments and questions
   ===================================================================== */
.cm { max-width: 72ch; margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.cm-head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.cm-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font); font-size: .875rem; font-weight: 700; }
.cm-head p { margin: 0 0 20px; color: var(--text-2); }
.cm-thanks { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: var(--good-soft); color: #075e3d; }
.cm-thanks svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-thanks strong { display: block; }
.cm-thanks span { font-size: .9375rem; }
.cm-empty { margin: 0 0 22px; padding: 16px 18px; border: 1px dashed #cfd6e6; border-radius: 14px; background: var(--surface-2); color: var(--text-2); }

.cm-list, .cm-replies { list-style: none; margin: 0; padding: 0; }
.cm-list { display: grid; gap: 16px; margin-bottom: 28px; }
.cm-item { scroll-margin-top: 90px; }
.cm-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cm-card.is-question { border-left: 4px solid var(--amber); }
.cm-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cm-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cm-name { font-weight: 700; overflow-wrap: anywhere; }
.cm-who time { font-size: .8125rem; color: var(--muted); }
.cm-label { margin-left: auto; flex: none; padding: 3px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-size: .6875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cm-team { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .6875rem; font-weight: 700; vertical-align: 1px; }
.cm-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9375rem; }
.cm-avatar.tint-0 { background: #e8edff; color: #1d43c8; }
.cm-avatar.tint-1 { background: #ddf3ef; color: #0a645d; }
.cm-avatar.tint-2 { background: #ece8fd; color: #4a2db8; }
.cm-avatar.tint-3 { background: #fdebdf; color: #9f3a0b; }
.cm-avatar.tint-4 { background: #eaf5dd; color: #356b11; }
.cm-avatar.tint-5 { background: #fce6ec; color: #a01f44; }
.cm-avatar-brand svg { width: 38px; height: 38px; }
.cm-avatar-brand rect { fill: var(--accent); }
.cm-avatar-brand path { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.cm-avatar-brand circle { fill: var(--amber); }
.cm-body { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.cm-body p { margin: 0 0 .7em; }
.cm-body p:last-child { margin-bottom: 0; }
.cm-body a { font-weight: 600; }
.cm-replies { display: grid; gap: 12px; margin: 12px 0 0 26px; padding-left: 16px; border-left: 2px solid var(--accent-soft); }
.cm-answer { background: linear-gradient(180deg, #f4f7ff, #fff); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.cm-answer .cm-name { color: var(--navy); }
@media (max-width: 560px) { .cm-replies { margin-left: 8px; padding-left: 12px; } .cm-card { padding: 14px; } }

.cm-closed { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.cm-form { position: relative; display: grid; gap: 16px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(360px 160px at 100% 0%, rgba(245, 165, 36, .10), transparent 70%), var(--surface); box-shadow: var(--mag-shadow); scroll-margin-top: 90px; }
.cm-form h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.375rem; }
.cm-kind { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 12px; background: var(--surface-2); }
.cm-kind label { position: relative; cursor: pointer; }
.cm-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cm-kind span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: .9375rem; color: var(--text-2); transition: background .15s, color .15s; }
.cm-kind span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-kind input:checked + span { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .06); }
.cm-kind input[value="question"]:checked + span { color: var(--amber-ink); }
.cm-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-as { margin: 0; font-size: .9375rem; color: var(--text-2); }
.cm-fields { display: grid; gap: 14px; }
@media (min-width: 560px) { .cm-fields { grid-template-columns: 1fr 1fr; } .cm-fields.is-single { grid-template-columns: minmax(0, 360px); } }
.cm-form textarea { min-height: 130px; line-height: 1.55; }
.cm-hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: .8125rem; color: var(--muted); }
.cm-hint .is-low { color: var(--amber-ink); font-weight: 600; }
.cm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cm-submit .btn { padding: 12px 22px; }
.cm-privacy { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 260px; margin: 0; font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.cm-privacy svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; }
.cm-errors { padding: 12px 16px; border-radius: 12px; background: #fdecea; color: #8a1f11; font-size: .9375rem; }
.cm-errors ul { margin: 6px 0 0; padding-left: 1.2em; }
.cm-noscript { margin: 0; font-size: .875rem; color: var(--amber-ink); }

/* =====================================================================
   Admin > Comments
   ===================================================================== */
.mod-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.mod-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .9063rem; }
.mod-tab span { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-size: .78rem; text-align: center; }
.mod-tab:hover { color: var(--text); border-color: var(--text-2); }
.mod-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.mod-tab.is-active span { background: rgba(255, 255, 255, .2); color: #fff; }
.mod-tab.has-pending span { background: var(--amber); color: #2b1d00; }
.mod-filter select.plain, .mod-bulk select.plain { width: auto; max-width: 340px; }
.mod-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.mod-bulk .check { margin: 0; }
.mod-empty { padding: 24px; }
.mod-empty p { margin: 0 0 4px; }
.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mod-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.mod-item.status-pending { border-left-color: var(--amber); }
.mod-item.status-approved { border-left-color: var(--good); }
.mod-item.status-rejected { border-left-color: #98a2b3; }
.mod-item.status-spam { border-left-color: #c0392b; }
.mod-check input { width: 18px; height: 18px; margin-top: 10px; }
.mod-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.mod-who { flex: 1 1 260px; min-width: 0; }
.mod-name { margin: 0; overflow-wrap: anywhere; }
.mod-email { margin-left: 6px; font-size: .875rem; }
.mod-sub { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }
.mod-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mod-badges .cm-label { margin-left: 0; }
.mod-badge { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .75rem; font-weight: 600; }
.mod-status { padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: capitalize; }
.mod-status-pending { background: var(--amber-soft); color: var(--amber-ink); }
.mod-status-approved { background: var(--good-soft); color: var(--good); }
.mod-status-rejected { background: #eef1f6; color: #475167; }
.mod-status-spam { background: #fdecea; color: #a93226; }
.mod-body { margin: 12px 0 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.mod-answer { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: #f4f7ff; }
.mod-answer-head { margin: 0 0 4px; font-size: .8438rem; color: var(--text-2); }
.mod-answer .inline-form { margin: 6px 0 0; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-actions .inline-form { margin: 0; }
.mod-link-btn { border: 0; background: none; padding: 0; color: #a93226; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.mod-replybox { margin-top: 12px; }
.mod-replybox > summary { display: inline-flex; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--accent); }
.mod-replybox[open] > summary { margin-bottom: 10px; }
.mod-help { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .mag-card-link, .mag-card-media img, .mag-hero-media img, .mag-tile, .mag-fresh-thumb img { transition: none !important; }
  .mag-card-link:hover, .mag-tile:hover { transform: none; }
  .mag-card-link:hover .mag-card-media img, .mag-hero:hover .mag-hero-media img, .mag-fresh a:hover img { transform: none; }
}
@media print {
  .mag-side, .mag-tiles, .mag-search, .mag-cta, .cm-form, .art-comments-link { display: none !important; }
}