/*
Nilpar Gallery — Base (Phase 5.0)
Purpose: set global page physics using tokens. Keep it minimal and institutional.
*/


/* Global safety: prevent padding/width overflow and horizontal drift */
*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }
/* Prefer clip where supported (prevents creating a horizontal scrollable area) */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}


html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--ng-color-paper);
  color: var(--ng-color-ink);
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-body);
  line-height: var(--ng-line-body);
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .2em;
}
a:hover { text-decoration: underline; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.ng-reading {
  max-width: var(--ng-reading-width);
  margin-left: auto;
  margin-right: auto;
}

.ng-card {
  background: var(--ng-color-porcelain);
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-radius-card);
  box-shadow: var(--ng-shadow-soft);
}


/* Accessibility: visible focus (quiet, gold-tinged) */
:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

/* Utility: token-driven button */
.ng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ng-space-2);
  padding: var(--ng-btn-pad-y) var(--ng-btn-pad-x);
  border-radius: var(--ng-btn-radius);
  border: 1px solid var(--ng-btn-border);
  background: var(--ng-btn-bg);
  box-shadow: var(--ng-btn-shadow);
  color: var(--ng-btn-ink);
  font-family: var(--ng-font-sans);
  font-size: var(--ng-btn-font);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ng-dur-fast) var(--ng-ease-quiet),
              transform var(--ng-dur-fast) var(--ng-ease-quiet);
}
.ng-btn:hover {
  background: var(--ng-btn-bg-hover);
  text-decoration: none;
}
.ng-btn:active {
  transform: translateY(1px);
}



.ng-btn--ghost{
  background: transparent;
  border-color: var(--ng-color-hairline);
  box-shadow: none;
}
.ng-btn--ghost:hover{
  background: rgba(20,20,20,.03);
}

/* Skip link (keyboard users) */
.ng-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--ng-space-3) var(--ng-space-4);
  background: var(--ng-color-porcelain);
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-radius-soft);
  box-shadow: var(--ng-shadow-soft);
  z-index: calc(var(--ng-z-header) + 1);
}
.ng-skip-link:focus {
  left: var(--ng-space-4);
  top: var(--ng-space-4);
}


/* ---------- Typography hierarchy (Phase 5.4) ---------- */

h1, h2, h3 {
  font-family: var(--ng-font-serif);
  letter-spacing: var(--ng-type-tracking);
  line-height: var(--ng-line-tight);
  margin: 0 0 var(--ng-space-4);
}

h1 { font-size: var(--ng-h1-size); }
h2 { font-size: var(--ng-h2-size); }
h3 { font-size: var(--ng-h3-size); }

p {
  margin: 0 0 var(--ng-type-paragraph-space);
  color: var(--ng-color-ink);
}

.ng-lede {
  font-family: var(--ng-font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ng-color-ink-muted);
  margin-bottom: var(--ng-space-6);
}

.ng-caption {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-faint);
  line-height: 1.4;
}

hr {
  border: 0;
  border-top: 1px solid var(--ng-color-hairline);
  margin: var(--ng-space-7) 0;
}

blockquote {
  margin: var(--ng-space-6) 0;
  padding: var(--ng-space-4) var(--ng-space-5);
  border-left: 3px solid var(--ng-cta-border);
  background: rgba(251,250,246,.55); /* porcelain at 55% — blockquote only */
  border-radius: var(--ng-radius-soft);
  color: var(--ng-color-ink-muted);
}

ul, ol {
  margin: 0 0 var(--ng-type-paragraph-space);
  padding-left: 1.25em;
}

li { margin: .35em 0; }

/* Prose container (for Essays / About / long-form) */
.ng-prose {
  max-width: var(--ng-type-measure);
}
.ng-prose a {
  text-decoration-thickness: 1px;
}


/* CTA tone (Phase 5.5 fix) */
.ng-cta{display:inline-flex;align-items:center;gap:var(--ng-space-2);padding:var(--ng-btn-pad-y) var(--ng-btn-pad-x);border-radius:var(--ng-btn-radius);border:1px solid var(--ng-btn-border-strong);background:var(--ng-cta-bg);color:var(--ng-cta-ink);font-family:var(--ng-font-sans);font-size:var(--ng-text-small);text-decoration:none;transition:background var(--ng-dur-fast) var(--ng-ease-quiet);} .ng-cta:hover{background:var(--ng-cta-bg-hover);text-decoration:none;}


/* Card vertical rhythm calibration */
.ng-card{display:flex;flex-direction:column;}
.ng-card__excerpt{flex-grow:1;}


/* Stack hygiene: avoid double-spacing when using .ng-stack */
.ng-stack p { margin-bottom: 0; }
.ng-stack ul, .ng-stack ol { margin-bottom: 0; }


.ng-secondary-inquiry {
  margin-top: var(--ng-space-5);
  color: var(--ng-color-ink-muted);
}

.ng-secondary-inquiry a {
  color: var(--ng-color-ink);
}