/* fonts */
@font-face { font-family: 'Neue Haas Display'; font-weight: 100; font-style: normal; font-display: swap; src: url('/fonts/nhd-100.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 200; font-style: normal; font-display: swap; src: url('/fonts/nhd-200.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/nhd-300.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/nhd-400.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/nhd-500.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/nhd-500.woff2') format('woff2'); }
@font-face { font-family: 'Neue Haas Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/nhd-700.woff2') format('woff2'); }
@font-face { font-family: 'Old Standard TT'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/old-standard-tt-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Neue Haas Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.page { container-type: inline-size; width: 100%; }
.frame { position: relative; overflow: hidden; margin: 0 auto; display: none; }
.frame.active { display: block; }
.f-d { --u: calc(100cqw / 1440); }
.f-m { --u: calc(100cqw / 402); }

.navlink, .figmalink { display: contents; }
.navlink p, .figmalink > * { pointer-events: auto; }
a { text-decoration: none; color: inherit; }

.strip::-webkit-scrollbar { display: none; }
.strip { scrollbar-width: none; }

/* whoosk hover callouts */
.callout { visibility: hidden; z-index: 5; }
.callout.show { visibility: visible; }
.dot { z-index: 6; }
.dot:focus-visible { outline: 1px solid #000; outline-offset: 1px; }

/* interactive bits */
[data-lamp], [data-about], .side-w { cursor: pointer; }
.side-w { opacity: 0.3; }
.side-w.on-active { opacity: 1; }

/* mobile hamburger overlay */
.hamburger { position: absolute; padding: calc(var(--u)*8); margin: calc(var(--u)*-8); background: transparent; border: 0; cursor: pointer; z-index: 20; }
.hamburger img { position: static; }
.mobile-menu { position: fixed; inset: 0; background: #fff; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { font-family: 'Neue Haas Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; font-size: 28px; color: #000; }
.mm-close { position: absolute; top: 16px; right: 20px; font-size: 32px; font-weight: 200; background: none; border: 0; cursor: pointer; color: #000; line-height: 1; }

/* mobile flow layout (pages without a mobile frame) */
.flow { display: none; padding: 0 0 60px; }
.flow.active { display: block; }
.flow .mheader { position: relative; height: 70px; }
.flow .ft { margin: 16px 20px 0; }
.flow .band { margin: 16px 20px 0; }
.flow .ft:has(> .head) { margin-top: 40px; }
.flow .hdrtext { margin: 0; }