/* NCMS/site/ncms-site.css — the three elements NCMS adds to the FRZR set (Visual band · Text · Gallery),
   the visuals any section can carry, and the in-place editor's marks (html.ncms-edit only, never in a release).
   Everything here stands on frzr.css's own tokens (--field, --ink, --soft, --line, --serif …), so both
   voids are drawn by the same rules. */

/* ── visuals ── */
.hero .poster.ncms-none { background-image: none; }
.hero .poster.ncms-poster, .ncms-band .poster { background-position: center; background-size: cover; background-repeat: no-repeat; }
.poster.ncms-img { background-position: center; background-size: cover; background-repeat: no-repeat; }
.poster.ncms-img::after { content: ""; position: absolute; inset: 0; background: var(--field); opacity: var(--dim, .35); }
.hero.live .poster.ncms-img { opacity: 1; }
/* a video (2026-10-08): it fills its box over its poster; the dim veil sits above it */
.poster.ncms-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.poster.ncms-vid.ncms-contain video { object-fit: contain; }
.poster.ncms-vid::after { z-index: 1; }
/* a stream: the poster is a picture under the video; the video shows only once it is playing (2026-10-08) */
.poster.ncms-stream picture, .poster.ncms-stream img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster.ncms-stream img { object-fit: cover; }
.poster.ncms-stream.ncms-contain img { object-fit: contain; }
.poster.ncms-vid video { opacity: 0; transition: opacity .8s; }
.poster.ncms-vid.ncms-playing video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .poster.ncms-vid video { display: none; } }
.hero .poster.ncms-img:not([style*="background-image"]) { background-image: none; }
.ncms-band .poster.ncms-none { background: var(--field); }
/* the drawn number of an index label */
.ncms-index .ncms-n { color: inherit; }

/* ── Visual band ── */
.ncms-band { position: relative; height: var(--band, 80vh); min-height: 420px; overflow: hidden; background: var(--field); }
.ncms-band .poster { position: absolute; inset: 0; }
.ncms-band.live .poster.ncms-poster { opacity: 0; transition: opacity .6s; }
.ncms-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ncms-band-foot { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; pointer-events: none; }
.ncms-band-foot .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ncms-band-line { margin: 0; font-size: 40px; line-height: 1.18; letter-spacing: -.03em; font-weight: 300; max-width: 760px; }
.ncms-band-line:empty { display: none; }
.ncms-band-line em { font-size: 43px; }

/* ── Text ── */
.ncms-text { padding: 160px 0; }
.ncms-h { font-size: 56px; line-height: 1.12; letter-spacing: -.025em; font-weight: 200; margin: 0 0 32px; }
.ncms-h em { font-size: 61px; }
.ncms-p { font-size: 19px; line-height: 1.6; color: var(--soft); max-width: 680px; margin: 0 0 20px; font-weight: 300; }

/* ── Gallery ── */
.ncms-gallery { padding: 160px 0; }
.ncms-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px; }
.ncms-tile { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.ncms-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--raise); }
.ncms-tt { font-size: 21px; letter-spacing: -.01em; }
a.ncms-tile:hover .ncms-tt { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ── tone ── */
.ncms-panel { background: var(--panel); }

@media (max-width: 1023px) {
  .ncms-text, .ncms-gallery { padding: 96px 0; }
  .ncms-h { font-size: 40px; } .ncms-h em { font-size: 44px; }
  .ncms-band-line { font-size: 30px; } .ncms-band-line em { font-size: 32px; }
  .ncms-band-foot .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── the editor (studio preview only) ── */
.ncms-edit [data-ncms-f] { outline: 1px dashed transparent; outline-offset: 3px; border-radius: 2px; cursor: text; transition: outline-color .15s; min-width: 1ch; }
.ncms-edit [data-ncms-f]:hover { outline-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.ncms-edit [data-ncms-f]:focus { outline: 1px solid var(--ink); }
.ncms-edit [data-ncms-f]:empty::before { content: "…"; color: var(--faint); }
.ncms-edit [data-ncms-sec] { cursor: default; }
.ncms-edit [data-ncms-sec].ncms-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 55%, transparent); }
.ncms-edit .ncms-empty { padding: 200px 0; text-align: center; }
.ncms-edit .nav { position: absolute; }

/* ── Stealth (2026-10-08) ── */
.ncms-stealth { padding: 200px 0 180px; }
.ncms-stealth .statement em { font-size: 1.08em; }
.ncms-stealth .ncms-p { margin-top: 28px; }
.ncms-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.ncms-track { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.ncms-track header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ncms-track .no { color: var(--faint); }
.ncms-status { color: var(--soft); display: inline-flex; align-items: center; gap: 8px; }
.ncms-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .85; animation: ncms-pulse 2.6s ease-in-out infinite; }
@keyframes ncms-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ncms-status::before { animation: none; } }
.ncms-track-t { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; font-weight: 300; }
.ncms-track-l { margin: 0; font-size: 16px; line-height: 1.55; color: var(--soft); font-weight: 300; }
.ncms-held { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.ncms-held i { display: block; height: 9px; border-radius: 2px; background: var(--ink); opacity: .14; }
.ncms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) { .ncms-stealth { padding: 120px 0; } .ncms-tracks { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; } }

/* ── the contact form, in a modal ── */
.ncms-contact { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); color: var(--ink); overflow: auto; }
.ncms-contact::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
:root[data-void="white"] .ncms-contact::backdrop { background: rgba(244, 242, 236, .7); }
.ncms-cf { padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 18px; font-family: var(--sans); }
.ncms-cf-head { display: flex; justify-content: space-between; align-items: center; }
.ncms-cf-x { all: unset; cursor: pointer; color: var(--soft); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.ncms-cf-x:hover, .ncms-cf-x:focus-visible { color: var(--ink); }
.ncms-cf-title { margin: 4px 0 0; font-size: 40px; line-height: 1.1; letter-spacing: -.025em; font-weight: 200; }
.ncms-cf-title em { font-size: 1.08em; }
.ncms-cf-lede { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.55; font-weight: 300; }
.ncms-cf-row { display: flex; flex-direction: column; gap: 7px; }
.ncms-cf-row label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.ncms-cf input, .ncms-cf select, .ncms-cf textarea { font: 300 16px/1.4 var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--line);
  border-radius: 3px; padding: 11px 12px; width: 100%; box-sizing: border-box; }
.ncms-cf textarea { resize: vertical; min-height: 120px; }
.ncms-cf input:focus, .ncms-cf select:focus, .ncms-cf textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.ncms-cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ncms-cf-small { margin: 0; font-size: 13px; line-height: 1.5; }
.ncms-cf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ncms-cf .btn { border: 0; cursor: pointer; }
.ncms-cf .btn:disabled { opacity: .5; cursor: default; }
.ncms-cf-status { margin: 0; font-size: 14px; color: var(--soft); flex: 1 1 200px; }
.ncms-cf-status.bad { color: var(--ink); }
@media (max-width: 767px) { .ncms-cf { padding: 22px 20px 24px; } .ncms-cf-title { font-size: 32px; } }