/* Scaleworks Studio — shared site styles
   Warm Slate palette · Instrument Serif + Geist + Geist Mono
*/

:root {
  --paper:  #f4efe8;
  --paper-2:#ebe4d9;
  --ink:    #1a1714;
  --ink-2:  #4a423a;
  --ink-3:  #8a8074;
  --rule:   #d8cfc0;
  --accent: #b85c38;
  --pad-y:  clamp(96px, 13vw, 180px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typography utilities */
.display {
  font-family: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
.mono {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.italic { font-style: italic; }
.accent { color: var(--accent); }

a { color: inherit; text-decoration: none; }

.underline-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size 240ms ease;
}
.underline-link:hover { background-size: 100% 2px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.section-label { color: var(--ink-3); margin-bottom: 24px; }

/* Eyebrow row */
.eyebrow {
  color: var(--ink-3);
  margin-bottom: 40px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.eyebrow .rule { display: inline-block; width: 28px; height: 1px; background: var(--ink-3); }
.eyebrow .dot { color: var(--rule); }

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
}
[data-reveal][data-revealed="true"] { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* Nav */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  padding: 20px 48px;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
  display: flex; justify-content: space-between; align-items: center;
}
.site-nav.scrolled {
  background: rgba(244,239,232,0.85);
  border-bottom-color: var(--rule);
  backdrop-filter: blur(8px);
}
.site-nav .logo {
  font-family: "Instrument Serif", serif;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.site-nav .logo em { font-style: italic; color: var(--accent); }
.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 36px; align-items: center;
}
.nav-cta {
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
}
.nav-cta:hover { background: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Footer */
.site-footer {
  padding: 48px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
.site-footer .logo {
  font-family: "Instrument Serif", serif; font-size: 20px;
}
.site-footer .logo em { font-style: italic; color: var(--accent); }
.footer-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 32px;
}
.footer-copy { color: var(--ink-3); }

/* Page header (used on apps/about/contact pages) */
.page-header {
  padding: clamp(80px, 12vw, 160px) 48px clamp(48px, 7vw, 96px);
}
.page-header-inner { max-width: 1280px; margin: 0 auto; }
.page-header h1 {
  font-size: clamp(56px, 9vw, 132px);
  margin: 0;
  max-width: 16ch;
  line-height: 1.04;
}
.page-header .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  margin: clamp(56px, 8vw, 96px) 0 0;
}

/* Helpers */
.hide-sm { display: inline-flex; }
@media (max-width: 720px) {
  .hide-sm { display: none; }
  .site-nav { padding: 16px 20px; }
  .nav-links { gap: 20px; }
  .site-footer { padding: 32px 20px; }
  .footer-links { gap: 18px; flex-wrap: wrap; }
  .page-header { padding-left: 24px; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}