/* ==========================================================================
   pf-moon.css - the "Moon" (Lunation) portfolio template, public pages.
   Ported from docs/M7MoonTemplateFinal-ProjectPage (1).html. EVERY rule is scoped under .pf-moon so nothing leaks into the other
   templates or the rest of the site (Bootstrap is global). Classes that could clash with Bootstrap carry an mn- prefix
   (mn-tile, mn-btn, mn-chip, mn-pill, mn-seg, mn-toast, ...); keyframes are mn- prefixed too.

   Wrapper (written by _PortfolioMoon / _ProjectMoon in Step 3a / 3b, attributes from Helpers/MoonHtml):
     <div class="pf-page pf-moon" data-pf-template="moon" data-theme="blue|gold|crimson|glitch|custom" data-mode="dark|light"
          style="--bg:..;--ink:..;--mut:..;--acc:..;--line:..;--card:..;--glow:..;--on:.."> ... </div>

   Tokens live on the WRAPPER, never on :root (plan.md D1): --bg --ink --mut --acc --line --card --glow --on come inline from
   PortfolioPaletteRules.ResolveMoon for every look (presets and Custom). The values below are only the Blue fallback. --moon
   (the moon tint) is mixed from --acc and --ink here, --ecl (blood moon) is a design constant and never themed. Blood-moon mode
   is the class .eclipse on the wrapper (not on <body>).

   Script contract (moon-motion.js, Steps 2b / 2c): ids #stars #mc #moon #rocket #cl #hudIcon #hudName #hudMeta #stops #toast
   #egg #eggFit; classes .egg(.on/.run) .rocket(.go) .monkey .mn-toast(.on) and the wrapper class .eclipse. The toast class is
   mn-toast (Bootstrap owns .toast).

   Step 2a (this file): tokens, page frame, background layers, the moon, cursor light, the pendant egg and the rocket, shared
   atoms (grid, tile, buttons, chips, pills, nav pills, empty, banner, toast), HUD, Glitch look, responsive and reduced motion.
   Step 3a (added below the shared atoms): nav, hero, giant word, KPI tiles, Contents, home sections, project cards, contact, footer.
   Step 3b (added above the reduced-motion block): the project page (case number, facts card, overview, picture viewer + dialog, diagram, tools, next up).
   ========================================================================== */

