/* Copied from design/claude-design-handoff/components/bundle.css (2026-09-27). Only change: the Google Fonts @import moved to a <link> in each page head. Keep in sync with the handoff; put site-specific rules in site.css. */

/* ULTIMA — shared component styles. Every colour, space and radius is a token from tokens.css. */
:root {
  --dur-1: 120ms;   /* hover, press, colour changes */
  --dur-2: 240ms;   /* menus, reveals */
  --dur-3: 420ms;   /* page transition, full */
  --dur-idle: 4200ms; /* companion breathing loop */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-step: steps(3, end); /* the "pixel" ease for corner reveals and arrow nudges */
  --gutter: var(--space-12);
  --measure: 68ch;
}

.u-root { margin: 0; background: var(--bg-000); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.u-root *, .u-root *::before, .u-root *::after { box-sizing: border-box; }
:where(.u-root) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg-000); }
:where(.u-root) a { color: inherit; }
.u-root [hidden] { display: none !important; }

/* ── Pixel accents ───────────────────────────── */
.u-pixel { font-family: var(--font-pixel); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.u-jp { font-family: var(--font-jp); font-size: 15px; line-height: 22px; letter-spacing: .08em; color: var(--lamp-ink); }
.u-jp small { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--ink-muted); margin-left: var(--space-2); }
.u-meta { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); letter-spacing: .02em; }
.u-icon { width: 16px; height: 16px; flex: none; shape-rendering: crispEdges; fill: currentColor; }
.u-icon--lg { width: 24px; height: 24px; }

.u-chapter { display: flex; align-items: center; gap: var(--space-3); color: var(--magenta); }
.u-chapter::before { content: ""; width: 8px; height: 8px; background: var(--magenta); box-shadow: var(--glow-window); }
.u-chapter b { font-weight: 400; color: var(--ink-muted); }

.u-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-0); color: var(--violet); background: transparent; }
.u-chip--lamp { color: var(--lamp-ink); border-color: var(--lamp-ink); }

/* Pixel corners: four 12×4 L-brackets drawn with gradients. Set --pc for the colour. */
.u-pcorners { --pc: var(--magenta); --pl: 12px; --pt: 4px; position: relative; }
.u-pcorners::after { content: ""; position: absolute; inset: -6px; pointer-events: none; opacity: 0; transition: opacity var(--dur-1) var(--ease-step), inset var(--dur-2) var(--ease-step);
  background:
    linear-gradient(var(--pc) 0 0) top left / var(--pl) var(--pt), linear-gradient(var(--pc) 0 0) top left / var(--pt) var(--pl),
    linear-gradient(var(--pc) 0 0) top right / var(--pl) var(--pt), linear-gradient(var(--pc) 0 0) top right / var(--pt) var(--pl),
    linear-gradient(var(--pc) 0 0) bottom left / var(--pl) var(--pt), linear-gradient(var(--pc) 0 0) bottom left / var(--pt) var(--pl),
    linear-gradient(var(--pc) 0 0) bottom right / var(--pl) var(--pt), linear-gradient(var(--pc) 0 0) bottom right / var(--pt) var(--pl);
  background-repeat: no-repeat; }
.u-pcorners.is-on::after, .u-pcorners:hover::after, .u-pcorners:focus-within::after { opacity: 1; inset: -10px; }

.u-dither { height: 8px; background: conic-gradient(var(--rose-700) 25%, transparent 0 50%, var(--rose-700) 0 75%, transparent 0) 0 0 / 8px 8px; opacity: .8; }

/* ── Buttons ─────────────────────────────────── */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1); }
.u-btn .u-icon { transition: transform var(--dur-1) var(--ease-step); }
.u-btn:hover .u-icon--nudge { transform: translateX(4px); }
.u-btn:active { transform: translateY(1px); }
.u-btn--primary { background: var(--lamp); color: var(--on-lamp); }
.u-btn--primary:hover { box-shadow: var(--glow-lamp); }
.u-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.u-btn--ghost:hover { border-color: var(--magenta); background: var(--bg-200); }
.u-btn--link { min-height: 44px; padding: var(--space-2) 0; background: none; color: var(--magenta); border-radius: var(--radius-0); }
.u-btn--link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.u-btn[disabled], .u-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.u-btn.is-ok { background: var(--bg-200); color: var(--ok); border-color: var(--ok); }

/* ── Nav ─────────────────────────────────────── */
.u-nav { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-6); height: 72px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg-000) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.u-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 16px/20px var(--font-pixel); letter-spacing: .04em; color: var(--ink); text-decoration: none; min-height: 44px; }
.u-wordmark i { width: 12px; height: 12px; background: var(--lamp); box-shadow: 4px 4px 0 var(--magenta); }
.u-nav__links { display: flex; gap: var(--space-2); margin-left: auto; }
.u-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font: 600 15px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; transition: color var(--dur-1), background-color var(--dur-1); }
.u-nav__link:hover { color: var(--ink); background: var(--bg-100); }
.u-nav__link[aria-current="page"] { color: var(--ink); }
.u-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; background: var(--magenta); box-shadow: var(--glow-window); }
.u-nav__menu { display: none; margin-left: auto; }

