/* ==========================================================================
   P'COZY — components, ported verbatim from the prototype stylesheet.
   Tokens live in variables.css and load first; this file may read them and
   must not redeclare them. prototype-fidelity.md binds every number below.
   ========================================================================== */

/* Component overrides for the >=2200px step. The token half of this media
   query is in variables.css; these are the clamps that had hit their
   ceiling and are re-ceilinged here. */
@media (min-width: 2200px){
	.mona-btn{ min-height: 60px; padding: 15px 30px 15px 32px; font-size: 1.05rem; }
	.mona-ibtn{ width: 60px; height: 60px; }
	.mona-mats{ height: 720px; }
	.mona-proj{ flex-basis: 520px; }
	.mona-proj--wide{ flex-basis: 760px; }
	.mona-ftr__word{ font-size: 26rem; }
	.mona-artgrid{ grid-template-columns: 300px minmax(0, 1fr); }
}
/* --- Reset / base ------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mona-hdr-h) + 16px); }
html.lenis{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }
body{
	margin: 0;
	background: var(--mona-page);
	color: var(--mona-ink);
	font-family: var(--mona-body);
	font-size: var(--mona-fs-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img,svg,video{ max-width: 100%; height: auto; display: block; }
img{ font-style: italic; color: var(--mona-muted); }     /* broken-image text stays quiet */
a{ color: var(--mona-green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover{ text-decoration-thickness: 2px; }
h1,h2,h3,h4{
	font-family: var(--mona-display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.012em;
	margin: 0;
	text-wrap: balance;
	color: inherit;
}
h1{ font-size: var(--mona-fs-h1); letter-spacing: -0.022em; line-height: .98; }
h2{ font-size: var(--mona-fs-h2); letter-spacing: -0.018em; }
h3{ font-size: var(--mona-fs-h3); }
h4{ font-size: var(--mona-fs-h4); }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
ul,ol{ margin: 0; padding: 0; }
button{ font: inherit; color: inherit; }
::selection{ background: var(--mona-oak-soft); color: var(--mona-ink); }

/* Numbers that are measurements read in the display face, tabular. */
.mona-num{ font-family: var(--mona-display); font-variant-numeric: tabular-nums; font-weight: 500; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
	outline: 3px solid var(--mona-green);
	outline-offset: 3px;
	border-radius: 4px;
}
.mona-band--dark :where(a,button,input,select,textarea,summary):focus-visible{ outline-color: var(--mona-green-lite); }

.mona-sr{
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.mona-skip{
	position: fixed; top: 14px; left: 14px; z-index: 200;
	transform: translateY(-160%);
	padding: 12px 20px; background: var(--mona-ink); color: var(--mona-page);
	font-weight: 600; border-radius: var(--mona-r-pill); text-decoration: none;
	transition: transform .2s var(--mona-ease);
}
.mona-skip:focus{ transform: none; }

/* --- Layout ------------------------------------------------------------- */
.mona-wrap{ width: 100%; max-width: var(--mona-container); margin-inline: auto; padding-inline: var(--mona-gutter); }
.mona-wrap--wide{ max-width: var(--mona-container-wide); }
.mona-wrap--narrow{ max-width: 980px; }
.mona-band{ padding-block: var(--mona-section); position: relative; }
.mona-band--linen{ background: var(--mona-linen); }
.mona-band--dark{ background: var(--mona-walnut); color: var(--mona-on-dark); }
.mona-band--dark a:not(.mona-btn){ color: var(--mona-green-lite); }   /* buttons keep their own text colour */
.mona-band--tight{ padding-top: clamp(40px, 5vw, 64px); }
.mona-band--flush-top{ padding-top: 0; }

/* A film of grain over the dark surfaces — walnut has texture, flat #2B1F18 does not. */
.mona-band--dark::before,.mona-ftr::before{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: .07; mix-blend-mode: soft-light;
}
.mona-band--dark > *,.mona-ftr > *{ position: relative; }

/* Section head. The heading carries the message; a lede sits beside it when the
   content warrants one. No eyebrow labels. */
.mona-head{ margin-bottom: clamp(36px, 5vw, 64px); display: grid; gap: 18px 56px; align-items: end; }
.mona-head h2{ max-width: 16ch; }
.mona-head .mona-lede{ margin: 0; }
.mona-head--split{ grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px){
	.mona-head--split{ grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); }
	.mona-head--split .mona-head__aside{ justify-self: end; text-align: left; max-width: 44ch; }
}
.mona-lede{ font-size: var(--mona-fs-lead); line-height: 1.6; color: var(--mona-muted); max-width: 42ch; text-wrap: pretty; }
.mona-band--dark .mona-lede{ color: var(--mona-on-dark-2); }
.mona-head__link{ display: inline-flex; margin-top: 10px; }

/* --- Buttons ------------------------------------------------------------ */
.mona-btn{
	--btn-bg: var(--mona-green); --btn-fg: var(--mona-page); --btn-bd: transparent;
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 54px; padding: 13px 26px 13px 28px;
	font-family: var(--mona-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
	color: var(--btn-fg); background: var(--btn-bg);
	border: 1.5px solid var(--btn-bd); border-radius: var(--mona-r-pill);
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color .25s var(--mona-ease), color .25s var(--mona-ease), border-color .25s var(--mona-ease), transform .35s var(--mona-ease-out), box-shadow .35s var(--mona-ease);
	will-change: transform;
}
.mona-btn:hover{ --btn-bg: var(--mona-green-deep); box-shadow: 0 18px 34px -18px rgba(23,90,82,.55); }
.mona-btn:active{ transform: scale(.985); }
.mona-btn__ico{
	width: 30px; height: 30px; flex: none; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(246,243,238,.16); overflow: hidden;
}
.mona-btn__ico svg{ width: 15px; height: 15px; transition: transform .45s var(--mona-ease-out); }
.mona-btn:hover .mona-btn__ico svg{ transform: translateX(3px); }
.mona-btn--ink{ --btn-bg: var(--mona-walnut); }
.mona-btn--ink:hover{ --btn-bg: var(--mona-ink); box-shadow: 0 18px 34px -18px rgba(28,23,20,.6); }
.mona-btn--ghost{ --btn-bg: transparent; --btn-fg: var(--mona-ink); --btn-bd: var(--mona-line-field); }
.mona-btn--ghost .mona-btn__ico{ background: var(--mona-linen); }
.mona-btn--ghost:hover{ --btn-bg: var(--mona-ink); --btn-fg: var(--mona-page); --btn-bd: var(--mona-ink); box-shadow: none; }
.mona-btn--ghost:hover .mona-btn__ico{ background: rgba(246,243,238,.16); }
.mona-btn--light{ --btn-bg: var(--mona-page); --btn-fg: var(--mona-walnut); }
.mona-btn--light .mona-btn__ico{ background: var(--mona-linen-2); }
.mona-btn--light:hover{ --btn-bg: #fff; box-shadow: 0 18px 34px -18px rgba(0,0,0,.5); }
.mona-band--dark .mona-btn--ghost{ --btn-fg: var(--mona-on-dark); --btn-bd: var(--mona-line-dark-2); }
.mona-band--dark .mona-btn--ghost .mona-btn__ico{ background: rgba(246,243,238,.12); }
.mona-band--dark .mona-btn--ghost:hover{ --btn-bg: var(--mona-page); --btn-fg: var(--mona-walnut); --btn-bd: var(--mona-page); }
.mona-btn--sm{ min-height: 44px; padding: 9px 18px 9px 20px; font-size: .92rem; gap: 10px; }
.mona-btn--sm .mona-btn__ico{ width: 24px; height: 24px; }
.mona-btn--sm .mona-btn__ico svg{ width: 12px; height: 12px; }
.mona-btn--block{ width: 100%; }
.mona-btn[disabled],.mona-btn[aria-disabled="true"]{ opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.mona-btn.is-busy .mona-btn__ico svg{ animation: mona-spin 1s linear infinite; }
@keyframes mona-spin{ to{ transform: rotate(360deg); } }

/* Text link with a sliding underline — for "Xem tất cả" style links. */
.mona-link{
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--mona-ink); font-weight: 600; text-decoration: none; padding-block: 4px;
}
.mona-link span{ background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .45s var(--mona-ease-out); }
.mona-link:hover span,.mona-link:focus-visible span{ background-size: 100% 1.5px; }
.mona-link svg{ width: 18px; height: 18px; transition: transform .45s var(--mona-ease-out); }
.mona-link:hover svg{ transform: translateX(4px); }
.mona-band--dark .mona-link{ color: var(--mona-on-dark); }

/* Round icon button — gallery arrows, back to top, close. */
.mona-ibtn{
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	background: var(--mona-page); border: 1.5px solid var(--mona-line-strong); color: var(--mona-ink);
	cursor: pointer; transition: background-color .25s var(--mona-ease), color .25s var(--mona-ease), border-color .25s var(--mona-ease), transform .3s var(--mona-ease-out);
}
.mona-ibtn svg{ width: 20px; height: 20px; }
.mona-ibtn:hover{ background: var(--mona-ink); color: var(--mona-page); border-color: var(--mona-ink); }
.mona-ibtn[disabled]{ opacity: .35; cursor: default; }
.mona-ibtn[disabled]:hover{ background: var(--mona-page); color: var(--mona-ink); border-color: var(--mona-line-strong); }
.mona-band--dark .mona-ibtn{ background: transparent; color: var(--mona-on-dark); border-color: var(--mona-line-dark-2); }
.mona-band--dark .mona-ibtn:hover{ background: var(--mona-page); color: var(--mona-walnut); border-color: var(--mona-page); }

/* Chips — category pills, tags. Real links. */
.mona-chip{
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; padding: 7px 16px;
	border: 1px solid var(--mona-line-field); border-radius: var(--mona-r-pill);
	color: var(--mona-ink); font-size: .92rem; font-weight: 500; text-decoration: none;
	background: transparent; white-space: nowrap;
	transition: background-color .2s var(--mona-ease), color .2s var(--mona-ease), border-color .2s var(--mona-ease);
}
.mona-chip:hover{ background: var(--mona-linen); }
.mona-chip[aria-current="page"],.mona-chip.is-active{ background: var(--mona-ink); color: var(--mona-page); border-color: var(--mona-ink); }
.mona-chip--soft{ border-color: transparent; background: var(--mona-linen); min-height: 32px; padding: 4px 12px; font-size: .84rem; }

/* --- Header ------------------------------------------------------------- */
.mona-hdr{
	position: sticky; top: 0; z-index: 60;
	background: rgba(246,243,238,.78);
	-webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
	border-bottom: 1px solid transparent;
	transition: transform .5s var(--mona-ease-out), border-color .3s var(--mona-ease), background-color .3s var(--mona-ease);
}
.mona-hdr.is-solid{ border-bottom-color: var(--mona-line); background: rgba(246,243,238,.88); }
.mona-hdr.is-hidden{ transform: translateY(-100%); }
.mona-hdr__in{ display: flex; align-items: center; gap: 24px; min-height: var(--mona-hdr-h); }
.mona-logo{
	display: inline-flex; align-items: center; gap: 12px;
	color: var(--mona-ink); text-decoration: none; margin-right: auto; flex: none;
}
.mona-logo__mark{ width: 40px; height: 40px; flex: none; }
.mona-logo__word{
	font-family: var(--mona-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1;
}
.mona-logo__word i{ font-style: normal; color: var(--mona-oak-deep); }
.mona-logo__sub{ display: block; font-family: var(--mona-body); font-size: .68rem; font-weight: 500; letter-spacing: .02em; color: var(--mona-muted); margin-top: 3px; }
/* The prototype set this with an inline style on the footer wordmark
   (style="color:var(--pc-on-dark)"). Same value, moved into the sheet so the
   footer logo does not carry presentation in its markup. */
.mona-logo--dark .mona-logo__word{ color: var(--mona-on-dark); }
.mona-nav{ display: none; }
.mona-nav ul{ display: flex; gap: 4px; list-style: none; }
.mona-nav a{
	display: inline-block; padding: 10px 14px; border-radius: var(--mona-r-pill);
	color: var(--mona-ink); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap;
	transition: background-color .2s var(--mona-ease), color .2s var(--mona-ease);
}
.mona-nav a:hover{ background: var(--mona-linen); }
.mona-nav a[aria-current="page"]{ background: var(--mona-ink); color: var(--mona-page); }

/* Disclosure under "Cẩm nang". The label stays a real link to the archive and a
   separate button opens the panel: one element cannot both navigate and disclose,
   and with one, a keyboard user reaches either the parent page or the submenu,
   never both (dynamic-content.md § 8). */
.mona-nav__has{ position: relative; display: flex; align-items: center; }
.mona-nav__toggle{
	display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px;
	background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer;
	transition: background-color .2s var(--mona-ease), transform .35s var(--mona-ease-out);
}
.mona-nav__toggle svg{ width: 15px; height: 15px; }
.mona-nav__toggle:hover{ background: var(--mona-linen); }
.mona-nav__has.is-open .mona-nav__toggle{ transform: rotate(180deg); }
.mona-nav__panel{
	position: absolute; top: calc(100% + 10px); left: 0; z-index: 5; min-width: 240px;
	display: grid; padding: 10px; border-radius: 18px;
	background: var(--mona-page); border: 1px solid var(--mona-line);
	box-shadow: 0 24px 48px -24px rgba(28,23,20,.4);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .22s var(--mona-ease), transform .3s var(--mona-ease-out), visibility 0s .22s;
}
.mona-nav__has.is-open .mona-nav__panel{ opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--mona-ease), transform .3s var(--mona-ease-out); }
.mona-nav__panel a{
	display: block; padding: 10px 14px; border-radius: 12px; white-space: nowrap;
	color: var(--mona-ink); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.mona-nav__panel a:hover{ background: var(--mona-linen); }
.mona-nav__panel a[aria-current="page"]{ background: var(--mona-ink); color: var(--mona-page); }
.mona-hdr__tel{
	display: none; align-items: center; gap: 10px;
	color: var(--mona-ink); text-decoration: none; font-weight: 600; white-space: nowrap;
	font-variant-numeric: tabular-nums; padding: 8px 4px;
}
.mona-hdr__tel svg{ width: 18px; height: 18px; color: var(--mona-green); }
.mona-hdr__tel:hover{ color: var(--mona-green); }
.mona-hdr__cta{ display: none; }
.mona-burger{
	width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
	background: var(--mona-ink); color: var(--mona-page); border: 0; cursor: pointer;
	transition: background-color .25s var(--mona-ease);
}
.mona-burger:hover{ background: var(--mona-green); }
.mona-burger svg{ width: 20px; height: 14px; overflow: visible; }
.mona-burger path{ transition: transform .35s var(--mona-ease-out), opacity .25s; transform-origin: 50% 50%; }
.mona-burger[aria-expanded="true"] .l1{ transform: translateY(6px) rotate(45deg); }
.mona-burger[aria-expanded="true"] .l2{ opacity: 0; }
.mona-burger[aria-expanded="true"] .l3{ transform: translateY(-6px) rotate(-45deg); }
/* Keep this number equal to --mona-nav-bp and to the matchMedia string in main.js.
   Measured budget: logo 150 + nav 491 + tel 136 + CTA 150 + 3 gaps = 1019, against
   a content box of 1077 at this width. The five-item nav it replaced needed 1233
   and was clipped invisibly by body{overflow-x:clip} on every laptop below 1360. */
@media (min-width: 1200px){
	.mona-nav{ display: block; min-width: 0; }
	.mona-hdr__tel{ display: inline-flex; }
	.mona-hdr__cta{ display: inline-flex; }
	.mona-burger{ display: none; }
}

/* Mobile drawer: a full panel from the top. */
.mona-drawer{
	position: fixed; inset: 0; z-index: 55; display: grid; grid-template-rows: 1fr auto;
	background: var(--mona-page); padding: calc(var(--mona-hdr-h) + 16px) var(--mona-gutter) 28px;
	overflow: auto;
	opacity: 0; visibility: hidden; transform: translateY(-4%);
	transition: opacity .35s var(--mona-ease), transform .5s var(--mona-ease-out), visibility 0s .35s;
}
.mona-drawer.is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--mona-ease), transform .5s var(--mona-ease-out); }
.mona-drawer ul{ list-style: none; display: grid; }
.mona-drawer li{ border-bottom: 1px solid var(--mona-line); transform: translateY(14px); opacity: 0; transition: transform .5s var(--mona-ease-out), opacity .4s; }
.mona-drawer.is-open li{ transform: none; opacity: 1; }
.mona-drawer.is-open li:nth-child(2){ transition-delay: .05s; }
.mona-drawer.is-open li:nth-child(3){ transition-delay: .1s; }
.mona-drawer.is-open li:nth-child(4){ transition-delay: .15s; }
.mona-drawer.is-open li:nth-child(5){ transition-delay: .2s; }
.mona-drawer.is-open li:nth-child(6){ transition-delay: .25s; }
.mona-drawer.is-open li:nth-child(7){ transition-delay: .3s; }
.mona-drawer a{
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 0; color: var(--mona-ink); text-decoration: none;
	font-family: var(--mona-display); font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 500; letter-spacing: -0.01em;
}
.mona-drawer a svg{ width: 22px; height: 22px; color: var(--mona-oak-deep); flex: none; }
/* The four terms sit under "Cẩm nang" as a visibly secondary rank, so the drawer
   shows the whole tree at once rather than hiding four links behind a tap. */
.mona-drawer__sub a{ font-size: clamp(1.05rem, 3.4vw, 1.3rem); padding: 12px 0 12px 22px; color: var(--mona-muted); font-family: var(--mona-body); font-weight: 500; }
.mona-drawer a[aria-current="page"]{ color: var(--mona-green); }
.mona-drawer__foot{ margin-top: 28px; display: grid; gap: 14px; }
.mona-drawer__foot p{ color: var(--mona-muted); font-size: .95rem; }
@media (min-width: 1200px){ .mona-drawer{ display: none; } }

/* --- Hero --------------------------------------------------------------- */
.mona-hero{ padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); overflow: clip; }
.mona-hero__grid{ display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.mona-hero h1{ max-width: 12ch; }
.mona-hero__lede{ margin-top: clamp(20px, 2.4vw, 30px); max-width: 44ch; }
.mona-hero__cta{ margin-top: clamp(26px, 3vw, 38px); display: flex; flex-wrap: wrap; gap: 12px 14px; }
.mona-hero__facts{
	margin: clamp(32px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 1px solid var(--mona-line);
	display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
	list-style: none;
}
.mona-hero__facts li{ display: grid; gap: 8px; align-content: start; font-size: .92rem; color: var(--mona-muted); line-height: 1.45; }
.mona-hero__facts svg{ width: 26px; height: 26px; color: var(--mona-oak-deep); }
.mona-hero__facts b{ display: block; color: var(--mona-ink); font-weight: 600; }
@media (max-width: 720px), (min-width: 980px) and (max-width: 1180px){ .mona-hero__facts{ grid-template-columns: 1fr; gap: 14px; } .mona-hero__facts li{ grid-template-columns: 26px 1fr; align-items: start; } .mona-hero__facts b{ display: inline; } .mona-hero__facts b::after{ content: " — "; color: var(--mona-muted); font-weight: 400; } }

/* Media: one tall photograph, a material detail overlapping it, and one
   dimension drawn over the sofa — the only "blueprint" gesture on the page. */
.mona-hero__media{ position: relative; padding-bottom: clamp(48px, 8vw, 96px); }
.mona-hero__main{
	position: relative; aspect-ratio: 4 / 5; border-radius: var(--mona-r-panel); overflow: hidden;
	background: var(--mona-linen); margin: 0;
	clip-path: inset(0 round var(--mona-r-panel));
}
.mona-hero__main img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.mona-hero__detail{
	position: absolute; left: calc(-1 * clamp(8px, 2vw, 28px)); bottom: 0; width: 42%;
	aspect-ratio: 4 / 5; border-radius: var(--mona-r-img); overflow: hidden; margin: 0;
	box-shadow: 0 40px 70px -30px rgba(43,31,24,.55); background: var(--mona-linen);
	outline: clamp(6px, 1vw, 12px) solid var(--mona-page);
}
.mona-hero__detail img{ width: 100%; height: 100%; object-fit: cover; }
.mona-hero__detail::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(28,23,20,0) 58%, rgba(28,23,20,.85) 100%);
}
.mona-hero__detail figcaption{
	position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 1;
	color: #fff; font-size: .8rem; font-weight: 500;
}
/* Dimension line: built from three divs so the ticks stay crisp at any width. */
.mona-dim,.mona-tape{
	position: absolute; left: 12%; right: 10%; top: 64%; height: 18px; pointer-events: none;
	color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
/* The mm figures sit on whatever the photograph happens to be: measured 3.43:1
   over the hero and 2.22:1 over the tape shot. A pill makes them independent of it. */
.mona-dim__label,.mona-tape__label{ background: rgba(28,23,20,.72); padding: 3px 12px; border-radius: var(--mona-r-pill); }
.mona-dim__line,.mona-tape__line{ position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.mona-dim__tick,.mona-tape__tick{ position: absolute; top: 0; width: 1.5px; height: 100%; background: currentColor; }
.mona-dim__tick--l,.mona-tape__tick--l{ left: 0; }
.mona-dim__tick--r,.mona-tape__tick--r{ right: 0; }
.mona-dim__label{
	position: absolute; left: 50%; top: -36px; transform: translateX(-50%);
	font-family: var(--mona-display); font-weight: 500; font-size: 1.05rem; font-variant-numeric: tabular-nums;
	letter-spacing: .01em; white-space: nowrap;
}
.mona-dim__label small{ font-family: var(--mona-body); font-size: .72rem; font-weight: 500; margin-left: 4px; }
.mona-hero__note{
	position: absolute; right: 0; bottom: clamp(48px, 8vw, 96px); transform: translateY(50%);
	background: var(--mona-page); border-radius: var(--mona-r-pill); padding: 10px 18px 10px 12px;
	display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 500;
	box-shadow: 0 20px 40px -24px rgba(43,31,24,.5); border: 1px solid var(--mona-line);
}
.mona-hero__note span{ width: 28px; height: 28px; border-radius: 50%; background: var(--mona-green); display: grid; place-items: center; }
.mona-hero__note svg{ width: 14px; height: 14px; color: var(--mona-page); }
@media (min-width: 980px){
	.mona-hero__grid{ grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
	.mona-hero__media{ padding-left: clamp(8px, 2vw, 28px); }
}
@media (max-width: 979px){
	.mona-hero h1{ max-width: 14ch; }
	.mona-hero__media{ max-width: 640px; margin-inline: auto; }
	.mona-hero__note{ bottom: auto; top: 14px; right: 14px; transform: none; }   /* keep it off the detail figure */
}

/* --- Materials marquee (below hero) ------------------------------------- */
.mona-marquee{ border-block: 1px solid var(--mona-line); padding-block: 14px; overflow: hidden; }
.mona-marquee__track{ display: flex; gap: 0; width: max-content; will-change: transform; }
.mona-marquee__group{ display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }
.mona-swatch{
	display: inline-flex; align-items: center; gap: 12px; color: var(--mona-ink); text-decoration: none;
	font-family: var(--mona-display); font-size: 1.15rem; font-weight: 500; white-space: nowrap;
}
.mona-swatch img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(28,23,20,.12); }
.mona-swatch:hover{ color: var(--mona-green); }
/* The static variant (no GSAP, or reduced motion) wraps instead of scrolling, so it
   needs the gutter the moving track never did — otherwise the first swatch sits at x=0. */
.mona-marquee--static .mona-marquee__track{ flex-wrap: wrap; width: auto; padding-inline: var(--mona-gutter); }
.mona-marquee--static .mona-marquee__group + .mona-marquee__group{ display: none; }

/* --- Areas (the four categories) ---------------------------------------- */
.mona-areas{ display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: repeat(12, 1fr); }
.mona-area{
	position: relative; display: block; overflow: hidden; border-radius: var(--mona-r-img);
	color: #fff; text-decoration: none; background: var(--mona-walnut-2);
	grid-column: span 12; isolation: isolate;
}
.mona-area__img{ position: absolute; inset: 0; margin: 0; }
.mona-area__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-area:hover .mona-area__img img,.mona-area:focus-visible .mona-area__img img{ transform: scale(1.05); }
.mona-area::after{
	content: ""; position: absolute; inset: 0; z-index: 1;
	/* Starts higher and lands darker than it looks like it needs to: the paragraph
	   sits where the old ramp was only ~.4, measuring 3.4:1 over a pale photograph. */
	background: linear-gradient(180deg, rgba(28,23,20,0) 10%, rgba(28,23,20,.45) 38%, rgba(28,23,20,.8) 60%, rgba(28,23,20,.92) 100%);
	transition: opacity .5s var(--mona-ease);
}
.mona-area__body{
	position: relative; z-index: 2; display: grid; gap: 8px; align-content: end;
	min-height: 100%; padding: clamp(20px, 2.6vw, 34px);
}
.mona-area h3{ font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.3rem); max-width: 14ch; }
.mona-area__dim{ font-family: var(--mona-display); font-variant-numeric: tabular-nums; font-size: .98rem; opacity: .9; }
.mona-area p{ color: rgba(255,255,255,.86); font-size: .95rem; max-width: 40ch; margin: 0; }
.mona-area__go{
	position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(246,243,238,.92); color: var(--mona-ink);
	transform: translateY(-6px); opacity: 0; transition: transform .5s var(--mona-ease-out), opacity .4s var(--mona-ease);
}
.mona-area__go svg{ width: 18px; height: 18px; }
.mona-area:hover .mona-area__go,.mona-area:focus-visible .mona-area__go{ transform: none; opacity: 1; }
.mona-area--tall{ aspect-ratio: 4 / 5; }
.mona-area--wide{ aspect-ratio: 4 / 3; }
@media (min-width: 700px){
	.mona-area--span7{ grid-column: span 7; }
	.mona-area--span5{ grid-column: span 5; }
	.mona-area--tall,.mona-area--wide{ aspect-ratio: auto; min-height: clamp(380px, 40vw, 560px); }
}
/* Reveal-on-hover only where a pointer can hover. Without the guard an iPad never
   shows these paragraphs at all — they measured 0px tall at 768, 834 and 1024. */
@media (min-width: 700px) and (hover: hover) and (pointer: fine){
	.mona-area p{ max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--mona-ease-out), opacity .45s var(--mona-ease) .05s; }
	.mona-area:hover p,.mona-area:focus-visible p{ max-height: 6em; opacity: 1; }
}
@media (max-width: 699px){
	.mona-area__go{ opacity: 1; transform: none; width: 42px; height: 42px; }
	/* A phone shows the paragraph too, so the text block reaches halfway up the card
	   and the dimension line sits where the desktop ramp is still light. */
	.mona-area::after{ background: linear-gradient(180deg, rgba(28,23,20,0) 8%, rgba(28,23,20,.62) 38%, rgba(28,23,20,.88) 62%, rgba(28,23,20,.94) 100%); }
}

/* --- The story: đo → vẽ → sản xuất → lắp đặt ---------------------------- */
/* Static layout by default. The JS adds `html.mona-motion`, which turns the
   section into a 400vh scroll track with a sticky 100vh stage inside it. */
.mona-story{ position: relative; background: var(--mona-linen); }
.mona-story__stage{ display: grid; gap: clamp(28px, 4vw, 56px); padding-block: var(--mona-section); }
.mona-story__copy{ display: grid; align-content: center; gap: 26px; }
.mona-story__copy h2{ max-width: 14ch; }
.mona-steps{ list-style: none; display: grid; gap: 22px; counter-reset: step; }
.mona-step{ display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; align-items: start; }
.mona-step__n{
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--mona-display); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums;
	border: 1.5px solid var(--mona-line-strong); color: var(--mona-ink);
	transition: background-color .4s var(--mona-ease), color .4s var(--mona-ease), border-color .4s var(--mona-ease);
}
.mona-step h3{ font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.mona-step p{ grid-column: 2; color: var(--mona-muted); max-width: 44ch; margin: 0; }
.mona-story__progress{ display: none; }
.mona-story__media{ position: relative; aspect-ratio: 4 / 3; border-radius: var(--mona-r-panel); overflow: hidden; background: var(--mona-page); isolation: isolate; }
.mona-story__layer{ position: absolute; inset: 0; margin: 0; }
.mona-story__layer img{ width: 100%; height: 100%; object-fit: cover; }
.mona-story__layer--draw{ background: var(--mona-page); display: grid; place-items: center; padding: clamp(16px, 3vw, 40px); }
.mona-story__layer--draw svg{ width: 100%; height: 100%; }
.mona-story__layer--draw [data-ink]{ stroke: var(--mona-ink); }
.mona-story__layer--draw [data-oak]{ stroke: var(--mona-oak-deep); }
.mona-story__layer--draw [data-green]{ stroke: var(--mona-green); fill: var(--mona-green); }
.mona-story__layer--draw text{ font-family: var(--mona-display); font-weight: 500; fill: var(--mona-green); }
.mona-story__caption{
	position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 5;
	background: rgba(246,243,238,.92); color: var(--mona-ink); border-radius: var(--mona-r-pill);
	padding: 8px 16px; font-size: .85rem; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* default: only the last layer (the finished room) shows */
.mona-story__layer{ opacity: 0; }
.mona-story__layer--final{ opacity: 1; }
@media (min-width: 900px){ .mona-story__stage{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }

html.mona-motion .mona-story{ height: 420vh; }
html.mona-motion .mona-story__stage{
	position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 0;
	grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 16px;
	padding-top: calc(var(--mona-hdr-h) + 8px); padding-bottom: 20px;
}
html.mona-motion .mona-story__media{ aspect-ratio: auto; height: 100%; min-height: 0; }
html.mona-motion .mona-story__layer{ opacity: 0; }
html.mona-motion .mona-story__layer--measure{ opacity: 1; }
html.mona-motion .mona-story__layer--final{ opacity: 1; clip-path: inset(0 100% 0 0); }
html.mona-motion .mona-story__layer--build{ opacity: 1; clip-path: inset(100% 0 0 0); }
html.mona-motion .mona-story__copy{ align-content: start; gap: 18px; }
html.mona-motion .mona-story__copy h2{ font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); }
/* A shorter step must not resize the stage: step 4 is 29px shorter than the rest,
   and with an auto height the photograph grew mid-scroll. */
html.mona-motion .mona-story .mona-steps{ position: relative; display: block; min-height: 9rem; }
@media (min-width: 900px){ html.mona-motion .mona-story .mona-steps{ min-height: 15rem; } }
html.mona-motion .mona-story .mona-step{
	position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); pointer-events: none;
	transition: opacity .45s var(--mona-ease), transform .6s var(--mona-ease-out);
}
html.mona-motion .mona-story .mona-step.is-active{ position: relative; opacity: 1; transform: none; pointer-events: auto; }
html.mona-motion .mona-story .mona-step.is-active .mona-step__n{ background: var(--mona-green); color: var(--mona-page); border-color: var(--mona-green); }
html.mona-motion .mona-story__progress{ display: flex; gap: 8px; }
html.mona-motion .mona-story__progress i{ height: 4px; flex: 1; border-radius: 2px; background: var(--mona-linen-2); overflow: hidden; position: relative; }
html.mona-motion .mona-story__progress i::after{ content: ""; position: absolute; inset: 0; background: var(--mona-green); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@media (min-width: 900px){
	html.mona-motion .mona-story__stage{ grid-template-rows: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 56px); padding-top: calc(var(--mona-hdr-h) + 16px); padding-bottom: 32px; }
	html.mona-motion .mona-story__copy{ align-content: center; gap: 26px; }
	html.mona-motion .mona-story__copy h2{ font-size: var(--mona-fs-h2); }
	html.mona-motion .mona-story__media{ height: min(78vh, 720px); }
}
@media (max-width: 899px){
	/* media first and it takes the flexible row; an `auto` row would collapse a height:100% child to 0 */
	html.mona-motion .mona-story__stage{ grid-template-rows: minmax(0, 1fr) auto; }
	html.mona-motion .mona-story__media{ order: -1; height: auto; align-self: stretch; }
	/* Smaller, not gone: display:none took the section's only heading off every
	   screen below 900px and out of the accessibility tree with it. */
	html.mona-motion .mona-story__copy h2{ font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin-bottom: 0; }
	html.mona-motion .mona-story .mona-step p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* the tape measure drawn over the "đo" photo (shares the .mona-dim construction) */
.mona-tape{ left: 10%; right: 10%; top: 54%; }
.mona-tape__label{ position: absolute; left: 50%; top: -36px; transform: translateX(-50%); font-family: var(--mona-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mona-tape__label small{ font-family: var(--mona-body); font-size: .72rem; font-weight: 500; margin-left: 4px; }

/* --- Materials gallery --------------------------------------------------- */
.mona-mats{ display: flex; gap: 10px; height: clamp(420px, 52vw, 640px); }
.mona-mat{
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--mona-r-img);
	background: var(--mona-linen-2); cursor: pointer; isolation: isolate;
	transition: flex-grow .8s var(--mona-ease-out);
	border: 0; padding: 0; text-align: left; color: #fff;
}
.mona-mat.is-open{ flex-grow: 3.4; }
.mona-mat img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mona-ease-out); }
.mona-mat.is-open img{ transform: scale(1.04); }
.mona-mat::after{
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(28,23,20,.62) 0%, rgba(28,23,20,.78) 100%);
	opacity: 1; transition: opacity .6s var(--mona-ease), background .6s var(--mona-ease);
}
.mona-mat.is-open::after{ background: linear-gradient(180deg, rgba(28,23,20,0) 30%, rgba(28,23,20,.82) 100%); }
.mona-mat__name{
	position: absolute; left: 0; bottom: 0; z-index: 2; padding: 22px;
	font-family: var(--mona-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.1;
	writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center;
	white-space: nowrap; transition: opacity .3s var(--mona-ease);
	left: 50%; translate: -50% 0;
}
.mona-mat.is-open .mona-mat__name{ opacity: 0; }
.mona-mat__body{
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2.4vw, 32px);
	display: grid; gap: 6px; opacity: 0; transform: translateY(10px);
	transition: opacity .45s var(--mona-ease) .25s, transform .7s var(--mona-ease-out) .25s;
	/* min() not a flat 260px: the open panel is 180–250px wide between 761 and 1080,
	   and .mona-mat has overflow:hidden, so the text was cut by up to 80px. */
	min-width: min(260px, 100%);
}
.mona-mat.is-open .mona-mat__body{ opacity: 1; transform: none; }
/* The tile is an <article>; this button is the interactive layer over it, so the
   heading and the paragraph inside the tile are ordinary content and not buried
   in phrasing-only elements where a parser may skip them. */
.mona-mat__toggle{
	position: absolute; inset: 0; z-index: 2;
	background: none; border: 0; padding: 0; cursor: pointer;
	display: block; text-align: left; color: inherit; font: inherit;
}
.mona-mat__toggle:focus-visible{ outline: 3px solid var(--mona-page); outline-offset: -5px; }
.mona-mat__body h3{ font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); }
.mona-mat__body p{ color: rgba(255,255,255,.88); font-size: .93rem; max-width: 42ch; margin: 0; }
.mona-mat__use{ font-size: .82rem; color: rgba(255,255,255,.82); }
@media (max-width: 1080px){
	.mona-mats{ height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mona-mat{ aspect-ratio: 4 / 5; flex: none; }
	.mona-mat__name{ writing-mode: horizontal-tb; transform: none; left: 0; translate: 0; padding: 16px; }
	.mona-mat.is-open .mona-mat__name{ opacity: 0; }
	.mona-mat__body{ min-width: 0; padding: 16px; }
	.mona-mat__body p{ display: none; }
}
@media (min-width: 761px) and (max-width: 1080px){
	/* Three across on a tablet: nine 53px columns in a row is not a gallery. */
	.mona-mats{ grid-template-columns: repeat(3, 1fr); }
	.mona-mat__body p{ display: block; }
}
.mona-mat-notes{ margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 20px 40px; list-style: none; }
.mona-mat-notes li{ display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--mona-line); font-size: .95rem; color: var(--mona-muted); }
.mona-mat-notes b{ color: var(--mona-ink); font-weight: 600; font-family: var(--mona-display); font-size: 1.15rem; }
@media (min-width: 760px){ .mona-mat-notes{ grid-template-columns: repeat(3, 1fr); } }
/* Four facts, not three: two across on a phone, four on a wide screen. The
   three-column default leaves a hole in row two.
   These two rules must stay AFTER the 3-column rule above. .mona-mat-notes--4 and
   .mona-mat-notes are both 0,1,0 and a media query adds no specificity, so source
   order is the only thing deciding this — declared first, the modifier lost at
   every width over 760px and produced the exact hole it was written to prevent. */
.mona-mat-notes--4{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px){ .mona-mat-notes--4{ grid-template-columns: repeat(4, 1fr); } }

/* --- Projects rail ------------------------------------------------------ */
.mona-rail{ position: relative; }
.mona-rail__track{
	display: flex; gap: clamp(14px, 1.8vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
	/* Line the first card up with the heading above it. At 2560 the plain gutter left
	   the rail 593px to the left of its own section head. */
	padding-inline: max(var(--mona-gutter), calc((100% - var(--mona-container)) / 2 + var(--mona-gutter)));
	scroll-padding-inline: max(var(--mona-gutter), calc((100% - var(--mona-container)) / 2 + var(--mona-gutter)));
	padding-bottom: 8px; scrollbar-width: none; cursor: grab;
}
.mona-rail__track::-webkit-scrollbar{ display: none; }
.mona-rail__track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.mona-rail__track.is-dragging a{ pointer-events: none; }
.mona-proj{
	flex: 0 0 min(78vw, 420px); scroll-snap-align: start; text-decoration: none; color: inherit; display: grid; gap: 14px;
	align-content: start;   /* a shorter card must not spread its rows to the track height */
}
.mona-proj--wide{ flex-basis: min(88vw, 620px); }
.mona-proj__fig{ position: relative; aspect-ratio: 4 / 5; border-radius: var(--mona-r-img); overflow: hidden; background: var(--mona-linen-2); margin: 0; }
.mona-proj--wide .mona-proj__fig{ aspect-ratio: 3 / 2; }
.mona-proj__fig img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-proj:hover .mona-proj__fig img{ transform: scale(1.05); }
.mona-proj__tag{
	position: absolute; top: 14px; left: 14px; background: rgba(246,243,238,.92); color: var(--mona-ink);
	border-radius: var(--mona-r-pill); padding: 6px 12px; font-size: .8rem; font-weight: 600;
}
.mona-proj h3{ font-size: 1.3rem; }
.mona-proj__meta{ display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--mona-muted); font-size: .9rem; }
.mona-proj__meta .mona-num{ color: var(--mona-oak-deep); }
.mona-rail__nav{ display: flex; align-items: center; gap: 10px; }
.mona-rail__bar{ flex: 1; height: 2px; background: var(--mona-line); border-radius: 2px; overflow: hidden; margin-right: 12px; }
.mona-rail__bar i{ display: block; height: 100%; width: 20%; background: var(--mona-ink); border-radius: 2px; transition: transform .2s linear, width .3s; }
.mona-rail__head{ display: grid; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 900px){ .mona-rail__head{ grid-template-columns: minmax(0,1fr) auto; align-items: end; } .mona-rail__nav{ min-width: 320px; } }

/* --- Voices (testimonials) ---------------------------------------------- */
.mona-voice{ position: relative; overflow: hidden; }
.mona-voice__bg{ position: absolute; inset: 0; margin: 0; opacity: .16; }
.mona-voice__bg img{ width: 100%; height: 100%; object-fit: cover; }
.mona-voice__in{ display: grid; gap: 40px; }
.mona-voice__stage{ position: relative; min-height: 260px; }
.mona-quote{
	position: absolute; inset: 0; display: grid; align-content: start; gap: 24px;
	opacity: 0; transform: translateY(18px); pointer-events: none;
	transition: opacity .6s var(--mona-ease), transform .8s var(--mona-ease-out);
}
.mona-quote.is-active{ position: relative; opacity: 1; transform: none; pointer-events: auto; }
.mona-quote blockquote{ margin: 0; font-family: var(--mona-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.7rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 26ch; text-wrap: pretty; }
.mona-quote blockquote::before{ content: "\201C"; color: var(--mona-oak); }
.mona-quote blockquote::after{ content: "\201D"; color: var(--mona-oak); }
.mona-quote figcaption{ display: grid; gap: 2px; font-size: .95rem; color: var(--mona-on-dark-2); }
.mona-quote figcaption b{ color: var(--mona-on-dark); font-weight: 600; }
.mona-voice__ctrl{ display: flex; align-items: center; gap: 18px; }
.mona-dots{ display: flex; gap: 8px; }
.mona-dots button{
	width: 44px; height: 24px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0;
}
.mona-dots button i{ display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--mona-line-dark-2); position: relative; overflow: hidden; }
.mona-dots button i::after{ content: ""; position: absolute; inset: 0; background: var(--mona-green-lite); transform: scaleX(0); transform-origin: 0 50%; }
.mona-dots button[aria-selected="true"] i::after{ transform: scaleX(1); transition: transform var(--mona-voice-dur, 7s) linear; }
.mona-voice.is-paused .mona-dots button[aria-selected="true"] i::after{ transition: none; transform: scaleX(1); }
@media (min-width: 980px){ .mona-voice__in{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }

/* --- Guides ------------------------------------------------------------- */
.mona-guides{ display: grid; gap: clamp(28px, 4vw, 56px); }
.mona-feature{ display: grid; gap: 22px; text-decoration: none; color: inherit; align-content: start; }
.mona-feature__fig{ aspect-ratio: 4 / 3; border-radius: var(--mona-r-img); overflow: hidden; margin: 0; background: var(--mona-linen-2); }
.mona-feature__fig img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-feature:hover .mona-feature__fig img{ transform: scale(1.04); }
.mona-feature h3{ font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); max-width: 20ch; }
.mona-feature:hover h3{ color: var(--mona-green); }
.mona-feature p{ color: var(--mona-muted); max-width: 50ch; }
.mona-guide-list{ list-style: none; display: grid; }
.mona-guide{
	display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center;
	padding: 18px 0; border-top: 1px solid var(--mona-line); text-decoration: none; color: inherit;
}
.mona-guide:last-child{ border-bottom: 1px solid var(--mona-line); }
.mona-guide__fig{ aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin: 0; background: var(--mona-linen-2); }
.mona-guide__fig img{ width: 100%; height: 100%; object-fit: cover; }
.mona-guide h3{ font-size: 1.2rem; }
.mona-guide:hover h3{ color: var(--mona-green); }
.mona-guide__meta{ color: var(--mona-muted); font-size: .86rem; margin-top: 4px; }
@media (min-width: 900px){ .mona-guides{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }

/* --- FAQ ---------------------------------------------------------------- */
.mona-faq{ display: grid; gap: clamp(28px, 4vw, 56px); }
.mona-faq__list{ border-top: 1px solid var(--mona-line); }
.mona-faq details{ border-bottom: 1px solid var(--mona-line); }
.mona-faq summary{
	list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 36px; gap: 20px; align-items: center;
	padding: 22px 0; font-family: var(--mona-display); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 500; line-height: 1.25;
}
.mona-faq summary::-webkit-details-marker{ display: none; }
.mona-faq summary:hover{ color: var(--mona-green); }
.mona-faq__ico{ width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--mona-line-field); display: grid; place-items: center; transition: background-color .3s, border-color .3s, transform .5s var(--mona-ease-out); }
.mona-faq__ico svg{ width: 14px; height: 14px; }
.mona-faq details[open] .mona-faq__ico{ background: var(--mona-ink); border-color: var(--mona-ink); color: var(--mona-page); transform: rotate(45deg); }
.mona-faq__body{ overflow: hidden; }
.mona-faq__body > div{ padding: 0 0 26px; color: var(--mona-muted); max-width: 50ch; }
.mona-faq__body p + p{ margin-top: .6em; }
@media (min-width: 900px){ .mona-faq{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .mona-faq__intro{ position: sticky; top: calc(var(--mona-hdr-h) + 24px); } }

/* --- CTA panel ---------------------------------------------------------- */
.mona-cta{
	position: relative; overflow: hidden; border-radius: var(--mona-r-panel); background: var(--mona-green); color: var(--mona-page);
	display: grid; isolation: isolate;
}
.mona-cta__body{ padding: clamp(32px, 5vw, 72px); display: grid; gap: 22px; align-content: center; position: relative; z-index: 2; }
.mona-cta h2{ max-width: 14ch; }
.mona-cta p{ color: rgba(246,243,238,.82); max-width: 44ch; }
.mona-cta__tel{
	display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--mona-page);
	font-family: var(--mona-display); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1;
}
.mona-cta__tel:hover{ color: var(--mona-oak-soft); }
.mona-cta__tel svg{ width: .8em; height: .8em; }
.mona-cta__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
/* The panel is green, not the page ground: an ink-alpha border disappears on it. */
.mona-cta .mona-btn--ghost{ --btn-fg: var(--mona-on-dark); --btn-bd: rgba(246,243,238,.55); }
.mona-cta .mona-btn--ghost .mona-btn__ico{ background: rgba(246,243,238,.16); }
.mona-cta .mona-btn--ghost:hover{ --btn-bg: var(--mona-page); --btn-fg: var(--mona-green); --btn-bd: var(--mona-page); }
.mona-cta__fig{ position: relative; margin: 0; min-height: 280px; }
.mona-cta__fig img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mona-cta__fig::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--mona-green) 0%, rgba(23,90,82,0) 40%); }
@media (min-width: 900px){ .mona-cta{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .mona-cta__fig{ min-height: 520px; } }
@media (max-width: 899px){ .mona-cta__fig::after{ background: linear-gradient(180deg, var(--mona-green) 0%, rgba(23,90,82,0) 45%); } .mona-cta__fig{ order: 2; } }

/* --- Footer ------------------------------------------------------------- */
.mona-ftr{ position: relative; background: var(--mona-walnut); color: var(--mona-on-dark-2); padding-top: clamp(56px, 7vw, 96px); overflow: hidden; }
.mona-ftr a{ color: var(--mona-on-dark-2); text-decoration: none; }
.mona-ftr a:hover{ color: var(--mona-on-dark); }
.mona-ftr__top{ display: grid; gap: 40px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--mona-line-dark); }
.mona-ftr__brand{ display: grid; gap: 18px; align-content: start; max-width: 36ch; }
.mona-ftr__brand p{ font-size: .98rem; }
.mona-ftr__tel{ font-family: var(--mona-display); font-size: 1.9rem; font-weight: 500; color: var(--mona-on-dark) !important; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mona-ftr__cols{ display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
/* A footer column heading is a real heading, not an h4 dropped under an h1 —
   the outline skipped two levels on every page. Same look, correct rank. */
.mona-ftr__h{ color: var(--mona-on-dark); font-family: var(--mona-body); font-size: .85rem; font-weight: 600; margin-bottom: 14px; letter-spacing: .01em; }
.mona-ftr ul{ list-style: none; display: grid; gap: 2px; font-size: .95rem; }
.mona-ftr li a{ display: inline-block; padding-block: 5px; }
.mona-ftr__base{ display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; padding-block: 22px; font-size: .86rem; }
.mona-ftr__word{
	font-family: var(--mona-display); font-weight: 600; letter-spacing: -0.03em; line-height: .78;
	font-size: clamp(5rem, 22vw, 22rem); color: var(--mona-walnut-2); text-align: center;
	margin-top: 8px; margin-bottom: -0.16em; user-select: none; pointer-events: none;
}
.mona-ftr__word i{ font-style: normal; color: var(--mona-walnut-3); }
@media (min-width: 900px){ .mona-ftr__top{ grid-template-columns: 1.1fr 2fr; } .mona-ftr__cols{ grid-template-columns: repeat(3, 1fr); } }
.mona-totop{ position: fixed; right: 20px; bottom: 20px; z-index: 50; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--mona-ease-out); }
.mona-totop.is-show{ opacity: 1; transform: none; }
.mona-totop svg{ transform: rotate(-90deg); }

/* --- Page header (inner pages) ------------------------------------------ */
.mona-phead{ padding-block: clamp(28px, 4vw, 56px) clamp(32px, 4.5vw, 64px); }
.mona-phead h1{ max-width: 16ch; }
.mona-phead .mona-lede{ margin-top: clamp(16px, 2vw, 26px); }
.mona-phead__grid{ display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.mona-phead__grid > *{ min-width: 0; }
.mona-phead__fig{ aspect-ratio: 4 / 3; border-radius: var(--mona-r-panel); overflow: hidden; margin: 0; background: var(--mona-linen-2); }
.mona-phead__fig img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 940px){ .mona-phead__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } .mona-phead__fig{ aspect-ratio: 5 / 4; } }
.mona-crumbs{ font-size: .88rem; color: var(--mona-muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.mona-crumbs a{ color: var(--mona-muted); text-decoration: none; padding-block: 3px; }
.mona-crumbs a:hover{ color: var(--mona-ink); text-decoration: underline; }
.mona-crumbs svg{ width: 14px; height: 14px; margin-inline: 8px; opacity: .6; }
/* Above 780 the strip may scroll, with a fade so the cut chip reads as "more".
   Below it, wrap: the 4th chip was simply unreachable-looking on a phone. */
.mona-tabs{ display: flex; gap: 8px; margin-top: clamp(22px, 3vw, 32px); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
@media (max-width: 779px){ .mona-tabs{ flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } }
.mona-tabs::-webkit-scrollbar{ display: none; }
.mona-meta{ color: var(--mona-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; }

/* --- Cards (listing) ---------------------------------------------------- */
.mona-list{ display: grid; gap: clamp(28px, 4vw, 44px) clamp(18px, 2.4vw, 32px); }
@media (min-width: 640px){ .mona-list{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px){ .mona-list{ grid-template-columns: repeat(3, 1fr); } }
.mona-list--2{ grid-template-columns: 1fr; }
@media (min-width: 700px){ .mona-list--2{ grid-template-columns: repeat(2, 1fr); } }
.mona-card{ display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.mona-card__fig{ position: relative; aspect-ratio: 4 / 3; border-radius: var(--mona-r-img); overflow: hidden; margin: 0; background: var(--mona-linen-2); }
.mona-card__fig img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-card:hover .mona-card__fig img{ transform: scale(1.05); }
.mona-card__ph{ position: absolute; inset: 0; display: grid; place-items: center; color: var(--mona-oak-deep); background: var(--mona-linen); }
.mona-card__ph svg{ width: 44%; height: auto; opacity: .7; }
.mona-card__tag{ color: var(--mona-oak-deep); font-size: .84rem; font-weight: 600; }
.mona-card h3{
	font-size: 1.3rem; line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.4em;
}
.mona-card:hover h3{ color: var(--mona-green); }
.mona-card p{ color: var(--mona-muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; overflow-wrap: anywhere; }
.mona-card__meta{ color: var(--mona-muted); font-size: .84rem; display: flex; gap: 14px; }
.mona-card--row{ grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.mona-card--row .mona-card__fig{ aspect-ratio: 1; }
.mona-card--row h3{ font-size: 1.15rem; -webkit-line-clamp: 2; min-height: 0; }

/* --- Pagination / empty state ------------------------------------------- */
.mona-pager{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }   /* centred under the grid */
.mona-pager a,.mona-pager span{
	min-width: 48px; min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--mona-line-field); border-radius: var(--mona-r-pill);
	font-family: var(--mona-display); font-weight: 500; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--mona-ink);
	transition: background-color .2s, color .2s, border-color .2s;
}
.mona-pager a:hover{ background: var(--mona-ink); color: var(--mona-page); border-color: var(--mona-ink); }
.mona-pager [aria-current="page"]{ background: var(--mona-green); border-color: var(--mona-green); color: var(--mona-page); }
.mona-pager svg{ width: 16px; height: 16px; }
.mona-pager__gap{ border: 0 !important; min-width: 24px !important; padding: 0 !important; color: var(--mona-muted) !important; }

.mona-empty{
	display: grid; gap: 18px; justify-items: center; text-align: center;
	padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px);
	border: 1.5px dashed var(--mona-line-strong); border-radius: var(--mona-r-panel);
}
.mona-empty > svg{ width: clamp(120px, 20vw, 180px); color: var(--mona-oak-deep); }   /* the illustration only, not button icons */
.mona-empty :is(h1,h2,h3){ font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); max-width: 22ch; }
.mona-empty p{ color: var(--mona-muted); max-width: 46ch; }
.mona-empty__act{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.mona-empty__filter{ font-family: var(--mona-display); font-style: italic; color: var(--mona-ink); }

/* --- Forms -------------------------------------------------------------- */
.mona-form{ display: grid; gap: 20px; }
.mona-form__row{ display: grid; gap: 20px; }
@media (min-width: 640px){ .mona-form__row{ grid-template-columns: 1fr 1fr; } }
/* The 640px query is a viewport query inside a 446px column: two 181px inputs at 960.
   Until container queries, undo it for the width band where the panel is narrow. */
@media (min-width: 960px) and (max-width: 1200px){ .mona-cgrid .mona-form__row{ grid-template-columns: 1fr; } }
.mona-field{ display: grid; gap: 8px; }
.mona-field label{ font-size: .92rem; font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.mona-field__opt{ color: var(--mona-muted); font-weight: 400; font-size: .84rem; }
.mona-req{ color: var(--mona-danger); }
.mona-field input,.mona-field textarea,.mona-field select{
	font: inherit; font-size: 1rem; color: var(--mona-ink); width: 100%;
	padding: 14px 18px; min-height: 54px; background: #fff;
	border: 1.5px solid var(--mona-line-field); border-radius: 16px;
	transition: border-color .2s var(--mona-ease), box-shadow .2s var(--mona-ease), background-color .2s;
	appearance: none; -webkit-appearance: none;
}
.mona-field select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231C1714' stroke-width='1.8'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.mona-field textarea{ min-height: 140px; resize: vertical; }
/* The placeholders carry the expected format ("09xx xxx xxx"), so they have to be
   readable: #9A918A was 3.09:1. */
.mona-field input::placeholder,.mona-field textarea::placeholder{ color: var(--mona-muted); }
.mona-field input:hover,.mona-field textarea:hover,.mona-field select:hover{ border-color: var(--mona-ink); }
.mona-field input:focus,.mona-field textarea:focus,.mona-field select:focus{ outline: none; border-color: var(--mona-green); box-shadow: 0 0 0 4px var(--mona-green-soft); }
.mona-field__hint{ font-size: .85rem; color: var(--mona-muted); }
.mona-field__err{ display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--mona-danger); font-weight: 600; }
.mona-field__err svg{ width: 16px; height: 16px; flex: none; margin-top: 3px; }
.mona-field [aria-invalid="true"]{ border-color: var(--mona-danger); background: #FFFBFA; }
.mona-field [aria-invalid="true"]:focus{ box-shadow: 0 0 0 4px var(--mona-danger-soft); }
.mona-field.is-ok input{ border-color: var(--mona-ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%232E6B3F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l4 4 8-8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.mona-field input[disabled],.mona-field textarea[disabled],.mona-field select[disabled]{ background: var(--mona-linen); color: var(--mona-muted); border-color: var(--mona-line); cursor: not-allowed; }
.mona-choice{ display: flex; flex-wrap: wrap; gap: 8px; }
.mona-choice label{ position: relative; }
.mona-choice input{ position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.mona-choice span{ display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1px solid var(--mona-line-field); border-radius: var(--mona-r-pill); font-size: .92rem; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.mona-choice input:checked + span{ background: var(--mona-ink); color: var(--mona-page); border-color: var(--mona-ink); }
.mona-choice input:focus-visible + span{ outline: 3px solid var(--mona-green); outline-offset: 3px; }
.mona-form__foot{ display: grid; gap: 14px; }
.mona-form__foot small{ color: var(--mona-muted); font-size: .85rem; }
.mona-alert{
	display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
	padding: 20px 22px; border-radius: 18px; font-size: .95rem;
}
.mona-alert span{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.mona-alert svg{ width: 20px; height: 20px; }
.mona-alert b{ display: block; font-family: var(--mona-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 4px; }
.mona-alert--ok{ background: var(--mona-ok-soft); color: var(--mona-ink); }
.mona-alert--ok span{ background: var(--mona-ok); color: #fff; }
.mona-alert--err{ background: var(--mona-danger-soft); }
.mona-alert--err span{ background: var(--mona-danger); color: #fff; }
.mona-form.is-sent > :not(.mona-form__done){ display: none; }
.mona-form__done{ display: none; }
.mona-form.is-sent .mona-form__done{ display: grid; }

/* Search field */
.mona-search{ position: relative; max-width: 620px; }
.mona-search input{
	font: inherit; font-size: 1.05rem; width: 100%; min-height: 62px; padding: 16px 70px 16px 24px;
	border: 1.5px solid var(--mona-line-strong); border-radius: var(--mona-r-pill); background: #fff; color: var(--mona-ink);
	appearance: none; -webkit-appearance: none;   /* Safari paints type=search with its own chrome */
	transition: border-color .2s, box-shadow .2s;
}
.mona-search input:focus{ outline: none; border-color: var(--mona-green); box-shadow: 0 0 0 4px var(--mona-green-soft); }
.mona-search button{ position: absolute; right: 6px; top: 6px; bottom: 6px; width: 50px; border-radius: 50%; border: 0; background: var(--mona-ink); color: var(--mona-page); cursor: pointer; display: grid; place-items: center; transition: background-color .2s; }
.mona-search button:hover{ background: var(--mona-green); }
.mona-search button svg{ width: 20px; height: 20px; }
.mona-search--center{ margin-inline: auto; }

/* --- Contact page ------------------------------------------------------- */
.mona-cgrid{ display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 960px){ .mona-cgrid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.mona-panel{ background: #fff; border: 1px solid var(--mona-line); border-radius: var(--mona-r-panel); padding: clamp(22px, 3.2vw, 40px); }
.mona-panel--linen{ background: var(--mona-linen); border-color: transparent; }
.mona-panel > h3 + p{ margin-top: 12px; }
.mona-info{ display: grid; gap: 22px; }
.mona-info dl{ margin: 0; display: grid; gap: 18px; }
.mona-info dt{ font-size: .84rem; color: var(--mona-muted); margin-bottom: 4px; }
.mona-info dd{ margin: 0; font-size: 1.02rem; }
.mona-info dd a{ color: inherit; }
.mona-info__tel{ font-family: var(--mona-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; }
.mona-hours{ display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.mona-hours div{ display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--mona-line); }
.mona-hours div:last-child{ border-bottom: 0; }
.mona-map{ aspect-ratio: 4 / 3; border-radius: var(--mona-r-img); overflow: hidden; background: var(--mona-linen-2); border: 1px solid var(--mona-line); }
@media (max-width: 480px){ .mona-map{ aspect-ratio: 1; } }   /* 4:3 at 360 leaves 229px — Google's own controls do not fit */
.mona-map iframe{ width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }
.mona-channels{ display: grid; gap: 10px; list-style: none; }
.mona-channels a{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--mona-line); border-radius: 16px; text-decoration: none; color: var(--mona-ink); background: #fff; transition: border-color .2s, transform .3s var(--mona-ease-out); }
.mona-channels a:hover{ border-color: var(--mona-ink); transform: translateX(3px); }
.mona-channels span{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mona-green-soft); color: var(--mona-green); flex: none; }
.mona-channels svg{ width: 18px; height: 18px; }
.mona-channels small{ display: block; color: var(--mona-muted); font-size: .84rem; }

/* --- Article ------------------------------------------------------------ */
.mona-art-hero{ padding-block: clamp(28px, 4vw, 56px) 0; }
.mona-art-hero h1{ max-width: 20ch; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); }
.mona-art-hero__fig{ aspect-ratio: 21 / 9; border-radius: var(--mona-r-panel); overflow: hidden; margin: clamp(28px, 4vw, 48px) 0 0; background: var(--mona-linen-2); }
.mona-art-hero__fig img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px){ .mona-art-hero__fig{ aspect-ratio: 4 / 3; } }
.mona-artgrid{ display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 1000px){ .mona-artgrid{ grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .mona-aside{ position: sticky; top: calc(var(--mona-hdr-h) + 24px); } }
.mona-aside{ display: grid; gap: 22px; }
.mona-toc h2{ font-family: var(--mona-body); font-size: .85rem; font-weight: 600; color: var(--mona-muted); margin-bottom: 10px; }
.mona-toc ol{ list-style: none; display: grid; }
.mona-toc a{ display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--mona-line); color: var(--mona-muted); text-decoration: none; font-size: .93rem; transition: color .2s, border-color .2s; }
.mona-toc a:hover,.mona-toc a.is-active{ color: var(--mona-ink); border-left-color: var(--mona-green); }
/* page.html puts the same table of contents inside .mona-prose, whose generic list
   rules outrank .mona-toc ol at equal weight and indent the border rail. */
.mona-prose .mona-toc ol{ padding-left: 0; }
.mona-prose .mona-toc li + li{ margin-top: 0; }
.mona-aside__cta{ display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--mona-linen); }
.mona-aside__cta p{ font-size: .93rem; color: var(--mona-muted); }
.mona-share{ display: flex; gap: 8px; }
/* 52ch, not 70: `ch` is the width of "0", which in Be Vietnam Pro is 0.676em — far
   wider than an average Vietnamese glyph, so 70ch measured 94 characters per line. */
.mona-prose{ max-width: 52ch; font-size: 1.08rem; line-height: 1.75; }
.mona-prose > * + *{ margin-top: 1.2em; }
.mona-prose h2{ font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin-top: 2em; scroll-margin-top: calc(var(--mona-hdr-h) + 24px); }
.mona-prose h3{ font-size: 1.35rem; margin-top: 1.6em; }
.mona-prose ul,.mona-prose ol{ padding-left: 1.3em; }
.mona-prose li + li{ margin-top: .4em; }
.mona-prose li::marker{ color: var(--mona-oak-deep); }
.mona-prose strong{ font-weight: 600; }
.mona-prose figure{ margin: 2em 0; }
.mona-prose figure img{ border-radius: var(--mona-r-img); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mona-prose figcaption{ font-size: .88rem; color: var(--mona-muted); margin-top: 12px; }
.mona-prose blockquote{ margin: 2em 0; padding-left: 26px; border-left: 3px solid var(--mona-oak); font-family: var(--mona-display); font-style: italic; font-size: 1.45rem; line-height: 1.35; color: var(--mona-ink); }
.mona-gallery{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2em 0; }
.mona-gallery figure{ margin: 0; }
.mona-gallery img{ aspect-ratio: 1; border-radius: var(--mona-r-img); width: 100%; object-fit: cover; }
.mona-spec{ width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .97rem; }
.mona-spec caption{ text-align: left; color: var(--mona-muted); font-size: .88rem; padding-bottom: 10px; caption-side: bottom; padding-top: 10px; }
.mona-spec th,.mona-spec td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--mona-line); vertical-align: top; }
.mona-spec thead th{ font-family: var(--mona-body); font-size: .84rem; font-weight: 600; color: var(--mona-muted); border-bottom-color: var(--mona-line-strong); }
.mona-spec tbody th{ font-weight: 600; width: 44%; }
.mona-spec td{ font-variant-numeric: tabular-nums; }
.mona-spec tbody tr:hover{ background: rgba(28,23,20,.03); }
.mona-note{ display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 20px 22px; border-radius: 18px; background: var(--mona-linen); font-size: .98rem; }
.mona-note span{ width: 40px; height: 40px; border-radius: 50%; background: var(--mona-oak-soft); color: var(--mona-oak-deep); display: grid; place-items: center; }
.mona-note svg{ width: 18px; height: 18px; }
.mona-note b{ display: block; font-weight: 600; margin-bottom: 2px; }
.mona-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--mona-line); }
.mona-author{ display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; margin-top: 2em; padding: 20px; border-radius: 20px; border: 1px solid var(--mona-line); }
.mona-author span{ width: 56px; height: 56px; border-radius: 50%; background: var(--mona-oak-soft); display: grid; place-items: center; font-family: var(--mona-display); font-weight: 600; color: var(--mona-oak-deep); }
.mona-author p{ font-size: .93rem; color: var(--mona-muted); }
.mona-author b{ color: var(--mona-ink); }

/* --- About page --------------------------------------------------------- */
.mona-values{ display: grid; gap: clamp(20px, 3vw, 32px); }
.mona-value{ display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--mona-line); align-content: start; }
.mona-value svg{ width: 34px; height: 34px; color: var(--mona-oak-deep); }
.mona-value h3{ font-size: 1.45rem; }
.mona-value p{ color: var(--mona-muted); font-size: .97rem; }
@media (min-width: 760px){ .mona-values{ grid-template-columns: repeat(3, 1fr); } }
.mona-mosaic{ display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(2, 1fr); }
.mona-mosaic figure{ margin: 0; position: relative; border-radius: var(--mona-r-img); overflow: hidden; background: var(--mona-linen-2); aspect-ratio: 4 / 5; }
.mona-mosaic img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-mosaic figure:hover img{ transform: scale(1.04); }
.mona-mosaic figure::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(28,23,20,0) 55%, rgba(28,23,20,.82) 100%);
}
.mona-mosaic figcaption{ position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 1; color: #fff; font-size: .88rem; font-weight: 500; }
@media (min-width: 760px){ .mona-mosaic{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .mona-mosaic figure{ aspect-ratio: auto; min-height: 260px; } .mona-mosaic .is-big{ grid-column: span 2; grid-row: span 2; } .mona-mosaic .is-wide{ grid-column: span 2; } }
.mona-split{ display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.mona-split__fig{ margin: 0; border-radius: var(--mona-r-panel); overflow: hidden; aspect-ratio: 4 / 5; background: var(--mona-linen-2); }
.mona-split__fig img{ width: 100%; height: 100%; object-fit: cover; }
.mona-split__copy{ display: grid; gap: 18px; max-width: 56ch; }
.mona-split__copy p{ color: var(--mona-muted); }
.mona-split__copy h2{ max-width: 15ch; }
@media (min-width: 900px){ .mona-split{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .mona-split--rev .mona-split__fig{ order: 2; } }
.mona-promise{ display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--mona-r-panel); background: var(--mona-linen); }
.mona-band--linen .mona-promise{ background: var(--mona-page); }   /* on a linen band the panel lifts to plaster */
.mona-promise ul{ list-style: none; display: grid; gap: 10px; }
.mona-promise li{ display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .98rem; }
.mona-promise li svg{ width: 22px; height: 22px; color: var(--mona-green); margin-top: 2px; }
/* Kept without a caller on purpose: a visible "to-do" box is the right treatment
   when a client-supplied paragraph is genuinely missing, and about.html dropped its
   one use only because the sentence there could be written neutrally instead. */
.mona-promise__todo{ font-size: .9rem; color: var(--mona-ink); padding: 12px 14px; border: 1px dashed var(--mona-oak-deep); border-radius: 12px; }

/* --- Styleguide page ---------------------------------------------------- */
.mona-sg{ display: grid; gap: clamp(48px, 6vw, 88px); }
.mona-sg__sec{ display: grid; gap: 22px; padding-top: 28px; border-top: 1px solid var(--mona-line); }
.mona-sg__sec > h2{ font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
.mona-sg__note{ color: var(--mona-muted); font-size: .95rem; max-width: 52ch; }
.mona-tokens{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.mona-token{ display: grid; gap: 8px; font-size: .84rem; }
/* A grid item's auto minimum is its min-content width, so the unbroken token
   value (rgba(28,23,20,.5)) pushed each child ~12px past its own 1fr track at
   every width. Floor the minimum and let the value wrap. */
.mona-token > *{ min-width: 0; }
.mona-token span{ overflow-wrap: anywhere; }
.mona-token i{ display: block; aspect-ratio: 3 / 2; border-radius: 14px; border: 1px solid var(--mona-line); }
.mona-token b{ font-weight: 600; }
.mona-token span{ color: var(--mona-muted); font-variant-numeric: tabular-nums; }
.mona-typo{ display: grid; gap: 14px; }
.mona-typo > div{ display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--mona-line); }
.mona-typo small{ color: var(--mona-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mona-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mona-sg__dark{ position: relative; overflow: hidden; background: var(--mona-walnut); color: var(--mona-on-dark); padding: 22px; border-radius: 20px; }

/* --- Reveal + motion ---------------------------------------------------- */
[data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--mona-ease), transform 1s var(--mona-ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-in,html:not(.mona-motion) [data-reveal]{ opacity: 1; transform: none; }
[data-reveal="clip"]{ transform: none; clip-path: inset(6% 0 6% 0 round var(--mona-r-img)); transition: opacity .6s var(--mona-ease), clip-path 1.1s var(--mona-ease-out); }
[data-reveal="clip"].is-in,html:not(.mona-motion) [data-reveal="clip"]{ clip-path: inset(0 0 0 0 round var(--mona-r-img)); }
[data-reveal="clip"] img{ transform: scale(1.12); transition: transform 1.4s var(--mona-ease-out); }
[data-reveal="clip"].is-in img,html:not(.mona-motion) [data-reveal="clip"] img{ transform: scale(1); }
/* the hero sequence: JS animates these; without JS/with reduced motion they show */
html.mona-motion .mona-hero [data-hero]{ opacity: 0; }
/* Each line is masked for the rise-in. The mask is taller than the line box so
   descenders (g, y, ạ) and stacked tone marks (ấ, ố) are not clipped at .98
   line-height; negative margins give the extra height back to the layout. */
.mona-line-mask{ display: block; overflow: hidden; padding: .1em 0 .18em; margin: -.1em 0 -.18em; }
.mona-line-mask > span{ display: block; }

@keyframes mona-marquee{ to{ transform: translateX(-50%); } }
html.mona-motion .mona-marquee__track{ animation: mona-marquee 38s linear infinite; }
html.mona-motion .mona-marquee:hover .mona-marquee__track{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --- Print -------------------------------------------------------------- */
@media print{
	.mona-hdr,.mona-drawer,.mona-totop,.mona-marquee,.mona-cta,.mona-ftr__word{ display: none !important; }
	body{ background: #fff; color: #000; }
}