/* Shared navigation from the current Look Serious site. */
    .masthead{position:absolute;z-index:6;top:var(--space);left:var(--space);right:var(--space);min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:14px 20px;background:var(--paper);color:var(--ink)}
    .masthead .wordmark{padding:0;background:transparent;color:inherit}
    .site-nav{display:flex;align-items:center;gap:clamp(22px,3vw,48px);margin-left:auto}
    .site-nav a{min-height:40px;display:inline-flex;align-items:center;gap:10px;color:inherit;font:max(var(--mobile-type-min,0px),13px)/1.2 'GT America Mono',monospace;text-transform:uppercase;text-decoration:none;white-space:nowrap}
    .site-nav .pixel-arrow{width:16px;height:16px}
    a[data-color-underline]{text-decoration:none}
    .link-ink{position:relative;display:inline-block;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
    .link-color-line{position:absolute;left:0;bottom:-4px;width:100%;height:2px;pointer-events:none}
    a[data-color-underline]:focus-visible .link-ink{text-decoration-color:transparent}
    .site-nav .link-ink{text-decoration:none}
    .closing-cta .cta-ink{display:flex;align-items:center;justify-content:space-between;width:100%;gap:28px;padding-bottom:13px;border-bottom:1px solid #596457;text-decoration:none}
    .closing-cta:focus-visible .cta-ink{border-bottom-color:transparent}
    .closing-cta .link-color-line{bottom:0}
    [data-scene="footer"] .masthead{background:var(--ink);color:var(--paper)}
    .wordmark{background:var(--paper);color:var(--ink);font:clamp(22px,2.3vw,36px)/1 Arial,sans-serif;letter-spacing:-.07em;padding:12px 14px 13px;text-decoration:none;white-space:nowrap}
    .wordmark strong{font-weight:900}
    .wordmark span{font-weight:400}
    .wordmark-look{display:inline-block;position:relative}
    .wordmark-eye{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;opacity:0;pointer-events:none}
    .wordmark-eye .nav-eye-half,.wordmark-eye .nav-eye-closed{opacity:0}
    .wordmark:is(:hover,:focus-visible) .wordmark-look strong{opacity:0}
    .wordmark:is(:hover,:focus-visible) .wordmark-eye{opacity:1}
    .wordmark:is(:hover,:focus-visible) .nav-eye-open{animation:logo-eye-open 3.8s steps(1,end) infinite}
    .wordmark:is(:hover,:focus-visible) .nav-eye-half{animation:logo-eye-half 3.8s steps(1,end) infinite}
    .wordmark:is(:hover,:focus-visible) .nav-eye-closed{animation:logo-eye-closed 3.8s steps(1,end) infinite}
    @keyframes logo-eye-open{0%,3%,13%,100%{opacity:1}4%,12%{opacity:0}}
    @keyframes logo-eye-half{0%,3%,7%,9%,13%,100%{opacity:0}4%,10%{opacity:1}}
    @keyframes logo-eye-closed{0%,6%,10%,100%{opacity:0}7%,9%{opacity:1}}
    [data-motion="paused"] .wordmark-eye g{animation:none!important}

/* =============================================
   LOOK SERIOUS — The mobile menu
   One dark sheet, the studio's closing colour, built out of the header in the
   site's own pixel blocks (the same grid the project transition uses). The
   header's inline nav becomes a MENU button under 700px; the sheet is written
   by menu.js from the links already in the header, so every page carries the
   same menu with no duplicated markup. Loads after the page's stylesheet.
   ============================================= */
:root{
  --menu-bg:#050605;
  --menu-ink:#fbfae6;
  --menu-muted:#b0b5a9;
  --menu-line:rgba(231,233,226,.2);
  --menu-orange:#ff8700;
  --menu-orange-ink:#21241f;
  --menu-bar:80px;
  --menu-ease:cubic-bezier(.2,.7,.2,1);
  --menu-px-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM1 5h1v1h-1zM2 4h1v1h-1zM3 3h1v1h-1zM4 2h1v1h-1zM5 1h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM6 1h1v1h-1zM6 2h1v1h-1zM6 3h1v1h-1z'/%3E%3C/svg%3E");
  --menu-lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 3h3v1H2zM3 2h1v3H3z' fill='%23e7e9e2' fill-opacity='.13'/%3E%3C/svg%3E");
}

/* ---- The button: the word in the mono voice and a nine-pixel mark that loses its edges to become a cross.
       It sits a notch larger at the top of the page; once docked, the swatch around it carries the weight. ---- */
.menu-button{--menu-type:12.1px;--menu-mark:14.3px;display:none;align-items:center;gap:1em;background:none;border:0;border-radius:0;padding:8px 0 8px 12px;margin:-8px 0;min-height:44px;cursor:pointer;color:inherit;font-family:'GT America Mono',monospace;font-size:max(var(--mobile-type-min,0px),var(--menu-type));font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;-webkit-tap-highlight-color:transparent}
.menu-button:focus-visible{outline:3px solid var(--menu-orange);outline-offset:4px}
.menu-glyph{display:block;width:var(--menu-mark);height:var(--menu-mark);flex:none}
.menu-glyph rect{fill:currentColor;transition:opacity .18s steps(2,end)}
.menu-button[aria-expanded="true"] .menu-glyph .e,.menu-button.is-close .menu-glyph .e{opacity:0}
.menu-button .menu-word{display:block;min-width:3.2em;text-align:left}

/* ---- The sheet. ---- */
.site-menu[hidden]{display:none}
.site-menu{position:fixed;inset:0;z-index:90;background:var(--menu-bg) var(--menu-lattice) 0 0/7px 7px;color:var(--menu-ink);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;font-family:'Space Grotesk',Arial,sans-serif}
.site-menu ::selection{background:var(--menu-orange);color:var(--menu-orange-ink)}
.site-menu a{color:inherit;text-decoration:none}
.site-menu a:focus-visible,.site-menu button:focus-visible{outline:3px solid var(--menu-orange);outline-offset:4px}
.site-menu-inner{min-height:100%;display:flex;flex-direction:column;padding:0 var(--space) max(24px,env(safe-area-inset-bottom))}
.site-menu-bar{height:var(--menu-bar);flex:none;display:flex;align-items:center;justify-content:space-between}
.site-menu-bar .wordmark{color:var(--menu-ink);background:transparent;padding:0;font-size:23px}

.site-menu .menu-button{display:inline-flex}

.menu-meta{font-family:'GT America Mono',monospace;font-size:max(var(--mobile-type-min,0px),12px);line-height:1.5;letter-spacing:.02em;font-weight:400}
.menu-muted{color:var(--menu-muted)}

/* The rows: one word each, in the display cut, on a ruled line. */
.site-menu-list{list-style:none;margin:0;padding:0;padding-top:6px}
.menu-row{position:relative;display:block;padding:22px 0 24px;isolation:isolate}
.menu-row:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--menu-line);transform-origin:left center}
.site-menu-list li:last-child .menu-row:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--menu-line)}
.menu-window{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.menu-label{display:block;font-family:'Space Grotesk',Arial,sans-serif;font-weight:400;font-synthesis:none;font-size:max(var(--mobile-type-min,0px),clamp(38px,11vw,58px));line-height:1;letter-spacing:-.02em;transition:color .15s}
.menu-arrow{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--menu-px-ne) center/contain no-repeat;mask:var(--menu-px-ne) center/contain no-repeat;transition:transform .25s steps(2,end),color .15s}
.menu-row[aria-current] .menu-label{color:var(--menu-orange)}
.menu-row:hover .menu-label,.menu-row:focus-visible .menu-label{color:var(--menu-orange)}
.menu-row:active .menu-label{color:var(--menu-orange)}

