/* MechanicWithIQ — base: reset, page chrome, shared media language, focus states, fallbacks. */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* clip (not hidden): hidden would create a scroll container on body and break the sticky stage */
html, body { overflow-x: clip; }
body {
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- skip link (visually hidden until focused) ---------- */
.skip-link {
  position: fixed; top: 10px; left: var(--margin); z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--base);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-300%); transition: transform var(--dur-micro) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- persistent compact header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  opacity: 0; /* motion.js owns opacity via the timeline */
  transition: color var(--dur-standard) var(--ease-out);
  pointer-events: none;
}
.hdr.on-dark { color: #F1F0EC; }
.hdr-word { font-weight: 700; font-family: var(--font-display); font-size: 12px; }
.hdr-nav { display: flex; gap: 26px; align-items: center; pointer-events: none; }
.hdr.ready .hdr-nav { pointer-events: auto; }
.hdr-nav button {
  background: none; border: none; padding: 6px 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.hdr-nav button:hover, .hdr-nav button:focus-visible { border-bottom-color: currentColor; }
.hdr-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hdr-nav button.placeholder { opacity: 0.45; cursor: default; }
.hdr-nav button.placeholder:hover, .hdr-nav button.placeholder:focus-visible { border-bottom-color: transparent; outline: none; }

/* ---------- shared media chrome ---------- */
.media { position: relative; background: var(--media-bg); overflow: hidden; border: 1px solid var(--hair); }
.media .block { position: absolute; inset: 0; background: linear-gradient(135deg, #C2C2BD 0%, #A6A6A1 100%); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* authentic colors — no filter */
/* audit variant only (?audit=1): QA captions for debug artifacts — the production candidate carries none */
body.audit .media figcaption {
  position: absolute; left: 16px; bottom: 14px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFFFFF; background: rgba(0, 0, 0, 0.55); padding: 5px 9px;
}
.kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.kicker b { color: var(--accent); }
.view {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 5px; width: fit-content;
}
.view[aria-disabled="true"] { cursor: default; }
.view:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.layer-bottombar {
  height: 64px; flex: none; border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.layer-bottombar .right { color: var(--muted); }

/* ---------- no-JS / failed-JS fallback: everything stacked, all content visible ---------- */
html:not(.js) .journey, html.motion-failed .journey { height: auto; }
html:not(.js) .stage, html.motion-failed .stage { position: static; height: auto; overflow: visible; }
html:not(.js) .layer, html.motion-failed .layer { position: static; opacity: 1 !important; transform: none !important; visibility: visible !important; }
html:not(.js) .hdr, html.motion-failed .hdr { position: static; opacity: 1 !important; pointer-events: auto; }
html:not(.js) .hdr-nav, html.motion-failed .hdr-nav { pointer-events: auto; }
html:not(.js) .l-bespalove, html.motion-failed .l-bespalove { min-height: 100vh; position: relative; }
html:not(.js) .plane, html.motion-failed .plane { position: absolute; }
html:not(.js) .l-elite, html.motion-failed .l-elite { min-height: 100vh; }
html:not(.js) .index-view, html.motion-failed .index-view { height: auto; min-height: 100vh; padding-bottom: 64px; }
html:not(.js) .l-index, html.motion-failed .l-index { display: none; }
html.motion-failed [data-reveal] { opacity: 1 !important; transform: none !important; }