@import "./global.css";

:root {
  --font-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --color-accent: #1a1a1a;
}

body { font-family: var(--font-serif); }
main { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

h1 { font-weight: 200; font-size: 3.5rem; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--space-xl); }

.grid-asymmetric {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-m); margin: var(--space-xl) 0;
}
.grid-asymmetric .item { background: #ddd; aspect-ratio: 1; display: flex; align-items: end; padding: var(--space-s); font-size: 0.7rem; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.1em; color: #555; }
.grid-asymmetric .item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: 1; }
.grid-asymmetric .item:nth-child(2) { grid-column: 3 / 4; }
.grid-asymmetric .item:nth-child(3) { grid-column: 4 / 5; }
.grid-asymmetric .item:nth-child(4) { grid-column: 3 / 5; grid-row: 2; aspect-ratio: 2 / 1; align-self: end; }

blockquote { font-size: 1.2rem; font-weight: 200; border: none; padding: var(--space-l) 0; margin: 0; line-height: 1.4; }