/* Generated from source/template/assets/css/style.css (prototype v3, 2026-10-14).
   Classes renamed cs- → mona-. Edit the prototype first, then re-port. */
/* ==========================================================================
   DESIGN LAYER — v3 "Tạp chí nhà ở hiện đại". Prefix cs-.
   ========================================================================== */
.mona-wrap{ width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mona-section{ padding-top: var(--section); }
.mona-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-meta); color: var(--muted); }
.mona-chip{ display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
a.mona-chip:hover{ background: var(--accent); color: #fff; }
.mona-title a{ color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .35s var(--ease-out); }
.mona-title a:hover{ background-size: 100% 1.5px; }
.mona-img{ display: block; overflow: hidden; border-radius: var(--r-img); background: var(--surface); aspect-ratio: 3 / 2; }
.mona-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
a.mona-img:hover img, .mona-card:hover .mona-img img{ transform: scale(1.035); }
@media (hover: none){ a.mona-img:hover img, .mona-card:hover .mona-img img{ transform: none; } }
.mona-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.5vw, 32px); }
.mona-head h2{ max-width: 22em; }
.mona-head p{ color: var(--muted); margin: 8px 0 0; max-width: 40em; }
.mona-more{ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; flex-shrink: 0; transition: border-color .2s, background-color .2s; }
.mona-more:hover{ border-color: var(--ink); }
.mona-more svg{ width: 16px; height: 16px; }

