@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --off-white:#F8F6F2;
  --black:#1A1A1A;
  --grey: #767676
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--off-white);color:var(--black)}
body{
  font-family:"JetBrains Mono",monospace;
  overflow-x:hidden;

  /* Custom black plus cursor */
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%231A1A1A' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;
}

.site-header{
  position:fixed;
  inset:0px 0 auto 0;
  height:90px;
  z-index:100;
  background:var(--off-white);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 2.1vw;
  pointer-events:none;
}
.site-header a{
  pointer-events:auto;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;
}

.bottom-nav a,
.legal-nav a{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;

}
.brand{
  justify-self:center;

  display:flex;
  flex-direction:column;
  align-items:center;

  color:var(--black);
  text-decoration:none;

  transform:translateY(7px);
}

.brand-name{
  font-size:clamp(31px,2.8vw,49px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.065em;
}

.brand-subtitle{
  margin-top:5px;
  font-size:12px;
  line-height:1.2;
  font-weight:400;
  font-style:italic;
  color:var(--grey);
  letter-spacing:0;
  white-space:nowrap;
}

.brand-name{
  font-size:clamp(31px,2.8vw,49px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.065em;
}

.brand-legal-name{
  margin-top:5px;

  font-size:9px;
  line-height:1.2;
  font-weight:400;

  color:var(--grey);
  letter-spacing:0;
  white-space:nowrap;
}
.nav-link{
  color:var(--black);
  text-decoration:none;
  font-size:clamp(15px,1.2vw,20px);
}

.site-header .nav-link:hover{
  text-decoration:underline;
}
  
.site-header .right{justify-self:end}

.desk-page{
  position:relative;
  min-height:100vh;
  height:100vh;
  background:var(--off-white);
}
.desk{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:720px;
  overflow:hidden;
}

/*
  REFERENCE COMPOSITION
  ---------------------
  These are deliberately independent coordinates.
  Do not convert this into a centered group.

  Reference viewport: approximately 1460 x 803.
*/

.object{
  position:absolute;
  transition:transform 180ms ease, filter 180ms ease;
  display:block;
  transform-origin:center center;
  will-change:transform;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;
}
.object img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* BACK: vertical white shelf at far left */
.shelf{
  left:6vw;
  top:38vh;
  width:32vw;
  z-index:1;
  transform:rotate(-90deg);
}

/* BACK: large blue/green/cream/orange folder stack */
.folders{
  left:53vw;
  top:20vh;
  width:35.5vw;
  z-index:2;
  transform:rotate(98deg);
}

/* FRONT of folders: large calendar, leaning left */
.calendar{
  left:27vw;
  top:28vh;
  width:32vw;
  z-index:3;
  transform:rotate(-10.5deg);
}

/* FRONT: smaller pink book, offset down/right */
.book{
  left:35vw;
  top:47vh;
  width:12.5vw;
  z-index:4;
  transform:rotate(3.5deg);
}

/* SEPARATE object at far right */
.mouse{
  left:79.5vw;
  top:56vh;
  width:9.5vw;
  z-index:5;
  --angle:-6deg;
  transform:rotate(var(--angle));
}

/* SEPARATE object at far right */
.join{
  left:56vw;
  top:61vh;
  width:12vw;
  z-index:5;
  --angle:-6deg;
  transform:rotate(-6deg);
}

/* SEPARATE object at far right */
.soon{
  left:32vw;
  top:15vh;
  width:35vw;
  z-index:6;
  --angle:-6deg;
  transform:rotate(0deg);
}


.copyright{
  position:fixed;
  left:1.5vw;
  bottom:19px;

  font-size:9px;
  white-space:nowrap;
  color:var(--grey);

  z-index:100;
}


/* CONTACT PAPER */

.paper{
  left:29vw;
  top:10vh;
  width:40vw;
  z-index:5;
}

.paper-content{
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%);

  width:70%;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  font-size:20px;
  line-height:1.6;
}

.contact-title{
  font-size:22px;
  margin-bottom:8px;
  letter-spacing:.02em;
  font-weight:600;
}

.contact-text{
  margin-bottom:18px;
  font-size:19px;
}

.paper-content a{
  color:var(--black);
  text-decoration:none;
  margin:2px 0;
}

.paper-content a:hover{
  text-decoration:underline;
}

.object:hover{
  transform:translateY(-6px) rotate(var(--angle)) scale(1.018);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.12));
  transition:transform 180ms ease, filter 180ms ease;
}