/* The call: a block of the orange, as on the closing sheet. */
.site-menu .menu-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;padding:19px 22px;background:var(--menu-orange);color:var(--menu-orange-ink);font-family:'GT America Mono',monospace;font-weight:500;font-size:16px;letter-spacing:-.005em;transition:background .2s,color .2s}
.menu-cta .menu-arrow{margin:0;width:18px;height:18px}
.site-menu .menu-cta:hover,.site-menu .menu-cta:focus-visible{background:var(--menu-ink);color:var(--menu-bg)}
.menu-cta:hover .menu-arrow{transform:translate(2px,-2px)}
.menu-mail{display:inline-block;margin-top:14px;padding-bottom:3px;border-bottom:1px solid var(--menu-line);width:fit-content;color:var(--menu-muted);transition:color .15s,border-color .15s}
.menu-mail:hover,.menu-mail:focus-visible{color:var(--menu-ink);border-color:currentColor}

/* The foot stays in the mono voice. */
.site-menu-foot{margin-top:auto;padding-top:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
@media(max-width:400px){.site-menu-foot{flex-direction:column;align-items:flex-start;gap:12px}}
.site-menu-foot>.menu-meta{flex:0 1 auto;min-width:0}
.menu-copyright{flex:none;font-family:'GT America Mono',monospace;font-weight:500;font-size:max(var(--mobile-type-min,0px),14px);letter-spacing:0;white-space:nowrap}

/* ---- Motion: lines draw, words rise, in the order they are read. ---- */
@keyframes menu-line{from{transform:scaleX(0)}}
@keyframes menu-rise{from{transform:translateY(112%)}}
@keyframes menu-fade{from{opacity:0;transform:translateY(8px)}}
.site-menu.is-open .menu-row:before{animation:menu-line .6s var(--menu-ease) both;animation-delay:calc(40ms + var(--i,0)*70ms)}
.site-menu.is-open .site-menu-list li:last-child .menu-row:after{animation:menu-line .6s var(--menu-ease) both;animation-delay:calc(110ms + var(--i,0)*70ms)}
.site-menu.is-open .menu-label{animation:menu-rise .62s var(--menu-ease) both;animation-delay:calc(70ms + var(--i,0)*70ms)}
.site-menu.is-open :is(.menu-cta,.menu-mail,.site-menu-foot){animation:menu-fade .55s var(--menu-ease) both;animation-delay:calc(60ms + var(--i,0)*70ms)}
.site-menu.is-plain{transition:opacity .22s}
.site-menu.is-plain:not(.is-open){opacity:0}


@media(max-width:760px){
  .masthead .site-nav{display:none}
  .masthead .menu-button{display:inline-flex}
  .menu-open .masthead .menu-button{visibility:hidden}
}
@media(max-height:700px){.menu-row{padding:18px 0 20px}.site-menu-foot{padding-top:20px}.menu-cta{margin-top:18px}}
@media(min-width:761px){.site-menu{display:none!important}}
html.menu-open{overflow:hidden;overscroll-behavior:none}
html.menu-open body{overscroll-behavior:none}
@media(prefers-reduced-motion:reduce){
  .site-menu *,.site-menu *:before,.site-menu *:after,.menu-button{animation:none!important;transition:none!important}
}
[data-motion="paused"] .site-menu *,[data-motion="paused"] .site-menu *:before,[data-motion="paused"] .site-menu *:after{animation:none!important;transition:none!important}

