/* MTK shared visual system. Keep this file identical in Code and Architecture. */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
}
:root {
    --mtk-paper: #f7f5f1;
    --mtk-surface: #fffefa;
    --mtk-ink: #161616;
    --mtk-copy: #3f3f3f;
    --mtk-muted: #6b6b65;
    --mtk-line: rgba(20, 20, 20, .14);
    --mtk-accent: #d10f1f;
    --mtk-accent-hover: #a90d19;
    --mtk-accent-soft: rgba(209, 15, 31, .07);
    --mtk-radius: 6px;
    --mtk-gutter: clamp(16px, 3vw, 40px);
    --mtk-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
    --mtk-mono: "JetBrains Mono", Consolas, monospace;
    --font-brand-sans: var(--mtk-sans);
    --font-geist-mono: var(--mtk-mono);
}
body.mtk-page {
    margin: 0;
    min-width: 320px;
    color: var(--mtk-ink);
    background-color: var(--mtk-paper);
    background-image: linear-gradient(rgba(209,15,31,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(209,15,31,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    font-family: var(--mtk-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.mtk-page :is(h1,h2,h3,h4,h5,h6) { font-family: var(--mtk-sans); font-weight: 700; }
.mtk-page :is(button,input,select,textarea) { font-family: inherit; }
.mtk-page :focus-visible { outline: 2px solid var(--mtk-accent); outline-offset: 3px; }
.mtk-page ::selection { color: white; background: var(--mtk-accent); }
.mtk-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--mtk-line);
    backdrop-filter: blur(10px);
}
.mtk-navbar {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 20px;
    max-width: 1440px;
    min-height: 80px;
    padding: 14px var(--mtk-gutter);
    margin: 0 auto;
}
.mtk-brand-group { display: flex; align-items: center; gap: 20px; min-width: 0; }
.mtk-brand-home { display: inline-flex; align-items: center; min-height: 44px; color: var(--mtk-ink); text-decoration: none; }
.mtk-wordmark { font-family: var(--mtk-sans); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.06em; white-space: nowrap; }
.mtk-wordmark::after { content: "."; color: var(--mtk-accent); }
.mtk-portfolio-switcher { display: inline-flex; width: 400px; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius); background: #f0efea; }
.mtk-portfolio-link { display: inline-flex; flex: 1 1 0; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border-radius: 3px; color: var(--mtk-copy); font: 600 14px/1.2 var(--mtk-sans); text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.mtk-portfolio-link svg { width: 17px; height: 17px; flex: none; }
.mtk-portfolio-link:hover { background: #e6e4dd; color: var(--mtk-ink); }
.mtk-portfolio-link[aria-current="true"] { color: #fff; background: var(--mtk-accent); }
.mtk-primary-nav { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.mtk-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; border-radius: 4px; color: var(--mtk-muted); font: 500 14px/1.3 var(--mtk-sans); text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.mtk-nav-link:hover, .mtk-nav-link[aria-current="page"] { color: var(--mtk-accent); background: var(--mtk-accent-soft); }
.mtk-nav-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mtk-language { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 44px; padding: 0 10px; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius); color: var(--mtk-copy); background: #fff; font: 500 14px/1.2 var(--mtk-sans); text-decoration: none; }
.mtk-header-cta, .mtk-mobile-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--mtk-ink); border-radius: var(--mtk-radius); color: white; background: var(--mtk-ink); font: 600 14px/1.3 var(--mtk-sans); text-decoration: none; white-space: nowrap; }
.mtk-header-cta:hover, .mtk-mobile-cta:hover { color: white; background: var(--mtk-accent); border-color: var(--mtk-accent); }
.mtk-menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius); color: var(--mtk-ink); background: white; cursor: pointer; }
.mtk-menu-toggle svg { width: 20px; height: 20px; }
.mtk-menu-close-icon, .mtk-mobile-cta { display: none; }
.mtk-menu-toggle[aria-expanded="true"] .mtk-menu-open-icon { display: none; }
.mtk-menu-toggle[aria-expanded="true"] .mtk-menu-close-icon { display: block; }
.mtk-hero { padding: clamp(48px,7vw,88px) var(--mtk-gutter) clamp(40px,5vw,64px); border-bottom: 1px solid var(--mtk-line); background: transparent; }
.mtk-hero-container { width: 100%; max-width: 1280px; margin: 0 auto; }
.mtk-hero-kicker { display: inline-flex; width: fit-content; margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid var(--mtk-line); color: var(--mtk-accent); font: 500 13px/1.4 var(--mtk-mono); text-transform: uppercase; letter-spacing: .1em; }
.mtk-page .mtk-hero-title { margin: 0; max-width: none; color: var(--mtk-ink); font: 700 clamp(58px,11vw,144px)/1 var(--mtk-sans); letter-spacing: -.035em; }
.mtk-hero-columns { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 48px; margin-top: 28px; }
.mtk-hero-summary { display: grid; gap: 16px; color: var(--mtk-copy); }
.mtk-hero-summary h2 { margin: 0; max-width: 30ch; font-size: clamp(22px,2.2vw,30px); line-height: 1.25; }
.mtk-hero-summary p { margin: 0; font-size: 18px; line-height: 1.65; }
.mtk-hero-summary p + p { color: var(--mtk-muted); font-size: 16px; }
.mtk-reel { margin: 0; }
.mtk-reel-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius); background: #111; }
.mtk-reel figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--mtk-muted); font: 12px/1.5 var(--mtk-mono); }
.mtk-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 20px; border: 1px solid var(--mtk-accent); border-radius: var(--mtk-radius); font: 600 15px/1.5 var(--mtk-sans); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.mtk-button-primary { color: white; background: var(--mtk-accent); }
.mtk-button-primary:hover { color: white; background: var(--mtk-accent-hover); border-color: var(--mtk-accent-hover); }
.mtk-button-secondary { color: var(--mtk-accent); background: var(--mtk-surface); }
.mtk-button-secondary:hover { color: white; background: var(--mtk-accent); }
.mtk-footer { color: var(--mtk-muted); border-top: 1px solid var(--mtk-line); background: var(--mtk-surface); }
@media (max-width:1279px) {
    .mtk-navbar { grid-template-columns: auto 1fr; }
    .mtk-menu-toggle { display: inline-flex; }
    .mtk-header-cta { display: none; }
    .mtk-primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 136px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px var(--mtk-gutter); border-bottom: 1px solid var(--mtk-line); background: #fff; box-shadow: 0 12px 24px rgba(20,20,20,.06); }
    .mtk-primary-nav[data-open="true"] { display: flex; }
    .mtk-nav-link { padding: 12px; }
    .mtk-mobile-cta { display: inline-flex; margin-top: 8px; }
}
@media (max-width:760px) {
    .mtk-hero-columns { grid-template-columns: 1fr; gap: 32px; }
    .mtk-hero-summary p { font-size: 17px; }
}
@media (max-width:640px) {
    .mtk-navbar { grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "switcher switcher"; gap: 10px; padding: 10px 16px; }
    .mtk-brand-group { display: contents; }
    .mtk-brand-home { grid-area: brand; justify-self: start; }
    .mtk-nav-tools { grid-area: tools; }
    .mtk-portfolio-switcher { grid-area: switcher; width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
    .mtk-portfolio-link, .mtk-nav-link, .mtk-button { transition: none; }
}

@media (max-width:640px) {
  .mtk-portfolio-link { padding: 0 6px; font-size: 12px; }
  .mtk-portfolio-link svg { display: none; }
}

/* Invariant language control across Code, Arch, C-ARCH and Projects. */
.mtk-nav-tools .mtk-language { box-sizing: border-box; display: block; flex: 0 0 112px; width: 112px; min-width: 112px; height: 44px; min-height: 44px; margin: 0; padding: 0 30px 0 12px; border: 1px solid rgba(20,20,20,.14); border-radius: 6px; color: #3f3f3f; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%233f3f3f' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; font: 500 14px/1.2 "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; letter-spacing: normal; text-transform: none; appearance: none; cursor: pointer; order: 2; }
.mtk-nav-tools .mtk-language:focus-visible { outline: 2px solid #d10f1f; outline-offset: 3px; }
.mtk-nav-tools .mtk-header-cta { order: 1; }
.mtk-nav-tools .mtk-menu-toggle { order: 3; }
@media (max-width:1279px) { .mtk-nav-tools .mtk-client-access { display: none; } }