/* ==========================================================================
   Nikkalma 2.0 — shared foundations for pages outside the homepage.
   Scope: only pages whose <body> has class "nk2". Nothing here applies to
   the homepage (home.css) or to legacy pages (styles.css + article.css).
   Values are the homepage's computed values as of 2026-10-13 (after
   typography P0–P2 / v33), not declarations from its historical blocks.
   Load order: /styles.css → /nikkalma-2.css → page CSS.
   ========================================================================== */

@font-face {
  font-family: "Onest";
  src: url("/fonts/Onest-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* --- Tokens --- */
.nk2 {
  --nk2-graphite: #232622;          /* page background */
  --nk2-surface: #292c28;           /* inset cards (Process, Author) */
  --nk2-footer: #1b1d1a;
  --nk2-cream: #f1ebdd;             /* primary text */
  --nk2-text: rgba(241, 235, 221, .76);    /* secondary text, ≥ 6:1 on graphite */
  --nk2-label: rgba(241, 235, 221, .64);   /* labels, ≥ 5.3:1 on graphite and surface */
  --nk2-sage: #9daa8f;
  --nk2-sage-fill: rgba(157, 170, 143, .2);
  --nk2-line: rgba(241, 235, 221, .22);
  --nk2-line-soft: rgba(241, 235, 221, .12);
  --nk2-light: #e2ddcf;             /* light project surface (Niqual tile) */
  --nk2-light-ink: #212120;
  --nk2-light-text: rgba(33, 33, 32, .78);
  --nk2-light-line: rgba(33, 33, 32, .16);
  --nk2-radius-control: 8px;
  --nk2-radius-card: 16px;
  --nk2-radius-tile: 18px;
  --nk2-max: 1360px;
  --nk2-gutter: clamp(24px, 4vw, 58px);
  /* Same as the homepage gutter up to ~1475px; wider screens centre the content. */
  --nk2-pad: max(var(--nk2-gutter), calc((100% - var(--nk2-max)) / 2));
  --sans: "Onest", system-ui, sans-serif;

  padding: 0;
  background: var(--nk2-graphite);
  color: var(--nk2-cream);
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 400;
}

@media (max-width: 680px) {
  .nk2 { --nk2-gutter: 20px; }
}

/* --- Canvas: full-width page, no frame --- */
.nk2 .site-canvas {
  width: 100%;
  margin: 0;
  overflow: visible;
  overflow-x: clip;
  border: 0;
  border-radius: 0;
  background: var(--nk2-graphite);
  box-shadow: none;
}

/* --- Focus --- */
.nk2 a:focus-visible,
.nk2 button:focus-visible {
  outline: 2px solid var(--nk2-sage);
  outline-offset: 4px;
}

.nk2 .skip-link {
  background: var(--nk2-cream);
  color: var(--nk2-graphite);
}

/* --- Header / navigation --- */
.nk2 .site-header {
  min-height: 66px;
  padding: 0 var(--nk2-pad);
  border-bottom: 1px solid var(--nk2-line);
}

.nk2 .wordmark { font-family: "Onest", sans-serif; }

.nk2 .site-header nav a {
  margin: -8px -14px;
  padding: 8px 14px;
  border-radius: var(--nk2-radius-control);
  background-color: transparent;
  color: rgba(241, 235, 221, .72);
  font-size: .875rem;
  text-decoration: none;
  transition: background-color .2s ease;
}

.nk2 .site-header nav a[aria-current="page"],
.nk2 .site-header nav a:hover { color: var(--nk2-cream); }

.nk2 .site-header nav a:hover,
.nk2 .site-header nav a:focus-visible,
.nk2 .site-header nav a:active {
  background-color: var(--nk2-sage-fill);
  text-decoration: none;
}

@media (max-width: 680px) {
  .nk2 .site-header {
    align-items: flex-start;
    min-height: 110px;
    padding: 22px 20px;
  }

  .nk2 .site-header nav {
    flex-wrap: wrap;               /* homepage scrolls; wrapping keeps 200% text visible */
    justify-content: flex-start;
    width: calc(100% + 28px);
    margin: -8px -14px;
    padding: 8px 14px;
    gap: 0 20px;
    font-size: inherit;
  }

  .nk2 .site-header nav a { white-space: nowrap; }
}

@media (max-width: 400px) {
  .nk2 .site-header nav { column-gap: 14px; }
}

/* --- Buttons --- */
.nk2 .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-height: 48px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: var(--nk2-radius-control);
  font-size: .875rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nk2 .button-primary {
  min-width: 190px;
  border-color: var(--nk2-cream);
  color: var(--nk2-cream);
}

.nk2 .button-primary:hover {
  background: var(--nk2-cream);
  color: var(--nk2-graphite);
}

/* --- Text link with underline (homepage "Все проекты →") --- */
.nk2 .text-link {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nk2-line);
  color: var(--nk2-text);
  font-size: .8125rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.nk2 .text-link:hover,
.nk2 .text-link:focus-visible {
  color: var(--nk2-cream);
  border-bottom-color: rgba(241, 235, 221, .48);
}

/* --- Footer: one compact row (homepage v29 + typography P0/P2) --- */
.nk2 footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 14px var(--nk2-pad);
  border-top: 1px solid rgba(241, 235, 221, .14);
  background: var(--nk2-footer);
  color: var(--nk2-cream);
}

.nk2 .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.nk2 .footer-bottom .legal-rail {
  flex-wrap: wrap;               /* keeps both items visible at large text sizes */
  row-gap: 4px;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.nk2 .legal-rail-copy,
.nk2 .legal-rail-link {
  color: rgba(246, 244, 239, .58);
  font-size: .75rem;
}

.nk2 .footer-bottom .footer-mark {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.nk2 .footer-mark-logo { width: 28px; height: 28px; object-fit: contain; }

.nk2 .footer-bottom .footer-mark-signature {
  margin: 0;
  color: rgba(246, 244, 239, .6);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: none;
}

@media (max-width: 680px) {
  .nk2 footer { padding: 18px 20px; }

  .nk2 .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Consent bar (same treatment as the homepage) --- */
.nk2 .consent-bar {
  background: var(--nk2-footer);
  color: var(--nk2-cream);
  font-family: "Onest", sans-serif;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .nk2 .site-header nav a,
  .nk2 .button,
  .nk2 .text-link { transition: none; }
}

/* ==========================================================================
   Preview: cinematic project pages (?project-preview=cinematic)
   Same black / graphite / silver system as the cinematic homepage.
   Applies only while content.js has set .project-preview-cinematic; the
   current graphite pages are untouched. Project content, screenshots and the
   «Не сейчас» product card keep their own colours.
   ========================================================================== */
.nk2.project-preview-cinematic {
  --nk2-graphite: #0e0f0f;
  --nk2-surface: rgba(25, 27, 29, .62);
  --nk2-footer: #0b0c0c;
  --nk2-sage: #b9c0c7;                        /* accent → silver */
  --nk2-sage-fill: rgba(218, 224, 230, .1);
  --nk2-line: rgba(218, 224, 230, .2);
  --nk2-line-soft: rgba(218, 224, 230, .12);
  /* Soft silver halo: one eased falloff for every mark, only the peak differs. */
  --pp-halo: radial-gradient(circle closest-side at 50% 50%, rgba(214, 218, 222, 0.13) 0, rgba(214, 218, 222, 0.107) 22%, rgba(214, 218, 222, 0.072) 40%, rgba(214, 218, 222, 0.039) 58%, rgba(214, 218, 222, 0.016) 75%, rgba(214, 218, 222, 0.005) 88%, transparent 100%);
  --pp-halo-bright: radial-gradient(circle closest-side at 50% 50%, rgba(214, 218, 222, 0.4) 0, rgba(214, 218, 222, 0.328) 22%, rgba(214, 218, 222, 0.22) 40%, rgba(214, 218, 222, 0.12) 58%, rgba(214, 218, 222, 0.048) 75%, rgba(214, 218, 222, 0.016) 88%, transparent 100%);
}

.nk2.project-preview-cinematic footer { border-top-color: rgba(218, 224, 230, .14); }
.nk2.project-preview-cinematic :is(.niqual-hero-rule, .syverro-hero-rule) { background: rgba(218, 224, 230, .32); }

/* Hero: the decorative brand panel becomes an open stage for the mark — no
   image, no panel colour, no frame. Box size and position stay as they were,
   so the page does not move. */
.nk2.project-preview-cinematic :is(.niqual-sand, .syverro-studio) { background: none; }

.nk2.project-preview-cinematic :is(.niqual-sand, .syverro-studio)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  background: var(--pp-halo);
  pointer-events: none;
}

/* Niqual: original dark mark (assets/images/niqual-icon.svg), not recoloured.
   Same eased falloff as the Studio light, just a brighter peak, so the dark
   silhouette reads. */
.nk2.project-preview-cinematic .niqual-sand::before { background: var(--pp-halo-bright); }

.nk2.project-preview-cinematic .niqual-sand::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("/assets/images/niqual-icon.svg?v=2") 50% 50% / auto min(40%, 196px) no-repeat;
  pointer-events: none;
}

/* Syverro Studio: current Cormorant wordmark, centred on its own light. */
.nk2.project-preview-cinematic .syverro-hero-art-title {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
}

.nk2.project-preview-cinematic .syverro-hero-caption { color: rgba(241, 235, 221, .66); }

/* Narrow screens: the stage is only 200px tall — give the wordmark a little air. */
@media (max-width: 680px) {
  .nk2.project-preview-cinematic .syverro-hero-art-title { top: 46%; font-size: 2.5rem; }
}

/* «Не сейчас»: same idea as the homepage logo gallery — the cream card surface
   goes, the product mark stays (original colours) on its own soft silver haze,
   and the existing copy sits on the page background. */
.nk2.project-preview-cinematic .niqual-product-featured {
  --nk2-light-ink: var(--nk2-cream);
  --nk2-light-text: var(--nk2-label);
  --nk2-light-line: transparent;
  --ns-mark: clamp(120px, 11vw, 150px);
  margin-left: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.nk2.project-preview-cinematic .niqual-product-featured-head { padding: 0 0 4px; }

.nk2.project-preview-cinematic .niqual-product-featured-body {
  position: relative;
  isolation: isolate;
  padding: 18px 0 0;
}

.nk2.project-preview-cinematic .niqual-product-featured-body::before {
  /* Centred on the mark; radius stops at the page edge so the haze is never cut. */
  --ns-halo: min(var(--ns-mark) * 2.4, var(--ns-mark) + var(--nk2-gutter) * 2);
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(18px + var(--ns-mark) / 2 - var(--ns-halo) / 2);
  left: calc(var(--ns-mark) / 2 - var(--ns-halo) / 2);
  width: var(--ns-halo);
  aspect-ratio: 1;
  background: var(--pp-halo-bright);
  pointer-events: none;
}

.nk2.project-preview-cinematic .niqual-product-mark { width: var(--ns-mark); }

@media (max-width: 680px) {
  .nk2.project-preview-cinematic .niqual-product-featured { --ns-mark: clamp(110px, 32vw, 140px); }
  .nk2.project-preview-cinematic .niqual-product-featured-body { padding: 18px 0 0; }
}