/* =========================================================
   SELF-HOSTED FONTS
   Each @font-face is a "recipe": give the font a name, then
   tell the browser which file to load for it. font-weight
   here maps a specific file to a specific weight number, so
   later when you write font-weight: 700, the browser knows
   to reach for the Bold file specifically, not fake-bold the
   Regular one. font-display: swap tells the browser to show
   text in a fallback font immediately rather than staying
   invisible while the real font downloads.
   ========================================================= */
@font-face {
  font-family: 'Karl';
  src: url('fonts/Karl-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicDemi.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura Cyrillic';
  src: url('fonts/FuturaCyrillicBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   DESIGN TOKENS
   These are CSS "variables", define a value once here,
   reuse it everywhere with var(--name). Change a color or
   font in ONE place and it updates across the whole site.
   ========================================================= */
:root {
  --bg: #f3f3f3;
  --surface: #e6e6e6;
  --text: #1e1e1e;
  --text-muted: #6b6b6b;
  --accent: #4c5fd5;
  --line: rgba(26, 26, 26, 0.12);
  --line-strong: rgba(26, 26, 26, 0.18);

  --font-display: 'Karl', sans-serif;
  --font-body: 'Futura Cyrillic', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --gutter: 4px;
  --edge: 6vw; /* left/right breathing room, scales with screen width */
}

/* =========================================================
   RESET
   Browsers apply their own default spacing/sizing to
   elements. This wipes that out so we start from a
   predictable blank slate instead of fighting defaults.
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--edge);
}

.logo {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
}

.main-nav a {
  margin-left: 32px;
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--text); }

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  padding: 8vw var(--edge) 6vw;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.intro h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  max-width: 20ch;
}

/* =========================================================
   CASE STUDIES
   Two-column layout: text list on the left, one shared
   hero image on the right. CSS Grid lays out the two
   columns; hovering a .case-item (handled in script.js)
   swaps which image/text is "active".
   ========================================================= */
.case-studies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  padding: 4vw var(--edge) 8vw;
  align-items: start;
}

.case-list {
  display: flex;
  flex-direction: column;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.case-item {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: opacity 0.3s ease;
  opacity: 0.45;
}

.case-item:last-child { border-bottom: 1px solid var(--line); }

.case-item.is-active { opacity: 1; }

.case-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.case-item.is-active .case-number { color: var(--accent); }

.case-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}

.case-problem {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 16px;
}

.case-tags {
  display: flex;
  gap: 10px;
}
.case-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
}

.case-visual {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface); /* shows as a visible placeholder box until a real image loads */
}

.case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  transition: transform 0.6s ease;
  color: var(--text-muted); /* styles the alt text if the image fails to load */
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.case-visual:hover img { transform: scale(1.03); }

@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* =========================================================
   FEED / MASONRY
   We use CSS multi-column layout to get the Pinterest-style
   staggered effect without writing our own placement logic.
   The browser flows items down each column and reflows the
   column count automatically as the window resizes, that's
   the "responsive" part, handled with zero JavaScript.
   ========================================================= */
.feed-section {
  padding: 2vw var(--edge) 8vw;
}

.feed-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--gutter);
}

.feed-masonry {
  column-count: 2;
  column-gap: var(--gutter);
}

@media (min-width: 640px)  { .feed-masonry { column-count: 3; } }
@media (min-width: 1000px) { .feed-masonry { column-count: 4; } }
@media (min-width: 1500px) { .feed-masonry { column-count: 5; } }

.feed-item {
  break-inside: avoid; /* stops an image being sliced across two columns */
  margin-bottom: var(--gutter);
  background: var(--surface); /* shows as a visible placeholder box until a real image loads */
  min-height: 220px;
}

.feed-item img {
  width: 100%;      /* scales to fill the column width... */
  height: auto;     /* ...while height follows automatically, */
  display: block;   /* so nothing gets cropped, only resized. */
  border-radius: 1px;
  object-fit: cover;
  color: var(--text-muted); /* styles the alt text if the image fails to load */
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

/* =========================================================
   ABOUT / FOOTER
   ========================================================= */
.about-strip {
  padding: 6vw var(--edge);
  border-top: 1px solid var(--line);
}
.about-strip p {
  font-size: clamp(18px, 2.4vw, 26px);
  max-width: 32ch;
  color: var(--text-muted);
}

.site-footer {
  padding: 8vw var(--edge) 6vw;
  text-align: left;
}
.footer-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-email {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 72px);
  transition: color 0.2s ease;
}
.footer-email:hover { color: var(--accent); }

/* =========================================================
   RESPONSIVE: stack the case study columns on small screens
   ========================================================= */
@media (max-width: 760px) {
  .case-studies { grid-template-columns: 1fr; }
  .case-visual { position: static; aspect-ratio: 4 / 3; order: -1; }
}