/* Front page: stacked XL colour tabs. Each tab ends one step further
   right than the one above, leaving a dark strip on the right edge. */

.stack {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--theme-header-height, 5rem));
  font-family: var(--theme-font-heading);
}

.stack__hero {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: var(--theme-space-md) var(--theme-space-sm);
  margin-inline-end: calc(var(--theme-tab-step) * 4);
  background: var(--theme-color-primary);
  color: var(--theme-color-text);
}

.stack__hero-title {
  max-inline-size: 16ch;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;
}

.stack__hero-text {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: 0.8;
}

.tab {
  --theme-tab-bg: var(--theme-color-surface);
  --theme-tab-fg: var(--theme-color-dark, var(--brand-color-dark));

  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: var(--theme-tab-bg);
  color: var(--theme-tab-fg);
  transition: flex-grow 0.5s var(--theme-ease-signature);
}

.tab:nth-of-type(2) { --i: 1; }
.tab:nth-of-type(3) { --i: 2; }
.tab:nth-of-type(4) { --i: 3; }
.tab:nth-of-type(5) { --i: 4; }

.tab {
  margin-inline-end: calc((4 - var(--i)) * var(--theme-tab-step));
}

.tab--workspace {
  --theme-tab-bg: var(--theme-color-accent);
  --theme-tab-fg: var(--brand-color-light);
}

.tab--timeline {
  --theme-tab-bg: var(--theme-color-secondary);
  --theme-tab-fg: var(--brand-color-primary);
}

.tab--heritage {
  --theme-tab-bg: var(--theme-color-tertiary);
  --theme-tab-fg: var(--brand-color-light);
}

.tab--contact {
  --theme-tab-bg: var(--brand-color-light);
  --theme-tab-fg: var(--theme-color-accent);
}

.tab[data-open] {
  flex-grow: 4;
}

.tab__heading {
  font: inherit;
}

.tab__trigger {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  inline-size: 100%;
  padding: var(--theme-space-xs) var(--theme-space-sm);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.tab__trigger:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -6px;
}

.tab__label {
  font-family: var(--theme-font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tab__title {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  text-wrap: balance;
}

.tab__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--theme-ease-signature);
}

.tab[data-open] .tab__panel {
  grid-template-rows: 1fr;
}

.tab__panel-inner {
  min-block-size: 0;
  overflow: hidden;
}

.tab__body {
  max-inline-size: 60ch;
  padding: 0 var(--theme-space-sm) var(--theme-space-md);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .tab,
  .tab__panel {
    transition: none;
  }
}

@media (width <= 640px) {
  .site-header,
  .stack__hero,
  .tab {
    margin-inline-end: calc((4 - var(--i, 0)) * 6px);
  }
}