/* ==========================================================================
   Component sheet — ported from source/template/assets/css/style.css.
   cs- became mona-; custom properties gained the mona- prefix. The prototype's
   reset and motion mechanics come first, the design layer after.
   ========================================================================== */
/* ==========================================================================
   Chụp Ảnh Sinh Nhật — prototype stylesheet (SCAFFOLD)

   What ships here is the MECHANICS only: a reset, focus and skip-link, the
   states main.js toggles, and the sticky/clip/reveal plumbing the effects
   need — all written against data-* attributes so they survive any class
   prefix. The DESIGN is yours: replace every token below, then write the
   components with the project prefix (`pc-` for a project coded "pc";
   renamed to `mona-` at port time — prototype-fidelity.md).

   ⚠ The token values below are deliberately dull greys. They exist so the
   scaffold renders; they must not survive into a reviewed prototype. Read
   .claude/rules/prototype-build.md § 2 before choosing the real ones and
   record the contrast ratio of every text/background pair in this comment.
   ========================================================================== */


/* --- 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-font-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); }
a{ color: var(--mona-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1,h2,h3,h4{ font-family: var(--mona-font-display); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1{ font-size: var(--mona-fs-h1); letter-spacing: -0.015em; line-height: 1.2; }
h2{ font-size: var(--mona-fs-h2); letter-spacing: -0.018em; }
h3{ font-size: var(--mona-fs-h3); }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
ul,ol{ margin: 0; padding: 0; }
button{ font: inherit; color: inherit; }

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

/* Screen-reader-only text and the skip link. Keep both; every page needs them. */
[data-sr],.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
[data-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); }
[data-skip]:focus{ transform: none; }

/* --- Mechanics main.js relies on ------------------------------------------ */
/* Sticky header: glass when scrolled, slides away on scroll down. */
[data-header]{ position: sticky; top: 0; z-index: 60; transition: transform .5s var(--mona-ease-out), border-color .3s var(--mona-ease), background-color .3s var(--mona-ease); }
[data-header].is-hidden{ transform: translateY(-100%); }

/* Drawer: hidden until .is-open; style the inside with project classes. */
[data-drawer]{ position: fixed; inset: 0; z-index: 55; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(-4%); transition: opacity .35s var(--mona-ease), transform .5s var(--mona-ease-out), visibility 0s .35s; }
[data-drawer].is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--mona-ease), transform .5s var(--mona-ease-out); }
@media (min-width: 1100px){ [data-drawer]{ display: none; } }

/* To-top button appears after 900px. */
[data-totop]{ position: fixed; right: 20px; bottom: 20px; z-index: 50; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--mona-ease-out); }
[data-totop].is-show{ opacity: 1; transform: none; }

/* Hero entrance: JS reveals these; without motion they are simply visible. */
html.js-motion [data-hero] :is([data-hero-line] > *, [data-hero-fade], [data-hero-media], [data-hero-detail]){ visibility: hidden; }
/* Masked lines are taller than the line box so descenders (g, y, ạ) and stacked
   tone marks (ấ, ố) survive a tight line-height; negative margins hand the room back. */
[data-hero-line]{ display: block; overflow: hidden; padding: .1em 0 .18em; margin: -.1em 0 -.18em; }
[data-hero-line] > *{ display: block; }

