/* Portfolio design tokens and hero typography, copied from live styles.305a26c816329f1f.css. */
:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #191919;
  --guide: #eae9e4;
  --gutter: clamp(24px, 6vw, 112px);
  --column: calc((100vw - 2 * var(--gutter)) / 12);
  font-family: Arial, Helvetica, ui-sans-serif, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.6; }
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  inset: 0 var(--gutter);
  background: repeating-linear-gradient(to right, var(--guide) 0, var(--guide) 1px, transparent 1px, transparent var(--column));
  border-right: 1px solid var(--guide);
}
::selection { background: #4f2d7f; color: white; }
.frame { margin-inline: var(--gutter); }
.hero { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; padding-top: clamp(64px, 9vh, 140px); }
.hero-copy { grid-column: 6 / 13; grid-row: 1; align-self: center; padding-bottom: 100px; }
.hero h1 { font-size: clamp(110px, 12.6vw, 250px); font-weight: 600; letter-spacing: -.075em; line-height: .85; margin: 30px 0 40px -.065em; }
.hero h1 span { display: block; }
@media (max-width: 1100px) {
  .hero-copy { grid-column: 5 / 13; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; --column: calc((100vw - 2 * var(--gutter)) / 4); }
  .hero { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 56px; }
  .hero-copy { grid-column: 1 / 5; padding-bottom: 76px; }
  .hero h1 { font-size: clamp(90px, 22vw, 165px); margin-block: 28px 32px; }
}