.shelf:hover{
  transform:translateY(-10px) rotate(-90deg) scale(1.03);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.15));
}

.folders:hover{
  transform:translateY(-10px) rotate(90deg) scale(1.03);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.15));
}

.soon:hover{
  transform:translateY(-10px) rotate(0deg) scale(1.03);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.15));
}

.paper:hover{
  transform:translateY(0px) rotate(0deg) scale(1);
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.15));
}

.object:focus-visible{
  outline:2px solid var(--black);
  outline-offset:6px;
}

.bottom-nav{
  position:fixed;
  z-index:100;
  left:50%;
  bottom:19px;
  transform:translateX(-50%);
  display:flex;
  gap:clamp(17px,2.1vw,32px);
  white-space:nowrap;
  font-size:19px;
  transition:none;
}


.bottom-nav a{
  color:var(--black);
  text-decoration:none;
}
.bottom-nav a:hover{text-decoration:underline}

/* =========================================
   HOMEPAGE COPYRIGHT + LEGAL
   ========================================= */

.home-legal-row{
  position:absolute;
  z-index:100;

  left:0;
  right:0;
  bottom:19px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 1.5vw;

  font-size:11px;
  color:var(--grey);
}

.home-copyright{
  white-space:nowrap;
}

.home-legal-nav{
  display:flex;
  gap:20px;
}

.home-legal-nav a{
  color:var(--grey);
  text-decoration:none;
}

.home-legal-nav a:hover{
  text-decoration:underline;
}



/* Tablet: preserve the individual placement and angles */
@media (max-width:1100px){
  .desk{min-height:650px}

  .shelf{left:1vw;top:18vh;width:43vw}
  .folders{left:45vw;top:13vh;width:46vw}
  .calendar{left:8vw;top:23vh;width:48vw}
  .book{left:31vw;top:53vh;width:19vw}
  .mouse{left:83vw;top:54vh;width:11vw}
}
/* =========================================
   MOBILE — HOMEPAGE DESK
   ========================================= */

@media (max-width:700px){

@media (max-width:700px){

  /* =========================================
     MOBILE HEADER
     ========================================= */

  .site-header{

    height:64px;

    padding:0 16px;

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

  }


  /* Hide desktop navigation */

  .desktop-contact,
  .desktop-join{

    display:none !important;

  }


  /* =========================================
     HAMBURGER — LEFT
     ========================================= */

  .menu-toggle{

    display:block;

    justify-self:start;

    width:24px;
    height:24px;

    margin:0;
    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono", monospace;

    font-size:21px;

    line-height:24px;

    text-align:left;

  }


  /* =========================================
     LOGO — CENTER / RIGHT SIDE
     ========================================= */

  .brand{

    justify-self:end;

    display:flex;

    flex-direction:column;

    align-items:center;

    transform:translateY(4px);

  }


  .brand-name{

    font-size:30px;

    line-height:1;

  }


  .brand-subtitle{

    margin-top:4px;

    max-width:180px;

    font-size:6px;

    line-height:1.2;

    white-space:normal;

    text-align:center;

  }


  /* This is no longer needed */

  .mobile-spacer{

    display:none;

  }

}

  /* -----------------------------------------
     DESK
     ----------------------------------------- */

  .desk-page{

    min-height:100svh;

    height:100svh;

  }

  .desk{

    width:100vw;

    height:100svh;

    min-height:620px;

    overflow:hidden;

  }


  /* -----------------------------------------
     SHELF
     BACK / LEFT
     ----------------------------------------- */

  .shelf{

    left:-8vw;

    top:40vw;

    width:67vw;

    transform:rotate(-80deg);

    z-index:1;

  }


  /* -----------------------------------------
     FOLDERS
     BACK / TOP RIGHT
     ----------------------------------------- */

  .folders{

    left:32vw;

    top:40vw;

    width:63vw;

    transform:rotate(-8deg);

    z-index:2;

  }


  /* -----------------------------------------
     CALENDAR
     FRONT / MAIN OBJECT
     ----------------------------------------- */

  .calendar{

    left:10vw;

    top:50vh;

    width:60vw;

    transform:rotate(-17deg);

    z-index:3;

  }


  /* -----------------------------------------
     BOOK
     FRONT
     ----------------------------------------- */

  .book{

    left:60vw;

    top:60vh;

    width:28vw;

    transform:rotate(3deg);

    z-index:4;

  }


  /* -----------------------------------------
     MOUSE
     ----------------------------------------- */

  .mouse{

    left:78vw;

    top:58vh;

    width:18vw;

    transform:rotate(-6deg);

    z-index:5;

  }


  /* -----------------------------------------
     JOIN US
     ----------------------------------------- */

  .join{

    left:25vw;

    top:70vh;

    width:30vw;

    transform:rotate(-10deg);

    z-index:5;

  }


  /* -----------------------------------------
     WELCOME SCREEN
     ----------------------------------------- */

  .welcome-content{

    width:calc(100% - 40px);

    max-width:500px;

    padding:20px;

  }

  .welcome-small{

    font-size:14px;

    line-height:1.3;

    margin-bottom:7px;

  }

  .welcome-main{

    font-size:27px;

    line-height:1.05;

  }

  .welcome-subtitle{

    margin-top:18px;

    font-size:11px;

    line-height:1.5;

  }

}
/* =========================================
   WELCOME VEIL
   ========================================= */

