/* White, minimal, typographic */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#ffffff; color:#111; }
a { color:#111; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
code { background:#f5f5f5; padding: .25rem .45rem; border-radius: 8px; }

.site-header { position: sticky; top:0; background:rgba(255,255,255,.85); backdrop-filter: blur(6px); border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; z-index:10; }
.brand { display:flex; align-items:center; gap:.6rem; }
.logo { width:40px; height:40px; animation: floaty 6s ease-in-out infinite; }
.wordmark { font-size:1.2rem; margin:0; letter-spacing: .5px; }

.nav a { margin-left:1rem; color:#333; }

.hero { display:flex; justify-content:center; padding: clamp(1rem, 6vw, 3rem) 1rem 1.5rem; }
.hero-inner { max-width: 960px; width: 100%; text-align:left; }
.intro { margin:0 0 .8rem 0; color:#555; }
blockquote { font-size: clamp(1.2rem, 3.4vw, 2.2rem); line-height:1.2; font-weight:700; margin:0; }
.hilite { position: relative; }
.hilite::after { content:""; position:absolute; left:-2px; right:-2px; bottom:0; height:.55em; background:#e6e6e6; z-index:-1; transform: skew(-6deg); }
.source { margin:.6rem 0 1rem; color:#777; }

.btn { border:1px solid #111; background:#fff; color:#111; border-radius: 999px; padding:.6rem 1rem; cursor:pointer; transition: transform .06s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background:#111; color:#fff; }

.cta-row { display:flex; gap:.6rem; margin: 1rem 0 .8rem; flex-wrap: wrap; }

.ca-block { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border:1px dashed #ccc; padding:.6rem .8rem; border-radius:14px; width:100%; }
.ca-label { font-weight:700; }

.microcopy { color:#666; font-size:.95rem; }

.lore { padding: 1.2rem; border-top:1px solid #eee; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:.9rem; }
.card { border:1px solid #eee; border-radius:16px; padding:1rem; background:#fff; }
.card h3 { margin-top:0; }

.footer { padding:2rem 1rem 3rem; text-align:center; color:#777; border-top:1px solid #eee; margin-top:1rem; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0) }
  50% { transform: translateY(-2px) rotate(-2deg) }
}


.nypost-logo { height: 24px; vertical-align: middle; margin-right: 6px; }
.source { display:flex; align-items:center; gap:.5rem; margin:.6rem 0 1rem; color:#777; }


.hilite.handmarker {
  position: relative;
  z-index: 0;
}

.hilite.handmarker::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 40%;
  bottom: -5%;
  background: url('assets/highlight.svg') repeat-x;
  background-size: auto 100%;
  z-index: -1;
  transform: rotate(-1deg);
  opacity: 0.8;
}