/* 21.08.2026 · §448 · THE MONOSPACE FLOOR IS 10.5px, AND IT APPLIES HERE TOO.
   This stylesheet is the atelier pattern, shared by the pages that use it. It arrived with
   the same sub-floor sizes makersos.html and system.html had: Space Mono at .58 to .64rem,
   which is 9.3 to 10.2 pixels, letter-spaced at .18em and above. .66rem is 10.56px.
   `typography` found it on index.html the morning after the pages were written. */
/* ============================================================================
   MON-ATELIER · the house grammar, site-wide · signed off on Mockup v12
   Loaded by every marketing page AFTER its base sheets. makersos.html and
   system.html carry their own copies in page CSS and do not load this file.
   ============================================================================ */
/* THE SUNBURST · the site background per Brand/BRAND_TOKENS_FROM_SITE.md */
html{background:#081f3e}
body{background:radial-gradient(135% 95% at 50% 18%, #2c62ad 0%, #205197 24%, #16407b 46%, #0e3061 68%, #081f3e 100%);background-attachment:fixed}
::selection{background:#E6C87C;color:#0a1f3e}

/* THE BAR · deterministic brand navy per Mockup v10 sign-off: glass depended on the backdrop */
nav{background:#0e3061!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid #2c5896!important}

/* the plate: the engraved frame around every page */
.plate{position:fixed;top:16px;right:16px;bottom:16px;left:16px;border:1px solid rgba(230,200,124,.22);pointer-events:none;z-index:60}
.plate::after{content:'';position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px solid rgba(230,200,124,.08)}

/* chapter marks · centred voice and left voice */
.chapter{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:34px}
.chapter .h{width:110px;height:1px;background:linear-gradient(90deg,transparent,rgba(230,200,124,.22))}
.chapter .h.r{background:linear-gradient(90deg,rgba(230,200,124,.22),transparent)}
.chapter .spark{width:7px;height:7px;border-radius:50%;background:#E6C87C;flex:0 0 auto;animation:atpulse 2.8s ease-out infinite}
@keyframes atpulse{0%{box-shadow:0 0 0 0 rgba(230,200,124,.5)}70%{box-shadow:0 0 0 9px rgba(230,200,124,0)}100%{box-shadow:0 0 0 0 rgba(230,200,124,0)}}
@media (prefers-reduced-motion:reduce){.chapter .spark{animation:none}}
.chapter span.t{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:#E6C87C;white-space:nowrap}
.chapter.left{justify-content:flex-start;gap:20px}
.chapter.left .h{display:none}
.chapter.left .h.r{display:block;width:76px}

/* arrival: reveal on scroll, gated behind .anim so no-JS shows everything */
.anim [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.anim [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim [data-rv]{opacity:1!important;transform:none!important;transition:none!important}}

@media(max-width:940px){.plate{top:8px;right:8px;bottom:8px;left:8px}}

/* THE FIGURE KIT · shared: every drawn instrument and the portrait sit in the same plate */
.figure{max-width:840px;margin:44px auto}
.figframe{position:relative;padding:22px;border:1px solid rgba(230,200,124,.22)}
.figframe::before,.figframe::after,.figframe .cm::before,.figframe .cm::after{content:'';position:absolute;width:18px;height:18px;border:0 solid #E6C87C}
.figframe::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.figframe::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.figframe .cm::before{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.figframe .cm::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.figplate{display:flex;justify-content:center;gap:18px;align-items:center;margin-top:26px}
.figplate .fp{width:44px;height:1px;background:rgba(230,200,124,.22)}
.figplate span{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#E6C87C}

/* THE PORTRAIT PLATE · the operator as the house presents a specimen */
.opfig{max-width:400px;margin:0}
.opfig .figframe{padding:14px}
.opfig img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05) brightness(.98)}
.opfig .wash{position:absolute;top:14px;left:14px;right:14px;bottom:14px;background:linear-gradient(165deg,rgba(230,200,124,.12),rgba(14,48,97,.34) 70%);pointer-events:none}
.opfig.ill img{filter:none}
.opfig.ill .wash{background:linear-gradient(165deg,rgba(230,200,124,.06),rgba(14,48,97,.14) 70%)}
.opfig figcaption{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#BBD0EC;opacity:.75;text-align:center;margin-top:14px;line-height:2}

/* THE GHOST NUMERAL · the chapter number at monument scale, barely there */
.chapter{position:relative}
.chapter[data-n]::before{content:attr(data-n);position:absolute;left:50%;top:-34px;transform:translateX(-50%);font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(110px,14vw,190px);line-height:1;color:rgba(230,200,124,.06);z-index:-1;pointer-events:none;user-select:none}
.chapter.left[data-n]::before{left:0;transform:none}

/* THE KINETIC LAYER · the hero arrives, the equation computes, the room goes dark */
.anim .hero h1 .kw{display:inline-block;opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.anim .hero h1.on .kw{opacity:1;transform:none}
.eqx.scr{color:#E6C87C}
.darkbeat{background:#081f3e;padding:96px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;position:relative}
.darkbeat svg{width:104px;height:104px;filter:drop-shadow(0 0 46px rgba(230,200,124,.16))}
.darkbeat .db-t{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.5em;text-transform:uppercase;color:rgba(230,200,124,.55)}
@media (prefers-reduced-motion:reduce){.anim .hero h1 .kw{opacity:1!important;transform:none!important;transition:none!important}}

/* the equation's computing state */
.cw{display:inline}
.cw.scr{color:#E6C87C}
/* THE SIGNATURE · drawn in gold ink when it enters */
.sig .signature{width:230px;height:auto;display:block;margin:0 auto 8px}
.sigpath{fill:none;stroke:#E6C87C;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.anim .sig .sigpath{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1) .25s}
.anim .sig .sigpath.p2{transition-delay:1.15s;transition-duration:.8s}
.anim .sig.in .sigpath{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.anim .sig .sigpath{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}
/* THE REAL HAND · 21.08.2026 · Cristian's actual signature, traced from ink.
   A filled outline keeps the pen's true weight, so it reveals with a wipe, not a dash. */
.sig .sigfill{fill:#E6C87C}
.anim .sig .sigfill{clip-path:inset(-5% 104% -5% -3%);transition:clip-path 2.2s cubic-bezier(.4,0,.3,1) .3s}
.anim .sig.in .sigfill{clip-path:inset(-5% -3% -5% -3%)}
@media (prefers-reduced-motion:reduce){.anim .sig .sigfill{clip-path:none;transition:none}}

/* THE PHONE · the one real defect the 390px walk found: nowrap chapter labels clip */
@media(max-width:600px){
  .chapter{gap:14px}
  .chapter .h{width:36px}
  .chapter.left .h.r{width:36px}
  .chapter span.t{white-space:normal;letter-spacing:.26em;font-size:.66rem;line-height:2;text-align:center}
  .chapter[data-n]::before{font-size:92px;top:-20px}
  .figframe{padding:12px}
  .darkbeat{padding:64px 0}
}

/* THE FIRST QUESTION · the instrument steps onto the doorstep */
.firstq{max-width:760px;margin:0 auto;text-align:left;border:1px solid rgba(230,200,124,.22);position:relative;padding:44px 46px 40px;background:rgba(8,31,62,.35)}
.firstq .fq-k{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#E6C87C;margin-bottom:18px}
.firstq .fq-ask{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.25;color:#ECE7DC;margin-bottom:28px}
.firstq .fq-a{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(230,200,124,.14);padding:15px 12px;font-family:'Inter',-apple-system,sans-serif;font-size:.92rem;line-height:1.6;color:#BBD0EC;cursor:pointer;transition:background .18s,color .18s;display:flex;gap:16px;align-items:baseline}
.firstq .fq-a:hover{background:rgba(230,200,124,.06);color:#ECE7DC}
.firstq .fq-a .n{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;color:#E6C87C;flex:0 0 auto}
.firstq .fq-a.on{color:#ECE7DC;background:rgba(230,200,124,.08)}
.firstq .fq-a.on .n{color:#E4132B}
.firstq .fq-out{display:none;border-top:1px solid rgba(230,200,124,.3);margin-top:6px;padding:24px 12px 4px}
.firstq.done .fq-out{display:block}
.firstq.done .fq-a:not(.on){opacity:.45}
.firstq .fq-out p{color:#BBD0EC;font-size:.9rem;line-height:1.75;margin:0 0 20px}
.firstq .fq-out .abtn{display:inline-block;text-decoration:none;border:1px solid #E6C87C;color:#E6C87C;font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:14px 30px;transition:background .18s,color .18s}
.firstq .fq-out .abtn:hover{background:#E6C87C;color:#0a1f3e}
.firstq .fq-note{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#BBD0EC;opacity:.5;margin-top:22px}
/* the house clock, set by the footer script */
.lux-clock{font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.1em}

/* THE PHONE STACK · 21.08.2026, found by the Chromium battery at 390px.
   Any inline-styled grid tagged .pstack collapses to one column on the phone;
   .mecharrow cells (the between-card arrows) step aside. */
@media(max-width:700px){
  .pstack{grid-template-columns:1fr!important}
  .pstack>.mecharrow{display:none}
}
/* the guard: no page may ever hand the phone a horizontal scrollbar */
@media(max-width:940px){html,body{overflow-x:clip}}

/* THE NAV COLLAPSE · VERBATIM from mon-chrome.css so the two cannot drift.
   Pages that load only mon-core + this kit (upgrade.html) had a desktop nav
   at phone width; the burger JS in mon.js was waiting for these rules. */
@media(max-width:880px){
  .wrap,nav{padding-left:24px;padding-right:24px}
  .nav-links{position:fixed;top:74px;left:0;right:0;background:var(--petrol,#0e3061);border-bottom:1px solid var(--border,#2c5896);flex-direction:column;gap:0;padding:6px 0;display:none}
  nav.open .nav-links{display:flex}
  .nav-burger{display:block}
  .nav-links li{width:100%}.nav-links a{display:block;padding:14px 26px;white-space:normal}
  .nd .ndm{position:static;opacity:1;visibility:visible;transform:none;border:0;margin:0;padding-left:16px;background:transparent}
  nav{gap:10px}.logo{font-size:.8rem;letter-spacing:.11em}
  .nav-cta{padding:9px 12px;font-size:.6rem;letter-spacing:.08em}
  .nav-burger{margin-left:6px;padding:7px 10px}
}
@media(max-width:400px){.logo{font-size:.72rem;letter-spacing:.08em}.nav-cta{padding:8px 9px;font-size:.55rem;letter-spacing:.05em}}

/* THE RED CLOSE · restored 21.08.2026 after the typography pass dropped it */
.redclose{background:#E4132B;text-align:center;padding:92px 22px 86px;margin-top:56px}
.redclose .tag{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.18;color:#fff;max-width:22ch;margin:0 auto}
.redclose .tag i{font-style:italic;color:#ECE7DC}
.redclose .sub{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:30px}
.redclose .hairw{width:76px;height:1px;background:rgba(255,255,255,.45);margin:0 auto 36px}