/* Nene marketing site — reset, section shells and the type scale.
   Serif above 20px, sans below. Uppercase only for eyebrows, buttons and micro labels. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.ns-page {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps this reset at zero specificity, so a component class below can
   set its own padding without having to out-specify the element selector. */
.ns-page :where(h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.ns-page :where(li) {
  list-style: none;
}

.ns-page a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.ns-page a:hover {
  color: var(--text-link-hover);
}

.ns-page ::selection {
  background: var(--gold-200);
  color: var(--ink-950);
}

.ns-page :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Section shells --- */

.ns-section {
  padding: 56px var(--gutter-page);
}

.ns-section--page {
  background: var(--surface-page);
}

.ns-section--sunken {
  background: var(--surface-sunken);
}

.ns-section--ink {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  color: var(--text-on-inverse);
}

.ns-wash {
  position: absolute;
  inset: 0;
}

.ns-wash--scrim {
  background: var(--scrim-top);
}

.ns-shell {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* --- Type --- */

.ns-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--text-gold);
}

.ns-eyebrow--on-ink {
  color: var(--gold-300);
}

.ns-label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ns-label--gold {
  color: var(--text-gold);
}

.ns-label--on-ink {
  color: rgba(244, 240, 232, 0.6);
}

.ns-display,
.ns-h1,
.ns-h2,
.ns-h3,
.ns-h3--wide,
.ns-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
  color: var(--text-strong);
  text-wrap: pretty;
}

.ns-h1 {
  font-size: clamp(2.75rem, 6vw, 5.375rem);
  line-height: 1.05;
}

.ns-h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.08;
}

.ns-h2--number {
  font-size: clamp(3.5rem, 6.7vw, 6rem);
  line-height: 1;
}

.ns-h2--price {
  font-size: clamp(3rem, 6.1vw, 5.5rem);
  line-height: 1;
}

.ns-h2--tall {
  font-size: clamp(2.5rem, 4.45vw, 4rem);
  line-height: 1.04;
}

.ns-h2--footer {
  font-size: clamp(2.375rem, 5vw, 4.5rem);
  line-height: 1.05;
}

.ns-h2--faq {
  font-size: clamp(2rem, 3.2vw, 2.875rem);
  line-height: 1.1;
}

.ns-h3 {
  font-size: clamp(1.625rem, 2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
}

.ns-h3--wide {
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
}

.ns-h4 {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.25;
}

.ns-serif-note {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.55vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.ns-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  text-wrap: pretty;
}

.ns-body--lead {
  font-size: 17px;
  line-height: 1.7;
}

.ns-body--large {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.65;
}

.ns-body--muted {
  color: var(--text-muted);
}

.ns-body--small {
  font-size: 15px;
  line-height: 1.65;
}

.ns-body--on-ink {
  color: rgba(244, 240, 232, 0.72);
}

.ns-measure {
  max-width: 46ch;
}

.ns-measure--wide {
  max-width: 52ch;
}

.ns-measure--prose {
  max-width: 64ch;
}

.ns-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--text-muted);
}

.ns-page code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.ns-em {
  font-weight: var(--weight-medium);
}

.ns-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* An unmeasured figure. Deliberately loud: it must be measured before launch,
   never guessed — see docs/MARKETING_COPY.md, Appendix G. */
.ns-tk {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-m);
  background: var(--status-warning-bg);
  border: 1px dashed rgba(154, 107, 24, 0.5);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber-600);
}

