/* MarbleTech Edition stylesheet (product sprint PS-4, PS-5; charter §9: Edition material). The HUD identity of the
   owner's "MarbleTech 3025" concept, layered on the Platform's base design system and the theme tokens. Compound
   selectors are wrapped in :where() so they never outrank a node's compiled style. No colour is hard-coded: every
   value comes from the theme's custom properties. */

/* Atmosphere: a faint blueprint grid and a cyan glow behind the page. */
.site {
    background:
        radial-gradient(70rem 36rem at 85% -12%, color-mix(in srgb, var(--mt-color-primary) 13%, transparent), transparent 65%),
        radial-gradient(50rem 30rem at -10% 30%, color-mix(in srgb, var(--mt-color-accent) 6%, transparent), transparent 70%),
        linear-gradient(color-mix(in srgb, var(--mt-color-border) 35%, transparent) 1px, transparent 1px) 0 0 / 100% 64px,
        linear-gradient(90deg, color-mix(in srgb, var(--mt-color-border) 35%, transparent) 1px, transparent 1px) 0 0 / 64px 100%,
        var(--mt-color-background);
    background-attachment: fixed;
}

/* Type: display headings in capitals; labels in the mono face. */
:where(h1, h2, .mt-hero__heading) { text-transform: uppercase; letter-spacing: .01em; }
:where(h3, h4) { letter-spacing: .01em; }
.mt-eyebrow { letter-spacing: .22em; }
.mt-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; }

/* Header: a HUD bar with a signal dot before the name. */
.site-header { background: color-mix(in srgb, var(--mt-color-background) 78%, transparent); }
.site-header__name { font-family: var(--mt-heading-font); text-transform: uppercase; letter-spacing: .14em; font-size: 1rem; display: inline-flex; align-items: center; gap: 10px; }
.site-header__name::before { content: ""; width: 8px; height: 8px; background: var(--mt-color-primary); box-shadow: 0 0 12px var(--mt-color-primary); transform: rotate(45deg); }
:where(.site-nav) a, :where(.site-nav) span { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 400; }
:where(.site-nav--primary) a:hover { background: color-mix(in srgb, var(--mt-color-primary) 10%, transparent); }

/* Buttons: clipped corners on the primary, a signal outline on the secondary. */
.mt-button { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; font-weight: 400; box-shadow: none;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
:where(a.mt-button):hover { box-shadow: 0 0 24px color-mix(in srgb, var(--mt-color-primary) 45%, transparent); }
.mt-button--link { clip-path: none; }
.mt-button--secondary { color: var(--mt-color-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-color-primary) 60%, transparent); clip-path: none; }
:where(a.mt-button--secondary):hover { background: color-mix(in srgb, var(--mt-color-primary) 10%, transparent); }

/* Cards: hairline panels with HUD corner brackets that light up on hover. */
.mt-card { box-shadow: none; background: color-mix(in srgb, var(--mt-color-surface-raised) 88%, transparent); backdrop-filter: blur(6px); }
:where(.mt-card)::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(var(--mt-color-primary), var(--mt-color-primary)) top left / 14px 1px no-repeat,
        linear-gradient(var(--mt-color-primary), var(--mt-color-primary)) top left / 1px 14px no-repeat,
        linear-gradient(var(--mt-color-primary), var(--mt-color-primary)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--mt-color-primary), var(--mt-color-primary)) bottom right / 1px 14px no-repeat;
    opacity: .55; transition: opacity .2s ease; }
:where(.mt-card--linked):hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mt-color-primary) 50%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--mt-color-primary) 55%, transparent); }
:where(.mt-card):hover::before { opacity: 1; }
.mt-card__title { text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
.mt-card__icon { border: 1px solid color-mix(in srgb, var(--mt-color-primary) 40%, transparent); background: color-mix(in srgb, var(--mt-color-primary) 8%, transparent); }
.mt-card__link { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; }

/* Stats read like instrument readouts. */
.mt-stat__value { color: var(--mt-color-primary); text-shadow: 0 0 24px color-mix(in srgb, var(--mt-color-primary) 40%, transparent); }

/* A section with a surface background reads as a framed band. */
.mt-section { border-top: 1px solid transparent; }
:where(.mt-section + .mt-section) { border-top-color: color-mix(in srgb, var(--mt-color-border) 70%, transparent); }

/* The first section of a page is the opening scene: taller, with a scanline sheen. */
:where(.page > .mt-section:first-child) { padding-top: calc(var(--u) * 14); padding-bottom: calc(var(--u) * 12); overflow: hidden; }
:where(.page > .mt-section:first-child)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--mt-color-text) 3%, transparent) 3px 4px);
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }

.mt-divider { border-top-color: color-mix(in srgb, var(--mt-color-primary) 30%, var(--mt-color-border)); }
.site-footer { background: color-mix(in srgb, var(--mt-color-surface) 80%, transparent); }
.site-footer__name { text-transform: uppercase; letter-spacing: .14em; }
:focus-visible { box-shadow: 0 0 0 2px var(--mt-color-background), 0 0 0 4px var(--mt-color-primary); }
.mt-button:focus-visible { clip-path: none; } /* the clipped corners would hide the focus ring */
::selection { background: color-mix(in srgb, var(--mt-color-primary) 35%, transparent); color: var(--mt-color-text); }