/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* BASE
   Reset, layout primitives, typography, and the utilities shared by more
   than one section (buttons, tags, crop marks, section headers).
   If a rule is only used by one section, it belongs in that section file. */

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; background: #000; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-light); color: var(--c-dark);
  font-family: var(--font-body); font-size: var(--size-font);
  line-height: 1.35; text-transform: uppercase;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; font-size: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
p { margin: 0; }

/* Optical trim: strip half-leading so type aligns to cap height. */
h1, h2, h3, .h-lg, .h-md { display: flow-root; margin: 0; }
h1::before, h2::before, h3::before, .h-lg::before, .h-md::before {
  content: ''; display: table; margin-bottom: calc(-0.5lh + 0.38em);
}
h1::after, h2::after, h3::after, .h-lg::after, .h-md::after {
  content: ''; display: table; margin-bottom: calc(-0.5lh + 0.37em);
}
/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */
.container { width: 100%; max-width: var(--size-container); margin-inline: auto; }
.padding-global { width: 100%; padding-inline: var(--pad-global); position: relative; }
.padding-section { padding-block: var(--pad-section); }
.pt-0 { padding-top: 0; }
.grid-global { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-col); }
@media (max-width: 767px) { .grid-global { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ============================================================
   5. TYPE
   Justified display and mono body, as in the scaffold. That is
   what produces the stretched word spacing throughout.
   ============================================================ */
.h-lg, .h-md {
  font-family: var(--font-display); font-weight: 700;
  line-height: .95; letter-spacing: -.02em; text-align: left;
}
.h-lg { font-size: var(--t-h-lg); }
.h-md { font-size: var(--t-h-md); }
.body-mono { font-size: var(--t-tag); line-height: 1.55; text-align: left; letter-spacing: .04em; }
.tag-text { font-size: var(--t-tag); letter-spacing: .06em; }
.mute { color: var(--c-mute); }

.tag { display: inline-flex; align-items: center; gap: .5em; font-size: var(--t-tag); letter-spacing: .06em; }
.tag-dot { width: .45em; height: .45em; background: currentColor; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-size: var(--t-tag); letter-spacing: .06em; }

/* Book button: bordered box that fills with brand red on hover */
.btn {
  display: inline-flex; align-items: center; gap: .6em; align-self: flex-start;
  border: 1px solid currentColor; padding: .9em 1.25em;
  font-size: var(--t-tag); letter-spacing: .08em; line-height: 1;
  transition: background .35s cubic-bezier(.16,1,.3,1), color .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);
}
.btn:hover, .btn:focus-visible { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn.is-solid { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn.is-solid:hover, .btn.is-solid:focus-visible { background: var(--c-dark); border-color: var(--c-dark); }
/* ============================================================
   6. CORNER MARKERS
   ============================================================ */
.marker-overlay { position: fixed; inset: .9em; pointer-events: none; z-index: 90; opacity: 0; }
.marker-overlay i {
  position: absolute; width: .55em; height: .55em;
  border: 0 solid var(--c-light); mix-blend-mode: difference;
}
.marker-overlay .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.marker-overlay .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.marker-overlay .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.marker-overlay .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.marker-overlay .ml { top: 50%; left: 0; height: 1.1em; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; translate: 0 -50%; }
.marker-overlay .mr { top: 50%; right: 0; height: 1.1em; border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; translate: 0 -50%; }

.crop { position: absolute; inset: 0; pointer-events: none; }
.crop i { position: absolute; width: .55em; height: .55em; border: 0 solid currentColor; }
.crop .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.crop .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.crop .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.crop .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
/* ============================================================
   10. SECTION HEADERS
   ============================================================ */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 1.5em; }
.section-intro { display: flex; flex-direction: column; gap: 1em; margin-bottom: 2.5em; }
.section-intro .h-md { max-width: 18em; }

/* Lead paragraph under a section heading. Capped so the justified mono type
   keeps a comfortable measure instead of running the full page width. */
.section-lead { max-width: 34em; }