.welcome-screen{
  position:fixed;
  inset:0;
  z-index:1000;

  background:rgba(248,246,242,0.88);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%231A1A1A' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;

  opacity:1;

  transition:opacity 500ms ease;
}

.welcome-screen.hidden{
  opacity:0;
  pointer-events:none;
}

.welcome-content{
  text-align:center;
  max-width:800px;
  padding:20px;
}

.welcome-small{
  font-size:25px;
  line-height:1.2;
  margin-bottom:8px;
}

.welcome-main{
  font-size:44px;
  line-height:1.05;
  font-weight:500;
}

.welcome-subtitle{
  margin-top:20px;
  font-size:15px;
  line-height:1.5;
}


/* =========================================
   SITE FOOTER
   ========================================= */

.site-footer{
  position:relative;

  width:100%;
  min-height:225px;

  padding:28px 2vw 12px;

  background:var(--off-white);
  color:var(--grey);

  font-size:12px;
  line-height:1.35;

  border-top:1px solid rgba(26,26,26,.12);

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr auto;
}


/* =========================================
   LEFT — ORGANIZATION
   ========================================= */

.footer-left{
  grid-column:1;
  grid-row:1 / 3;

  align-self:start;
}

.footer-name{
  font-size:22px;
  font-weight:500;
  letter-spacing:-.04em;
  color:var(--black);
}

.footer-legal-name{
  margin-top:3px;
  font-size:11px;
}

.footer-info{
  display:flex;
  flex-direction:column;
  gap:4px;

  margin-top:20px;
}

.footer-info a{
  color:var(--grey);
  text-decoration:none;
}

.footer-info a:hover{
  color:var(--black);
  text-decoration:underline;
}


/* =========================================
   RIGHT — SOCIAL + LEGAL
   ========================================= */

.footer-right{
  grid-column:2;
  grid-row:1 / 3;

  justify-self:end;
  align-self:start;

  display:flex;
  flex-direction:column;

  text-align:right;

  margin-top:47px;
}


/* SOCIAL */

