/* Layout — section shells, headings, grid backdrop */
/* Part of Jowie Tan's site — see CLAUDE.md for structure notes. */

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position: relative; }
.section-pad { padding: clamp(90px, 13vh, 150px) 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin: 16px 0 14px; }
.section-head p { color: var(--text-dim); font-size: 17px; }

/* subtle grid backdrop on sections */
.grid-bg::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(80% 60% at 50% 30%, #000 30%, transparent 80%);
}
.grid-bg > .wrap { position: relative; z-index: 1; }