/* ============================================================
   FONT: Alt Fat (commercial)
   Purchase: https://www.myfonts.com/collections/alt-fat-font-andreas-leonidou
   Place the purchased font files in /fonts/ and update the src below.
   ============================================================ */

@font-face {
  font-family: 'Druk Wide';
  src: url('../fonts/DrukWideBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk is loaded via <link> in the HTML head */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --color-bg:      #FFFFFF;
  --color-blue:    #003494;
  --color-red:     #FF2A00;
  --color-header:  #003494;
  --color-text:    #1A1A1A;

  --font-header:   'Druk Wide', 'Impact', 'Arial Black', sans-serif;
  --font-body:     'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Shared width: portrait + bio column are identical */
  --content-width: min(700px, 90vw);

  --gap-section: clamp(3rem, 6vw, 5rem);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html { font-size: 16px; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HEADER
   Mobile : 21vw ≈ fills the screen width for 5-letter words
   Desktop: 13vw ≈ natural white space appears on both sides
   ============================================================ */

#site-header {
  width: 100%;
  user-select: none;
}

.site-title {
  display: block;
  text-align: center;
  font-family: var(--font-header);
  font-weight: 700;
  font-style: normal;
  /* font-size is set by js/fit-header.js after fonts load */
  font-size: 21vw;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--color-header);
  letter-spacing: 0;
}

.site-title span {
  display: block;
  white-space: nowrap;
}

/* ============================================================
   MAIN CONTENT COLUMN
   Photo, Bio and Projects share the same centred column
   ============================================================ */

.page-column {
  width: var(--content-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-section);
  padding: var(--gap-section) 0;
}

/* ============================================================
   PORTRAIT  —  strictly square, width = content column width
   ============================================================ */

.photo-block {
  width: 100%;
}

.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ============================================================
   SECTIONS  (Bio, Projects)
   ============================================================ */

#bio,
#projects {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* ============================================================
   SECTION HEADINGS  (BIO, PROJECTS)
   Bold · uppercase · centred · ~2× body text
   ============================================================ */

.section-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1;
}

.section-heading--red  { color: var(--color-red); }
.section-heading--blue { color: var(--color-blue); }

/* ============================================================
   BIO TEXT
   ============================================================ */

.bio-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.bio-text {
  font-size: 1rem;
  line-height: 1.7;
}

/* "Katya Kosmacheva" — red, semibold */
.highlight-name {
  color: var(--color-red);
  font-weight: 600;
  font-style: normal;
}

/* ============================================================
   PROJECTS PLACEHOLDER
   ============================================================ */

.projects-placeholder {
  font-size: 1rem;
  text-align: center;
  color: var(--color-text);
}

/* ============================================================
   FOOTER / CONTACTS
   Constrained to the same column width as the content above
   ============================================================ */

#contacts {
  width: var(--content-width);
  padding: clamp(2rem, 3.5vw, 3rem) 0;
  border-top: 1px solid #e8e8e8;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.contact-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  transition: color 0.2s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--color-blue);
  outline: none;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .contact-list {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .contact-link {
    font-size: 0.8rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}