/* ==========================================================================
   SINLIMITE — shared shell for the three landing pages
   (work.html / services.html / about.html)

   Deliberately minimal: brand tokens, the webfont, and a header that echoes
   the home board (logo left, page label right). Page content is empty until
   art direction lands — add page-specific CSS in each page's own <style>.
   ========================================================================== */

@font-face{
  font-family:'Cabinet Grotesk';
  src:url(fonts/CabinetGrotesk-Variable.woff2) format('woff2-variations'),
      url(fonts/CabinetGrotesk-Variable.woff) format('woff');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0A;
  --dim:rgba(11,11,10,.48);
  --line:rgba(11,11,10,.14);
  --field:#EFEEEB;
  --pad:clamp(14px,1.5vw,28px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  height:100%;width:100%;max-width:100%;
  overflow-x:hidden;overscroll-behavior-x:none;
}
body{
  min-height:100%;width:100%;max-width:100%;margin:0;background:var(--paper);color:var(--ink);
  font-family:'Cabinet Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
figure{margin:0}

/* -------------------------------- HEADER -------------------------------- */
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--pad);
  padding:calc(var(--pad) * .55) var(--pad) 0;
}
.page-logo{display:block;width:clamp(120px,13vw,200px);color:var(--ink)}
.page-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.page-logo:hover{opacity:.55;transition:opacity .3s var(--ease)}

/* Interior-page escape hatch: a single quiet arrow on desktop. Brand names
   stay inside the page content instead of becoming a repeated site logo. */
.page-back{display:inline-flex;align-items:center;justify-content:flex-start;width:clamp(34px,3vw,48px);font-size:clamp(1.45rem,2vw,2rem);font-weight:500;line-height:.8;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.page-back:hover{transform:translateX(-5px);opacity:.55}
.page-back--floating{position:absolute;top:calc(var(--pad) * .55);left:var(--pad);z-index:20}

/* Work carries the same logo as the home board's first panel — same position,
   same size — so a page transition can hand it over without a jump. Keep in
   sync with .logo in index.html. */
.page-head--brand .page-logo{width:clamp(190px,31vw,600px)}

/* pages without a logo: the label keeps its right-hand position */
.page-head--solo{justify-content:flex-end}
.page-head--solo .page-back{margin-right:auto}

.page-label{
  margin:0;text-align:right;
  font-weight:900;letter-spacing:-.035em;line-height:.82;
  font-size:clamp(30px,4.2vw,74px);
}

/* --------------------------------- MAIN ---------------------------------- */
/* Empty on purpose. Lay the page out here once the direction is set. */
.page-main{padding:var(--pad)}

@media (max-width:900px){
  .page-back{display:none}
  .page-head--brand .page-logo{width:min(78vw,420px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}