/* EDIT ONLY THE VALUES IN THIS FILE TO CHANGE THE VISUAL DESIGN. */
:root {
  --white: #ffffff;
  --black: #111111;
  --active: #333333;
  --hover: #777777;
  --inactive: #b8b8b8;
  --placeholder: #f1f1f1;

  --page-pad-desktop: clamp(48px, 4vw, 64px);
  --page-pad-tablet: 32px;
  --page-pad-mobile: 20px;

  --hero-height-desktop: 50svh;
  --hero-height-mobile: 60svh;
  --hero-min-height-desktop: 400px;
  --hero-min-height-mobile: 430px;
  --hero-bottom-desktop: 28px;
  --hero-bottom-mobile: 20px;
  --hero-content-gap: 10px;

  /* HERO ARTWORK + NAME — edit these values for each breakpoint */
  --hero-artwork-size-desktop: cover;
  --hero-artwork-position-desktop: center 48%;
  --hero-artwork-size-tablet: cover;
  --hero-artwork-position-tablet: center 46%;
  --hero-artwork-size-mobile: cover;
  --hero-artwork-position-mobile: 69% center;

  --hero-name-size-desktop: 14px;
  --hero-name-size-tablet: 14px;
  --hero-name-size-mobile: 18px;
  --hero-name-x-desktop: 52%;
  --hero-name-y-desktop: 34%;
  --hero-name-x-tablet: 52%;
  --hero-name-y-tablet: 29%;
  --hero-name-x-mobile: 52%;
  --hero-name-y-mobile: 28%;

  --nav-size-desktop: 14px;
  --nav-size-mobile: 13px;
  --nav-line-height: 1.3;
  --nav-item-gap: 3px;
  --gap-art-to-available-desktop: 30px;
  --gap-art-to-available-mobile: 24px;
  --gap-booking-to-status-desktop: 30px;
  --gap-booking-to-status-mobile: 24px;
  --available-submenu-horizontal-gap: 18px;
  --available-submenu-item-gap: 14px;

  --status-size-desktop: 11px;
  --status-size-mobile: 10px;
  --contact-size-desktop: 14px;
  --contact-size-mobile: 13px;
  --contact-item-gap: 18px;

  --archive-width: 640px;
  --archive-gap-desktop: 8px;
  --archive-gap-mobile: 6px;
  --projects-samples-width: 760px;
  --projects-gap-desktop: 12px;
  --projects-gap-mobile: 8px;
  --samples-gap-desktop: 8px;
  --samples-gap-mobile: 6px;

  --art-width: 1180px;
  --artwork-width-desktop: 76%;
  --artwork-spacing-desktop: 136px;
  --artwork-spacing-mobile: 76px;
  --zine-width-desktop: 52%;
  --zine-width-mobile: 92%;

  --intro-width: 570px;
  --intro-size: clamp(16px, 1.25vw, 18px);
  --intro-line-height: 1.55;
  --intro-to-grid-gap-desktop: 28px;
  --intro-to-grid-gap-mobile: 24px;

  --reveal-duration: 300ms;
  --color-duration: 200ms;
  --content-fade-duration: 250ms;
}