/* ============================================================
   Obliq Studio — shared chrome for the inner pages.

   index.html keeps its own inline copy of everything; it is a single
   self-contained document by design and rewiring it to an external
   stylesheet would risk a page that already works.  This file carries the
   same tokens and the same header, menu and footer, so the inner pages sit
   in the system without touching the home page.
   ============================================================ */

@font-face{font-family:'Figtree';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/figtree-300.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/figtree-400.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/figtree-500.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-600.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/figtree-700.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/figtree-800.woff2') format('woff2');}

:root{
  --paper:#EDEDED;
  --ink:#141414;
  --ink-soft:#5A5A5A;
  --orange:#EC4A16;
  --noir:#0E0E0E;
  --pitch:#000000;
  --lime:#C4FF45;
  --grey:#797979;
  --font:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --r-lg:44px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,3.1vw,44px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.grain{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  background-size:170px 170px;mix-blend-mode:multiply;opacity:.92;
}
.grain--light{mix-blend-mode:screen;opacity:.10;}

/* ---- header ------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--gut);
  font-size:clamp(16px,1.37vw,21.5px);font-weight:500;letter-spacing:-.014em;
  color:var(--ink);transition:color .55s var(--ease-out);
}
.nav--light{color:#F2F2F2;}
/* Inner pages run the header over photography, where neither ink nor paper is
   reliably readable — a light grey sky and a black jacket can sit under the
   same word.  When the bar goes light it brings its own ground with it, so the
   contrast holds whatever the picture underneath happens to be doing. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.52),rgba(8,8,8,0));
  opacity:0;transition:opacity .45s var(--ease-out);
}
.nav--light::before{opacity:1;}
.nav__spacer{order:2;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.nav__logo{display:flex;align-items:center;min-height:44px;width:clamp(48px,4.3vw,72px);}
.nav__logo img{width:100%;height:auto;}
.nav__left{display:flex;order:1;flex:1 1 0;justify-content:flex-start;align-items:center;}
.nav__list{display:none;}
.nav__cta{order:3;flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:.5em;}
.nav__cta svg{width:.66em;height:.66em;transition:transform .45s var(--ease-out);}
.nav__cta:hover svg{transform:translate(3px,-3px);}
.nav__burger{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  width:30px;height:18px;position:relative;
}
.nav__burger span{
  position:absolute;left:0;top:50%;width:100%;height:1.6px;background:currentColor;
  transition:transform .45s var(--ease-out);
}
.nav__burger span:nth-child(1){transform:translateY(-5px);}
.nav__burger span:nth-child(2){transform:translateY(5px);}
.nav.is-open .nav__burger span:nth-child(1){transform:rotate(45deg);}
.nav.is-open .nav__burger span:nth-child(2){transform:rotate(-45deg);}
.nav.is-open{color:#F4F4F4;}
.nav.is-open .nav__cta{opacity:0;pointer-events:none;}

/* The home page shows no inline nav at any width — the overlay is the menu,
   and the cube lives in it.  The inner pages match, so the header is the same
   object on every page rather than two different ones. */

/* ---- menu overlay ------------------------------------------ */
.menu{
  position:fixed;inset:0;z-index:95;
  background:var(--noir);color:#F4F4F4;
  clip-path:inset(0% 0% 100% 0%);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(84px,13vh,132px) clamp(20px,7vw,44px) clamp(36px,7vh,64px);
  overflow-y:auto;overscroll-behavior:contain;
  pointer-events:none;visibility:hidden;
}
.menu.is-open{pointer-events:auto;visibility:visible;}
.menu__inner{display:grid;grid-template-columns:1fr;gap:6vh;align-items:center;width:100%;margin:auto 0;}
.menu__list{display:flex;flex-direction:column;gap:.1em;}
.menu__link{
  font-size:clamp(30px,min(9.4vw,8.4vh),64px);font-weight:600;letter-spacing:-.04em;line-height:1.08;
  overflow:hidden;display:block;
}
.menu__link span{display:block;transform:translateY(110%);}
.menu__foot{margin-top:clamp(36px,7vh,64px);display:flex;flex-direction:column;gap:18px;}
.menu__cta{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(15px,4.2vw,19px);font-weight:600;letter-spacing:-.018em;}
.menu__cta svg{width:.7em;height:.7em;}
.menu__socials{display:flex;gap:20px;font-size:clamp(12px,3.4vw,14px);color:#B4B4B4;}
.menu__socials a:hover{color:#F4F4F4;}

/* In the menu the cube is the whole point of the right-hand side, so it gets
   the wider column and fills it.  Its own title is dropped here — the menu
   already says what the page is, and the panel reads better as just the cube. */
@media (min-width:901px){
  .menu__inner{grid-template-columns:1fr 1.18fr;gap:clamp(26px,3.2vw,56px);}
  .menu__play{justify-self:end;width:min(100%,700px);}
}
.menu__play .text--title{display:none;}
.menu__play{display:none;}
@media (min-width:901px){.menu__play{display:block;}}
.menu__play .cube-embed{background:transparent;border-radius:0;}

/* the cube panel inside the menu */
.cube-embed{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:26px;overflow:hidden;background:#0A0A0A;
}
.cube-embed__hint{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;z-index:5;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;
  pointer-events:none;
}

/* ---- footer ------------------------------------------------ */
.footer{
  position:relative;z-index:20;background:var(--pitch);color:#F4F4F4;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:clamp(46px,5.2vw,78px) var(--gut) clamp(22px,2.4vw,34px);
  overflow:hidden;min-height:52vh;display:flex;flex-direction:column;
}
/* One column on a phone, three from tablet up: seal, the page list, then the
   contact and socials pair.  Without the wide rule every block stacked down
   the left edge and left the right half of the footer empty. */
.footer__top{display:grid;grid-template-columns:1fr;gap:9vw;position:relative;z-index:3;}
@media (min-width:901px){
  .footer__top{grid-template-columns:auto auto 1fr;gap:clamp(40px,6vw,110px);align-items:start;}
  .footer__top:first-of-type{display:block;}
}
.footer__talk{
  font-size:clamp(54px,12vw,190px);font-weight:700;letter-spacing:-.045em;line-height:.92;
  margin:0 0 clamp(26px,4vh,56px);
}
.footer__nav{display:flex;flex-direction:column;gap:.35em;font-size:clamp(20px,2vw,30px);font-weight:500;letter-spacing:-.03em;}
.footer__nav a:hover,.footer__cols a:hover{color:var(--orange);}
.footer__cols{display:flex;gap:clamp(28px,5vw,90px);flex-wrap:wrap;justify-content:flex-end;}
.footer__cols h4{margin:0 0 1em;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7C7C7C;}
.footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em;}
.footer__cols a{display:inline-flex;align-items:center;gap:.45em;font-size:clamp(14px,1.1vw,17px);}
.footer__cols svg{width:.62em;height:.62em;}
.footer__base{
  margin-top:auto;padding-top:clamp(34px,5vh,70px);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:clamp(11.5px,.9vw,13.5px);color:#7C7C7C;position:relative;z-index:3;
}
@media (max-width:900px){
  .footer__base{flex-direction:column;align-items:flex-start;}
  .footer__top{gap:9vw;}
}

/* ---- shared page furniture --------------------------------- */
/* The space under the fixed header lives on <main>, not on the section.
   A section class with a `padding` shorthand silently resets a padding-top
   set on the same element, and the content slides under the header — that
   caught both the bored page and the contact page. On <main> nothing can
   reach it. */
main{padding-top:clamp(120px,16vh,210px);}
.page{position:relative;}
.wrap{padding:0 var(--gut);}
.eyebrow{
  display:flex;align-items:center;gap:.6em;margin:0 0 clamp(14px,1.7vh,22px);
  font-size:clamp(12px,.95vw,14.5px);font-weight:500;color:var(--ink-soft);
}
.eyebrow svg{width:1em;height:1em;flex:none;color:var(--orange);}
.display{
  margin:0;font-weight:700;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(46px,10.5vw,168px);
}
.lede{
  margin:clamp(22px,3vh,40px) 0 0;max-width:30ch;
  font-size:clamp(18px,1.9vw,30px);font-weight:400;line-height:1.32;letter-spacing:-.02em;
  color:var(--ink-soft);
}
.rule{height:1px;background:rgba(20,20,20,.16);border:0;margin:clamp(40px,7vh,96px) 0;}


/* ============================================================
   Touch: hit areas and minimum type.

   Everything below leaves the design alone and changes only what a finger
   has to land on. The marks were the right size to look at and the wrong
   size to tap — a burger 18px tall is a miss waiting to happen — so the
   targets grow by padding and pull themselves back with a matching negative
   margin, which costs the layout nothing.
   ============================================================ */
@media (pointer:coarse), (max-width:1024px){
  .nav__burger{height:18px;padding:14px 10px;margin:-14px -10px;box-sizing:content-box;}
  .nav__cta{padding:13px 0;margin:-13px 0;}
  .nav__logo{padding:8px;margin:-8px;}
  .menu__socials a{padding:11px 0;margin:-11px 0;}
  .menu__link{padding:7px 0;margin:-7px 0;}
  .menu__cta{padding:12px 0;margin:-12px 0;}
  .footer__nav a,.footer__cols a{padding:10px 0;margin:-10px 0;}
  .footer__cols ul{gap:1.1em;}
  /* nothing on a phone should be under about 11.5px */
  .footer__cols h4{font-size:12.5px;}
  .eyebrow{font-size:12.5px;}
}

@media (pointer:coarse), (max-width:1024px){
  /* a landscape tablet is still a finger */
  .nav__burger{height:18px;padding:14px 10px;margin:-14px -10px;box-sizing:content-box;}
  .nav__cta{padding:13px 0;margin:-13px 0;}
  .bored__foot a{padding:11px 0;margin:-11px 0;display:inline-block;}
  .pr__all{padding:11px 0;margin:-11px 0;}
}

/* shown only when the cube cannot run; see cube-boot.js */
.cube-fallback{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7em;text-align:center;
  padding:clamp(20px,5vw,48px);background:#111;color:#E8E8E8;
  /* the panel sits inside the cube's own scoped stylesheet, which would
     otherwise lend this its display face and uppercase it */
  font-family:var(--font);text-transform:none;letter-spacing:normal;
}
.cube-fallback b{font-size:clamp(18px,2vw,27px);font-weight:600;letter-spacing:-.028em;text-transform:none;}
.cube-fallback span{max-width:34ch;font-size:clamp(13px,1.1vw,16px);line-height:1.5;color:#9A9A9A;font-weight:400;text-transform:none;}