/* Generated from source/template/assets/css/style.css (prototype v3, 2026-10-14).
   Classes renamed cs- → mona-. Edit the prototype first, then re-port. */
/* ==========================================================================
   CS Home — 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(--hdr-h) + 16px); }
html.lenis{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }
body{
	margin: 0; background: var(--page); color: var(--ink);
	font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
	-webkit-font-smoothing: antialiased; overflow-x: clip;
}
img,svg,video{ max-width: 100%; height: auto; display: block; }
figure{ margin: 0; }
img{ font-style: italic; color: var(--muted); }
a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1{ font-size: var(--fs-h1); letter-spacing: -0.025em; line-height: 1.2; font-weight: 700; }
h2{ font-size: var(--fs-h2); letter-spacing: -0.018em; }
h3{ font-size: var(--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(--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(--ink); color: var(--page); font-weight: 600; border-radius: var(--r-pill); text-decoration: none; transition: transform .2s var(--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(--ease-out), border-color .3s var(--ease), background-color .3s var(--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(--ease), transform .5s var(--ease-out), visibility 0s .35s; }
[data-drawer].is-open{ opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .5s var(--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(--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(--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(--ease), transform 1s var(--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(--r-img)); transition: opacity .6s var(--ease), clip-path 1.1s var(--ease-out); }
[data-reveal="clip"].is-in, html:not(.js-motion) [data-reveal="clip"]{ clip-path: inset(0 0 0 0 round var(--r-img)); }
[data-reveal="clip"] img{ transform: scale(1.12); transition: transform 1.4s var(--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(--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(--ease), transform .6s var(--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(--line); overflow: hidden; position: relative; }
html.js-motion [data-story-progress] > i::after{ content: ""; position: absolute; inset: 0; background: var(--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(--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(--gutter); padding-inline: var(--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(--line); border-radius: 2px; overflow: hidden; }
[data-rail-bar] > i{ display: block; height: 100%; width: 20%; background: var(--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(--ease), transform .8s var(--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; }
}