/* ==========================================================================
   global.css — reset, design tokens, base typography, shared primitives
   AK Aesthetic NYC
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Palette (from Figma styles) --- */
  --color-ivory: #f7f1e8;
  --color-beige: #e2d8c9;
  --color-beige-deep: #cab6a3;
  --color-sand: #f0eee7;
  --color-dark: #211f12;
  --color-dark-soft: #2b261a;
  --color-dark-warm: #29261d;
  --color-dark-ink: #23231e;
  --color-black: #0d0d0d;
  --color-footer: #131310;
  --color-brown: #554827;
  --color-cerise: #ec3065;
  --color-wine: #9e163c;
  --color-olive: #7a7c5b;
  --color-mute: #a39585;

  /* --- Alpha tokens --- */
  --color-line: rgba(84, 85, 78, 0.52);
  --color-line-soft: rgba(84, 85, 78, 0.42);
  --color-border-gold: rgba(216, 199, 163, 0.5);
  --color-text-on-dark: rgba(226, 216, 201, 0.6);
  --color-text-on-dark-strong: rgba(226, 216, 201, 0.76);
  --color-field-bg: rgba(255, 254, 254, 0.1);
  --color-field-text: rgba(232, 218, 218, 0.55);
  --color-glass: rgba(14, 14, 14, 0.39);

  /* --- Typography --- */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Italianno", "Snell Roundhand", cursive;
  --font-nav: "Red Hat Display", var(--font-body);

  /* Плавна шкала — кожне значення точно дорівнює макетному на ширині 1440px */
  --fs-h1: clamp(2.75rem, 5.5556vw, 5rem);        /*  44 →  80px */
  --fs-h2: clamp(2.125rem, 4.3056vw, 3.875rem);   /*  34 →  62px */
  --fs-h3: clamp(1.75rem, 2.9167vw, 2.625rem);    /*  28 →  42px */
  --fs-h4: clamp(1.5rem, 2.2222vw, 2rem);         /*  24 →  32px */
  --fs-h5: clamp(1.375rem, 1.9444vw, 1.75rem);    /*  22 →  28px */
  --fs-script: clamp(2.375rem, 3.4722vw, 3.125rem); /* 38 → 50px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */

  --lh-h1: 0.9;
  --lh-h2: 1;
  --lh-h3: 1.2;
  --lh-body: 1.3;
  --ls-body: -0.025em;

  /* --- Spacing --- */
  --space-3xs: 0.5rem;   /*  8px */
  --space-2xs: 0.75rem;  /* 12px */
  --space-xs: 1rem;      /* 16px */
  --space-sm: 1.25rem;   /* 20px */
  --space-md: 2rem;      /* 32px */
  --space-lg: 3.25rem;   /* 52px */
  --space-xl: clamp(3.5rem, 8.3333vw, 7.5rem); /* 56 → 120px */

  /* --- Layout --- */
  --container-max: 90rem;  /* 1440px — ширина макета */
  --gutter: clamp(1.25rem, 3.1944vw, 2.875rem); /* 20 → 46px */
  --slider-gap: 1.25rem; /* крок слайдера портфоліо: 20px у макеті 1440 */
  --header-height: 5.625rem; /* 90px */

  /* --- Misc --- */
  --radius-none: 0;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* Ширше за макет сторінка масштабується пропорційно: 1440px = 90rem, тож
   1rem прив'язується до ширини вьюпорта. Усі розміри задані в rem/%, тому
   композиція лишається такою самою, як на 1440 — фонові знімки більше
   не обрізаються по вертикалі на широких екранах. */
@media (min-width: 90rem) {
  html {
    font-size: calc(100vw / 90);
  }
}

/* Вище 2560px масштаб фіксуємо, щоб макет не роздувався нескінченно */
@media (min-width: 160rem) {
  html {
    font-size: 28.444px;
  }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-dark);
  background-color: var(--color-beige);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  /* Figma переносить рядки жадібно, тож balance давав інші розриви, ніж макет */
  text-wrap: wrap;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--color-cerise);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */
/* letter-spacing з body обчислюється в −0.4px і успадковується всіма
   нащадками. У макеті стилі Instrument Serif (Desktop/H1…H5) трекінгу
   не мають, тому заголовки скидають його явно. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5 {
  letter-spacing: normal;
}

.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-display);
  font-weight: 400;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  text-transform: uppercase;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-transform: uppercase;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.h5 {
  font-size: var(--fs-h5);
  line-height: 1.43;
}

/* Рукописний акцент (Italianno).
   line-height 0.6 — значення з макета (style_VORZMA): рядок навмисно
   щільний, гліфи виступають за межі бокса, як у Figma. */
.script {
  display: block;
  width: fit-content; /* щоб поворот був навколо центру самого напису */
  font-family: var(--font-script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 0.6;
  letter-spacing: -0.0128em;
  color: var(--color-cerise);
  rotate: -1.99deg; /* Rotation 1.99° з макета (у Figma + = проти год. стрілки) */
}

.text-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-xl);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

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

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem; /* 52px — висота кнопки з макета */
  padding: 0.75rem 2rem; /* 32px по горизонталі, як у макеті */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.btn--primary {
  min-width: 16.25rem; /* 260px */
  color: var(--color-dark-soft);
  background-color: var(--color-ivory);
}

.btn--primary:hover {
  color: var(--color-ivory);
  background-color: var(--color-dark-soft);
}

.btn--dark {
  color: var(--color-ivory);
  background-color: var(--color-dark);
}

.btn--dark:hover {
  color: var(--color-dark);
  background-color: var(--color-beige-deep);
}

.btn--outline {
  min-width: 16.25rem;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.btn--outline:hover {
  color: var(--color-ivory);
  background-color: var(--color-dark);
}

/* Кнопка CONTACT у шапці: у макеті це style_DBQLB4 — Red Hat Display 14px,
   letter-spacing 8.57%, а не Inter 16px як у решти кнопок. */
.btn--ghost {
  min-height: 3.125rem; /* 50px */
  padding: 0.625rem 2.625rem; /* 42px по горизонталі, як у макеті */
  font-family: var(--font-nav);
  font-size: var(--fs-small); /* 14px */
  font-weight: 500;
  line-height: 1.3714;
  letter-spacing: 0.0857em;
  color: #fff;
  border: 1.5px solid var(--color-border-gold);
}

.btn--ghost:hover {
  color: var(--color-dark);
  background-color: var(--color-border-gold);
}

.btn--block {
  width: 100%;
}

/* Текстовая ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-ivory);
}

.link-arrow svg,
.link-arrow img {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--transition);
}

.link-arrow:hover svg,
.link-arrow:hover img {
  transform: translateX(0.25rem);
}

/* Подчёркнутая ссылка «view more» */
.link-underline {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  padding-bottom: 0.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark);
  border-bottom: 1px solid currentcolor;
  transition: opacity var(--transition);
}

.link-underline:hover {
  opacity: 0.65;
}