/* Gradien — gradien/home
   Company page from the July 2026 memo and the house brand book,
   not from Engram or a prompt about instruments. Dark field, Outfit,
   warm gold. One photograph from the midjourney house set. */

@font-face { font-family: 'Outfit'; src: url('assets/fonts/outfit-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #0a0a0c;
  --ink: #e8e6e1;
  --mute: #9a9890;
  --gold: #c8a882;
  --gutter: 3rem;
  --measure: 38rem;
  --display: clamp(2.4rem, 5.4vw, 4.25rem);
  --body: 1.05rem;
  --nav: 0.9rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.js { scrollbar-width: none; }
html.js::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 var(--body)/1.7 'DM Sans', system-ui, sans-serif;
}

h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover { opacity: .7; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.gh-skip {
  position: fixed; top: -60px; left: 16px; z-index: 40;
  padding: 8px 12px; background: var(--ink); color: var(--bg);
  font-size: 0.75rem;
}
.gh-skip:focus { top: 8px; }

.gh-sb { display: none; }
html.js .gh-sb {
  display: block; position: fixed; z-index: 35;
  top: 0; right: 3px; width: 3px; height: 100svh; pointer-events: none;
}
.gh-sb__thumb { width: 100%; height: 0; background: var(--gold); opacity: 0; }
.gh-sb.is-live .gh-sb__thumb { opacity: .45; }

@media (max-width: 720px) { :root { --gutter: 1.4rem; } }
@media (prefers-reduced-motion: reduce) {
  html.js { scrollbar-width: auto; }
  html.js::-webkit-scrollbar { display: initial; }
  html.js .gh-sb { display: none !important; }
}