/* Design Tokens */
:root {
  /* Colors */
  --bg: #fff;
  --grid: #eee;
  --text: #111;
  --muted: #666;
  --accent: #000;

  /* Layout */
  --maxw: 1200px;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Grid gaps */
  --col-gap: var(--space-5);
  --row-gap: var(--space-3);
}

/* Global Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
}

/* Page Grid & Background */
.page {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--maxw)); /* remove right sidebar column */
  grid-template-rows: 1fr;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/32px 100%;
  align-items: center; /* vertical centering of the inner content row */
}

/* Content Grid */
.content {
  grid-column: 1 / -1; /* span all columns */
  padding: var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-2); /* reduce middle gap between columns */
  row-gap: var(--space-1); /* minimize vertical spacing between items */
  align-content: center; /* vertically center the content block */
  justify-items: start; /* align items to the same left edge */
  align-items: center; /* vertical centering within content area */
  justify-self: center; /* horizontal centering within page grid */
  min-height: 0;
}

/* Typography Blocks */
.greeting {
  grid-column: 3 / span 7; /* left text column, wider to pull image closer */
  font-weight: 400;
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 0; /* bring greeting closer to name */
  /* auto row: stacks in left column */
  text-align: left;
  justify-self: start;
  position: relative;
  height: 1.5em; /* fix height to avoid layout shift during animation */
  overflow: hidden; /* hide non-active greetings */
}

/* Animated greetings: fade and slide in sequence */
.greet-item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.greet-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* Name — largest text element */
.name {
  grid-column: 3 / span 7; /* left text column, wider to balance with portrait */
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(40px, 9vw, 104px);
  margin: 0; /* remove all margins around name */
  /* auto row: stacks under greeting */
  text-align: left;
  justify-self: start;
}

/* Bio */
.bio {
  grid-column: 3 / span 7; /* left text column, match headline width */
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--muted);
  max-width: 70ch; /* improve readability */
  /* auto row: stacks under name */
  text-align: left;
  justify-self: start;
}

/* Media removed: hero image */

/* Removed: CTAs, Footnotes, Sidebar */

/* Footer spacing (optional) */
.footer-space { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr; /* single row for centering */
    align-items: center; /* center content vertically on mobile */
    height: 100vh; /* ensure full viewport height for centering */
  }
  .content {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, 1fr);
    padding: var(--space-5) var(--space-3);
    justify-items: start;
    align-items: center; /* center items within content area */
    align-content: center; /* ensure block is vertically centered */
    justify-self: center; /* center horizontally within page */
  }
  .greeting { grid-column: 1 / -1; }
  .name { grid-column: 1 / -1; }
  .bio { grid-column: 1 / -1; max-width: none; }
  /* hero removed */
  /* CTAs and footnotes removed */

  /* Sidebar removed in mobile as well */
}

/* Even smaller devices */
@media (max-width: 420px) {
  .content { grid-template-columns: repeat(4, 1fr); }
  /* CTAs removed */
}