/* ═══════════════════════════════════════════════════════════════════════
   CHROME — the frame every page shares: the site header, the hamburger and
   mobile menu, the dropdowns, the orange closing strip. The frame is the
   lab's in every register (orange on black glass), so its colours are its
   own, not the page register's. Merged 2026-10-03 from header.css and
   mio-strip.css in their load order; nothing else was between them.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--chrome-face:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif}

/* ── the base header and menus (was header.css) ── */
/* ===== SITE HEADER ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: var(--black);
    border-bottom: 1px solid var(--grey-dark);
    padding: 1rem 2rem;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    gap: var(--spacing-md);
}

.header-logo {
    height: 24px;
    width: auto;
    flex-shrink: 0;
}

/* ===== NAVIGATION ===== */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cream);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.75rem;
    opacity: 0.85;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--green);
    opacity: 1;
}

.nav-divider {
    width: 1px;
    height: 16px;
    background: var(--grey-dark);
    margin: 0 0.5rem;
}

/* ===== DROPDOWN ===== */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1.25rem;
    background: transparent;
    display: none;
    z-index: 1000;
}

.nav-dropdown:hover::before {
    display: block;
}

.nav-dropdown > .nav-link::after {
    content: '▾';
    font-size: 0.6rem;
    margin-left: 0.25rem;
    opacity: 0.6;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(22, 22, 22, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 6px;
    min-width: 160px;
    padding: 0.75rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-link {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cream);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.65rem 1rem;
    opacity: 0.85;
    transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.nav-dropdown-link:hover {
    color: var(--green);
    opacity: 1;
    background: rgba(0, 245, 160, 0.08);
}

/* ===== HEADER BUTTON ===== */
.header-button {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cream);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(154, 154, 154, 0.35);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.header-button:hover {
    border-color: var(--green);
    color: var(--green);
}

/* ===== HEADER CTA ===== */
.header-cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
}

/* ===== HAMBURGER ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger__line {
    width: 100%;
    height: 2px;
    background: var(--cream);
    transition: transform var(--transition-medium), opacity var(--transition-medium);
}

.hamburger.active .hamburger__line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger__line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 2rem 4rem;
    height: 100%;
    overflow-y: auto;
}

.mobile-menu__section {
    margin-bottom: 2rem;
    width: 100%;
}

.mobile-menu__label {
    font-family: var(--font-family);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 0.5rem;
    display: block;
}

.mobile-menu__link {
    font-family: var(--font-family);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--cream);
    text-decoration: none;
    padding: 0.6rem 0;
    display: block;
    transition: color 0.2s ease;
    border-bottom: 1px solid var(--grey-dark);
}

.mobile-menu__link:last-child {
    border-bottom: none;
}

.mobile-menu__link:hover,
.mobile-menu__link:active {
    color: var(--green);
}

.mobile-menu__link--accent {
    color: var(--green);
}

.mobile-menu__link--email {
    font-size: 0.9rem;
    color: var(--green);
    border-bottom: none;
    padding-top: 1rem;
}

/* =====================================================
   MOBILE STYLES (max-width: 767px)
   Uses higher specificity via attribute selector
   ===================================================== */

@media (max-width: 767px) {
    /* Header adjustments */
    .site-header {
        padding: 0.75rem 1rem;
    }

    .header-logo {
        height: 20px;
    }

    /* Hide desktop nav */
    .nav-menu {
        display: none;
    }

    .header-cta {
        display: none;
    }

    /* Show hamburger */
    .hamburger {
        display: flex;
    }

    /* Enable mobile menu */
    .mobile-menu {
        display: block;
    }
}

/* =====================================================
   The mobile menu, regrouped (2026-08-27):
   Lab / DeepSelf / Harness / Contact — each group ruled
   in its register's colour. Labels are mono apparatus;
   links are clean, no per-link borders.
   ===================================================== */
.mobile-menu__section {
    margin-bottom: 1.7rem;
}

.mobile-menu__label {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.mobile-menu__label--lab { color: #FF5A00; border-bottom-color: rgba(255, 90, 0, 0.45); }
.mobile-menu__label--ds  { color: #10B981; border-bottom-color: rgba(16, 185, 129, 0.4); }
.mobile-menu__label--ha  { color: #fcee0a; border-bottom-color: rgba(252, 238, 10, 0.35); }

.mobile-menu__link {
    border-bottom: none;
    padding: 0.48rem 0;
    font-size: 1.05rem;
}

.mobile-mio {
    white-space: nowrap;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
}

/* the codices: a sub-group inside DeepSelf */
.mobile-menu__sublabel {
    display: block;
    margin: 0.9rem 0 0.25rem;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.55rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(16, 185, 129, 0.65);
}

.mobile-menu__link--sub {
    padding-left: 0.9rem;
    border-left: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.98rem;
}

/* ── the lab frame over it (was mio-strip.css) ── */
:root{--chrome-accent:#FF5A00;--mio-orange:var(--chrome-accent)}   /* the lab frame is orange in every register; --mio-orange kept for older sheets */

/* ---- header: orange-edged glass ---- */
.site-header{background:rgba(12,12,12,.58);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid rgba(255,90,0,.5)}
.site-header .header-logo{display:none}
.site-header .header-container>a:first-child{
  font-family:var(--chrome-face);
  font-weight:700;font-size:1.02rem;letter-spacing:.2em;color:var(--chrome-accent);text-decoration:none}
.site-header .header-container>a:first-child::before{content:"MIO GENICS"}
.site-header .nav-link{color:#e6e4e0;font-weight:500}
.site-header .nav-link:hover{color:var(--chrome-accent)}
.site-header .nav-divider{background:rgba(255,255,255,.18)}
.site-header .header-button{color:var(--chrome-accent);border-color:var(--chrome-accent);font-weight:700}
.site-header .header-button:hover{background:var(--chrome-accent);color:#0a0a0a}
.header-cta.header-cta--brand{text-decoration:none;cursor:pointer;font-family:var(--chrome-face);
  font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;cursor:default;user-select:none;color:#e6e4e0}
.site-header .hamburger__line{background:var(--chrome-accent)}
.site-header .nav-dropdown-menu{background:rgba(10,10,10,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,90,0,.35)}
.site-header .nav-dropdown-link:hover{color:var(--chrome-accent)}
.nav-mio{font-family:var(--chrome-face);
  font-weight:700;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:#0a0a0a;white-space:nowrap;cursor:default;user-select:none}

/* ---- mobile ---- */
.mobile-mio{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,90,0,.35);
  font-family:var(--chrome-face);
  font-weight:700;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--chrome-accent)}

/* ---- the closing band: the lab plate ---- */
.mio-strip--end{background:var(--chrome-accent);color:#0a0a0a;text-align:left;position:relative;
  display:flex;align-items:center;justify-content:flex-start;gap:56px;
  padding:72px 7vw 76px;font-family:var(--chrome-face)}
.mio-strip--end .mio-logo{height:220px;width:auto;flex:0 0 auto;margin:0}
.mio-strip--end .mio-txt{display:flex;flex-direction:column;align-items:flex-start}
.mio-strip--end .mio-name{font-weight:700;font-size:clamp(34px,4.2vw,58px);letter-spacing:.04em;line-height:1;text-transform:uppercase}
.mio-strip--end .mio-labs{margin-top:14px;font-weight:700;font-size:clamp(13px,1.4vw,18px);letter-spacing:.42em;text-transform:uppercase;opacity:.92}
.mio-strip--end .mio-meta{margin-top:26px;font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.66}
.mio-strip--end .mio-meta a{color:#0a0a0a;text-decoration:none;border-bottom:1px solid rgba(10,10,10,.4)}
.mio-strip--end::after{content:"EST. IN LANGUAGE";position:absolute;right:7vw;bottom:26px;
  font-size:9px;letter-spacing:.34em;font-weight:700;opacity:.45;text-transform:uppercase}
/* the lab signal: a braille trace across the plate, drawn live */
.mio-dots{position:absolute;left:0;right:0;bottom:52px;pointer-events:none;user-select:none;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:11px;line-height:1;
  color:#0a0a0a;opacity:.22;white-space:pre;text-align:center;overflow:hidden}
.mio-dots span{display:block}
.mio-strip--end .mio-back,.mio-strip--end a.mio-back:link,.mio-strip--end a.mio-back:visited{display:inline-block;margin-top:14px;color:#0a0a0a!important;font-size:9.5px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:#0a0a0a;opacity:.66;text-decoration:none;
  border-bottom:1px solid rgba(10,10,10,.4)}
.mio-strip--end .mio-back:hover{opacity:1}
@media(max-width:760px){.mio-dots{display:none}}
@media(max-width:760px){.mio-strip--end{flex-direction:column;align-items:flex-start;gap:28px;padding:52px 24px 64px}
  .mio-strip--end .mio-logo{height:140px}.mio-strip--end::after{right:24px}}

/* dropdown cluster labels */
.nav-dropdown-label{display:block;padding:9px 16px 3px;font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.nav-dropdown-label:first-child{padding-top:12px}

/* ---- the footer strip on phones (2026-08-27): centred, the mark large ---- */
@media (max-width: 700px){
  .mio-strip--end{flex-direction:column;align-items:center;text-align:center;
    gap:20px;padding:48px 24px 44px}
  .mio-strip--end .mio-logo{height:150px}
  .mio-strip--end .mio-txt{align-items:center}
  .mio-strip--end .mio-name{font-size:clamp(38px,11vw,48px)}
  .mio-strip--end .mio-labs{margin-top:10px;font-size:12px;letter-spacing:.34em;white-space:nowrap}
  .mio-strip--end .mio-back{margin-top:14px}
  .mio-strip--end .mio-meta{margin-top:12px;line-height:1.9}
  .mio-strip--end .mio-copy{margin-top:4px}
  .mio-strip--end::after{position:static;display:block;margin-top:14px;right:auto;bottom:auto;
    opacity:.5;letter-spacing:.3em}
}
.mio-strip--end .mio-copy{white-space:nowrap}
@media (min-width: 701px){
  .mio-strip--end .mio-copy::before{content:" · "}
}
@media (max-width: 700px){
  .mio-strip--end .mio-copy{display:block;margin-top:8px}
}

/* the lab page doesn't link back to itself */
.research-page .mio-strip--end .mio-back{display:none}