/* Shared foundation for all OperHand website pages.
   Pages are authored content-first: fully readable with no JavaScript.
   Motion JS only ever hides things it is about to reveal. */

/* ---------- Fonts (self-hosted, no external requests ever) ---------- */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Fraunces — display. Variable on BOTH weight and optical size, so the
   headline face literally changes shape with size: softer and warmer large,
   tighter and more workmanlike small. That is the whole reason to use it. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Instrument Sans — body. Modern grotesque, deliberately not Inter/Jakarta,
   and from the same contemporary type world as Fraunces so the pair agrees. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2"),
       url("../assets/fonts/PlusJakartaSans.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* No emoji, no exclamation marks in copy — enforced editorially, not here. */

::selection { background: var(--primary-container); color: #fffbff; }

/* Scrollbar tuned to the palette, mirroring the product */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-container); }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--radius-full); }

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

/* ---------- Lenis required styles (inlined from lenis.css — never fetched) ---------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Shared primitives ---------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
}

@media (max-width: 720px) {
  .container { padding-inline: var(--margin-mobile); }
}

/* Micro-label: the product's ALL-CAPS section voice */
.microlabel {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--secondary);
}

/* Footer strip shared by every sample: models the approved phrasing */
.sample-footer {
  padding: var(--space-6) 0 var(--space-8);
  font-size: 13px;
  color: var(--ink-muted);
}
.sample-footer p { max-width: 60ch; }
.sample-footer .backlink {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 2px;
}
.sample-footer .backlink:hover { border-bottom-color: var(--secondary); }

/* Kill the one permitted CSS keyframe under reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}