@keyframes mn-d1 { to { transform: translate(9vw, 7vw); } }
@keyframes mn-d2 { to { transform: translate(-8vw, -6vw); } }
@keyframes mn-d3 { to { transform: translate(-14vw, 10vw) scale(1.25); } }
@keyframes mn-bob { to { transform: translateY(10px); } }
@keyframes mn-breathe { to { transform: scale(1.07); } }
@keyframes mn-blink { 50% { opacity: 0; } }
@keyframes mn-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes mn-eggspin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes mn-monkeyshow {
    0% { opacity: 0; transform: translateY(-50%) scale(.85) rotate(-6deg); }
    8% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
    28% { opacity: 1; transform: translateY(-50%) scale(1) rotate(3deg); }
    40% { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
    48% { opacity: 0; transform: translateY(-50%) scale(.95) rotate(0); }
    100% { opacity: 0; transform: translateY(-50%); }
}
@keyframes mn-rocketfly {
    0% { opacity: 1; transform: rotate(var(--angle)) translateX(0); }
    48% { opacity: 1; transform: rotate(var(--angle)) translateX(calc(-1 * (100vw + 100vh + var(--len)))); }
    48.01%, 100% { opacity: 0; transform: rotate(var(--angle)) translateX(calc(-1 * (100vw + 100vh + var(--len)))); }
}

/* ---------- tokens: Blue fallback (the real colors come inline from the server) ---------- */
.pf-moon {
    --bg: #050a18;
    --ink: #e6eefc;
    --mut: #8d9cb8;
    --acc: #5ba4ff;
    --line: rgba(91, 164, 255, .34);
    --card: rgba(91, 164, 255, .07);
    --glow: rgba(52, 104, 235, .42);
    --on: #111111;
    --r: 20px;
    --rs: 12px;
    --body: 'DM Sans', system-ui, sans-serif;
    --disp: 'Anton', 'Impact', sans-serif;
    --ok: #58d68d;
    --warn: #e6b84f;
    --danger: #ff7b72;
    --ecl: #c2402a;                                              /* blood moon: a constant, never themed */
    --moon: color-mix(in srgb, var(--acc) 34%, var(--ink));      /* declared HERE so it reads this wrapper's --acc / --ink */
    --mp-muted: var(--mut);                                      /* drawing labels (motion-picture.css) */
}
.pf-moon[data-theme="glitch"] {
    --r: 0px;
    --rs: 0px;
    --body: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- page frame ---------- */
/* Full-bleed (escape the layout container) and the site body painted in the template color so no other-colored strip shows
   around the page. The body cannot read the wrapper's variables, hence the literal Blue page color here; every rendered page
   also writes a more specific body rule with its own page color (MoonHtml.BodyStyle). overflow-x: clip (NOT hidden) keeps the
   sticky nav working. Smooth scrolling is scoped to these pages only. */
body:has(.pf-moon) { background: #050a18; overflow-x: clip; transition: background .4s; }
html:has(.pf-moon) { scroll-behavior: smooth; scroll-padding-top: 72px; }

.pf-moon {
    position: relative; isolation: isolate;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--bg);
    color: var(--ink);
    font: 400 14.5px/1.55 var(--body);
    overflow-x: clip;
    text-align: start;
    -webkit-font-smoothing: antialiased;
    transition: background-color .4s, color .4s;
}
.pf-moon *, .pf-moon *::before, .pf-moon *::after { box-sizing: border-box; }
.pf-moon a { color: inherit; text-decoration: none; }
.pf-moon button { font: inherit; color: inherit; }
.pf-moon :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.pf-moon h1, .pf-moon h2, .pf-moon h3, .pf-moon p { margin: 0; }
.pf-moon em { font-style: normal; color: var(--acc); }

/* ---------- background layer (fixed; no ancestor may have transform / filter / backdrop-filter) ---------- */
.pf-moon .mn-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pf-moon .mn-g { position: absolute; border-radius: 50%; filter: blur(90px); background: var(--glow); opacity: .55; }
.pf-moon .mn-g1 { width: 52vw; height: 52vw; left: -14vw; top: -18vw; animation: mn-d1 64s ease-in-out infinite alternate; }
.pf-moon .mn-g2 { width: 44vw; height: 44vw; right: -12vw; bottom: -16vw; animation: mn-d2 78s ease-in-out infinite alternate; }
.pf-moon .mn-g3 { width: 30vw; height: 30vw; left: 38vw; top: 30vh; opacity: .28; animation: mn-d3 90s ease-in-out infinite alternate; }
.pf-moon .mn-grid {
    position: absolute; inset: 0; opacity: .09;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.pf-moon #stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-moon .mn-cursorlight {
    position: fixed; z-index: 1; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
    pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform;
    background: radial-gradient(circle, color-mix(in srgb, var(--acc) 13%, transparent), transparent 65%);
}
.pf-moon .mn-typed { color: var(--acc); }
.pf-moon .mn-caret { display: inline-block; width: 2px; height: 1em; background: var(--acc); margin-left: 2px; vertical-align: -.15em; animation: mn-blink 1s steps(1) infinite; }

/* ---------- the moon (a real <button>, 360x360 canvas) ---------- */
.pf-moon .mn-moon {
    position: fixed; z-index: 1; right: clamp(-70px, calc(50vw - 800px), 3vw); top: 12vh; width: min(40vw, 450px); aspect-ratio: 1;
    padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
    animation: mn-bob 16s ease-in-out infinite alternate;
}
.pf-moon .mn-moon::before {
    content: ""; position: absolute; inset: -38%; border-radius: 50%; pointer-events: none; opacity: calc(var(--lit, 0) * .9);
    background: radial-gradient(circle, color-mix(in srgb, var(--moon) 42%, transparent) 0, color-mix(in srgb, var(--moon) 10%, transparent) 36%, transparent 62%);
    transition: background .6s; animation: mn-breathe 7s ease-in-out infinite alternate;
}
.pf-moon.eclipse .mn-moon::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--ecl) 55%, transparent) 0, color-mix(in srgb, var(--ecl) 12%, transparent) 36%, transparent 62%);
}
.pf-moon .mn-moon canvas { position: relative; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: .94; }

