/* ═══════════════════════════════════════════
   STORYTELLER PAGE — standalone CSS
   Does NOT affect home page (no shared classes)
═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --st-font:       'Calibri', 'Calibri Regular', sans-serif;
  --font:          'Calibri', 'Calibri Regular', sans-serif;
  --fs-body:       18px;
  --st-col-gap:    50px;   /* horizontal gap between columns — increase for more breathing room */
  --st-row-gap:    100px;  /* vertical gap between projects */
  --st-page-pad:   48px;   /* left/right page margin */
  --st-header-h:   60px;
  --st-footer-h:   40px;
}

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

html, body {
  width: 100%;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--st-font);
  overflow-x: hidden;
}

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

/* ═══════════════════════════════════════════
   HEADER — minimal, logo only
═══════════════════════════════════════════ */
.nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 80px;
  padding: 0 48px;
  height: 48px;
  align-items: center;
  border-bottom: 1px solid #000000;
}

.nav-brand {
  font-size: var(--fs-body);
  font-weight: 700;
  font-family: var(--font);
  color: #000000;
  white-space: nowrap;
}

.nav-brand a {
  color: inherit;
  text-decoration: none;
}

.nav-brand a:hover { text-decoration: underline; }

.nav-section {
  font-size: var(--fs-body);
  font-family: var(--font);
  color: #000000;
}

/* ═══════════════════════════════════════════
   MAIN
═══════════════════════════════════════════ */
.st-main {
  padding: 56px var(--st-page-pad) 80px;
}

/* ═══════════════════════════════════════════
   GO TO CURRENT ROLE BUTTON
═══════════════════════════════════════════ */
.st-goto-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 72px;
}

.st-goto-btn {
  font-family: var(--st-font);
  font-size: 14px;
  color: #000000;
  border: 1px solid #000000;
  padding: 10px 32px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.st-goto-btn:hover {
  background: #000000;
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════
   PROJECT ROW — full width, 3 equal columns
═══════════════════════════════════════════ */
.st-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns across full width */
  column-gap: var(--st-col-gap);
  align-items: start;
  margin-bottom: var(--st-row-gap);
}

/* ═══════════════════════════════════════════
   COLUMNS
═══════════════════════════════════════════ */
.st-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ═══════════════════════════════════════════
   IMAGE
═══════════════════════════════════════════ */
.st-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: #000000;
  overflow: hidden;
}

.st-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-img-placeholder {
  width: 100%;
  height: 100%;
  background: #000000;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  min-height: 180px;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY — 3 sizes
═══════════════════════════════════════════ */

/* Large: project number */
.st-number {
  font-family: var(--st-font);
  font-size: 72px;
  font-weight: 700;
  color: #000000;
  line-height: 1;
  letter-spacing: -0.02em;
}
.st-number--right { text-align: right; }

/* Medium: company name */
.st-company {
  font-family: var(--st-font);
  font-size: 46px;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
  margin-top: -4px;
}
.st-company--right { text-align: right; }

/* Small: skills + description label */
.st-skills {
  font-family: var(--st-font);
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 3px;
}
.st-skills--right { text-align: right; }

.st-skills-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ═══════════════════════════════════════════
   DESCRIPTION BLOCK
═══════════════════════════════════════════ */
.st-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-desc-label {
  font-family: var(--st-font);
  font-size: 13px;
  color: #000000;
}

.st-desc-text {
  font-family: var(--st-font);
  font-size: 18px;
  color: #000000;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.st-footer {
  height: var(--st-footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--st-page-pad);
  font-size: 14px;
  color: rgba(0,0,0,0.3);
  border-top: 0.5px solid rgba(0,0,0,0.08);
  letter-spacing: 0.06em;
}

/* ─── BURGER MENU ─────────────────────────────────────── */
.nav-menu {
  position:    relative;
  justify-self: end;
}

.menu-btn {
  background:     none;
  border:         none;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        4px;
}

.menu-btn span {
  display:    block;
  width:      22px;
  height:     1.5px;
  background: #000000;
  transition: opacity 0.2s;
}

.menu-dropdown {
  display:    none;
  position:   absolute;
  top:        calc(100% + 16px);
  right:      0;
  background: #ffffff;
  border:     none;
  min-width:  260px;
  z-index:    500;
  flex-direction: column;
}

.menu-dropdown.open { display: flex; }

.menu-dropdown a {
  padding:       12px 20px;
  font-size:     18px;
  font-family:   'Calibri', sans-serif;
  color:         #000000;
  border-bottom: 1px solid #e0e0e0;
  transition:    background 0.15s;
}

.menu-dropdown a:last-child { border-bottom: none; }
.menu-dropdown a:hover      { background: #f5f5f5; }