/* ============================================================
   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);}
  /* the panel is square, so its height is its width: capping against the
     viewport keeps the whole thing — cube and caption — on a short screen */
  .menu__play{justify-self:end;width:min(100%,700px,64vh);}
}
.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;}

/* ---- cube: loading, and the touch shield ----------------------------
   Every selector is scoped under .cube-embed so it outranks the pen's own
   rules, which uppercase text and size it in ems off a tiny root. */
.cube-embed .cube-wait{
  position:absolute;inset:0;z-index:7;display:flex;gap:.7em;
  align-items:center;justify-content:center;
  font-family:var(--font);font-size:15px;font-weight:500;
  text-transform:none;letter-spacing:normal;color:#8A8A8A;
}
.cube-embed .cube-wait i{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.2);border-top-color:#C9C9C9;
  animation:cubeSpin .8s linear infinite;
}
@keyframes cubeSpin{to{transform:rotate(360deg);}}

/* The shield itself never takes a touch — only its button does — so the
   page keeps scrolling over the panel until someone asks to play. */
.cube-embed .cube-shield{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 16px 6%;
}
.cube-embed .cube-shield__btn{
  pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;width:auto;padding:0 26px;border:0;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  font-family:var(--font);font-size:16px;font-weight:600;line-height:1;
  text-transform:none;letter-spacing:-.01em;
  color:#0C0C0C;background:var(--lime);
  box-shadow:0 12px 34px rgba(0,0,0,.4);
}
.cube-embed .cube-release{
  position:absolute;z-index:9;top:12px;right:12px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;width:auto;padding:0 18px;border:0;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  font-family:var(--font);font-size:14px;font-weight:600;line-height:1;
  text-transform:none;letter-spacing:-.01em;
  color:#F2F2F2;background:rgba(255,255,255,.16);
}
@media (pointer:coarse){
  /* before it is live the game layer is inert, whatever the pen sets */
  .cube-embed:not(.is-live) .ui__game{pointer-events:none !important;}
  /* one instruction at a time: the pen's own prompt waits its turn */
  .cube-embed:not(.is-live) .text--note{opacity:0 !important;}
}


/* 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);
}
/* the same seal the home page footer uses — white, and sized rather than
   dropped in at the artwork's own scale */
.seal{
  width:clamp(130px,12.6vw,184px);height:auto;flex:none;
  filter:grayscale(1) brightness(1.95) contrast(1.22);
  opacity:.92;
}
.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;}
  /* stacked, these two columns belong at the left edge and at a size a
     thumb can hit — pushed right and set at 11px they were barely there */
  .footer__cols{width:100%;justify-content:flex-start;gap:26px 8%;}
  .footer__cols>div{flex:1 1 42%;min-width:150px;}
  .footer__cols h4{font-size:12.5px;margin-bottom:1.2em;}
  .footer__cols a{font-size:16px;}
  .footer__cols ul{gap:.85em;}
}

/* ---- 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;}