/* ---------- easter egg 1: the spinning pendant over the moon (6s per turn) ---------- */
/* Only .part.disc spins; the ring part is static. transform-origin 49.31% 50% and the 364x450 canvases of the four PNGs are what
   line the two parts up (never resize or crop the images). #egg gets .on (visible) and .run (spin) from moon-motion.js. */
.pf-moon .egg { --speed: 6s; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.pf-moon .egg.on { opacity: 1; visibility: visible; transition: opacity .45s; }
.pf-moon .egg-fit { position: absolute; left: 0; top: 0; transform-origin: 49.31% 50%; transform: translate(-49.31%, -50%) scale(var(--ps, 1)); }
.pf-moon .egg .scene { perspective: 1400px; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); }
.pf-moon .egg .pendant { position: relative; width: 364px; height: 450px; transform-style: preserve-3d; }
.pf-moon .egg .part { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 49.31% 50%; will-change: transform; }
.pf-moon .egg .face { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pf-moon .egg .back { transform: rotateY(180deg); }
.pf-moon .egg.run .part.disc { animation: mn-eggspin var(--speed) linear infinite; }

/* ---------- easter egg 2: the blue rocket trail + the monkey (once per page load; angle and entry point set in JS) ---------- */
.pf-moon .rocket { --angle: 40deg; --from-bottom: 40%; --len: min(38vw, 470px); position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
.pf-moon .rocket .anchor { position: fixed; right: 0; bottom: var(--from-bottom); width: 0; height: 0; }
.pf-moon .rocket .rot { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotate(var(--angle)) translateX(0); opacity: 0; will-change: transform; }
.pf-moon .rocket .rot img { display: block; width: var(--len); height: auto; max-width: none; transform: translate(-2.355%, -50%); filter: drop-shadow(0 0 5px rgba(150, 210, 255, .8)) drop-shadow(0 0 12px rgba(110, 170, 255, .45)); }
.pf-moon .rocket.go .rot { animation: mn-rocketfly 5s linear 1 both; }
.pf-moon .rocket .monkey { position: absolute; left: clamp(8px, 3vw, 56px); top: 50%; width: min(28vw, 250px); height: auto; max-width: none; opacity: 0; transform: translateY(-50%); }
.pf-moon .rocket.go .monkey { animation: mn-monkeyshow 5s linear 1 both; }

/* ---------- layout ---------- */
.pf-moon .mn-wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 22px 120px; }   /* bottom padding keeps the HUD and the toast off the footer */
.pf-moon .mn-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pf-moon .mn-bento > * { min-width: 0; }
.pf-moon .mn-s3 { grid-column: span 3; } .pf-moon .mn-s4 { grid-column: span 4; } .pf-moon .mn-s5 { grid-column: span 5; }
.pf-moon .mn-s6 { grid-column: span 6; } .pf-moon .mn-s7 { grid-column: span 7; } .pf-moon .mn-s8 { grid-column: span 8; }
.pf-moon .mn-s12 { grid-column: span 12; }

/* ---------- components ---------- */
.pf-moon .mn-tile {
    position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform .3s, border-color .3s;
}
.pf-moon .mn-tile::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%);
}
.pf-moon .mn-tile:hover { border-color: var(--acc); transform: translateY(-3px); }
.pf-moon .mn-tile:hover::before { opacity: 1; }
.pf-moon .mn-tile > * { position: relative; }
.pf-moon .mn-eyebrow { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.pf-moon .mn-disp { font-family: var(--disp); text-transform: uppercase; font-weight: 400; }
.pf-moon .mn-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; min-height: 36px; border: 1px solid var(--line); border-radius: 30px;
    background: transparent; font: 700 12px var(--body); cursor: pointer; transition: border-color .2s, color .2s;
}
.pf-moon .mn-btn:hover { border-color: var(--acc); color: var(--acc); }
.pf-moon .mn-btn.primary { background: var(--acc); color: var(--on); border-color: var(--acc); }
.pf-moon .mn-btn.primary:hover { color: var(--on); filter: brightness(1.1); }
.pf-moon .mn-btn.sm { padding: 6px 13px; min-height: 30px; font-weight: 500; font-size: 11.5px; color: var(--mut); }
.pf-moon .mn-chip { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 30px; background: var(--card); font-size: 11px; font-weight: 700; color: var(--mut); }
.pf-moon .mn-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 30px; border: 1px solid var(--line); font: 700 11px var(--body); }
.pf-moon .mn-pill.hot { background: var(--acc); color: var(--on); border-color: var(--acc); }
.pf-moon .mn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: mn-pulse 2s infinite; }
.pf-moon .mn-seg {
    display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 30px; overflow-x: auto; scrollbar-width: none;
    background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pf-moon .mn-seg a { padding: 6px 13px; border-radius: 30px; font: 700 11px var(--body); white-space: nowrap; color: var(--mut); border: 1px solid transparent; }
.pf-moon .mn-seg a:hover { color: var(--acc); border-color: var(--line); }
.pf-moon .mn-seg a.on { background: var(--acc); color: var(--on); }
.pf-moon .mn-empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 28px; text-align: center; color: var(--mut); grid-column: 1 / -1; }
.pf-moon .mn-banner { border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--rs); padding: 12px 16px; background: color-mix(in srgb, var(--danger) 9%, var(--bg)); margin: 14px 0; }
.pf-moon .mn-toast {
    position: fixed; left: 50%; bottom: 74px; transform: translate(-50%, 10px); z-index: 40; padding: 8px 16px; border-radius: 30px;
    background: var(--acc); color: var(--on); font: 700 12px var(--body); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.pf-moon .mn-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* stretched card link: .mn-tile > * made the anchor position:relative, which trapped its ::after overlay at 0x0 */
.pf-moon .mn-stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.pf-moon .mn-tile > a.mn-stretch { position: static; }
.pf-moon .mn-tile > a.mn-stretch::after { cursor: pointer; }

/* ---------- HUD (fixed pill at the bottom: phase icon, phase name, % lit, section stops) ---------- */
.pf-moon .mn-hud {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px;
    padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 30px;
    background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pf-moon .mn-hud .now { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.pf-moon .mn-hud b { display: block; font: 700 12px var(--body); letter-spacing: .04em; }
.pf-moon .mn-hud small { display: block; color: var(--mut); font-size: 11px; line-height: 1.3; }
.pf-moon .mn-stops { display: flex; gap: 2px; }
.pf-moon .mn-stops a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; opacity: .55; transition: opacity .2s, border-color .2s; }
.pf-moon .mn-stops a:hover, .pf-moon .mn-stops a.on { opacity: 1; border-color: var(--acc); }

/* ---------- Step 3a: nav, hero, home sections (prototype values; every class mn- prefixed, scoped under .pf-moon) ---------- */
@keyframes mn-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pf-moon [hidden] { display: none !important; }
.pf-moon .mn-nav { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.pf-moon .mn-sig { font: 400 34px/1 'Pinyon Script', cursive; color: var(--acc); }
.pf-moon .mn-nav .mn-seg { max-width: calc(100% - 70px); }
.pf-moon .mn-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf-moon .mn-draft form { margin: 0; }

.pf-moon .mn-hero { padding-top: 6px; scroll-margin-top: 80px; }
.pf-moon .mn-giantwrap { position: relative; margin-top: 8px; }
.pf-moon .mn-giant {
    font: 400 clamp(64px, 15.5vw, 215px)/.88 var(--disp); text-transform: uppercase; text-align: center; user-select: none; letter-spacing: -.005em;
    background: linear-gradient(100deg, var(--ink) 40%, color-mix(in srgb, var(--acc) 60%, var(--ink)) 50%, var(--ink) 60%) 0 0 / 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mn-sheen 9s linear infinite;
}
.pf-moon .mn-orbits { position: absolute; inset: -8% 0 -8% 0; width: 100%; height: 116%; pointer-events: none; }
.pf-moon .mn-orbits ellipse { fill: none; stroke: var(--acc); stroke-width: 1.2; opacity: .55; }
.pf-moon .mn-orbits circle { fill: var(--acc); }
.pf-moon .mn-hgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; align-items: end; }
.pf-moon .mn-hgrid > * { min-width: 0; }
.pf-moon .mn-hero h1 { font: 400 clamp(36px, 5vw, 62px)/.95 var(--disp); text-transform: uppercase; overflow-wrap: anywhere; }
.pf-moon .mn-sub { margin-top: 8px; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.pf-moon .mn-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--mut); font-size: 12.5px; }
.pf-moon .mn-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pf-moon .mn-hr { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pf-moon .mn-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pf-moon span.mn-btn.sm { cursor: default; }
.pf-moon .mn-tonight { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 30px; background: var(--card); font-size: 12px; color: var(--mut); }
.pf-moon .mn-tonight[hidden] { display: none; }
.pf-moon .mn-tonight b { color: var(--ink); }
.pf-moon .mn-dot.warn { background: var(--warn); box-shadow: 0 0 0 0 var(--warn); }
.pf-moon .mn-dot.off { background: transparent; border: 2px solid var(--mut); animation: none; }
.pf-moon .mn-kpis { margin-top: 26px; }
.pf-moon .mn-kpi { text-align: left; }
.pf-moon .mn-kpi .n { font: 400 clamp(34px, 4.2vw, 52px)/1 var(--disp); color: var(--acc); margin-top: 6px; overflow-wrap: anywhere; }
.pf-moon .mn-kpi.hero-k { background: linear-gradient(145deg, var(--acc), color-mix(in srgb, var(--acc) 55%, var(--bg))); color: var(--on); border-color: var(--acc); }
.pf-moon .mn-kpi.hero-k .n, .pf-moon .mn-kpi.hero-k .mn-eyebrow { color: var(--on); }
.pf-moon .mn-toc { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
.pf-moon .mn-toc h2 { font-size: 22px; }
.pf-moon .mn-toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.pf-moon .mn-toc li a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.pf-moon .mn-toc li a:hover { color: var(--acc); }
.pf-moon .mn-toc .num { font-family: var(--disp); color: var(--acc); width: 26px; flex: none; }
.pf-moon .mn-toc .ph { margin-left: auto; display: inline-flex; }

.pf-moon .mn-sec { padding-top: 64px; scroll-margin-top: 76px; }
.pf-moon .mn-sh { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pf-moon .mn-sh h2 { font: 400 clamp(22px, 2.6vw, 26px)/1.05 var(--disp); text-transform: uppercase; color: var(--acc); max-width: 62%; overflow-wrap: anywhere; }
.pf-moon .mn-ln { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.pf-moon .mn-phase { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.pf-moon .mn-sec-sub { color: var(--mut); max-width: 560px; margin: -6px 0 18px; overflow-wrap: anywhere; }
.pf-moon .mn-about p { color: var(--ink); opacity: .92; overflow-wrap: anywhere; }
.pf-moon .mn-about p + p { margin-top: 12px; }
.pf-moon .mn-pt { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--card); color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-moon .mn-stack { display: flex; flex-direction: column; gap: 10px; }
.pf-moon .mn-skill h3 { font: 400 18px/1.1 var(--disp); text-transform: uppercase; color: var(--acc); margin-bottom: 12px; overflow-wrap: anywhere; }
.pf-moon .mn-skill ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--mut); font-size: 13px; }
.pf-moon .mn-skill li { overflow-wrap: anywhere; }
.pf-moon .mn-skill li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 9px; border-radius: 50%; background: var(--acc); opacity: .7; vertical-align: middle; }
.pf-moon .mn-xp h3 { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.pf-moon .mn-xp h3 span { color: var(--acc); font-weight: 500; font-size: 13px; }
.pf-moon .mn-xp .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pf-moon .mn-xp ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--mut); font-size: 13px; }
.pf-moon .mn-xp li { overflow-wrap: anywhere; }
.pf-moon .mn-xp li::before { content: "›"; color: var(--acc); margin-inline-end: 8px; font-weight: 700; }
.pf-moon .mn-edu h3 { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.pf-moon .mn-edu .sch { color: var(--acc); font-size: 13px; margin: 2px 0 8px; overflow-wrap: anywhere; }
.pf-moon .mn-edu p { color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }

/* project cards: cover (real picture, else the accent bar art), tags, title, 4-line description, stretched link */
.pf-moon .mn-tile.mn-proj { padding: 0; display: flex; flex-direction: column; }
.pf-moon .mn-cover {
    position: relative; height: 190px; overflow: hidden; border-bottom: 1px solid var(--line);
    background: radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--acc) 12%, var(--bg)), var(--bg));
}
.pf-moon .mn-proj.lead .mn-cover { height: 300px; }
.pf-moon .mn-cover .mp-img { object-fit: cover; }
.pf-moon .mn-cover .art { position: absolute; right: 10px; bottom: 0; width: 58%; height: 62%; opacity: .5; transition: transform .5s; }
.pf-moon .mn-proj:hover .mn-cover .art { transform: scale(1.06); }
.pf-moon .mn-cover .ctitle { position: absolute; left: 16px; bottom: 14px; max-width: 70%; font: 400 22px/1 var(--disp); text-transform: uppercase; text-shadow: 0 2px 14px var(--bg); overflow-wrap: anywhere; }
.pf-moon .mn-proj.lead .ctitle { font-size: 30px; }
.pf-moon .mn-cover .cm { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; }
.pf-moon .mn-pb { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.pf-moon .mn-pb h3 { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.pf-moon .mn-pb p { color: var(--mut); font-size: 12.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pf-moon .mn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-moon .mn-go { margin-top: 6px; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.pf-moon .mn-proj .mn-stretch:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -3px; border-radius: var(--r); }

.pf-moon .mn-contact { padding: clamp(24px, 4vw, 44px); }
.pf-moon .mn-contact h3 { font: 400 clamp(40px, 7vw, 84px)/.92 var(--disp); text-transform: uppercase; color: var(--acc); max-width: 760px; overflow-wrap: anywhere; }
.pf-moon .mn-contact .mn-btns { margin-top: 22px; }
.pf-moon .mn-foot { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--mut); font-size: 12px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.pf-moon .mn-foot .mn-btns { margin-top: 0; }

.pf-moon[data-theme="glitch"] .mn-tonight, .pf-moon[data-theme="glitch"] .mn-dot { border-radius: 0; }

/* ---------- Glitch look (a style flag, not just colors): square corners, monospace body (set above), RGB-split headings ---------- */
.pf-moon[data-theme="glitch"] .mn-btn, .pf-moon[data-theme="glitch"] .mn-seg, .pf-moon[data-theme="glitch"] .mn-seg a,
.pf-moon[data-theme="glitch"] .mn-hud, .pf-moon[data-theme="glitch"] .mn-toast, .pf-moon[data-theme="glitch"] .mn-pill,
.pf-moon[data-theme="glitch"] .mn-chip { border-radius: 0; }
.pf-moon[data-theme="glitch"] .mn-giant, .pf-moon[data-theme="glitch"] h1 { text-shadow: 2px 0 #ff2d4d, -2px 0 #fff; }
.pf-moon[data-theme="glitch"] .mn-giant { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); animation: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .pf-moon .mn-s3, .pf-moon .mn-s4 { grid-column: span 6; }
    .pf-moon .mn-s5, .pf-moon .mn-s6, .pf-moon .mn-s7, .pf-moon .mn-s8 { grid-column: span 12; }
    .pf-moon .mn-moon { right: 50%; transform: translateX(50%); top: 9vh; width: min(72vw, 360px); animation: none; }
    .pf-moon .mn-moon canvas { opacity: .55; }
}
@media (max-width: 640px) {
    .pf-moon .mn-stops { display: none; }
    .pf-moon .mn-hud .now { min-width: 0; }
}
@media (max-width: 560px) {
    .pf-moon .mn-bento > * { grid-column: span 12 !important; }
}

/* Step 3a responsive */
@media (max-width: 1100px) {
    .pf-moon .mn-hgrid { grid-template-columns: 1fr; }
    .pf-moon .mn-hr { align-items: flex-start; }
    .pf-moon .mn-chips { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .pf-moon .mn-toc { grid-template-columns: 1fr; }
    .pf-moon .mn-sh h2 { max-width: none; }
    .pf-moon .mn-phase .t { display: none; }
}
@media (max-width: 640px) {
    .pf-moon .mn-toc ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pf-moon .mn-proj.lead .mn-cover { height: 220px; }
    .pf-moon .mn-nav .mn-seg { max-width: calc(100% - 56px); }
}

/* ---------- Step 3b: the project page (prototype pj- rules, every class mn- prefixed, scoped under .pf-moon) ---------- */
.pf-moon .mn-pj-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-moon .mn-pj-crumb a { color: var(--mut); }
.pf-moon .mn-pj-crumb a:hover { color: var(--acc); }
.pf-moon .mn-pj-crumb span { overflow-wrap: anywhere; }
.pf-moon .mn-pj-lead { margin-top: 12px; }
.pf-moon .mn-pj-desc { margin-top: 12px; max-width: 62ch; color: var(--ink); opacity: .92; overflow-wrap: anywhere; white-space: pre-line; }
.pf-moon .mn-pj-by { margin-top: 8px; font-weight: 700; font-size: 13px; color: var(--mut); overflow-wrap: anywhere; }
.pf-moon .mn-pj-by a { color: var(--ink); }
.pf-moon .mn-pj-by a:hover { color: var(--acc); }
.pf-moon .mn-pj-meta { display: flex; flex-direction: column; gap: 16px; }
.pf-moon .mn-pj-status { align-self: flex-start; }
.pf-moon .mn-pj-meta dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.pf-moon .mn-pj-meta dt { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.pf-moon .mn-pj-meta dd { margin: 3px 0 0; font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.pf-moon .mn-pj-built { margin-bottom: 8px; }
.pf-moon .mn-pj-chips { justify-content: flex-start; }

/* the project picture where the owner placed it (drawing or uploaded image), shown whole */
.pf-moon .mn-pic { margin: 22px 0 0; padding: 12px; }
.pf-moon .mn-pic--gap { margin-top: 64px; }
.pf-moon .mn-shot { display: block; border-radius: var(--rs); overflow: hidden; }
.pf-moon .mn-shot img { display: block; width: 100%; height: auto; }

/* overview: Challenge / Approach / Outcome */
.pf-moon .mn-tri .num { font: 400 38px/1 var(--disp); color: var(--acc); opacity: .9; }
.pf-moon .mn-tri h3 { font: 400 22px/1.05 var(--disp); text-transform: uppercase; margin: 10px 0; }
.pf-moon .mn-tri p { color: var(--mut); font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-line; }
.pf-moon .mn-found { margin: 0; padding: 0; list-style: none; counter-reset: mnf; display: flex; flex-direction: column; gap: 8px; color: var(--mut); font-size: 13.5px; }
.pf-moon .mn-found li { counter-increment: mnf; overflow-wrap: anywhere; }
.pf-moon .mn-found li::before { content: counter(mnf) "."; color: var(--acc); font-weight: 700; margin-inline-end: 8px; }

/* gallery viewer. Without JS: every picture shows in a plain grid. With JS (data-ready): one figure, tabs, counter, buttons. */
.pf-moon .mn-view { padding: 18px; }
.pf-moon .mn-vh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pf-moon .mn-ctl { display: flex; gap: 6px; align-items: center; }
.pf-moon .mn-ic { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 16px; line-height: 1; }
.pf-moon .mn-vstage { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pf-moon .mn-vfig { margin: 0; min-width: 0; }
.pf-moon .mn-vfig .mn-shot { background: color-mix(in srgb, var(--acc) 6%, var(--bg)); border: 1px solid var(--line); }
.pf-moon .mn-vfig figcaption, .pf-moon .mn-diagram figcaption { margin-top: 8px; color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-moon .mn-view[data-ready] .mn-vstage { display: block; }
.pf-moon .mn-view[data-ready] .mn-vfig:not([data-active]) { display: none; }
.pf-moon .mn-view[data-ready] .mn-vfig .mn-shot { aspect-ratio: 16 / 10; }
.pf-moon .mn-view[data-ready] .mn-vfig img { width: 100%; height: 100%; object-fit: contain; }
.pf-moon .mn-view[data-ready] .mn-vfig figcaption { display: none; }
.pf-moon .mn-cap { margin-top: 12px; color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-moon .mn-pages { display: flex; flex-direction: column; gap: 8px; }
.pf-moon .mn-tab { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 13px 14px; min-height: 56px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.pf-moon .mn-tab:hover { border-color: var(--acc); }
.pf-moon .mn-tab[aria-selected="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); }
.pf-moon .mn-tab .num { font: 400 22px/1 var(--disp); color: var(--acc); width: 28px; flex: none; }
.pf-moon .mn-tab b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.pf-moon .mn-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pf-moon .mn-media { overflow: hidden; }
.pf-moon .mn-media > .mn-eyebrow { display: block; margin-bottom: 12px; }
.pf-moon .mn-dlg { border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--bg) 94%, #000); color: var(--ink); padding: 20px; width: min(1040px, 94vw); max-height: 92vh; overflow: auto; }
.pf-moon .mn-dlg::backdrop { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-moon .mn-dlg .mn-disp { font-size: 24px; overflow-wrap: anywhere; }
.pf-moon .mn-dimg { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: var(--rs); }

/* diagram, tools and specifications */
.pf-moon .mn-diagram { margin: 0; padding: 14px; }
.pf-moon .mn-specs h3 { font: 400 22px/1.1 var(--disp); text-transform: uppercase; margin-bottom: 14px; }
.pf-moon .mn-spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pf-moon .mn-spec td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.pf-moon .mn-spec td:first-child { width: 40%; padding-inline-end: 14px; color: var(--mut); font-weight: 700; }

/* next up: previous / next cards and the contact card */
.pf-moon .mn-next .mn-cover { height: 150px; }
.pf-moon .mn-pj-contact { margin-top: 14px; }
.pf-moon .mn-pj-contact h3 { font-size: clamp(34px, 5.2vw, 60px); }
.pf-moon .mn-next + .mn-pj-contact { margin-top: 14px; }

.pf-moon[data-theme="glitch"] .mn-tab, .pf-moon[data-theme="glitch"] .mn-dlg, .pf-moon[data-theme="glitch"] .mn-shot, .pf-moon[data-theme="glitch"] .mn-dimg { border-radius: 0; }

@media (max-width: 900px) {
    .pf-moon .mn-pg { grid-column: span 12; }
    .pf-moon .mn-pages { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .pf-moon .mn-pages { grid-template-columns: 1fr; }
    .pf-moon .mn-view { padding: 14px; }
    .pf-moon .mn-pic--gap { margin-top: 48px; }
    .pf-moon .mn-spec td:first-child { width: 46%; }
}

/* ---------- reduced motion: keep the content and the eggs' pictures, drop only the movement ---------- */
@media (prefers-reduced-motion: reduce) {
    .pf-moon *, .pf-moon *::before, .pf-moon *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    html:has(.pf-moon) { scroll-behavior: auto; }
}