/* --- Header ------------------------------------------------------------------ */
.mona-header{ background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; }
.mona-header.is-solid{ border-color: var(--line); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); background: rgba(255,255,255,.88); }
.mona-header__in{ height: var(--hdr-h); display: flex; align-items: center; gap: 20px; }
.mona-logo{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; min-height: 44px; }
.mona-logo__mark{ width: 32px; height: 32px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; }
.mona-logo__mark svg{ width: 18px; height: 18px; }
.mona-logo b{ font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; }
.mona-logo b span{ font-weight: 400; color: var(--muted); }
.mona-nav{ display: none; margin-left: auto; }
.mona-nav ul{ list-style: none; display: flex; gap: 2px; }
.mona-nav a{ display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500; transition: background-color .2s; }
.mona-nav a:hover{ background: var(--surface); }
.mona-nav a[aria-current="page"]{ background: var(--ink); color: #fff; }
.mona-tools{ display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mona-icon-btn{ width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: var(--r-pill); cursor: pointer; text-decoration: none; transition: background-color .2s; }
.mona-icon-btn:hover{ background: var(--surface); }
.mona-icon-btn svg{ width: 21px; height: 21px; }
@media (min-width: 1100px){ .mona-nav{ display: block; } .mona-tools{ margin-left: 8px; } .mona-burger{ display: none; } }
@media (hover: none){ .mona-icon-btn:hover, .mona-nav a:hover{ background: transparent; } }

/* Drawer: a sheet from the right over a dimmed page. */
.mona-drawer{ z-index: 70; transform: none; background: rgba(22,24,26,.42); }  /* above the sticky header (60) */
.mona-drawer.is-open{ transform: none; }
.mona-drawer__scrim{ position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.mona-drawer__panel{ position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(400px, calc(100vw - 16px)); border-radius: var(--r-panel); background: var(--page); display: flex; flex-direction: column; padding: 10px 22px max(22px, env(safe-area-inset-bottom)); transform: translateX(calc(100% + 16px)); transition: transform .5s var(--ease-out); overflow-y: auto; overscroll-behavior: contain; }
.mona-drawer.is-open .mona-drawer__panel{ transform: none; }
.mona-drawer__top{ display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.mona-drawer nav ul{ list-style: none; margin-top: 10px; }
.mona-drawer nav a{ display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.mona-drawer nav a::after{ content: ""; width: 8px; height: 8px; border-top: 1.8px solid var(--muted); border-right: 1.8px solid var(--muted); transform: rotate(45deg); }
.mona-drawer__sub{ display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }
.mona-drawer__sub a{ display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.mona-drawer__foot{ margin-top: auto; padding: 16px; border-radius: 14px; background: var(--surface); color: var(--muted); font-size: var(--fs-meta); }
@media (prefers-reduced-motion: reduce){ .mona-drawer__panel{ transition: none; } }

/* --- Hero: one real house, the lead story laid over it ----------------------- */
.mona-hero{ padding-top: clamp(12px, 2vw, 24px); }
.mona-hero__box{ position: relative; }
.mona-hero__img{ aspect-ratio: 16 / 10; border-radius: var(--r-panel); }
.mona-hero__img img{ object-position: 50% 60%; }
.mona-hero__card{ position: relative; z-index: 2; background: var(--page); border-radius: var(--r-panel); padding: 22px 4px 0; }
.mona-hero__card h1{ margin: 12px 0 12px; }
.mona-hero__card p{ color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; margin-bottom: 16px; }
@media (min-width: 900px){
	.mona-hero__img{ aspect-ratio: 21 / 9; }
	.mona-hero__card{ position: absolute; left: 24px; bottom: 24px; width: min(560px, 48%); padding: 30px 32px 28px; box-shadow: 0 12px 40px rgba(22,24,26,.12); }
}

/* Category pills */
.mona-pills{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: clamp(28px, 3.5vw, 44px) 0 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.mona-pills::-webkit-scrollbar{ display: none; }
.mona-pills a{ flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500; transition: background-color .2s, color .2s; }
.mona-pills a:hover{ background: #E9E4DA; }
.mona-pills a[aria-current="page"]{ background: var(--ink); color: #fff; }

/* --- Bento: latest + the estimator -------------------------------------------- */
.mona-bento{ display: grid; gap: 28px 24px; padding-top: clamp(24px, 3vw, 36px); }
.mona-card{ display: grid; align-content: start; gap: 12px; }
.mona-card h3{ font-size: var(--fs-h3); line-height: 1.35; }
.mona-card p{ color: var(--muted); font-size: var(--fs-small); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mona-card--big h3{ font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); line-height: 1.3; }
.mona-card--big .mona-img{ aspect-ratio: 4 / 3; }
@media (min-width: 720px){ .mona-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .mona-card--big, .mona-tool{ grid-column: 1 / -1; } }
@media (min-width: 1080px){
	.mona-bento{ grid-template-columns: 1.35fr 1fr 1fr; grid-template-areas: "big a b" "big tool tool"; }
	.mona-card--big{ grid-area: big; }
	.mona-card--a{ grid-area: a; } .mona-card--b{ grid-area: b; }
	.mona-tool{ grid-area: tool; }
	.mona-card--big .mona-img{ aspect-ratio: 4 / 4.2; }
}

.mona-tool{ background: var(--surface); border-radius: var(--r-panel); padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 18px; align-content: start; }
.mona-tool__head h2{ font-size: 1.35rem; line-height: 1.3; }
.mona-tool__head p{ color: var(--muted); font-size: var(--fs-small); margin: 6px 0 0; }
.mona-tool form{ display: grid; gap: 14px; }
@media (min-width: 560px){ .mona-tool__fields{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } }
.mona-field{ display: grid; gap: 6px; margin-bottom: 0; }
.mona-field label{ font-size: var(--fs-meta); font-weight: 600; }
.mona-input, .mona-select{ width: 100%; min-height: 48px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #D8D2C6; border-radius: 12px; padding: 10px 14px; }
.mona-select{ appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.mona-input:focus, .mona-select:focus{ border-color: var(--accent); outline: 3px solid rgba(31,91,70,.18); outline-offset: 0; }
.mona-tool__out{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; background: #fff; border-radius: 14px; padding: 16px 18px; margin: 0; }
.mona-tool__out div{ display: grid; gap: 2px; }
.mona-tool__out dt{ font-size: var(--fs-meta); color: var(--muted); }
.mona-tool__out dd{ margin: 0; font-weight: 600; }
.mona-tool__total{ white-space: nowrap; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.2; color: var(--accent); }
.mona-tool__note{ font-size: .8125rem; color: var(--muted); margin: 0; line-height: 1.55; }
.mona-tool__note a{ color: var(--accent); font-weight: 600; }

/* --- Build stages rail ----------------------------------------------------------- */
.mona-rail-wrap{ margin-inline: calc(var(--gutter) * -1); }
.mona-stages [data-rail-track]{ gap: 16px; padding-bottom: 6px; }
.mona-stages [data-rail-track] > *{ flex: 0 0 min(76vw, 300px); }
.mona-stage{ display: grid; gap: 12px; color: var(--ink); text-decoration: none; }
.mona-stage .mona-img{ aspect-ratio: 4 / 5; position: relative; }
.mona-stage__no{ position: absolute; left: 12px; top: 12px; z-index: 1; min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: var(--fs-meta); font-weight: 700; }
.mona-stage h3{ font-size: 1.1rem; line-height: 1.35; }
.mona-stage p{ color: var(--muted); font-size: var(--fs-small); margin: 0; }
.mona-rail-ctrl{ display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.mona-rail-ctrl button{ width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.mona-rail-ctrl button:disabled{ opacity: .35; cursor: default; }
.mona-rail-ctrl svg{ width: 18px; height: 18px; }

/* --- Topic grid ----------------------------------------------------------------- */
.mona-grid4{ display: grid; gap: 28px 24px; }
@media (min-width: 640px){ .mona-grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px){ .mona-grid4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Two topic columns of compact rows */
.mona-duo{ display: grid; gap: 40px 56px; }
@media (min-width: 960px){ .mona-duo{ grid-template-columns: 1fr 1fr; } }
.mona-duo h2{ font-size: 1.5rem; }
.mona-rows{ list-style: none; display: grid; gap: 4px; }
.mona-row{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mona-row:last-child{ border-bottom: 0; }
.mona-row .mona-img{ aspect-ratio: 1 / 1; border-radius: 12px; }
.mona-row h3{ font-size: 1.04rem; line-height: 1.4; font-weight: 600; margin-bottom: 6px; }

/* Tall cards: design and interiors */
.mona-tall{ display: grid; gap: 28px 24px; }
@media (min-width: 720px){ .mona-tall{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mona-tall .mona-img{ aspect-ratio: 4 / 5; }

/* --- Q&A ---------------------------------------------------------------------- */
.mona-qa{ background: var(--surface); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 56px); display: grid; gap: 20px 56px; }
@media (min-width: 1000px){ .mona-qa{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.mona-qa > div > p{ color: var(--muted); margin-top: 10px; }
.mona-faq details{ border-bottom: 1px solid #DDD7CB; }
.mona-faq details:first-child summary{ padding-top: 4px; }
.mona-faq summary{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.06rem; line-height: 1.45; min-height: 44px; }
.mona-faq summary::after{ content: ""; flex-shrink: 0; width: 28px; height: 28px; margin-top: -2px; border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316181A' stroke-width='2.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat; transition: transform .3s var(--ease); }
.mona-faq details[open] summary::after{ transform: rotate(45deg); }
.mona-faq [data-faq-body] > div{ padding: 0 40px 18px 0; color: #3A3733; font-size: var(--fs-small); }
.mona-faq [data-faq-body] small{ display: block; margin-top: 8px; color: var(--muted); font-size: var(--fs-meta); }

/* --- Footer --------------------------------------------------------------------- */
.mona-footer{ margin-top: var(--section); background: var(--dark); color: var(--on-dark); padding: clamp(40px, 5vw, 64px) 0 max(24px, env(safe-area-inset-bottom)); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.mona-footer a{ color: var(--on-dark); text-decoration: none; }
.mona-footer__grid{ display: grid; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 900px){ .mona-footer__grid{ grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .7fr)); gap: 48px; } }
.mona-footer .mona-logo b span{ color: var(--dark-muted); }
.mona-footer__intro{ color: var(--dark-muted); font-size: var(--fs-small); margin-top: 14px; max-width: 34em; }
.mona-footer h2{ font-size: var(--fs-meta); font-weight: 600; color: var(--dark-muted); margin-bottom: 10px; letter-spacing: 0; }
.mona-footer ul{ list-style: none; }
.mona-footer li a{ display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-small); }
.mona-footer li a:hover{ text-decoration: underline; text-underline-offset: .25em; }
.mona-footer__bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 20px; font-size: var(--fs-meta); color: var(--dark-muted); }

.mona-totop{ width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: var(--ink); color: #fff; border-radius: var(--r-pill); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.mona-totop svg{ width: 20px; height: 20px; }

/* --- House types ---------------------------------------------------------------- */
.mona-types{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.mona-types::-webkit-scrollbar{ display: none; }
.mona-type{ flex: 0 0 min(64vw, 240px); scroll-snap-align: start; display: grid; gap: 10px; align-content: start; color: var(--ink); text-decoration: none; }
.mona-type .mona-img{ aspect-ratio: 3 / 4; }
.mona-type h3{ font-size: 1.08rem; line-height: 1.35; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mona-type h3::after{ content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181A' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center no-repeat; transition: background-color .2s; }
.mona-type:hover h3::after{ background-color: var(--accent-soft); }
.mona-type p{ color: var(--muted); font-size: var(--fs-small); margin: 0; }
@media (min-width: 1100px){ .mona-types{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }

/* --- Most read + figures -------------------------------------------------------- */
.mona-pop{ display: grid; gap: 40px 56px; }
@media (min-width: 1000px){ .mona-pop{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.mona-rank{ list-style: none; counter-reset: rank; }
.mona-rank li{ counter-increment: rank; display: grid; grid-template-columns: 52px minmax(0, 1fr) 88px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mona-rank li:first-child{ padding-top: 0; }
.mona-rank li::before{ content: counter(rank, decimal-leading-zero); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: #C9C2B5; line-height: 1.2; }
.mona-rank h3{ font-size: 1.06rem; line-height: 1.4; margin-bottom: 6px; }
.mona-rank .mona-img{ aspect-ratio: 1 / 1; border-radius: 12px; }
@media (max-width: 479px){ .mona-rank li{ grid-template-columns: 40px minmax(0, 1fr); } .mona-rank .mona-img{ display: none; } }
.mona-figs{ display: grid; gap: 12px; align-content: start; }
.mona-fig{ background: var(--surface); border-radius: var(--r-panel); padding: 20px 22px; display: grid; gap: 6px; }
.mona-fig b{ font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--accent); }
.mona-fig b small{ font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: 4px; color: var(--ink); }
.mona-fig p{ margin: 0; font-size: var(--fs-small); }
.mona-fig span{ font-size: var(--fs-meta); color: var(--muted); }

/* --- Long guides band ------------------------------------------------------------- */
.mona-guides{ background: var(--accent); color: #fff; border-radius: var(--r-panel); overflow: hidden; display: grid; }
@media (min-width: 960px){ .mona-guides{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.mona-guides__img{ min-height: 260px; position: relative; }
.mona-guides__img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mona-guides__body{ padding: clamp(24px, 4vw, 56px); display: grid; gap: 18px; align-content: center; }
.mona-guides h2{ color: #fff; }
.mona-guides__body > p{ color: rgba(255,255,255,.86); margin: 0; }
.mona-guides ul{ list-style: none; display: grid; gap: 10px; }
.mona-guides li a{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; transition: background-color .2s; }
.mona-guides li a:hover{ background: rgba(255,255,255,.18); }
.mona-guides li b{ font-weight: 600; font-size: 1.04rem; line-height: 1.4; }
.mona-guides li span{ grid-column: 1; font-size: var(--fs-meta); color: rgba(255,255,255,.8); }
.mona-guides li a::after{ content: ""; grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F5B46' stroke-width='2.2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center no-repeat; }
@media (hover: none){ .mona-guides li a:hover{ background: rgba(255,255,255,.1); } }

/* --- Glossary ---------------------------------------------------------------------- */
.mona-terms{ display: grid; gap: 12px; }
@media (min-width: 640px){ .mona-terms{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .mona-terms{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mona-terms > div{ border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.mona-terms dt{ font-weight: 600; font-size: 1.06rem; }
.mona-terms dd{ margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* --- How the desk works -------------------------------------------------------------- */
.mona-desk{ display: grid; gap: 28px 56px; align-items: center; }
@media (min-width: 900px){ .mona-desk{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.mona-desk .mona-img{ aspect-ratio: 4 / 3; }
.mona-desk ul{ list-style: none; display: grid; gap: 14px; margin: 20px 0 26px; }
.mona-desk li{ display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.mona-desk li::before{ content: ""; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F5B46' stroke-width='2.6'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center no-repeat; }
.mona-desk li b{ display: block; font-weight: 600; margin-bottom: 2px; }
.mona-desk li span{ color: var(--muted); font-size: var(--fs-small); }
.mona-desk__btns{ display: flex; flex-wrap: wrap; gap: 10px; }
.mona-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-small); text-decoration: none; background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.mona-btn:hover{ background: #33363A; }
.mona-btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.mona-btn--ghost:hover{ background: transparent; border-color: var(--ink); }

/* ==========================================================================
   INNER PAGES — shared components for category, post, about, page, contact,
   search, 404 and styleguide. Same tokens, same chrome as the home page.
   ========================================================================== */
.mona-main{ padding-bottom: var(--section); }
.mona-crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--muted); padding-top: clamp(20px, 3vw, 32px); }
.mona-crumbs a{ color: var(--muted); text-decoration: none; }
.mona-crumbs a:hover{ color: var(--ink); text-decoration: underline; }
.mona-crumbs span[aria-hidden]{ opacity: .6; }

/* Page header: crumbs, h1, lead, optional meta and image */
.mona-pagehead{ padding: 14px 0 clamp(24px, 3vw, 40px); }
.mona-pagehead h1{ margin-top: 10px; max-width: 22em; }
.mona-pagehead__lead{ color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; margin-top: 14px; max-width: 44em; }
.mona-pagehead .mona-meta{ margin-top: 16px; }
.mona-pagehead--center{ text-align: center; }
.mona-pagehead--center h1, .mona-pagehead--center .mona-pagehead__lead{ margin-inline: auto; }
.mona-pagehead--center .mona-meta{ justify-content: center; }
.mona-cover{ aspect-ratio: 21 / 9; border-radius: var(--r-panel); }
@media (max-width: 719px){ .mona-cover{ aspect-ratio: 4 / 3; } }

/* Listing grid (category, search, related) — 6 per page fills 3 and 2 columns */
.mona-grid3{ display: grid; gap: 36px 24px; }
@media (min-width: 640px){ .mona-grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .mona-grid3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mona-card h3{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Card without a featured image: same box, the site mark on the warm surface. */
.mona-img--empty{ display: grid; place-items: center; }
.mona-img--empty::before{ content: ""; width: 48px; height: 48px; border-radius: 14px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center no-repeat; opacity: .9; }

/* Pager: centred pills */
.mona-pager{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: clamp(36px, 4vw, 56px); }
.mona-pager a, .mona-pager span{ min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.mona-pager a:hover{ border-color: var(--ink); }
.mona-pager [aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.mona-pager .mona-pager__gap{ border: 0; min-width: 24px; padding: 0; }

/* Empty state */
.mona-empty{ background: var(--surface); border-radius: var(--r-panel); padding: clamp(28px, 4vw, 48px); text-align: center; display: grid; gap: 12px; justify-items: center; }
.mona-empty h2{ font-size: var(--fs-h3); }
.mona-empty p{ color: var(--muted); margin: 0; max-width: 34em; }
.mona-empty::before{ content: ""; width: 52px; height: 52px; border-radius: var(--r-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235E5A54' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center no-repeat; }

/* Big search bar (search page, 404, styleguide) */
.mona-searchbar{ display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #D8D2C6; border-radius: var(--r-pill); padding: 6px 6px 6px 20px; max-width: 640px; }
.mona-searchbar:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,91,70,.18); }
.mona-searchbar input{ flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); min-height: 44px; }
.mona-searchbar input:focus{ outline: none; }
.mona-searchbar button{ min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: var(--fs-small); cursor: pointer; }
.mona-pagehead--center .mona-searchbar{ margin-inline: auto; margin-top: 22px; }

/* --- Article ------------------------------------------------------------------- */
.mona-article{ display: grid; gap: 40px; }
@media (min-width: 1100px){ .mona-article{ grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; } }
.mona-article__aside{ display: grid; gap: 20px; align-content: start; }
@media (min-width: 1100px){ .mona-article__aside{ position: sticky; top: calc(var(--hdr-h) + 24px); } }
.mona-toc{ background: var(--surface); border-radius: var(--r-panel); padding: 20px 20px 16px; }
.mona-toc h2{ font-size: 1rem; margin-bottom: 10px; }
.mona-toc ol{ list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.mona-toc li{ counter-increment: toc; }
.mona-toc a{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 7px 0; color: var(--muted); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; }
.mona-toc a::before{ content: counter(toc); font-weight: 600; color: #B5AEA2; }
.mona-toc a:hover, .mona-toc a.is-active{ color: var(--ink); }
.mona-toc a.is-active::before{ color: var(--accent); }
.mona-byline{ display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.mona-byline__mark{ width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.mona-byline__mark svg{ width: 20px; height: 20px; }
.mona-byline b{ display: block; font-size: var(--fs-small); }
.mona-byline span{ font-size: var(--fs-meta); color: var(--muted); }

.mona-prose{ font-size: 1.0625rem; line-height: 1.75; max-width: 46em; }
.mona-prose > * + *{ margin-top: 1.15em; }
.mona-prose p{ margin-bottom: 0; }
.mona-prose h2{ font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); margin-top: 2em; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.mona-prose h3{ font-size: 1.2rem; margin-top: 1.6em; }
.mona-prose ul, .mona-prose ol{ padding-left: 1.3em; display: grid; gap: .45em; }
.mona-prose li::marker{ color: var(--accent); }
.mona-prose a{ color: var(--accent); text-underline-offset: .2em; }
.mona-prose strong{ font-weight: 600; }
.mona-prose figure{ margin: 1.8em 0; }
.mona-prose figure .mona-img{ aspect-ratio: 3 / 2; }
.mona-prose figcaption{ font-size: var(--fs-meta); color: var(--muted); margin-top: 10px; }
.mona-prose blockquote{ margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-size: 1.15rem; line-height: 1.6; font-weight: 500; }
.mona-prose blockquote cite{ display: block; margin-top: 8px; font-size: var(--fs-meta); font-style: normal; font-weight: 400; color: var(--muted); }
.mona-note{ background: var(--accent-soft); border-radius: 14px; padding: 18px 20px; font-size: var(--fs-small); line-height: 1.65; }
.mona-note b{ display: block; color: var(--accent); margin-bottom: 4px; }
.mona-tablewrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.mona-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.mona-table caption{ caption-side: bottom; text-align: left; padding: 10px 14px; font-size: var(--fs-meta); color: var(--muted); }
.mona-table th, .mona-table td{ padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.mona-table thead th{ background: var(--surface); font-weight: 600; font-size: var(--fs-meta); }
.mona-table tbody tr:last-child td{ border-bottom: 0; }
.mona-table .num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mona-sources{ border-top: 1px solid var(--line); padding-top: 18px; font-size: var(--fs-meta); color: var(--muted); }
.mona-sources h2{ font-size: 1rem !important; margin: 0 0 8px !important; color: var(--ink); }
.mona-sources ol{ padding-left: 1.2em; display: grid; gap: 6px; }
.mona-sources a{ color: var(--muted); }
.mona-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

/* --- Contact -------------------------------------------------------------------- */
.mona-contact{ display: grid; gap: 28px 56px; }
@media (min-width: 960px){ .mona-contact{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.mona-channels{ display: grid; gap: 12px; }
.mona-channel{ border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 20px; display: grid; gap: 4px; }
.mona-channel b{ font-weight: 600; }
.mona-channel span{ color: var(--muted); font-size: var(--fs-small); }
.mona-channel a{ color: var(--accent); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
/* The form itself is MONA Smart Form's markup (phase 2). This is the designed slot. */
.mona-formslot{ background: var(--surface); border-radius: var(--r-panel); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; }
.mona-formslot h2{ font-size: 1.35rem; }
.mona-formslot > p{ color: var(--muted); font-size: var(--fs-small); margin: 0; }
.mona-formslot__ph{ border: 1.5px dashed #CFC7B9; border-radius: 14px; min-height: 280px; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); font-size: var(--fs-small); }

/* --- Form field states (styleguide; matched to Smart Form at port time) ---------- */
.mona-form{ display: grid; gap: 16px; }
.mona-field textarea{ width: 100%; min-height: 128px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #D8D2C6; border-radius: 12px; padding: 12px 14px; resize: vertical; }
.mona-field textarea:focus{ border-color: var(--accent); outline: 3px solid rgba(31,91,70,.18); outline-offset: 0; }
.mona-field__hint{ font-size: var(--fs-meta); color: var(--muted); }
.mona-field.is-error .mona-input, .mona-field.is-error textarea{ border-color: var(--danger); }
.mona-field.is-error .mona-field__hint{ color: var(--danger); }
.mona-input:disabled{ background: var(--surface); color: var(--muted); cursor: not-allowed; }
.mona-check{ display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); }
.mona-check input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.mona-btn[disabled], .mona-btn.is-busy{ opacity: .6; cursor: progress; }
.mona-sent{ background: var(--accent-soft); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.mona-sent b{ color: var(--accent); }

/* --- 404 ------------------------------------------------------------------------ */
.mona-notfound{ display: grid; gap: 28px 56px; align-items: center; padding-top: clamp(24px, 4vw, 56px); }
@media (min-width: 960px){ .mona-notfound{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.mona-notfound__code{ font-size: clamp(4rem, 3rem + 5vw, 7.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.1; color: var(--accent); }
.mona-notfound .mona-img{ aspect-ratio: 4 / 5; }
.mona-linkpills{ display: flex; flex-wrap: wrap; gap: 8px; }
.mona-linkpills a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.mona-linkpills a:hover{ background: #E9E4DA; }

/* --- Styleguide -------------------------------------------------------------------- */
.mona-sg{ display: grid; gap: var(--section); }
.mona-sg__block{ display: grid; gap: 18px; }
.mona-sg__block > h2{ padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mona-swatches{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mona-swatch{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: var(--fs-meta); }
.mona-swatch i{ display: block; height: 72px; }
.mona-swatch span{ display: block; padding: 10px 12px; }
.mona-sg__row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mona-sg__note{ font-size: var(--fs-meta); color: var(--muted); }

/* Empty state: link pills need their own ground on the surface panel. */
.mona-empty .mona-linkpills{ justify-content: center; margin-top: 6px; }
.mona-empty .mona-linkpills a{ background: #fff; }
.mona-empty .mona-linkpills a:hover{ background: #E9E4DA; }

/* Caption under an article cover (outside .mona-prose). */
.mona-cover-cap{ font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; margin-top: 10px; max-width: 60em; }

/* 404 — text column of .mona-notfound */
.mona-notfound__body{ display: grid; gap: 18px; align-content: center; min-width: 0; }
.mona-notfound__code{ margin: 0; }
.mona-notfound__lead{ color: var(--muted); font-size: var(--fs-lead); line-height: 1.6; max-width: 36em; margin: 0; }
@media (max-width: 959px){ .mona-notfound .mona-img{ aspect-ratio: 3 / 2; } }   /* a 4:5 photo under the text is ~490px tall at 390 */

/* Styleguide — states that need one more rule */
.mona-empty .mona-searchbar{ width: 100%; }                        /* justify-items:center shrinks it to content */
.mona-btn svg{ width: 16px; height: 16px; margin-right: 8px; flex-shrink: 0; }   /* busy spinner [data-spin] */
.mona-tool .mona-input[aria-invalid="true"]{ border-color: var(--danger); }       /* main.js sets it on an empty / >5000 area */

/* paginate_links() markup (mona_pagination): same pills as .mona-pager. */
.mona-pagination{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: clamp(36px, 4vw, 56px); }
.mona-pagination .page-numbers{ min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.mona-pagination a.page-numbers:hover{ border-color: var(--ink); }
.mona-pagination .current{ background: var(--ink); border-color: var(--ink); color: #fff; }
.mona-pagination .dots{ border: 0; min-width: 24px; padding: 0; }
.mona-pagination svg{ width: 16px; height: 16px; }
.screen-reader-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Editor content inside .mona-prose: WordPress image markup. */
.mona-prose .wp-block-image img, .mona-prose figure img{ border-radius: var(--r-img); width: 100%; height: auto; }
.mona-prose .wp-block-image{ margin: 1.8em 0; }
.mona-prose table{ width: 100%; border-collapse: collapse; font-size: var(--fs-small); }

/* MONA Smart Form markup, matched to the field states in styleguide.html
   (.mona-field / .mona-input / .mona-btn). The plugin owns the form; the theme
   only styles it (plugin-boundaries.md). */
.msf-form{ display: grid; gap: 16px; max-width: none; }
.msf-form :is(input,textarea,select){ max-width: none; }
.msf-form .msf-field{ display: grid; gap: 6px; margin: 0; }
.msf-form label{ font-size: var(--fs-meta); font-weight: 600; }
.msf-form :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],textarea,select){ width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #D8D2C6; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.msf-form select{ padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316181A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.msf-form textarea{ min-height: 128px; resize: vertical; }
.msf-form :is(input,textarea,select):focus{ border-color: var(--accent); outline: 3px solid rgba(31,91,70,.18); outline-offset: 0; }
.msf-form .msf-accept{ display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.msf-form .msf-accept input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.msf-form .msf-req{ color: var(--danger); }
.msf-form .msf-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: var(--fs-small); cursor: pointer; }
.msf-form .msf-btn:hover{ background: #33363A; }
.msf-form .msf-btn[disabled]{ opacity: .6; cursor: progress; }
.msf-status:empty{ display: none; }
.msf-status, .msf-alert{ background: var(--accent-soft); border-radius: 14px; padding: 14px 16px; font-size: var(--fs-small); }