/* ── Cards ───────────────────────────────────── */
.u-card { display: flex; flex-direction: column; background: var(--bg-100); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-1); }
.u-card:hover, .u-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.u-card__art { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; overflow: hidden; background: var(--bg-200); }
.u-card__art svg { display: block; width: 100%; height: 100%; }
.u-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.u-card__title { margin: 0; font: 600 32px/1.1 var(--font-display); letter-spacing: -.01em; }
.u-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--magenta); font-weight: 600; margin-top: var(--space-2); }
.u-card:hover .u-card__cta .u-icon { transform: translateX(4px); transition: transform var(--dur-1) var(--ease-step); }

/* ── Fields ──────────────────────────────────── */
.u-field { display: flex; flex-direction: column; gap: var(--space-2); }
.u-field label { font-weight: 600; font-size: 14px; }
.u-field input, .u-field textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--bg-100); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: 400 16px/24px var(--font-sans); transition: border-color var(--dur-1), background-color var(--dur-1); }
.u-field textarea { min-height: 140px; resize: vertical; }
.u-field input::placeholder, .u-field textarea::placeholder { color: var(--ink-muted); opacity: .8; }
.u-field input:hover, .u-field textarea:hover { background: var(--bg-200); }
.u-field input:focus-visible, .u-field textarea:focus-visible { border-color: var(--focus-ring); }
.u-field.is-error input, .u-field.is-error textarea { border-color: var(--danger); border-width: 2px; }
.u-field__msg { display: none; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--danger); }
.u-field.is-error .u-field__msg { display: flex; }
.u-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid currentColor; font-size: 14px; line-height: 22px; }
.u-note--ok { color: var(--ok); }

/* ── Companion stage (Niko mount) ───────────── */
.u-stage { position: relative; z-index: var(--z-companion); aspect-ratio: 4 / 5; border-radius: var(--radius-lg); pointer-events: none; }
.u-stage__glow { position: absolute; left: 50%; top: 62%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,212,107,.42), rgba(255,154,60,.14) 45%, transparent 70%); }
.u-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.u-stage__tag { position: absolute; left: var(--space-4); top: var(--space-4); color: var(--ink-muted); }
.u-stage__caption { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: none; font-size: 13px; line-height: 18px; color: var(--ink-muted); padding: var(--space-2) var(--space-3); background: color-mix(in srgb, var(--bg-000) 82%, transparent); }
.u-stage[data-state="fallback"] .u-stage__caption, .u-stage[data-state="loading"] .u-stage__caption { display: block; }
.u-stage .proxy-line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 5; }
.u-stage .proxy-fill { fill: var(--bg-200); opacity: .85; }
.u-stage .proxy-eye { fill: var(--ink); }
.u-stage .proxy-orb { fill: var(--lamp); }
.u-stage .proxy-orb-hi { fill: var(--ink); opacity: .7; }
.u-stage .proxy-grid { stroke: var(--line); stroke-width: 1; }
.u-stage[data-state="live"] .breathe { animation: u-breathe var(--dur-idle) ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }
.u-stage[data-state="live"] .proxy-orb { animation: u-flicker 3.1s steps(1) infinite; }
.u-stage[data-state="loading"] svg { opacity: .25; }
.u-stage[data-state="fallback"] .proxy-line { stroke-dasharray: none; }
@keyframes u-breathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.012); } }
@keyframes u-flicker { 0%,100% { opacity: 1; } 47% { opacity: .9; } 49% { opacity: 1; } 83% { opacity: .94; } }

/* ── Media facade ───────────────────────────── */
.u-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-200); border: 1px solid var(--line); }
.u-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-media__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.u-media__label { position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ink); }
.u-media__state { position: absolute; inset: 0; display: none; place-content: center; text-align: center; gap: var(--space-2); padding: var(--space-6); background: color-mix(in srgb, var(--bg-000) 88%, transparent); }
.u-media.is-playing .u-media__state { display: grid; }
.u-media.is-playing .u-media__play { display: none; }

/* ── Placeholder (content that must come from the owner's files) ── */
.u-placeholder { padding: var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); }
.u-placeholder .u-pixel { color: var(--lamp-ink); display: block; margin-bottom: var(--space-2); }

/* ── Pixel-dissolve transition overlay ──────── */
.u-wipe { position: absolute; inset: 0; z-index: var(--z-transition); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); pointer-events: none; }
.u-wipe span { background: var(--bg-000); opacity: 0; }
.u-wipe span:nth-child(7n) { background: var(--rose-700); }
.u-wipe span:nth-child(11n) { background: var(--bg-200); }
.u-wipe.is-in span { opacity: 1; transition: opacity 60ms steps(1) var(--d, 0ms); }
.u-wipe.is-out span { opacity: 0; transition: opacity 60ms steps(1) var(--d, 0ms); }
.u-wipe.is-fade { background: var(--bg-000); opacity: 0; transition: opacity var(--dur-1); }
.u-wipe.is-fade.is-in { opacity: 1; }
.u-wipe.is-fade span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .u-stage .breathe, .u-stage .proxy-orb { animation: none !important; }
  .u-card, .u-btn, .u-pcorners::after { transition-duration: 1ms !important; }
  .u-card:hover { transform: none; }
}
.is-reduced .u-stage .breathe, .is-reduced .u-stage .proxy-orb { animation: none !important; }
.is-reduced .u-card, .is-reduced .u-btn, .is-reduced .u-pcorners::after { transition-duration: 1ms !important; }
.is-reduced .u-card:hover, .is-reduced .u-card:focus-visible { transform: none; }