/* pages.css: what design 013 adds on top of the site's own css
   (arcaeon.css) and the approved ring and theme css (rings.css, theme.css).
   Written by design/build_live.py from design/pages.py. The live front
   page's design leads: every page uses its sections (body.p-home). Site
   tokens only, no new colours. */
.tag.dated{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.tools-table td,.tools-table th{vertical-align:top}
.tools-table code{white-space:nowrap}
.verdicts dt{font:600 var(--fs-3)/1.3 var(--font-display);color:var(--ink);margin-top:var(--sp-2)}
.verdicts dd{margin:var(--sp-h) 0 0;color:var(--ink-soft)}
.never{margin:var(--sp-1) 0 0;padding-left:1.2em}
.never li{margin:var(--sp-h) 0}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
body{overflow-x:clip}

/* the live sections, on every page: cards sit a touch see-through over the layers */
:where(.p-home) .sec .card,:where(.p-home) .sec .page-list li,:where(.p-home) .sec .how,:where(.p-home) .sec .device{background:color-mix(in srgb,var(--navy) 90%,transparent)}
:where(.p-home) .sec.chapter{background:var(--navy)}
:where(.p-home) .sec.chapter .veil{background:linear-gradient(90deg,color-mix(in srgb,var(--navy) 90%,transparent) 0%,color-mix(in srgb,var(--navy) 62%,transparent) 55%,color-mix(in srgb,var(--navy) 30%,transparent) 100%),linear-gradient(180deg,var(--navy) 0,transparent 22%,transparent 78%,var(--navy) 100%)}
:where(.p-home) .hero h1,:where(.p-home) .hero .lede{text-shadow:0 2px 22px color-mix(in srgb,var(--navy-deep) 70%,transparent)}
:where(.p-home) .photo.lamp{filter:none}
:where(.p-home) .photo.lamp.on{opacity:.75}
/* words on the right side too (the pricing ring key): a heavier veil */
:where(.p-home) .hero:has(.ring-key) .veil{background:linear-gradient(90deg,color-mix(in srgb,var(--navy-deep) 90%,transparent) 0%,color-mix(in srgb,var(--navy-deep) 72%,transparent) 55%,color-mix(in srgb,var(--navy-deep) 62%,transparent) 100%),linear-gradient(180deg,var(--navy-deep) 0,transparent 22%,transparent 78%,var(--navy-deep) 100%)}
/* the moving chain as a strip between sections (as on the live why page) */
.gfx-strip{height:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* light theme: paper veil, paler photographs */
:root[data-theme="light"] :where(.p-home) .photo.on{opacity:.18;filter:grayscale(.75) sepia(.12) contrast(.9) brightness(1.08)}
:root[data-theme="light"] :where(.p-home) .hero .photo.on{opacity:.24}
:root[data-theme="light"] :where(.p-home) .photo.lamp.on{opacity:.4;filter:none}
:root[data-theme="light"] :where(.p-home) .hero h1,:root[data-theme="light"] :where(.p-home) .hero .lede{text-shadow:0 1px 18px color-mix(in srgb,var(--navy-deep) 85%,transparent)}

/* motion, only for people who have not asked for less (the live script
   does the same for the canvases, the photos and the fade-ins) */
.card,.page-list li,.device{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
@media (prefers-reduced-motion:no-preference){
  .ring.ring-draw.s-green .r-arc,.ring.ring-draw .r-in:not(.open){animation-name:ring-fill}
  .ring-enter .r-arc{animation:ring-swing 1.3s cubic-bezier(.2,.7,.2,1) .3s both}
  .ring-enter .r-in{animation:ring-swing 1.1s cubic-bezier(.2,.7,.2,1) 1s both}
  .ring-enter .r-badge{animation:ring-pop .35s ease-out 1.9s both}
  .site-head .brand-ring .m-in{animation:arc-blink 3.4s steps(1,end) infinite}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover,.page-list li:hover,.device:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
  .btn{transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
  .btn:hover{transform:translateY(-1px)}
}
@keyframes ring-fill{from{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}
@keyframes ring-swing{from{opacity:0;transform:rotate(-250deg)}to{opacity:1;transform:rotate(-90deg)}}

/* ---------- the live front page's parts ----------
   Drawn backgrounds copied from the live index.html (svg.art), the live
   canvases rebuilt as SVG, and the live home's section styles, re-scoped
   from .p-home to lv- names so nothing else on the site shifts. Tokens only. */
.lay-bg>.art{display:block;width:100%;height:100%}
.lay-bg>.art.fig{inset:auto;top:5%;right:2%;left:auto;height:90%;width:auto;max-width:none}
.lay-veil.soft{background:linear-gradient(180deg,var(--lay-ground) 0,transparent 20%,transparent 80%,var(--lay-ground) 100%)}
.lay-photo.lamp{filter:none;opacity:.7}
:root[data-theme="light"] .lay-photo.lamp{opacity:.4}
.k-ink{stroke:var(--ink)}.k-gold{stroke:var(--gold)}.k-bad{stroke:var(--bad)}.k-ok{stroke:var(--ok)}.k-dim{stroke:var(--ink-dim)}
.f-ink{fill:var(--ink)}.f-gold{fill:var(--gold)}.f-bad{fill:var(--bad)}.f-ok{fill:var(--ok)}.f-dim{fill:var(--ink-dim)}
.f-ground{fill:var(--navy-deep)}.f-navy{fill:var(--navy)}.f-none{fill:none}
.lv-mono{font-family:var(--font-mono)}
.lv-gfx{display:block;width:100%;height:auto}
.lv-reel-meta{margin-top:var(--sp-2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1);font:400 var(--fs-1)/1.3 var(--font-mono);letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.gfx-reels{height:clamp(200px,30vw,320px)}
.lv-reels-box{margin:var(--sp-3) 0 var(--sp-3);max-width:34em}
.gfx-chain{height:132px;margin:var(--sp-4) 0}
.gfx-door{height:78px}
.lv-spot video{display:block;width:100%;max-width:960px;aspect-ratio:16/9;background:#0b1220;border:1px solid var(--line);border-radius:10px}
.lv-grid2{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:900px){.lv-grid2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.lv-say{font:500 var(--fs-4)/1.35 var(--font-display);color:var(--gold);margin:0 0 var(--sp-2)}
.lv-install{position:relative;max-width:30em;margin:var(--sp-3) 0 var(--sp-2)}
.lv-install pre{margin:0;font-size:var(--fs-3);white-space:pre-wrap}
.lv-install .ok-line{color:var(--ok)}
.lv-fine{color:var(--ink-soft);font-size:var(--fs-2);margin:0 0 var(--sp-2)}
.lv-lead{color:var(--ink-soft)}
.lv-verdicts{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.lv-verdict{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin:0;color:var(--ink-soft);font-size:var(--fs-2)}
.lv-verdict code{color:var(--ink)}
.lv-verdict .chip{flex:none}
.lv-swap{margin:0;color:var(--ink-dim);font-size:var(--fs-2)}
.lv-punch{font:500 var(--fs-5)/1.3 var(--font-display);color:var(--ink);max-width:24em;margin:0}
.lv-verbs{list-style:none;margin:var(--sp-3) 0 var(--sp-2);padding:0;display:flex;flex-wrap:wrap;gap:0 .32em;font:500 var(--fs-7,clamp(2.5rem,1rem + 6.4vw,5.25rem))/1.02 var(--font-display);letter-spacing:-.035em;color:var(--ink)}
.lv-verbs li{font:inherit;letter-spacing:inherit;margin:0}
.lv-verbs li::after{content:".";color:var(--gold)}
.lv-go{display:inline-flex;align-items:center;min-height:var(--touch)}
.lv-strip{display:block;position:relative;height:56px;width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lv-strip.thin{height:44px}
.lv-strip>svg{display:block;width:100%;height:100%}
.lv-rule{border-left:3px solid var(--gold);padding-left:var(--sp-3)}
.lv-big{font:500 var(--fs-5)/1.25 var(--font-display);color:var(--ink);max-width:20em}
.lv-quote{margin:var(--sp-4) 0 0;font:400 var(--fs-6)/1.14 var(--font-display);letter-spacing:-.025em;max-width:17em;color:var(--ink)}
.lv-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.lv-door{position:relative;display:flex;flex-direction:column}
.lv-door .frame-body{flex:1;display:flex;flex-direction:column;gap:var(--sp-2);background:color-mix(in srgb,var(--navy) 88%,transparent)}
.lv-door h3,.lv-door p{margin:0}
.lv-door p{color:var(--ink-soft)}
.lv-door .btn{margin-top:auto;align-self:flex-start}
.lv-still{margin:0}
.lv-still img{display:block;width:100%;max-width:960px;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:10px;background:var(--navy-deep)}
.lv-chainframe{position:relative;margin:var(--sp-3) 0}
.lv-chainframe .gfx-chain{margin:0}
.lv-diagram{margin:var(--sp-3) 0 0;overflow-x:auto}
.lv-diagram svg{display:block;width:100%;min-width:640px;height:auto}
.lv-dg-t{font:600 16px var(--font-display);fill:var(--ink)}
.lv-dg-s{font:400 12px var(--font-mono);fill:var(--ink-soft)}
.foot-credit{margin:var(--sp-1) 0 0;color:var(--ink-dim);font-size:var(--fs-1)}
@media (max-width:719px){
  .lay-bg>.art.fig{top:8%;height:84%;right:-30%}
  .lv-door .btn{align-self:stretch}
  .lv-install pre{font-size:var(--fs-2)}
}
@media (prefers-reduced-motion:no-preference){
  .mv-ledger{animation:arc-ledger 30s linear infinite}
  .mv-chain{animation:arc-chain 9s linear infinite}
  .mv-ribbon{animation:arc-ribbon 10s linear infinite}
  .mv-turn{transform-box:fill-box;transform-origin:50% 50%;animation:arc-turn 140s linear infinite}
  .mv-dial{transform-box:fill-box;transform-origin:50% 50%;animation:arc-turn 240s linear infinite reverse}
  .mv-sway{transform-box:fill-box;transform-origin:50% 0;animation:arc-sway 9s ease-in-out infinite alternate}
}