/* Hallmark · shape: Letter · genre: editorial · theme: Manifesto · job: visit
 * hero: Stage two-column · fonts: Urbanist (client) · signature: gold mark + manifesto right
 * accent: brand gold · paper: Exacto olive #3d4028 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: P; client manifesto fills the argument */
/* Hallmark · waive 38iii · one gold status word in the hero head · "costruzione" carries the page status */
@import url("./tokens.css");
@import url("./base.css");

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
}

.page {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: var(--space-2xl) var(--space-xl);
}

@media (max-width: 720px) {
  :root {
    --gutter: 24px;
  }

  .page {
    padding-block: var(--space-xl) var(--space-lg);
  }
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-3xl);
  align-items: start;
  padding-block: var(--space-2xl);
}

@media (max-width: 960px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.hero {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-xl);
  min-width: 0;
}

.brand {
  display: block;
  width: min(100%, 36rem);
  height: auto;
  opacity: 0;
  transform: translateY(0.6rem);
  animation: rise var(--dur-long) var(--ease-out) 80ms forwards;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-ink);
  overflow-wrap: break-word;
  min-width: 0;
  opacity: 0;
  transform: translateY(0.6rem);
  animation: rise var(--dur-long) var(--ease-out) 160ms forwards;
}

.hero h1 .status {
  color: var(--color-accent-text);
}

.lede {
  margin: 0;
  max-width: 36ch;
  font-size: var(--text-lead);
  color: var(--color-ink-2);
  opacity: 0;
  transform: translateY(0.6rem);
  animation: rise var(--dur-long) var(--ease-out) 240ms forwards;
}

.contacts {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  width: min(100%, 36rem);
  opacity: 0;
  transform: translateY(0.6rem);
  animation: rise var(--dur-long) var(--ease-out) 320ms forwards;
}

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
}

.contact-row dt {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}

.contact-row dd {
  margin: 0;
  color: var(--color-ink);
  min-width: 0;
  overflow-wrap: break-word;
}

.contact-row a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-micro) var(--ease-out);
}

.contact-row a:hover {
  color: var(--color-accent-text);
}

.contact-row a:active {
  color: var(--color-accent-deep);
}

.contact-row a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.manifesto {
  min-width: 0;
  max-width: 38rem;
  margin-top: clamp(0.5rem, 2vw, 2.5rem);
  padding-left: var(--space-xl);
  border-left: var(--rule-bar) solid var(--color-accent);
  display: grid;
  gap: var(--space-lg);
  opacity: 1;
}

.manifesto blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-lg);
}

.manifesto p {
  margin: 0;
  font-size: clamp(1.125rem, 1.2vw + 0.9rem, 1.4rem);
  line-height: 1.55;
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.manifesto p:first-child {
  font-weight: 500;
  font-style: italic;
  color: var(--color-ink);
}

.manifesto strong {
  font-weight: 700;
  font-style: italic;
  color: var(--color-ink);
}

@media (max-width: 960px) {
  .manifesto {
    padding-left: 0;
    padding-top: var(--space-lg);
    border-left: none;
    border-top: var(--rule-bar) solid var(--color-accent);
    max-width: none;
  }
}

.footer {
  border-top: var(--rule-bar) solid var(--color-ink);
  padding-top: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 48rem;
}

.footer strong {
  color: var(--color-ink-2);
  font-weight: 600;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .hero h1,
  .lede,
  .contacts {
    animation: none;
    opacity: 1;
    transform: none;
  }
}