/* AXON's own styles (D-039): moved out of v2.css so that a live build, which leaves held projects out (data.py HELD), ships
   none of them; build.py's sync_axon() copies this file to /assets/css/axon.css and only the AXON page links it. */
/* ---- AXON (owner, D-037, 14 Oct 2026): the ring dial (the one level-3 interaction registered for AXON), its stage and its
   sections, in V2's own tokens. The MALINYX orange marks the dial's index only (set on the index's stroke in the markup). ---- */
.axon-stage{position:relative;aspect-ratio:var(--ar);width:min(100%,calc(66svh * var(--ar)));max-width:100%;margin-inline:auto;border-radius:clamp(22px,2.4vw,36px);overflow:hidden;
  background:#0b0d0c;--axon-fill:#1a1e20;--axon-line:#e8e0d2;touch-action:pan-y}
.axon-stage picture,.axon-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.axon-stage.axon-live .axon-poster{opacity:0}
.axon-host{position:absolute;inset:0}
.axon-host canvas{width:100%;height:100%;opacity:0;transition:opacity .6s ease;cursor:grab}
.axon-stage.axon-live .axon-host canvas{opacity:1}
.axon-stage.is-dragging canvas{cursor:grabbing}
.axon-host canvas:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;border-radius:inherit}
.axon-it{position:absolute;left:14px;bottom:12px;z-index:1}
.case-hero .axon-dial,.case-hero .axon-video{width:min(100%,calc(66svh * var(--ar,1.414)));margin-inline:auto}
.axon-dial{display:flex;align-items:center;gap:clamp(12px,2vw,28px);margin-top:12px;flex-wrap:wrap}
.axon-knob{width:clamp(168px,15vw,200px);flex:none;border-radius:50%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.axon-knob:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.axon-dial.is-turning .axon-knob{cursor:grabbing}
.axon-knob svg{width:100%;height:auto;overflow:visible}
.axon-knob .dr{fill:none;stroke:var(--line);stroke-width:1}
.axon-knob .arc{fill:none;stroke:var(--fg-m);stroke-width:1.5}
.axon-knob .tick{stroke:var(--fg);stroke-width:2}
.axon-knob .tl{fill:var(--fg-m);font:500 11px var(--sans);letter-spacing:.12em}
.axon-knob .ix{stroke-width:5;stroke-linecap:round}
.axon-knob .hub{fill:var(--fg-m)}
.axon-side{flex:1 1 200px;min-width:0}
.axon-side .ctrl{margin-top:0}
.axon-side .note{margin-top:12px}
.axon-help{color:var(--fg-m);margin-top:8px;text-transform:none;letter-spacing:.02em;font-size:12px}
.axon-video{display:none;margin-top:14px}
.axon-video video{width:100%;height:auto;border-radius:clamp(14px,1.6vw,22px);background:#0b0d0c}
.axon-video figcaption{font-size:13.5px;color:var(--fg-m);margin-top:8px}
.axon-stage.axon-off ~ .axon-video,html:not(.js) .axon-video{display:block}
.axon-dial.axon-off,html:not(.js) .axon-dial{display:none}
.hstatus{margin-top:12px;color:var(--fg-m);text-transform:none;letter-spacing:.04em;font-size:13px}
/* the origin (D-040): the designer's words beside the idea redrawn in 2026 (AI-assisted, labelled at the image) */
.axon-origin{align-items:center}
.axon-words{margin:0;max-width:30em}
.axon-words p{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,32px);line-height:1.28;letter-spacing:-.005em;text-wrap:pretty}
.axon-words footer{margin-top:16px;color:var(--fg-m)}
.axon-origin .fig,.axon-study .fig{margin:0}
/* the design study in Next (D-040): the starting point for the styling phase */
.axon-study{margin-top:14px;max-width:820px}
.axon-fig-chart{margin-top:clamp(24px,4vw,48px)}
.axon-fig-chart figcaption{font-size:13.5px;color:var(--fg-m);margin-top:12px}
.axon-fig-chart figcaption .lvl{margin-left:8px}
.axon-chart{width:100%;height:auto}
.axon-chart-m{display:none}
@media (max-width:700px){.axon-chart-d{display:none}.axon-chart-m{display:block}}
.axon-chart .hold{fill:var(--fg);fill-opacity:.045}
.axon-chart .ax{stroke:var(--fg);stroke-width:1}
.axon-chart .grid{stroke:var(--line);stroke-width:1}
.axon-chart .det{stroke:var(--fg-m);stroke-width:1;stroke-dasharray:3 4}
.axon-chart .curve{fill:none;stroke:var(--fg);stroke-width:2;stroke-linejoin:round}
.axon-chart .dot{fill:var(--fg)}
.axon-chart .lab{fill:var(--fg-m);font-family:var(--sans);font-variant-numeric:tabular-nums}
.axon-chart .nm{fill:var(--fg);font-family:var(--serif)}
.axon-ffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.6vw,36px);margin-top:clamp(24px,4vw,48px)}
.axon-ff{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:18px;align-content:start}
.axon-pf{display:grid;gap:6px}
.axon-pf p:last-child{color:var(--fg-m)}
.axon-num{font-family:var(--serif);font-size:clamp(32px,3.2vw,50px);line-height:1;letter-spacing:-.015em;font-variant-numeric:lining-nums}
.axon-ff .lvl{justify-self:start}
.axon-small{font-size:14px;color:var(--fg-m);max-width:65ch;margin-top:14px}
.axon-ev .axon-notmet th{font-weight:500}
.axon-next-h{margin-top:clamp(28px,4vw,48px)}
.axon-vs{display:grid;gap:22px}
.axon-v .lvl{margin-top:6px}
#exploded .fig,#hold .fig{margin:0}
/* AXON: the orange is the dial's index alone, so this page's own markers, focus rings and selection use the ink or ivory */
body:has([data-axon]),body.paper:has([data-axon]){--focus:var(--fg)}
body:has([data-axon]) details.more summary::before{color:var(--fg)}
body:has([data-axon]) ::selection{background:var(--fg);color:var(--bg)}
body:has([data-axon]) .case-hero .stg,body:has([data-axon]) #status .stg{--sc:var(--fg)}
@media (max-width:640px){.axon-ev td[data-l]::before{content:attr(data-l) " · ";color:var(--fg-m);font-size:12px;letter-spacing:.04em}}
/* ---- AXON fully dark (owner, D-042; D-044: "keep it fully dark with bright text"), on screen only: print keeps the site's
   own white sheet (v2.css PRINT-01). Only this page links this file, so no other page changes. The ground: ink from top to
   bottom even if a block ever asks for paper (the scroll observer in v2.js writes the body's ground inline, hence !important),
   the text ivory; the muted text, the captions and the viewer's lines a little brighter than the site's 64 %. ---- */