/* Dimension line: three elements so the ticks stay crisp at any width. */
[data-dim]{ position: absolute; pointer-events: none; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); height: 18px; }
[data-dim-line]{ position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
[data-dim-tick]{ position: absolute; top: 0; width: 1.5px; height: 100%; background: currentColor; }
[data-dim-tick]:first-of-type{ left: 0; } [data-dim-tick]:last-of-type{ right: 0; }
[data-dim-label]{ position: absolute; left: 50%; top: -36px; transform: translateX(-50%); font-family: var(--mona-font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Reveals: opacity/translate, or a clip for image boxes. --d delays. */
[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(.js-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(.js-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(.js-motion) [data-reveal="clip"] img{ transform: scale(1); }

/* Marquee: the track scrolls by half its width because JS cloned the group once. */
[data-marquee]{ overflow: hidden; }
[data-marquee-track]{ display: flex; width: max-content; will-change: transform; }
[data-marquee-group]{ display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
html.js-motion [data-marquee-track]{ animation: marquee 38s linear infinite; }
html.js-motion [data-marquee]:hover [data-marquee-track]{ animation-play-state: paused; }
[data-marquee].is-static [data-marquee-track]{ flex-wrap: wrap; width: auto; }
[data-marquee].is-static [data-marquee-group] + [data-marquee-group]{ display: none; }

/* Story: static list by default; with motion a tall track with a sticky stage.
   Set the stage's two-column grid and the media box with project classes. */
[data-story-layer]{ position: absolute; inset: 0; margin: 0; }
[data-story-layer] img{ width: 100%; height: 100%; object-fit: cover; }
[data-story-layer]{ opacity: 0; }
[data-story-layer]:last-of-type{ opacity: 1; }                 /* static: show the final frame */
[data-story-progress]{ display: none; }
html.js-motion [data-story]{ height: 420vh; }
html.js-motion [data-story-stage]{ position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--mona-hdr-h) + 16px); padding-bottom: 24px; }
html.js-motion [data-story-layer]{ opacity: 0; }
html.js-motion [data-story-layer][data-step="1"]{ opacity: 1; }
html.js-motion [data-story-steps]{ position: relative; }
html.js-motion [data-story-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.js-motion [data-story-step].is-active{ position: relative; opacity: 1; transform: none; pointer-events: auto; }
html.js-motion [data-story-progress]{ display: flex; gap: 8px; }
html.js-motion [data-story-progress] > i{ height: 4px; flex: 1; border-radius: 2px; background: var(--mona-line); overflow: hidden; position: relative; }
html.js-motion [data-story-progress] > i::after{ content: ""; position: absolute; inset: 0; background: var(--mona-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@media (min-width: 900px){ html.js-motion [data-story-steps]{ min-height: 15rem; } }   /* a shorter step must not re-centre the column */

/* Accordion gallery: flex-grow does the opening; project classes do the look. */
[data-accordion-gallery]{ display: flex; gap: 10px; }
[data-accordion-gallery] [data-panel]{ position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; border: 0; padding: 0; text-align: left; transition: flex-grow .8s var(--mona-ease-out); }
[data-accordion-gallery] [data-panel].is-open{ flex-grow: 3.4; }
[data-accordion-gallery] [data-panel] > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Rail: a scroll-snap track. */
[data-rail-track]{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; scroll-padding-inline: var(--mona-gutter); padding-inline: var(--mona-gutter); }
[data-rail-track]::-webkit-scrollbar{ display: none; }
[data-rail-track].is-dragging{ cursor: grabbing; scroll-snap-type: none; }
[data-rail-track].is-dragging a{ pointer-events: none; }
[data-rail-track] > *{ flex: 0 0 min(78vw, 420px); scroll-snap-align: start; align-content: start; }
[data-rail-bar]{ flex: 1; height: 2px; background: var(--mona-line); border-radius: 2px; overflow: hidden; }
[data-rail-bar] > i{ display: block; height: 100%; width: 20%; background: var(--mona-ink); border-radius: 2px; transition: transform .2s linear, width .3s; }

/* Voices: stacked items, one active. */
[data-voice-stage]{ position: relative; }
[data-voice-item]{ position: absolute; inset: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .6s var(--mona-ease), transform .8s var(--mona-ease-out); }
[data-voice-item].is-active{ position: relative; opacity: 1; transform: none; pointer-events: auto; }
[data-voice-dot] > i::after{ transform: scaleX(0); transform-origin: 0 50%; }
[data-voice-dot][aria-selected="true"] > i::after{ transform: scaleX(1); transition: transform var(--voice-dur, 7s) linear; }
[data-voice].is-paused [data-voice-dot][aria-selected="true"] > i::after{ transition: none; }

/* FAQ: the body is measured and tweened by JS. */
[data-faq] summary{ list-style: none; cursor: pointer; }
[data-faq] summary::-webkit-details-marker{ display: none; }
[data-faq-body]{ overflow: hidden; }

/* Forms: busy spinner and the sent state. */
@keyframes spin{ to{ transform: rotate(360deg); } }
.is-busy [data-spin]{ animation: spin 1s linear infinite; }
form[data-demo].is-sent > :not([data-form-done]){ display: none; }
[data-form-done]{ display: none; }
form[data-demo].is-sent [data-form-done]{ display: grid; }

/* Reduced motion: nothing moves that the visitor did not ask to move. */
@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   DESIGN LAYER — "Tạp chí ảnh". Prefix cs- (renamed mona- on port).
   Square photographs, hairline rules, one serif, one metal. No pills, no
   rounded boxes, no tinted cards: hierarchy comes from type and space.
   ========================================================================== */

/* --- Primitives ----------------------------------------------------------- */
body{ font-weight: 400; }
a{ text-decoration-thickness: 1px; text-underline-offset: .22em; }
.mona-container{ width: min(100% - 2*var(--mona-gutter), var(--mona-container)); margin-inline: auto; }
.mona-container--wide{ width: min(100% - 2*var(--mona-gutter), var(--mona-container-wide)); }
.mona-section{ padding-block: var(--mona-section); }
.mona-section + .mona-section:not([class*="--"]){ border-top: 1px solid var(--mona-line); }
.mona-section--tint,.mona-section--blush{ background: var(--mona-surface); }
.mona-section--dark{ background: var(--mona-dark); color: var(--mona-on-dark); }
.mona-section--mona-dark:is(h1,h2,h3){ color: #fff; }
.mona-section--dark a{ color: #fff; }
.mona-section--dark .mona-muted,.mona-section--dark .mona-lead{ color: var(--mona-on-dark-muted); }
.mona-muted{ color: var(--mona-muted); }
.mona-lead{ font-size: var(--mona-fs-lead); line-height: 1.65; color: var(--mona-muted); max-width: 34em; }
.mona-head{ display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); max-width: 46rem; }
.mona-head h2{ max-width: 18em; }
/* The kicker: a small italic serif line, not an all-caps label. */
.mona-tag{ display: inline-flex; align-items: center; gap: 12px; font-family: var(--mona-font-display); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--mona-gold-text); }
.mona-tag::before{ content: ""; width: 28px; height: 1px; background: currentColor; }
.mona-section--dark .mona-tag{ color: var(--mona-gold); }
.mona-rule{ border: 0; border-top: 1px solid var(--mona-line-strong); margin: 0; }

/* --- Buttons and links ----------------------------------------------------- */
.mona-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 30px; border: 1px solid transparent; border-radius: 0; font-weight: 500; font-size: .9375rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-color .3s var(--mona-ease), color .3s var(--mona-ease), border-color .3s var(--mona-ease); }
.mona-btn--primary{ background: var(--mona-ink); color: var(--mona-page); }
.mona-btn--mona-primary:hover{ background: #3A342E; }
.mona-btn--ghost{ border-color: var(--mona-control); color: var(--mona-ink); background: transparent; }
.mona-btn--mona-ghost:hover{ border-color: var(--mona-ink); background: var(--mona-ink); color: var(--mona-page); }
.mona-btn--candle{ background: var(--mona-gold); color: var(--mona-dark); }
.mona-btn--mona-candle:hover{ background: #fff; }
.mona-section--dark .mona-btn--ghost{ border-color: var(--mona-control-dark); color: #fff; }
.mona-btn[disabled]{ opacity: .45; cursor: not-allowed; }
/* The editorial text link: a line that draws out on hover. */
.mona-link,.mona-more{ display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--mona-ink); font-weight: 500; text-decoration: none; }
.mona-more::after{ content: ""; width: 40px; height: 1px; background: currentColor; transition: width .5s var(--mona-ease-out); }
.mona-more:hover::after{ width: 64px; }
.mona-link{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

/* --- Disclosure strip and header ------------------------------------------ */
.mona-notice{ background: var(--mona-surface); color: var(--mona-muted); font-size: .8125rem; line-height: 1.5; border-bottom: 1px solid var(--mona-line); }
.mona-notice .mona-container{ display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 8px; text-align: center; }
.mona-notice p{ margin: 0; }
.mona-notice a{ color: var(--mona-ink); white-space: nowrap; }
.mona-notice svg{ display: none; }

.mona-header{ background: var(--mona-page); border-bottom: 1px solid var(--mona-line); }
.mona-header.is-solid{ background: rgba(245,241,234,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mona-header__bar{ display: flex; align-items: center; gap: 24px; min-height: var(--mona-hdr-h); }
.mona-logo{ display: inline-flex; align-items: baseline; gap: 10px; color: var(--mona-ink); text-decoration: none; font-family: var(--mona-font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.mona-logo svg{ display: none; }   /* v1 candle mark: retired, the wordmark is the logo */
.mona-logo em{ font-size: .95rem; color: var(--mona-gold-text); }
.mona-nav{ display: none; align-items: center; gap: clamp(20px, 2.6vw, 40px); list-style: none; }
.mona-navwrap{ display: contents; }
.mona-nav a{ position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--mona-ink); text-decoration: none; font-size: .9375rem; }
.mona-nav a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--mona-ease-out); }
.mona-nav a:hover::after,.mona-nav a[aria-current="page"]::after{ transform: scaleX(1); }
.mona-header__tools{ margin-left: auto; display: flex; align-items: center; gap: 4px; }
.mona-iconbtn{ display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: var(--mona-ink); cursor: pointer; text-decoration: none; }
.mona-iconbtn svg{ width: 21px; height: 21px; }
.mona-burger svg{ width: 26px; }
@media (min-width: 1100px){
	.mona-nav{ display: flex; margin-left: auto; }
	.mona-header__tools{ margin-left: 8px; }
	.mona-burger{ display: none; }
}
@media (max-width: 420px){ .mona-logo{ font-size: 1.2rem; } }

/* Drawer: full-screen sheet over the page in the darkroom colour. */
.mona-drawer{ z-index: 70; /* above the sticky header (60): the drawer carries its own close button */ background: var(--mona-dark); color: var(--mona-on-dark); display: flex; flex-direction: column; padding: calc(var(--mona-hdr-h) + 24px) var(--mona-gutter) max(28px, env(safe-area-inset-bottom)); }
.mona-drawer__top{ position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; min-height: var(--mona-hdr-h); padding-inline: var(--mona-gutter); border-bottom: 1px solid var(--mona-line-dark); }
.mona-drawer .mona-logo,.mona-drawer .mona-iconbtn{ color: #fff; }
.mona-drawer__list{ list-style: none; display: grid; }
.mona-drawer__list a{ display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--mona-line-dark); color: #fff; text-decoration: none; font-family: var(--mona-font-display); font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.25; }
.mona-drawer__list a[aria-current="page"]{ font-style: italic; color: var(--mona-gold); }
html.js-motion .mona-drawer__list li{ opacity: 0; transform: translateY(14px); transition: opacity .5s var(--mona-ease), transform .7s var(--mona-ease-out); }
html.js-motion .mona-drawer.is-open .mona-drawer__list li{ opacity: 1; transform: none; }
html.js-motion .mona-drawer.is-open .mona-drawer__list li:nth-child(2){ transition-delay: .05s; }
html.js-motion .mona-drawer.is-open .mona-drawer__list li:nth-child(3){ transition-delay: .1s; }
html.js-motion .mona-drawer.is-open .mona-drawer__list li:nth-child(4){ transition-delay: .15s; }
.mona-drawer__foot{ margin-top: auto; padding-top: 28px; color: var(--mona-on-dark-muted); font-size: .875rem; }
@media (max-height: 560px){ .mona-drawer__list a{ min-height: 48px; font-size: 1.4rem; } }

/* --- Hero: one tall print, the headline set beside it ------------------------ */
.mona-hero{ padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 120px); }
.mona-hero__grid{ display: grid; gap: clamp(32px, 5vw, 80px); align-items: end; }
.mona-hero__copy{ display: grid; gap: 28px; align-content: end; padding-bottom: clamp(0px, 3vw, 40px); }
.mona-hero h1{ max-width: 11em; }
.mona-hero .mona-lead{ max-width: 25em; }
.mona-hero__meta{ max-width: 26em !important; }
.mona-hero h1 em{ font-style: italic; color: var(--mona-gold-text); }
.mona-hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.mona-hero__meta{ font-size: .875rem; color: var(--mona-muted); max-width: 30em; border-top: 1px solid var(--mona-line); padding-top: 18px; }
.mona-hero__media{ position: relative; margin: 0; }
.mona-hero__print{ position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--mona-dark); }
.mona-hero__print img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }   /* hero-print.jpg is cut from hero-cake.jpg around the cake */
.mona-hero__inset{ position: absolute; left: clamp(-64px, -4vw, -24px); bottom: clamp(40px, 6vw, 88px); width: 34%; margin: 0; padding: 8px; background: var(--mona-page); box-shadow: 0 30px 60px -30px rgba(20,17,15,.45); }
.mona-hero__inset img{ aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.mona-caption{ display: flex; gap: 12px; margin-top: 14px; font-size: .8125rem; line-height: 1.55; color: var(--mona-muted); }
.mona-caption b{ font-family: var(--mona-font-display); font-style: italic; font-weight: 500; color: var(--mona-ink); font-size: .9375rem; white-space: nowrap; }
@media (min-width: 900px){
	.mona-hero__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
	.mona-hero__print{ aspect-ratio: auto; height: min(78vh, 760px); min-height: 520px; }
}
@media (max-width: 899px){
	.mona-hero__inset{ display: none; }
	.mona-hero__copy{ padding-bottom: 0; }
	.mona-hero h1{ font-size: clamp(2.3rem, 10vw, 3.2rem); }
}

/* --- Editor's letter: one paragraph in large serif ------------------------------ */
.mona-letter{ display: grid; gap: 28px; }
.mona-letter p{ font-family: var(--mona-font-display); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.45; max-width: 26em; margin: 0; }
.mona-letter p:first-child::first-letter{ float: left; font-size: 3.1em; line-height: .9; padding: .06em .1em 0 0; color: var(--mona-gold-text); }
.mona-letter__sign{ font-size: .875rem; color: var(--mona-muted); }
@media (min-width: 900px){ .mona-letter{ grid-template-columns: 14rem minmax(0, 1fr); } }

/* --- What a quote contains: sticky title, ruled list ------------------------------ */
.mona-split{ display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.mona-split__copy{ min-width: 0; display: grid; gap: 18px; align-content: start; }
.mona-split__form{ padding: clamp(22px, 3vw, 40px); background: #fff; border: 1px solid var(--mona-line); }
@media (min-width: 900px){
	.mona-split{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.mona-split--sticky > :first-child{ position: sticky; top: calc(var(--mona-hdr-h) + 32px); }
}
.mona-anatomy{ display: grid; border-top: 1px solid var(--mona-ink); counter-reset: anat; }
.mona-anatomy__row{ display: grid; gap: 8px 32px; padding-block: 28px; border-bottom: 1px solid var(--mona-line-strong); }
.mona-anatomy__row h3{ font-size: var(--mona-fs-h3); line-height: 1.3; }
.mona-anatomy__row p{ color: var(--mona-muted); max-width: 36em; }
.mona-anatomy__ask{ font-family: var(--mona-font-display); font-style: italic; color: var(--mona-ink) !important; font-size: 1.1rem; }
@media (min-width: 700px){ .mona-anatomy__row{ grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }

/* --- Story: the darkroom band ----------------------------------------------------- */
.mona-storywrap{ background: var(--mona-dark); color: var(--mona-on-dark); }
.mona-storywrap h2,.mona-storywrap h3{ color: #fff; }
.mona-storywrap .mona-tag{ color: var(--mona-gold); }
.mona-story__stage{ display: grid; gap: 28px; align-content: center; }
.mona-story__copy{ display: grid; gap: 28px; align-content: center; }
.mona-story__copy h2{ font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.mona-story__media{ position: relative; aspect-ratio: 4/5; overflow: hidden; background: #000; }
.mona-story__caption{ position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-family: var(--mona-font-display); font-style: italic; font-size: 1.05rem; line-height: 1.45; }
.mona-story__step .mona-story__n{ display: block; font-family: var(--mona-font-display); font-style: italic; color: var(--mona-gold); font-size: 1rem; margin-bottom: 10px; }
.mona-story__step h3{ font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: 12px; }
.mona-story__step p{ color: var(--mona-on-dark-muted); max-width: 30em; }
html.js-motion [data-story-progress] > i{ background: var(--mona-line-dark); height: 2px; border-radius: 0; }
html.js-motion [data-story-progress] > i::after{ background: var(--mona-gold); }
@media (min-width: 900px){
	.mona-story__stage{ grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 120px); }
	html.js-motion .mona-story__media{ aspect-ratio: auto; height: calc(100svh - var(--mona-hdr-h) - 64px); max-height: 760px; }
}
html:not(.js-motion) .mona-storywrap .mona-story__stage{ padding-block: var(--mona-section); }
html:not(.js-motion) .mona-story__step{ margin-bottom: 40px; }
html:not(.js-motion) [data-story-layer]{ position: relative; opacity: 1; margin-bottom: 12px; }
html:not(.js-motion) .mona-story__media{ aspect-ratio: auto; display: grid; gap: 12px; background: none; }
html:not(.js-motion) [data-story-layer] img{ aspect-ratio: 4/5; }
html:not(.js-motion) .mona-story__caption{ display: none; }
@media (max-width: 899px){
	html.js-motion .mona-story__stage{ gap: 18px; align-content: start; }
	html.js-motion .mona-story__media{ order: -1; aspect-ratio: auto; width: 100%; height: 32svh; flex: none; }
	html.js-motion .mona-story__copy .mona-tag{ display: none; }
	html.js-motion .mona-story__copy{ gap: 16px; }
	html.js-motion .mona-story__copy .mona-head h2{ font-size: 1.5rem; }
	html.js-motion [data-story]{ height: 360vh; }
	.mona-story__step h3{ font-size: 1.35rem; }
}

/* --- Occasions: a magazine spread ---------------------------------------------------- */
.mona-spread{ display: grid; gap: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.mona-spread__item{ display: grid; gap: 16px; align-content: start; color: inherit; text-decoration: none; }
.mona-spread__img{ overflow: hidden; aspect-ratio: 4/5; background: var(--mona-surface); }
.mona-spread__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-spread__item:hover .mona-spread__img img{ transform: scale(1.04); }
.mona-spread__item h3{ font-size: var(--mona-fs-h3); line-height: 1.3; }
.mona-spread__item p{ color: var(--mona-muted); font-size: .9875rem; max-width: 30em; }
.mona-spread__item .mona-more{ margin-top: 4px; }
@media (min-width: 700px){ .mona-spread{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){
	.mona-spread{ grid-template-columns: 1.25fr 1fr 1fr; align-items: start; }
	.mona-spread__item:first-child{ grid-row: span 2; }
	.mona-spread__item:first-child .mona-spread__img{ aspect-ratio: 3/4; }
	.mona-spread__item:nth-child(n+2) .mona-spread__img{ aspect-ratio: 4/3; }
}

/* --- Studio register: a ruled table of who was named, where, and by whom ------------- */
.mona-studios{ list-style: none; border-top: 1px solid var(--mona-ink); }
.mona-studio{ display: grid; gap: 6px 32px; padding-block: 24px; border-bottom: 1px solid var(--mona-line-strong); }
.mona-studio h3{ font-size: 1.45rem; line-height: 1.3; }
.mona-studio__where{ color: var(--mona-muted); font-size: .875rem; margin-top: 4px; }
.mona-studio p{ margin: 0; }
.mona-studio__src{ margin-top: 8px !important; font-size: .8125rem; color: var(--mona-muted); font-style: italic; }
@media (min-width: 820px){ .mona-studio{ grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.mona-disclaimer{ display: flex; gap: 12px; padding: 18px 0 0; border-top: 1px solid var(--mona-line); color: var(--mona-muted); font-size: .875rem; line-height: 1.6; max-width: 34rem; }
.mona-disclaimer svg{ flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--mona-gold-text); }

/* --- Cards: print, italic section, serif title --------------------------------------- */
.mona-card{ display: grid; grid-template-rows: auto 1fr; gap: 18px; color: inherit; text-decoration: none; }
.mona-card__img{ aspect-ratio: 4/5; overflow: hidden; background: var(--mona-surface); position: relative; }
.mona-card__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--mona-ease-out); }
.mona-card:hover .mona-card__img img{ transform: scale(1.04); }
.mona-card__img--empty{ display: grid; place-items: center; background: var(--mona-surface); color: var(--mona-gold-text); }
.mona-card__img--empty svg{ width: 36px; height: 36px; }
.mona-card__body{ display: grid; gap: 10px; align-content: start; }
.mona-card__meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--mona-muted); font-size: .8125rem; }
.mona-card__meta b{ font-family: var(--mona-font-display); font-style: italic; font-weight: 500; font-size: .9875rem; color: var(--mona-gold-text); }
.mona-card :is(h2,h3){ font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mona-card p{ color: var(--mona-muted); font-size: .9375rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mona-card:hover :is(h2,h3){ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mona-grid{ display: grid; gap: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 640px){ .mona-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .mona-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mona-grid > :only-child{ grid-column: 1 / -1; max-width: 26rem; }
.mona-head--row{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; max-width: none; }

/* v1 rail and sheet classes still used by not-yet-redone pages */
.mona-rail__top{ display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.mona-rail__nav{ display: flex; gap: 8px; }
.mona-rail__nav button{ display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--mona-control); background: transparent; cursor: pointer; }
.mona-rail__foot{ display: flex; gap: 20px; align-items: center; margin-top: 24px; }
[data-rail-track]{ gap: clamp(16px, 2vw, 28px); }
.mona-strip{ border-block: 1px solid var(--mona-line); padding-block: 18px; }
.mona-strip__item{ font-family: var(--mona-font-display); font-style: italic; font-size: 1.3rem; white-space: nowrap; line-height: 1.4; }

/* --- FAQ ----------------------------------------------------------------------------- */
.mona-faq{ display: grid; border-top: 1px solid var(--mona-ink); }
.mona-faq details{ border-bottom: 1px solid var(--mona-line-strong); }
.mona-faq summary{ display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding-block: 18px; font-family: var(--mona-font-display); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); line-height: 1.4; }
.mona-faq summary::after{ content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 100% no-repeat; transition: transform .4s var(--mona-ease-out); }
.mona-faq details[open] summary::after{ transform: rotate(45deg); }
.mona-faq [data-faq-body]{ padding-bottom: 24px; color: var(--mona-muted); max-width: 40em; }

/* --- Closing band and footer ------------------------------------------------------------ */
.mona-cta{ display: grid; gap: 32px; align-items: end; }
.mona-cta h2{ max-width: 16em; }
@media (min-width: 860px){ .mona-cta{ grid-template-columns: 1.4fr auto; } }
.mona-footer{ background: var(--mona-dark); color: var(--mona-on-dark-muted); padding-block: clamp(56px, 8vw, 104px) 32px; font-size: .9375rem; }
.mona-footer a{ color: #fff; text-decoration: none; }
.mona-footer a:hover{ text-decoration: underline; }
.mona-footer__grid{ display: grid; gap: 40px; }
@media (min-width: 860px){ .mona-footer__grid{ grid-template-columns: 1.6fr 1fr 1fr; } }
.mona-footer .mona-logo{ color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 18px; white-space: normal; }
.mona-footer p{ max-width: 30em; }
.mona-footer h2{ font-family: var(--mona-font-display); font-style: italic; font-size: 1.05rem; color: var(--mona-gold); margin-bottom: 14px; font-weight: 500; line-height: 1.4; }
.mona-footer ul{ list-style: none; display: grid; gap: 2px; }
.mona-footer ul a{ display: inline-flex; align-items: center; min-height: 40px; }
.mona-footer__legal{ margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--mona-line-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; justify-content: space-between; font-size: .8125rem; }
.mona-totop{ display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--mona-page); color: var(--mona-ink); border: 1px solid var(--mona-line-strong); cursor: pointer; }
.mona-totop svg{ width: 18px; height: 18px; }

/* --- Inner pages -------------------------------------------------------------------------- */
.mona-pagehead{ padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--mona-line); }
.mona-pagehead h1{ font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); max-width: 16em; }
.mona-pagehead .mona-lead{ margin-top: 20px; }
.mona-crumbs{ display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin-bottom: 22px; font-size: .8125rem; color: var(--mona-muted); }
.mona-crumbs li + li::before{ content: "/"; margin-right: 10px; color: var(--mona-line-strong); }
.mona-crumbs a{ color: var(--mona-muted); display: inline-flex; align-items: center; min-height: 32px; }
.mona-tabs{ display: flex; flex-wrap: wrap; gap: 4px 28px; list-style: none; margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--mona-line); }
.mona-tabs a{ position: relative; display: inline-flex; align-items: center; min-height: 48px; color: var(--mona-muted); text-decoration: none; font-size: .9375rem; }
.mona-tabs a:hover{ color: var(--mona-ink); }
.mona-tabs a[aria-current="true"]{ color: var(--mona-ink); }
.mona-tabs a[aria-current="true"]::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mona-ink); }
.mona-pager{ display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: clamp(48px, 6vw, 80px); }
.mona-pager a,.mona-pager span{ display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid transparent; text-decoration: none; color: var(--mona-ink); font-variant-numeric: tabular-nums; }
.mona-pager a:hover{ border-color: var(--mona-control); }
.mona-pager [aria-current="page"]{ border-color: var(--mona-ink); font-weight: 600; }
.mona-search{ display: flex; gap: 0; max-width: 36rem; }
.mona-search input{ flex: 1; min-width: 0; }
.mona-search .mona-btn{ flex: none; }
.mona-empty{ display: grid; justify-items: start; gap: 16px; padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--mona-ink); border-bottom: 1px solid var(--mona-line); }
.mona-empty h2{ font-size: var(--mona-fs-h3); }
.mona-empty svg{ width: 36px; height: 36px; color: var(--mona-gold-text); }

/* --- Forms --------------------------------------------------------------------------------- */
.mona-form{ display: grid; gap: 22px; }
.mona-field{ display: grid; gap: 8px; }
.mona-field label{ font-size: .875rem; font-weight: 500; }
.mona-field label small{ font-weight: 400; color: var(--mona-muted); }
.mona-input,.mona-field input,.mona-field textarea,.mona-field select,.mona-search input{ width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--mona-control); border-radius: 0; background: #fff; color: var(--mona-ink); font: inherit; font-size: 1rem; /* ≥16px: Safari iOS does not zoom */ -webkit-appearance: none; appearance: none; }
.mona-field textarea{ min-height: 150px; resize: vertical; }
.mona-field :is(input,textarea,select):hover{ border-color: var(--mona-ink); }
.mona-field :is(input,textarea,select):focus,.mona-search input:focus{ outline: 2px solid var(--mona-ink); outline-offset: 0; border-color: var(--mona-ink); }
.mona-field__hint{ font-size: .8125rem; color: var(--mona-muted); }
.mona-field.is-error :is(input,textarea){ border-color: var(--mona-danger); background: #FFF6F4; }
.mona-field__error{ font-size: .8125rem; color: var(--mona-danger); font-weight: 500; }
.mona-field.is-valid input{ border-color: var(--mona-ok); }
.mona-field input:disabled{ background: var(--mona-surface); color: var(--mona-muted); cursor: not-allowed; }
.mona-form__done{ place-items: start; gap: 10px; padding: 24px 0; border-top: 1px solid var(--mona-ink); }

/* --- Article ------------------------------------------------------------------------------- */
.mona-article{ display: grid; gap: clamp(32px, 4vw, 64px); }
.mona-article > *{ min-width: 0; }
@media (min-width: 1000px){ .mona-article{ grid-template-columns: 15rem minmax(0, 38rem); justify-content: center; align-items: start; } }
.mona-toc{ font-size: .875rem; border-top: 1px solid var(--mona-ink); padding-top: 16px; }
@media (min-width: 1000px){ .mona-toc{ position: sticky; top: calc(var(--mona-hdr-h) + 28px); } }
.mona-toc h2{ font-family: var(--mona-font-display); font-style: italic; font-size: 1.05rem; margin-bottom: 10px; line-height: 1.4; color: var(--mona-gold-text); }
.mona-toc ol{ list-style: none; display: grid; }
.mona-toc a{ display: flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 1px solid var(--mona-line); color: var(--mona-muted); text-decoration: none; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.mona-toc a:hover{ color: var(--mona-ink); }
.mona-toc a.is-active{ color: var(--mona-ink); border-left-color: var(--mona-ink); }
.mona-prose{ font-size: 1.125rem; line-height: 1.85; max-width: 38rem; }
.mona-prose > * + *{ margin-top: 1.15em; }
.mona-prose h2{ font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-top: 2.2em; }
.mona-prose h3{ margin-top: 1.7em; }
.mona-prose ul,.mona-prose ol{ padding-left: 1.2em; display: grid; gap: .45em; }
.mona-prose figure{ margin-inline: 0; }
.mona-prose figure img{ width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.mona-prose figcaption{ margin-top: 10px; font-size: .8125rem; color: var(--mona-muted); }
.mona-note{ padding: 20px 0 20px 24px; border-left: 2px solid var(--mona-gold); font-size: 1rem; color: var(--mona-ink); }
.mona-quote{ padding: 0; border: 0; font-family: var(--mona-font-display); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.4; }
.mona-quote cite{ display: block; margin-top: 14px; font-family: var(--mona-font-body); font-size: .8125rem; font-style: normal; color: var(--mona-muted); }
.mona-table-wrap{ overflow-x: auto; border-top: 1px solid var(--mona-ink); }
.mona-table{ width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; min-width: 520px; }
.mona-table th,.mona-table td{ padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mona-line-strong); }
.mona-table th{ font-weight: 600; font-size: .8125rem; color: var(--mona-muted); }
.mona-byline{ display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--mona-muted); font-size: .875rem; margin-top: 22px; }

/* --- Styleguide helpers -------------------------------------------------------------------- */
.mona-sg{ display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.mona-sg__label{ font-family: var(--mona-font-display); font-style: italic; color: var(--mona-gold-text); }
.mona-swatches{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mona-swatch{ border: 1px solid var(--mona-line); background: #fff; font-size: .8125rem; line-height: 1.45; }
.mona-swatch i{ display: block; height: 64px; }
.mona-swatch span{ display: block; padding: 8px 12px; }

/* v1 hero sheet + occasion accordion: no longer on index, kept harmless for review */
.mona-sheet,.mona-occ{ display: none; }

@media (max-width: 719px){
	.mona-btn{ width: 100%; }
	.mona-hero__actions .mona-more{ width: auto; }
	.mona-search .mona-btn{ width: auto; }
}
.mona-pagehead + .mona-section{ padding-top: clamp(40px, 5vw, 80px); }
/* 404: text beside one print */
.mona-notfound h1{ font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); max-width: 12em; }
.mona-notfound .mona-split{ align-items: center; }
.mona-notfound__img{ aspect-ratio: 4/5; overflow: hidden; }
.mona-notfound__img img{ width: 100%; height: 100%; object-fit: cover; }
.mona-notfound .mona-tabs{ margin-top: 28px; margin-bottom: 0; }
/* Article: a drop cap opens the body, as on the home page letter */
.mona-prose--article > p:first-of-type::first-letter{ float: left; font-family: var(--mona-font-display); font-size: 3.6em; line-height: .9; padding: .08em .12em 0 0; color: var(--mona-gold-text); }
/* A ruled list of topic links, set in the display face */
.mona-topics{ list-style: none; border-top: 1px solid var(--mona-ink); }
.mona-topics a{ display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: 1px solid var(--mona-line-strong); color: var(--mona-ink); text-decoration: none; font-family: var(--mona-font-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.3; }
.mona-topics a::after{ content: ""; width: 32px; height: 1px; background: currentColor; transition: width .5s var(--mona-ease-out); }
.mona-topics a:hover::after{ width: 56px; }

/* --- WordPress output the prototype never had ------------------------------- */
.mona-logo__word{ font: inherit; }
.mona-footer .mona-logo{ color: #fff; }
.mona-footer__note{ margin-top: 12px; }
.mona-nav li,.mona-drawer__list li,.mona-footer ul li{ list-style: none; }
.mona-nav{ margin-block: 0; padding: 0; }   /* margin-inline stays: margin-left:auto pushes the nav right */
/* Utility states that were inline style attributes in the prototype */
.mona-head--flush{ margin-bottom: 0; }
.mona-head__group{ display: grid; gap: 16px; }
.mona-letter p.mona-letter__sign{ font-family: var(--mona-font-body); font-size: .875rem; margin-top: 24px; line-height: 1.6; }
.mona-disclaimer--spaced{ margin-top: 24px; }
/* mona_image() wraps the hero print in a <figure>: let it fill the print box */
.mona-hero__print .mona-image{ margin: 0; height: 100%; }
.mona-hero__print .mona-image picture{ display: contents; }
.mona-hero__inset img{ aspect-ratio: 3/4; width: 100%; object-fit: cover; }
/* mona_breadcrumbs() output, styled as the prototype's .cs-crumbs */
.mona-pagehead .mona-breadcrumb{ font-size: .8125rem; color: var(--mona-muted); margin-bottom: 22px; }
.mona-pagehead .mona-breadcrumb a{ color: var(--mona-muted); display: inline-flex; align-items: center; min-height: 32px; }
.mona-breadcrumb__sep{ margin-inline: 8px; color: var(--mona-line-strong); }
.mona-article__hero{ margin: clamp(32px, 4vw, 56px) 0 0; }
.mona-article__hero img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mona-prose .mona-disclaimer{ margin-top: 2.4em; }
/* mona_pagination() output, styled as the prototype's .cs-pager */
.mona-pagination{ display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: clamp(48px, 6vw, 80px); }
.mona-pagination .page-numbers{ display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid transparent; text-decoration: none; color: var(--mona-ink); font-variant-numeric: tabular-nums; }
.mona-pagination a.page-numbers:hover{ border-color: var(--mona-control); }
.mona-pagination .current{ border-color: var(--mona-ink); font-weight: 600; }
.mona-pagination svg{ width: 18px; height: 18px; }
.mona-prose--center{ margin-inline: auto; }
.mona-prose--after{ margin-top: 28px; }
.mona-actions{ margin-top: 28px; }
.mona-pagehead__form{ margin-top: 24px; }
.mona-notfound .mona-search{ margin-bottom: 0; }

/* --- MONA Smart Form markup, matched to the prototype's form fields ------------- */
.msf-form{ display: grid; gap: 20px; }
.msf-form .msf-field{ display: grid; gap: 8px; margin: 0; }
.msf-form label{ font-size: .875rem; font-weight: 500; }
.msf-form :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],textarea,select){ width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--mona-control); border-radius: 0; background: #fff; color: var(--mona-ink); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.msf-form textarea{ min-height: 150px; resize: vertical; }
.msf-form :is(input,textarea,select):focus{ outline: 2px solid var(--mona-ink); outline-offset: 0; border-color: var(--mona-ink); }
.msf-form .msf-accept{ display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--mona-muted); line-height: 1.5; }
.msf-form .msf-accept input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mona-ink); }
.msf-form .msf-req{ color: var(--mona-danger); }
.msf-form .msf-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 0; border-radius: 0; background: var(--mona-ink); color: var(--mona-page); font: inherit; font-weight: 500; font-size: .9375rem; letter-spacing: .02em; cursor: pointer; }
.msf-form .msf-btn:hover{ background: #3A342E; }
.msf-status:empty{ display: none; }
.msf-alert,.msf-status{ padding: 16px 0; border-top: 1px solid var(--mona-ink); font-size: .9375rem; }

/* Logo lockup (assets/images/logo*.svg): sized by height, width follows the 395:64 ratio */
.mona-logo__img{ display: block; height: 30px; width: auto; }
.mona-drawer .mona-logo__img{ height: 28px; }
.mona-footer .mona-logo__img{ height: clamp(36px, 3vw, 48px); }
@media (max-width: 420px){ .mona-header .mona-logo__img{ height: 26px; } }