/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --paper:       #1E1E20;
  --white:       #FFFFFF;
  --offwhite:    #BFBFBF;
  --font:        'Calibri', 'Calibri Regular', sans-serif;

  /* Font sizes */
  --fs-giant:    200px;   /* APF, PF. */
  --fs-cta:      45px;    /* Portfolio, CV */
  --fs-body:     18px;    /* all other text */

  /* Layout */
  --gap-col:     80px;    /* gap A — between columns */
  --gap-edge:    48px;    /* gap B — left and right page margin */
  --line-h:      1px;     /* horizontal lines thickness */
  --nav-h:       48px;    /* nav row height */

  --fs-intro-text: 30px;   /* Hey there block */
  --fs-intro-nav:  22px;   /* page list */
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-body);
}

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

/* ═══════════════════════════════════════════
   NAV ROW
═══════════════════════════════════════════ */
.nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--gap-col);
  padding: 0 var(--gap-edge);
  height: var(--nav-h);
  align-items: center;
}

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

.nav-section {
  font-size: var(--fs-body);
  color: var(--white);
  flex: 1;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.icon-link {
  width: 22px;
  height: 22px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.icon-link svg { width: 20px; height: 20px; }
.icon-link:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   HORIZONTAL LINES
═══════════════════════════════════════════ */
.h-line {
  width: 100%;
  height: var(--line-h);
  background: var(--white);
}

.h-line--col {
  width: 100%;
  height: var(--line-h);
  background: var(--white);
  margin: 12px 0;
}

/* ═══════════════════════════════════════════
   MAIN 3-COLUMN GRID
═══════════════════════════════════════════ */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--gap-col);
  padding: 0 var(--gap-edge);
  height: calc(100vh - var(--nav-h) - var(--line-h));
  overflow: visible;
  position: relative;
}

/* Continuous horizontal line 2 — spans all 3 columns */
.main-grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--white);
  top: calc(var(--fs-giant) * 0.9 + 16px + 72px);
  pointer-events: none;
}

.col {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}

.col-top {
  padding-top: 20px;
}

.col-bottom {
  margin-top: auto;
  padding-bottom: 24px;
}

.col-1 .col-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  max-height: fit-content;
  align-self: center;
  padding-top: 75px;
  overflow: visible;
}

/* ═══════════════════════════════════════════
   GIANT TEXT — APF / PF.
═══════════════════════════════════════════ */
.giant-text {
  font-size: var(--fs-giant);
  font-weight: 700;
  color: var(--white);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════
   COL 1
═══════════════════════════════════════════ */
.atelier-link {
  font-size: var(--fs-body);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.01em; 
  transition: opacity 0.2s;
  margin-top: 2px;
  display: inline-block;
}
.atelier-link:hover { opacity: 0.7; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-body);
  color: var(--offwhite);
  margin-top: auto;
}

.footer-link {
  color: var(--offwhite);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ═══════════════════════════════════════════
   COL 2
═══════════════════════════════════════════ */
.architect-title {
  font-size: var(--fs-body);
  color: var(--white);
  font-weight: 700;
}

.intro-text {
  font-size: var(--fs-intro-text);
  color: var(--white);
  line-height: 1.7;
  flex: 1;
  padding-top: 0px;
}

.cta-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cta-link {
  font-size: var(--fs-cta);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  transition: opacity 0.2s;
}
.cta-link:hover { opacity: 0.7; }

/* ═══════════════════════════════════════════
   COL 3
═══════════════════════════════════════════ */
.page-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-nav-item {
  font-size: var(--fs-body);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 8px 0;
}
.page-nav-item:hover { opacity: 1; }

.nav-num {
  color: var(--offwhite);
  font-size: var(--fs-body);
}

.roles {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-line {
  font-size: var(--fs-body);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.role-sub {
  font-size: var(--fs-body);
  color: var(--offwhite);
}

/* ── Timelapse ── */
.timelapse-wrap {
  flex: 1;
  margin-top: 0px;
  overflow: hidden;
}

.timelapse-placeholder,
.timelapse-video {
  width: 100%;
  height: 100%;
  background: #252527;
  object-fit: cover;
  display: block;
}

/* ─── INTRO NAV LIST ──────────────────────────────────── */
.intro-nav {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     24px;
}

.intro-nav-item {
  position:    relative;
  white-space: nowrap;
  display:     flex;
  align-items: baseline;
  font-size: var(--fs-intro-nav);
}

.nav-phrase {
  position:   absolute;
  left:       60%;
  top:        0;
  color:      var(--offwhite);
  font-style: italic;
  white-space: nowrap;
  overflow:   hidden;
  max-width:  0;
  z-index:    999;
  pointer-events: none;
}

.intro-nav-item:hover .nav-phrase {
  animation: typeIn 0.6s steps(30, end) forwards;
}

@keyframes typeIn {
  from { max-width: 0; }
  to   { max-width: 1800px; }
}

.intro-nav-item:hover::after { opacity: 1; }

.nav-cursor {
  display:     inline-block;
  margin-right: 0;
  margin-left: 4px;
  animation:   blink 1s step-end infinite;
  color:       var(--offwhite);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}