@media screen{
body:has([data-axon]),body.paper:has([data-axon]){--bg:var(--ink);--fg:var(--ivory);--fg-m:rgba(243,235,224,.78);--line:var(--line-l);
  background-color:var(--ink)!important;color:var(--ivory)}
body:has([data-axon]) .fig figcaption,body:has([data-axon]) .lb-count,body:has([data-axon]) .lb-type{color:var(--fg-m)}
/* the hero's glow and the next project's sun stay (the site's sunset glass) but dark: each keeps its own hue at a fraction of
   its light, whichever project comes next (the sun's own blur and saturation restated: filter is one property) */
body:has([data-axon]) .case-hero .sky .sun{filter:blur(6px) saturate(1.05) brightness(.34)}
body:has([data-axon]) .next .sky .sun{filter:blur(6px) saturate(1.05) brightness(.46)}
body:has([data-axon]) .case-hero .axon-help{text-shadow:0 1px 12px rgba(14,10,9,.85),0 0 2px rgba(14,10,9,.6)}
/* no ivory pills with dark text: the pressed pose, the solid button, the big cursor, the viewer's zoom and the skip link are
   drawn in outline; focus rings ivory (the orange is the dial's index alone) */
body:has([data-axon]) .case-hero .chip[aria-pressed="true"]{background:rgba(243,235,224,.14);color:var(--ivory);border-color:var(--ivory)}
body:has([data-axon]) .btn.solid,body:has([data-axon]) .btn.solid:hover{background:rgba(243,235,224,.2);color:var(--ivory);border:1.5px solid var(--ivory)}
body:has([data-axon]) .cursor.big{background:rgba(14,10,9,.8);color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(243,235,224,.55)}
body:has([data-axon]) .lb-zoom[aria-pressed="true"]{background:rgba(243,235,224,.14);color:var(--ivory)}
body:has([data-axon]) .skip{background:rgba(14,10,9,.92);color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(243,235,224,.55)}
body:has([data-axon]) .wcard:focus-visible{outline-color:var(--focus)}
/* the related cards keep their own pictures but do not flip to their light second picture on hover */
body:has([data-axon]) #related .pic img.alt{display:none}
}
@media print{html:has([data-axon]){color-scheme:light}body:has([data-axon]) .fig figcaption{color:#444}}
/* the desk stills (D-044): an ink frame while each loads (their top corners catch the window's light) */
.axon-stills .fig .ph{background:#0b0d0c}
.axon-stills figcaption{text-wrap:pretty}