/* Shared layout & components
   ========================================================================== */

main > section:not(.film):not(.cta) {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

.container {
  width: min(var(--width-content), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section-head--center {
  text-align: center;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-kicker);
  font-weight: var(--weight-kicker);
  line-height: 1.4;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.section-title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  color: var(--on-surface);
  text-wrap: balance;
}

.brand-thin {
  font-family: var(--font-body);
  font-weight: var(--weight-kicker);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
}

.brand-bold {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  color: var(--color-gold);
}

@media (max-width: 599px) {
  .section-title {
    margin-top: var(--space-1);
  }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-6);
  min-width: var(--space-6);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--btn-bg);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-ui);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--duration-ui) var(--ease-out),
    color var(--duration-ui) var(--ease-out),
    border-color var(--duration-ui) var(--ease-out);
}

.button:hover {
  background-color: transparent;
  color: var(--on-surface);
  border-color: var(--on-surface);
}

.button--ghost {
  background-color: transparent;
  color: var(--on-surface);
  border-color: var(--rule);
}

.button--ghost:hover {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-gold);
  color: var(--color-crust);
  font-size: var(--text-small);
  font-weight: var(--weight-ui);
  transform: translateY(-200%);
  transition: transform var(--duration-ui) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-ivory);
  outline-offset: 2px;
}

.tip {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  left: 50%;
  padding: 4px var(--space-1);
  border: 1px solid var(--color-gold-a35);
  border-radius: 4px;
  background-color: var(--color-night-a90);
  color: var(--color-ivory);
  font-size: var(--text-micro);
  font-weight: var(--weight-ui);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1001;
  transform: translate3d(-50%, 4px, 0);
  transition:
    opacity 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.tip--side {
  bottom: auto;
  top: 50%;
  left: calc(100% + var(--space-1));
  transform: translate3d(4px, -50%, 0);
}

:is(a, button, summary, [role="button"]):is(:hover, :focus-visible) > .tip:not(.tip--side) {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

:is(a, button, summary, [role="button"]):is(:hover, :focus-visible) > .tip--side {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}