/* Small, consistent brick details without changing the page layout. */
.brand-symbol { position: relative; background: var(--red); color: white; border: 2px solid var(--ink); border-radius: 5px; box-shadow: 3px 3px 0 var(--yellow); }
.brand-symbol::before, .brand-symbol::after { content: ''; position: absolute; top: -8px; width: 13px; height: 7px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--red); }
.brand-symbol::before { left: 5px; }
.brand-symbol::after { right: 5px; }
.brick-ribbon { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); height: 7px; gap: 3px; }
.brick-ribbon i:nth-child(4n+1) { background: var(--red); }
.brick-ribbon i:nth-child(4n+2) { background: var(--yellow); }
.brick-ribbon i:nth-child(4n+3) { background: var(--blue); }
.brick-ribbon i:nth-child(4n) { background: var(--green); }
.hero-copy > .eyebrow { width: fit-content; padding: 8px 11px; background: #f1f3ec; border: 1px solid #e1e6da; border-radius: 5px; }
.hero h1 em { position: relative; }
.button { box-shadow: 3px 4px 0 var(--ink); }
@media (hover: hover) {
  .button:hover { transform: translate(-1px,-2px); box-shadow: 4px 6px 0 var(--ink); }
}
.button:active { transform: translate(2px,2px); box-shadow: 1px 2px 0 var(--ink); }
.art-stage { box-shadow: 9px 10px 0 var(--yellow), 10px 11px 0 2px var(--ink); }
.round-label { box-shadow: 0 0 0 6px var(--paper), 5px 6px 0 6px var(--ink); }
.wanted-card { box-shadow: 4px 5px 0 var(--ink); }
.wanted-card::after { content: ''; position: absolute; right: 24px; top: 24px; width: 56px; height: 22px; background: radial-gradient(circle at 11px 10px,transparent 6px,currentColor 6.5px 8px,transparent 8.5px),radial-gradient(circle at 40px 10px,transparent 6px,currentColor 6.5px 8px,transparent 8.5px); opacity: .35; }
.step-number { box-shadow: 3px 3px 0 var(--ink); }
.steps article:nth-child(2) .step-number { background: var(--blue); color: white; }
.steps article:nth-child(3) .step-number { background: var(--red); color: white; }
.project-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle,transparent 8px,#ffffff10 8.5px 10px,transparent 10.5px) 0 0 / 48px 48px; mask-image: linear-gradient(90deg,#000,transparent 65%); }
.hello { box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 620px) {
  .brick-ribbon { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .brick-ribbon i:nth-child(n+9) { display: none; }
  .art-stage { transform: rotate(2deg); box-shadow: 6px 7px 0 var(--yellow),7px 8px 0 2px var(--ink); }
}