/* ============================================================
   RUKAST — Foundations
   1. Design tokens
   2. Reset
   3. Typographic system
   4. Layout primitives
   Load order: fonts → base → components → pages → animations → responsive
   ============================================================ */

/* ---------- 1. Design tokens -------------------------------------------- */
:root{
  /* — Colour: brand — */
  --red:           #EF0014;
  --red-deep:      #A8000E;
  --red-bright:    #FF2036;
  --red-soft:      #C8102E;   /* eyebrows and hairlines — calmer than the brand red */
  --orange:        #FF6400;
  --orange-deep:   #DE4A04;
  --orange-light:  #FFB94D;
  --navy:          #10229B;

  /* — Colour: neutrals — */
  --black:    #0B0C0E;
  --black-2:  #15171A;
  --graphite: #1B1E23;
  --white:    #FFFFFF;
  --cream:    #F5F2EC;
  --cream-2:  #EFEBE3;
  --muted:    #5A606B;
  --muted-2:  #7C828C;

  /* Legacy aliases kept so older selectors never break */
  --rk-red:var(--red); --rk-orange:var(--orange); --rk-navy:var(--navy);
  --rk-red-deep:var(--red-deep); --rk-orange-deep:var(--orange-deep);
  --ink:var(--black); --ink-soft:var(--black-2);
  --paper:var(--white); --bone:var(--cream); --bone-2:var(--cream-2);

  /* — Lines & surfaces — */
  --line:        rgba(11,12,14,.10);
  --line-strong: rgba(11,12,14,.18);
  --line-dark:   rgba(255,255,255,.10);
  --surface:     #FFFFFF;
  --surface-alt: #FAF8F4;

  /* — Radii — */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* — Elevation: restrained, never glowing — */
  --sh-1: 0 1px 2px rgba(11,12,14,.04), 0 8px 24px rgba(11,12,14,.05);
  --sh-2: 0 2px 4px rgba(11,12,14,.04), 0 18px 48px rgba(11,12,14,.08);
  --sh-3: 0 30px 80px rgba(11,12,14,.14);

  /* — Spacing & rhythm — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --gap:      clamp(16px, 1.6vw, 24px);
  --gutter:   clamp(20px, 5vw, 64px);
  --block:    clamp(64px, 8vw, 128px);
  --block-lg: clamp(88px, 11vw, 168px);

  /* — Container widths — */
  --maxw:        1240px;
  --maxw-narrow: 880px;
  --maxw-wide:   1440px;
  --nav-h:       72px;
  --nav-h-stuck: 62px;
  --rail-h:      58px;

  /* — Type: exactly two families — */
  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* — Type scale: display → microcopy — */
  --fs-display: clamp(2.25rem, 1.35rem + 3.5vw, 4.25rem);
  --fs-hero:    clamp(2.25rem, 1.72rem + 2.3vw, 3.625rem);
  --fs-h1:      clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.13rem + 0.55vw, 1.625rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);
  --fs-caption: 0.8125rem;
  --fs-micro:   0.75rem;
  --fs-eyebrow: 0.6875rem;
  --fs-spec:    clamp(1.3125rem, 1.08rem + .95vw, 1.875rem);  /* figures in the spec grid */
  --fs-label:   0.625rem;                                     /* uppercase technical labels */

  /* Tracking */
  --ls-tight:  -.045em;
  --ls-label:   .18em;
  --ls-caption: .34em;

  /* — Line heights — */
  --lh-display: .95;
  --lh-head:    1.02;
  --lh-lead:    1.55;
  --lh-body:    1.65;

  /* — Motion: one easing family, one duration table — */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-soft:  cubic-bezier(.33,1,.68,1);
  --e-inout: cubic-bezier(.65,0,.35,1);
  --e-pop:   cubic-bezier(.22,1.18,.36,1);
  --t-fast:  .22s;   /* hover, focus, colour                */
  --t-med:   .42s;   /* buttons, cards, nav                 */
  --t-slow:  .8s;    /* section reveal                      */
  --t-exit:  .25s;   /* page transition — content settles   */
  --t-leave: .38s;   /* page transition — curtain           */
  --t-enter: .6s;    /* page transition — new page rises    */
  --t-shot:  1.15s;  /* product reveal                      */

  /* — Texture: very subtle film grain, used at low opacity — */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--red);color:#fff}

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:4px;
}
.is-dark :focus-visible,
.scene :focus-visible,
.section--ink :focus-visible,
.site-footer :focus-visible{outline-color:#fff}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:400;
  padding:12px 18px;background:var(--black);color:#fff;border-radius:var(--r-sm);
  font-size:var(--fs-caption);font-weight:700;transition:top var(--t-fast) var(--e-out);
}
.skip-link:focus{top:12px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- 3. Typographic system ---------------------------------------- */
/* Russian copy: no hyphenation, balanced headlines, pretty body wrapping.   */
.display,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:var(--lh-head);
  text-wrap:balance;
  hyphens:none;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.08}
h4{font-size:var(--fs-h4)}

.t-display{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--fs-display);line-height:var(--lh-display);
  letter-spacing:-.055em;text-wrap:balance;hyphens:none;
}
.t-hero{font-size:var(--fs-hero);line-height:.96;letter-spacing:-.05em}
.t-lead{
  font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--muted);
  max-width:56ch;text-wrap:pretty;
}
.is-dark .t-lead,.scene .t-lead{color:rgba(255,255,255,.74)}

.eyebrow{
  display:inline-block;
  font-family:var(--font-text);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.is-dark .eyebrow,.scene .eyebrow,.pdp-hero .eyebrow,
.phero--ink .eyebrow,.phero--red .eyebrow{color:rgba(255,255,255,.66)}
.eyebrow--light{color:rgba(255,255,255,.6)!important}

.eyebrow--chip{
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:rgba(11,12,14,.03);
  letter-spacing:.2em;
  color:var(--muted);
}
.scene .eyebrow--chip,
.pdp-hero .eyebrow--chip,
.phero--ink .eyebrow--chip,
.phero--red .eyebrow--chip{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.88);
  backdrop-filter:blur(6px);
}

.caption{font-size:var(--fs-caption);line-height:1.5;color:var(--muted-2)}
.micro{
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--muted-2);
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Section headers — one rhythm on every page */
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{margin-bottom:18px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--wide{max-width:76ch}

/* Spacing utilities — deliberately few */
.mt-1{margin-top:var(--sp-4)}
.mt-2{margin-top:var(--sp-5)}
.mt-3{margin-top:var(--sp-6)}
.mt-4{margin-top:var(--sp-7)}

/* ---------- 4. Layout primitives ----------------------------------------- */
.wrap{width:min(var(--maxw),100% - var(--gutter)*2);margin-inline:auto}
.wrap--narrow{width:min(var(--maxw-narrow),100% - var(--gutter)*2);margin-inline:auto}
.wrap--wide{width:min(var(--maxw-wide),100% - var(--gutter)*2);margin-inline:auto}

.section{padding-block:var(--block);position:relative}
.section--lg{padding-block:var(--block-lg)}
.section--tight{padding-block:clamp(44px,5vw,80px)}
.section--bone,.section--cream{background:var(--cream)}
.section--paper{background:var(--white)}
.section--ink{background:var(--black);color:#fff}
.section--ink .t-lead{color:rgba(255,255,255,.7)}
.section--ink .eyebrow{color:rgba(255,255,255,.6)}
.section--ink .caption{color:rgba(255,255,255,.55)}

.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section--ink .rule{background:var(--line-dark)}