/* Fryk Works — design tokens & base (light marketing register) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:72px;
  overflow-x:clip;
}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

:root{
  --font-display:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --bg:         #f7f7f5;
  --bg-dark:    #0d0d0d;
  --ink:        #111111;
  /* Ink on --bg (#f7f7f5). Suffix ≈ alpha; tuned for WCAG 2.1 AA — see fryk-design-system.mdc */
  --ink-60:     rgba(17,17,17,.60);   /* secondary body · 4.83:1 */
  --ink-45:     rgba(17,17,17,.59);   /* subtle labels · 4.69:1 */
  --ink-30:     rgba(17,17,17,.48);   /* borders / UI chrome · 3.26:1 */
  --ink-18:     rgba(17,17,17,.46);   /* decorative large type only (≥24px) · 3.10:1 */
  --ink-on-media: rgba(17,17,17,.62); /* captions on #e0e0dc placeholders · 4.76:1 */
  --ink-border: var(--ink-30);
  --white:      #ffffff;
  /* White on --bg-dark (#0d0d0d) */
  --white-55:   rgba(255,255,255,.55); /* secondary body · 6.25:1 */
  --white-38:   rgba(255,255,255,.45); /* subtle labels · 4.53:1 */
  --white-ui:   rgba(255,255,255,.35); /* borders, dot tracks, separators · 3.04:1 */
  --white-nav:  rgba(255,255,255,.62); /* nav links on hero · 7.70:1 */
  --white-on-media: rgba(255,255,255,.50); /* tags on dark placeholder panels · 4.93:1 */
  --white-10:   rgba(255,255,255,.10);
  --white-border: var(--white-ui);
  --border:     rgba(0,0,0,.09);
  /* Marks & interactive chrome */
  --logo-opacity: .59;
  --wheel-muted:  #7a7a7a;
  --phase-dim:    .65;
  --gutter:     52px;
  --max:        1300px;
  --nav-h:      65px;
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:cubic-bezier(0.16, 1, 0.3, 1);
  /* motion tokens */
  --motion-y-enter:  108%;
  --motion-y-block:  20px;
  --motion-lift:     -3px;
  --motion-dur-headline: 900ms;
  --motion-dur-text:     650ms;
  --motion-dur-block:    480ms;
  --motion-dur-media:    900ms;
  --motion-dur-hover:    420ms;
  --motion-dur-menu:     220ms;
  --motion-dur-press:    160ms;
  --motion-stagger-line: 75ms;
  /* hero gallery */
  --hero-ease:           cubic-bezier(0.76, 0, 0.24, 1);
  --hero-transition-dur: 1100ms;
  --hero-autoplay-dur:   3500ms;
  --hero-fade-dur:       250ms;
  --focus-ring:   var(--ink);
  --focus-offset: 3px;
}

/* ── ACCESSIBILITY ── */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:300;
  padding:10px 16px;
  background:var(--ink);
  color:var(--white);
  font-size:13px;
  text-decoration:none;
  border-radius:2px;
  transition:top 160ms var(--ease-out);
}
.skip-link:focus{
  top:16px;
  outline:none;
}
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:var(--focus-offset);
}
.nav.nav-over-hero :focus-visible,
.hero :focus-visible{
  --focus-ring:var(--white);
}