/* ============================================================
   Formlab — shared base stylesheet (design system + common chrome)
   Loaded before each page's own css/<page>.css.
   ============================================================ */

/* ============================================================= DESIGN SYSTEM */
:root{
  /* Color — strict monochrome, no accent */
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --g-100:#F4F4F3;
  --g-200:#E7E6E4;
  --g-400:#B9B8B5;
  --g-600:#6E6D6A;
  --g-800:#2A2A28;

  /* Type */
  --font-display:"Syne";
  --font-body:"Syne";
  --display-weight:700;
  --type-scale:0.93;     /* global headline multiplier */
  --track-label:.39em;   /* uppercase eyebrow tracking */

  --maxw:100000px;   /* no cap — content fills viewport with consistent --gutter on both sides at any resolution (2K/4K included) */
  --gutter:45px;
  --hairline:var(--g-200);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-width:thin;scrollbar-color:var(--g-400) transparent}
/* custom monochrome page scrollbar (WebKit) */
html::-webkit-scrollbar{width:11px}
html::-webkit-scrollbar-track{background:var(--g-100)}
html::-webkit-scrollbar-thumb{background:var(--g-400);border:3px solid var(--g-100);border-radius:20px}
html::-webkit-scrollbar-thumb:hover{background:var(--ink)}
body{
  margin:0;
  font-family:var(--font-body),system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  letter-spacing:-.005em;
}
/* subtle global type reduction on mobile */
@media (max-width:760px){body{font-size:16px}}
@media (max-width:480px){body{font-size:15.25px}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Display type */
.display{
  font-family:var(--font-display),Georgia,serif;
  font-weight:var(--display-weight);
  line-height:1.04;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* Eyebrow / small uppercase label */
.eyebrow{
  font-family:var(--font-body),sans-serif;
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:var(--track-label);
  color:var(--g-600);
  margin:0;
}

/* Text link — underline reveal, the only "button" style */
.tlink{
  position:relative;overflow:hidden;z-index:0;
  display:inline-flex;align-items:center;gap:.55em;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:9px 14px;
  border:1px solid transparent;
  border-bottom-color:var(--ink);
  width:fit-content;
  transition:gap .35s cubic-bezier(.2,.6,.2,1),color .45s ease,border-color .45s ease;
}
.tlink::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.6,.2,1);z-index:-1}
.tlink .arw{transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.tlink:hover{gap:.9em;color:var(--paper);border-color:transparent}
.tlink:hover::before{transform:scaleY(1)}
.tlink:hover .arw{transform:translateX(3px)}
.tlink.on-dark{border-bottom-color:var(--paper)}

/* Outline link variant (thin 1px outline, no fill) */
.olink{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--ink);
  transition:background .4s,color .4s;
}
.olink:hover{background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
.hairline{height:1px;background:var(--hairline);border:0;margin:0}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.05s cubic-bezier(.16,.7,.2,1),transform 1.05s cubic-bezier(.16,.7,.2,1);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in{will-change:auto}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Parallax layers (subtle, transform driven by scroll) */
.parallax{will-change:transform}

/* ============================================================= CUSTOM CURSOR */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .35s ease}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor-ring{width:40px;height:40px;border:1px solid #fff;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.2,.6,.2,1),height .3s cubic-bezier(.2,.6,.2,1),background-color .3s,opacity .35s}
.cursor-ring.is-hover{width:66px;height:66px;background:rgba(255,255,255,.16)}
.cursor-ring.is-down{width:30px;height:30px}
body.cursor-on.cursor-ready .cursor-dot,body.cursor-on.cursor-ready .cursor-ring{opacity:1}
@media (hover:hover) and (pointer:fine){
  body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on .tile,body.cursor-on input,body.cursor-on .tw-slider{cursor:none}
}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring,.cursor-label{display:none}}

/* category "view" cursor label */
.cursor-label{position:fixed;top:0;left:0;z-index:2147483001;pointer-events:none;width:108px;height:108px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-body),sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.3;padding:0 16px;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.6,.2,1)}
.cursor-label .arw{display:inline-block;margin-left:4px}
body.cursor-on.cursor-ready .cursor-label.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.cursor-cat .cursor-dot,body.cursor-cat .cursor-ring{opacity:0!important}

/* ============================================================= BACK TO TOP */
.back-top{position:fixed;right:6px;bottom:0;z-index:900;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding-bottom:clamp(20px,4vh,42px);color:var(--ink);background:none;border:0;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s ease,transform .5s ease,color .35s ease}
.back-top.show{opacity:.85;transform:none;pointer-events:auto}
.back-top:hover{opacity:1}
.back-top span{font-family:var(--font-body),sans-serif;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.back-top .bt-line{width:1px;height:clamp(48px,8vh,84px);background:currentColor;transform-origin:bottom;transition:height .4s cubic-bezier(.2,.6,.2,1)}
.back-top:hover .bt-line{height:clamp(58px,10vh,100px)}
.back-top.on-dark{color:var(--paper)}
@media (max-width:760px){.back-top{display:none}}

/* ============================================================= SHARED SECTION RHYTHM */
.sec-pad{padding-block:clamp(80px,12vh,170px)}
.sec-pad-sm{padding-block:clamp(56px,8vh,110px)}
.bg-soft{background:var(--g-100)}
/* white-space gaps between every section */
main section,
body > section{margin-block:clamp(28px,5vh,72px)}
.hero{margin-block:0}
section + section{margin-top:clamp(28px,5vh,72px)}
#dealers{margin-bottom:0}
/* principles (dark) connects straight into collections grey band — no white gap */
#principles{margin-bottom:0;padding-top:clamp(38px,5vh,64px)}
#collections{margin-top:0}