/* Floating header card and drop-down menu, ported from otl-x-web/theme/assets/css/otl.css.
 * Loaded only on public pages (base.html). Colours, text styles and motion come from tokens.css / type.css. */
:root { --otl-header-h: 80px; --otl-header-w: 15rem; }
html.otl-header-compact { --otl-header-h: 44px; }

/* The card is fixed top-right, so public pages need top padding where the old sticky nav sat. */
body.has-site-header main { padding-top: 7rem; }

.lHeader { position: fixed; top: 8px; right: 8px; z-index: 102; width: var(--otl-header-w); max-width: 80%; height: var(--otl-header-h); transition: height var(--duration-base) var(--ease-gleasing); will-change: height; backface-visibility: hidden; color: var(--color-text); }
.lHeader__inner { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; height: 100%; padding: var(--space-4); }
.lHeader__background, .cMenu__background { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: var(--radius-sm); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); }
.lHeader__background { overflow: hidden; }
.lHeader__background::before, .cMenu__background::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: var(--surface-glass); border-radius: var(--radius-sm); }
.lHeader__background::after, .cMenu__background::after { position: absolute; inset: 0; z-index: -1; content: ""; border: 1px solid var(--border-1); border-radius: var(--radius-sm); }
.lHeader__logo { flex: none; overflow: hidden; transition: opacity .5s var(--ease-expo) .15s, width var(--duration-base) var(--ease-gleasing), margin var(--duration-base) var(--ease-gleasing); }
html.otl-header-compact .lHeader__logo { pointer-events: none; opacity: 0; width: 0; margin-right: -14px; transition-delay: 0s; }
.lHeader__logo_link { text-decoration: none; color: inherit; }
.otl-header__logo-img { display: block; width: auto; height: 50px; border-radius: 3px; }
.lHeader__nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0; }
.lHeader__nav_home_link { display: flex; gap: var(--space-2); align-items: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; max-width: 11rem; }
.lHeader__nav_home_icon { width: 12px; height: 12px; flex: none; }
.lHeader__nav_home_icon svg { overflow: visible; display: block; }
.lHeader__nav_home_icon path { transition: transform .6s var(--ease-expo); }
.lHeader__nav_home_text { font: var(--t-label-12-mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .6s var(--ease-expo); }
@media (hover: hover) {
    .lHeader__nav_home_link:hover .lHeader__nav_home_text { transform: translateX(-11px); }
    .lHeader__nav_home_link:hover .lHeader__nav_home_icon path[data-id="2"], .lHeader__nav_home_link:hover .lHeader__nav_home_icon path[data-id="3"] { transform: translateX(var(--otl-home-w, 30px)); }
}
.lHeader__nav_menu { display: flex; align-items: center; width: 24px; height: 8px; }
.lHeader__nav_menu_button { width: 100%; height: 24px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.lHeader__nav_menu_button_icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lHeader__nav_menu_button_line { position: absolute; width: 100%; height: 1px; background-color: var(--color-text); transition: transform .32s var(--ease-expo), opacity var(--duration-fast) linear; }
.lHeader__nav_menu_button_line:first-child { transform: translateY(-4px); }
.lHeader__nav_menu_button_line:last-child { transform: translateY(4px); }
html.otl-menu-open .lHeader__nav_menu_button_line:first-child { transform: translateY(0) rotate(12deg); transition-delay: var(--duration-fast); }
html.otl-menu-open .lHeader__nav_menu_button_line:nth-child(2) { transform: scaleX(0); }
html.otl-menu-open .lHeader__nav_menu_button_line:last-child { transform: translateY(0) rotate(-12deg); transition-delay: var(--duration-fast); }

.cMenu__inner { position: fixed; inset: 0; z-index: 101; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease-expo), visibility 0s linear .6s; }
html.otl-menu-open .cMenu__inner { pointer-events: auto; visibility: visible; opacity: 1; transition: opacity 0s, visibility 0s; }
.cMenu__overlay { position: absolute; inset: 0; z-index: 1; }
.cMenu__wrapper { position: absolute; top: calc(var(--otl-header-h) + 12px); right: 8px; z-index: 2; width: var(--otl-header-w); max-width: 80%; overflow: hidden; border-radius: var(--radius-sm); transition: top var(--duration-base) var(--ease-gleasing); outline: none; color: var(--color-text); }
.cMenu__content { position: relative; width: 100%; max-height: calc(100dvh - var(--otl-header-h) - 20px); padding: var(--space-6) var(--space-4) var(--space-4); overflow: hidden auto; scrollbar-width: none; }
.cMenu__content::-webkit-scrollbar { display: none; }
.cMenu__background { transform: scaleY(0); transform-origin: top; }
html.otl-menu-open .cMenu__background { transform: scaleY(1); transition: transform 1s var(--ease-expo); }
.cMenu__separator { height: 4px; background: linear-gradient(to right, var(--color-text) 0 5.3px, transparent 5.3px 6.8px) 0 0 / 6.8px 1.1px repeat-x, linear-gradient(to right, var(--color-text) 0 5.3px, transparent 5.3px 6.8px) 0 2.9px / 6.8px 1.1px repeat-x; }
.cMenu__repeat { width: 100%; height: 1px; margin-top: var(--space-5); background-image: linear-gradient(to right, var(--color-text), var(--color-text) 2px, transparent 2px, transparent 4px); background-repeat: repeat-x; background-size: 4px 2px; background-position: bottom; }
.cMenu__nav { margin-top: var(--space-3); counter-reset: main-nav; }
.cMenu__nav_list { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.cMenu__nav_item { counter-increment: main-nav; }
.cMenu__nav_item_link { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 0; text-decoration: none; color: inherit; }
/* Mono sizes with no exact Geist style: keep the size from the closest style, use the mono family token. */
.cMenu__nav_item_index { font: var(--t-label-12-mono); letter-spacing: -.02em; }
.cMenu__nav_item_index::before { content: counter(main-nav, decimal-leading-zero); }
.cMenu__nav_item_text { font: var(--t-label-20); font-family: var(--font-mono); letter-spacing: -.04em; }
.cMenu__nav_item.is-current .cMenu__nav_item_text { color: var(--color-text-secondary); }
.cMenu__contact { width: 100%; margin-top: var(--space-6); }
.cMenu__contact_link { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; }
.cMenu__contact_text { font: var(--t-heading-40); font-family: var(--font-mono); letter-spacing: -.06em; }
.cMenu__contact_barcode { display: block; width: 100%; height: 40px; margin-top: var(--space-2); color: var(--color-text); }
.cMenu__contact_barcode svg { width: 100%; height: 100%; display: block; }
.cMenu__contact_date { margin-top: var(--space-1); margin-left: auto; }
.cMenu__contact_date_time { display: block; font: var(--t-label-12-mono); letter-spacing: -.02em; }

/* Elements that flicker in when the menu opens (random delays are set in site-header.js) */
.otl-menu .cMenu__separator, .otl-menu .cMenu__repeat, .otl-menu .cMenu__nav_item_index, .otl-menu .cMenu__nav_item_text, .otl-menu .cMenu__contact_text .-char, .otl-menu .cMenu__contact_barcode, .otl-menu .cMenu__contact_date { opacity: 0; }
html.otl-menu-open .otl-menu .cMenu__separator, html.otl-menu-open .otl-menu .cMenu__repeat, html.otl-menu-open .otl-menu .cMenu__nav_item_index, html.otl-menu-open .otl-menu .cMenu__contact_barcode, html.otl-menu-open .otl-menu .cMenu__contact_date { opacity: 1; transition: opacity var(--duration-base) var(--ease-expo) .6s; }
html.otl-menu-open .otl-menu .cMenu__nav_item_text, html.otl-menu-open .otl-menu .cMenu__contact_text .-char { animation: otl-flicker .48s linear both; animation-delay: calc(.6s + var(--d, 0s)); }
@keyframes otl-flicker { 0% { opacity: 0; } 16% { opacity: .1; } 36% { opacity: 1; } 52% { opacity: .2; } 64% { opacity: .1; } 76% { opacity: 1; } 88% { opacity: .2; } 100% { opacity: 1; } }

/* Letter roll on hover */
.otl-roll { position: relative; display: inline-flex; overflow: hidden; }
.otl-roll .-main-text, .otl-roll .-copy-text { display: inline-flex; white-space: pre; }
.otl-roll .-copy-text { position: absolute; top: 0; left: 0; }
.otl-roll .-char { display: inline-block; transition: transform .32s var(--ease-gleasing); transition-delay: calc(var(--i, 0) * 30ms); }
.otl-roll .-copy-text .-char { transform: translateY(140%); }
@media (hover: hover) {
    a:hover > .otl-roll .-main-text .-char, a:hover .otl-roll .-main-text .-char { transform: translateY(-140%); }
    a:hover > .otl-roll .-copy-text .-char, a:hover .otl-roll .-copy-text .-char { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .lHeader, .cMenu__wrapper, .cMenu__background, .otl-roll .-char { transition: none !important; }
    html.otl-menu-open .otl-menu .cMenu__nav_item_text, html.otl-menu-open .otl-menu .cMenu__contact_text .-char { animation: none; opacity: 1; }
}