.footer-social{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer-social a{
  color:var(--grey);
  text-decoration:none;
}

.footer-social a:hover{
  color:var(--black);
  text-decoration:underline;
}


/* LEGAL */

.footer-legal-nav{
  display:flex;
  flex-direction:column;

  gap:4px;

  margin-top:18px;
}

.footer-legal-nav a{
  color:var(--grey);
  text-decoration:none;
}

.footer-legal-nav a:hover{
  color:var(--black);
  text-decoration:underline;
}


/* =========================================
   FOOTER COPYRIGHT
   ========================================= */

.footer-copyright{
  grid-column:1;
  grid-row:3;

  align-self:end;

  color:var(--grey);
  white-space:nowrap;

  font-size:11px;
}


/* =========================================
   MOBILE — FOOTER
   ========================================= */

@media (max-width:700px){

  .site-footer{

    min-height:340px;

    padding:28px 20px 14px;

    display:flex;

    flex-direction:column;

  }


  .footer-name{

    font-size:19px;

  }


  .footer-legal-name{

    font-size:9px;

    line-height:1.4;

  }


  .footer-info{

    margin-top:17px;

    gap:5px;

    font-size:10px;

    line-height:1.45;

  }


  .footer-right{

    margin-top:28px;

    align-self:flex-start;

    text-align:left;

  }


  .footer-social{

    align-items:flex-start;

  }


  .footer-legal-nav{

    align-items:flex-start;

    margin-top:18px;

  }


  .footer-copyright{

    margin-top:auto;

    font-size:9px;

  }

}

@media (max-width:700px){

  .home-legal-nav{
    display:none !important;
  }

}
/* =========================================
   SCROLL BEHAVIOUR
   ========================================= */

body.scrolled .bottom-nav,
body.scrolled .home-legal-row{
  display:none;
}

/* =========================================
   INNER PAGES
   ========================================= */

.inner-page .bottom-nav{
  position:absolute;
  top:calc(100vh - 38px);
  bottom:auto;
}

.temporarily-hidden{
  display:none !important;
}

/* Temporarily hide bottom navigation */
.bottom-nav{
  display:none !important;
}

.menu-toggle,
.mobile-spacer{
  display:none;
}
/* =========================================
   MOBILE HEADER — FINAL
   ========================================= */

@media (max-width:700px){

  .site-header{

    height:64px;

    padding:0 16px;

    display:grid !important;

    grid-template-columns:1fr auto 1fr;

    align-items:center;


  }


  /* Hide Contact + Join */

  .desktop-contact,
  .desktop-join{

    display:none !important;

  }


  /* HAMBURGER — LEFT */

  .menu-toggle{

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    justify-self:start;

    width:24px;

    height:24px;

    margin:0;

    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono", monospace;

    font-size:22px;

    line-height:24px;

    text-align:center;

    pointer-events:auto;

    z-index:101;

  }


  /* LOGO — CENTER */

  .brand{

    grid-column:2;

    justify-self:center;

    transform:translateY(4px);

    pointer-events:auto;

  }


  .brand-name{

    font-size:25px;

    line-height:1;

  }


  .brand-subtitle{

    margin-top:4px;

    max-width:180px;

    font-size:7px;

    line-height:1.2;

    white-space:normal;

    text-align:center;

  }


  /* EMPTY RIGHT SIDE — keeps logo centered */

  .mobile-spacer{

    display:block !important;

    grid-column:3;

  }

}

/* =========================================
   MOBILE MENU
   ========================================= */

.mobile-menu{
  display:none;
}


/* =========================================
   MOBILE ONLY
   ========================================= */

@media (max-width:700px){

  .mobile-menu{

    position:fixed;

    inset:0;

    z-index:500;

    background:var(--off-white);

    padding:90px 25px 35px;

    flex-direction:column;

  }


  .mobile-menu.open{

    display:flex;

  }


  /* CLOSE BUTTON */

  .mobile-menu-close{

    position:absolute;

    top:17px;

    left:16px;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono", monospace;

    font-size:30px;

    line-height:28px;

    cursor:pointer;

  }


  /* MENU LINKS */

  .mobile-menu-links{

    display:flex;

    flex-direction:column;

    gap:0;

  }


  .mobile-menu-links a{

    display:block;

    padding:15px 0;

    border-bottom:1px solid rgba(26,26,26,.18);

    color:var(--black);

    text-decoration:none;

    font-family:"JetBrains Mono", monospace;

    font-size:18px;

    line-height:1.3;

  }


  .mobile-menu-links a:first-child{

    border-top:1px solid var(--black);

  }


  .mobile-menu-links a:hover{

    color:var(--orange);

  }

}
/* =========================================
   CONTACT PAGE — MOBILE ONLY
   ========================================= */

@media (max-width:700px){

  /* PAPER */

  .paper{

    left:10vw;

    top:25vh;

    width:80vw;

    z-index:5;

  }


  .paper > img{

    opacity:0;

  }


  /* CONTACT CONTENT */

  .paper-content{

    top:58%;

    left:50%;

    width:88%;

    transform:translate(-50%,-50%);

    font-size:12px;

    line-height:1.5;

  }


 


  /* Main statement */

  .paper-content .contact-text{

    max-width:300px;

    margin-bottom:24px;

    font-size:20px;

    line-height:1.25;

  }


  /* Contact links */

  .paper-content a{

    font-size:15px;

    margin:5px 0;

    color:var(--black);

    text-decoration:none;

  }


  .paper-content a:hover{

    text-decoration:underline;

  }

}