/* ═══ ⛔⛔ THE CRAWLER-FALLBACK NAV MUST SURVIVE BEING SEEN ══════════════════════════════════════
   static-render-chrome.mjs writes a plain nav[aria-label=Primary] list into #site-header so a
   crawler running no JS still has navigation. On most properties the engine overwrites that mount
   at runtime, so no human ever sees the block and it needs no styling.
     ⛔ FOUR PROPERTIES NEVER FILL #site-header  - their extras script does
       not touch it. There the fallback IS the header, and it rendered as a raw bulleted list of blue
       underlined links in the top-left corner of the page.
     ⭐⭐ A FALLBACK THAT RENDERS RAW IS NOT A FALLBACK. It was invisible for as long as something
       always replaced it, which is exactly the condition that stops being true on the property you
       did not check. Styling it costs nothing where it is replaced and repairs it where it is not.
   ⚠️ Scoped to the fallback's own markup so it cannot touch a property's real styled header. */
#site-header nav[aria-label="Primary"] ul{list-style:none;display:flex;flex-wrap:wrap;
  align-items:center;gap:.35rem 1.15rem;margin:0;padding:0}
#site-header nav[aria-label="Primary"]{max-width:min(1320px,100% - 3rem);margin:0 auto;
  padding:1rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.15rem;
  border-bottom:1px solid var(--border,color-mix(in srgb,var(--text,#888) 18%,transparent))}
#site-header nav[aria-label="Primary"] a{text-decoration:none;font-size:.875rem;font-weight:500;
  color:color-mix(in srgb,var(--text,#3f3f46) 92%,transparent);transition:color .18s ease}
#site-header nav[aria-label="Primary"] a:hover,
#site-header nav[aria-label="Primary"] a:focus-visible{color:var(--text,#18181b)}
#site-header nav[aria-label="Primary"]>a{font-weight:750;font-family:var(--display,inherit);
  font-size:1.15rem;color:var(--text,#18181b);letter-spacing:-.01em;margin-right:auto;order:-1}
#site-header nav[aria-label="Primary"] h2[hidden]{display:none}
@media (prefers-reduced-motion: reduce){#site-header nav[aria-label="Primary"] a{transition:none}}

.arc-wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem 5rem;position:relative;z-index:1}
/* ⛔⛔ NO FALLBACK ON --paper, DELIBERATELY. A hardcoded #111014 here painted the whole viewport
   near-black on any property whose stylesheet does not declare the token, while body colour stayed
   the browser default black. Black text on a black page, measured on a live property: --paper
   UNSET, --text UNSET, ground rgb(17,16,20), body and h1 both rgb(0,0,0).
   ⭐⭐ A THEME IS A PAIR. A fallback that supplies the GROUND without the matching TEXT cannot be
     correct: it guesses one half of a two-part decision, and the halves have to agree. Twelve of
     fourteen properties declare both and render correctly; the two that declared neither were the
     two that broke. Line 27 of this file already states these tokens are consumed WITHOUT a
     fallback, and that contract exists so a missing token stays VISIBLE rather than masked.
   ⭐ With no fallback the declaration is dropped when --paper is unset, so the ground is
     transparent and the property's own body shows through. It fails toward the real theme instead
     of imposing one. The blurred hue orbs are children with their own gradients and still render.
   ⚠️ THE DURABLE FIX IS UPSTREAM: a property that ships archetype pages must declare the pair in
     the stylesheet those pages actually load, not merely somewhere in the property.
   ⛔ AND NOTE WHAT THIS COMMENT MAY NOT SAY: this file renders into EVERY property, so naming the
     property a defect was measured on ships a sibling's brand onto thirteen other companies'
     sites. The embed generator's sibling-leak canary caught precisely that here and refused to
     write. A COMMENT IN SHARED CODE IS SHIPPED CONTENT. */
.arc-ground{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--paper);--g1:var(--accent,#db2777);--g2:var(--accent,#8b5cf6);--g3:var(--secondary,#f59e0b)}
.arc-ground i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.5;will-change:transform}
.arc-ground i:nth-child(1){width:62vw;height:62vw;left:-16vw;top:-24vw;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--g1) 46%, transparent), transparent 62%);
  animation:arcDrift1 34s ease-in-out infinite}
.arc-ground i:nth-child(2){width:54vw;height:54vw;right:-14vw;top:-10vw;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--g2) 42%, transparent), transparent 62%);
  animation:arcDrift2 44s ease-in-out infinite}
.arc-ground i:nth-child(3){width:48vw;height:48vw;left:26vw;bottom:-26vw;opacity:.32;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--g3) 34%, transparent), transparent 64%);
  animation:arcDrift3 52s ease-in-out infinite}
@keyframes arcDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,4vh,0) scale(1.12)}}
@keyframes arcDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-6vw,6vh,0) scale(.94)}}
@keyframes arcDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5vw,-5vh,0) scale(1.1)}}
.arc-ground::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(color-mix(in srgb, var(--text,#fff) 7%, transparent) .5px, transparent .5px),
                   radial-gradient(color-mix(in srgb, var(--text,#fff) 5%, transparent) .5px, transparent .5px);
  background-size:3px 3px, 7px 7px;background-position:0 0, 2px 3px}
.arc-ground::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, transparent 42%, color-mix(in srgb, var(--paper) 82%, transparent) 100%)}
.arc-wrap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:linear-gradient(color-mix(in srgb, var(--border,#35313b) 62%, transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb, var(--border,#35313b) 62%, transparent) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(64% 46% at 50% 0%, #000 0%, transparent 78%);
          mask-image:radial-gradient(64% 46% at 50% 0%, #000 0%, transparent 78%)}
.arc-crumb{display:flex;gap:.5rem;align-items:center;padding:1.25rem 0 0;font-size:.78rem;
  color:color-mix(in srgb,var(--text,#a1a1aa) 62%,transparent);font-family:var(--mono,ui-monospace,monospace)}
.arc-crumb a{color:inherit;text-decoration:none;transition:color .16s ease}
.arc-crumb a:hover,.arc-crumb a:focus-visible{color:var(--text,#fafafa)}
.arc-crumb span[aria-current]{color:var(--text,#fafafa)}
.arc-hero{padding:2.6rem 0 2rem;text-align:center;position:relative}
.arc-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono,ui-monospace,monospace);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text,#a1a1aa) 66%,transparent);
  padding:.34rem .78rem;border:1px solid var(--border,#27272a);border-radius:999px;margin-bottom:1.1rem}
.arc-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent,#e11d63);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#e11d63) 22%, transparent);
  animation:arcPulse 2.8s ease-in-out infinite}
@keyframes arcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.arc-hero h1{font-family:var(--display,inherit);font-size:clamp(2.05rem,4.6vw,3.15rem);line-height:1.07;
  margin:0 0 .85rem;letter-spacing:-.015em}
.arc-lede{max-width:60ch;margin:0 auto 1.6rem;color:color-mix(in srgb,var(--text,#a1a1aa) 76%,transparent);
  font-size:1.07rem;line-height:1.62}
.arc-jump{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.arc-jump a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;
  white-space:nowrap;border:1px solid var(--border,#27272a);font-size:.85rem;font-weight:650;
  text-decoration:none;color:var(--text,#fafafa);
  transition:border-color .18s ease, transform .18s ease, background .18s ease}
.arc-jump a svg{width:15px;height:15px;flex:0 0 auto}
.arc-jump a:hover,.arc-jump a:focus-visible{border-color:var(--pill,var(--accent,#e11d63));transform:translateY(-2px);
  background:color-mix(in srgb, var(--pill,var(--accent,#e11d63)) 10%, transparent)}
.arc-jump a[data-k="a"]{--pill:var(--accent,#e11d63)}
.arc-jump a[data-k="b"]{--pill:var(--secondary,#22d3ee)}
.arc-jump a[data-k="c"]{--pill:var(--accent,#8b5cf6)}
.arc-jump .n{font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;color:var(--pill,var(--accent,#e11d63))}
.arc-sec{margin:3.4rem 0 0;scroll-margin-top:5rem}
.arc-sec[data-h="a"]{--hue:var(--accent,#e11d63)}
.arc-sec[data-h="b"]{--hue:var(--secondary,#22d3ee)}
.arc-sec[data-h="c"]{--hue:var(--accent,#8b5cf6)}
.arc-sec[data-h="n"]{--hue:color-mix(in srgb,var(--text,#a1a1aa) 62%,transparent)}
.arc-sec-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.35rem}
.arc-sec-ico{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--hue);
  border:1px solid color-mix(in srgb, var(--hue) 34%, transparent);
  background:color-mix(in srgb, var(--hue) 11%, transparent)}
.arc-sec-ico svg{width:16px;height:16px}
.arc-sec h2{font-family:var(--display,inherit);font-size:1.55rem;margin:0;letter-spacing:-.01em}
.arc-count{font-family:var(--mono,ui-monospace,monospace);font-size:.7rem;color:var(--hue);
  border:1px solid color-mix(in srgb, var(--hue) 30%, transparent);border-radius:999px;padding:.12rem .5rem}
.arc-blurb{color:color-mix(in srgb,var(--text,#a1a1aa) 74%,transparent);margin:0 0 1.35rem;max-width:68ch;line-height:1.58}
.arc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:1rem}
.arc-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.2rem 1.05rem;
  border:1px solid var(--border,#27272a);border-radius:var(--radius,14px);text-decoration:none;color:inherit;
  background:color-mix(in srgb,var(--text,#fff) 4%, transparent);overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .2s ease}
.arc-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .22s ease;
  background:radial-gradient(22rem 12rem at 15% -20%, color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 16%, transparent), transparent 70%)}
.arc-card:hover,.arc-card:focus-visible{transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 55%, var(--border,#27272a))}
.arc-card:hover::before,.arc-card:focus-visible::before{opacity:1}
.arc-ico{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  color:var(--hue,var(--accent,#e11d63));
  border:1px solid color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 28%, transparent);
  background:color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 10%, transparent);
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.arc-ico svg{width:17px;height:17px}
/* ⛔ EVERY ICON SLOT CARRIES AN EXPLICIT BOX, and a raster mark needs one just as much as an SVG:
   a favicon's intrinsic size is whatever the vendor exported, from 16px to 512px. */
/* ⚠️ A BRAND MARK NEEDS TO BE BIG ENOUGH TO BE RECOGNISED, WHICH IS LARGER THAN AN ICON NEEDS TO BE.
   At the generic icon's 30px tile / 20px glyph the marks rendered as unreadable specks: present in
   the DOM, correct on inspection, and communicating nothing at a glance. A logo that cannot be
   identified without zooming is doing the placeholder's job while costing a network request. */
.arc-mark{width:40px;height:40px;border-radius:11px;
  background:color-mix(in srgb,var(--text,#fff) 8%, transparent);
  border-color:color-mix(in srgb,var(--text,#fff) 14%, transparent);overflow:hidden}
.arc-mark img{width:27px;height:27px;object-fit:contain;display:block}
.arc-card:hover .arc-ico{transform:rotate(-6deg) scale(1.06)}
.arc-card h3{margin:0;font-size:1.02rem;line-height:1.34;letter-spacing:-.005em}
.arc-card p{margin:0;font-size:.875rem;color:color-mix(in srgb,var(--text,#a1a1aa) 74%,transparent);line-height:1.52}
.arc-go{margin-top:auto;padding-top:.35rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:750;color:var(--hue,var(--accent,#e11d63))}
.arc-arw{display:inline-flex;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.arc-arw svg{width:14px;height:14px}
.arc-card:hover .arc-arw{transform:translateX(4px)}
.arc-empty{color:color-mix(in srgb,var(--text,#71717a) 55%,transparent);font-style:italic}
/* ═══ A SECOND ALTITUDE: HEADLINE FIGURES, AND PER-CARD METADATA ═════════════════════════════════
   ⭐ A card grid is ONE altitude and it answers "what is here". A citer arrives with two more
     questions before they will use anything: HOW MUCH is here, and IS THIS ONE BIG ENOUGH. The stat
     row answers the first at a glance and the meta list answers the second per card, without either
     of them stealing the space the description needs.
   ⚠️ INFORMATION-DESIGN: a quantity meant to be COMPARED must be spatial. Record counts sit in a
     consistent slot in every card so the eye can rank them, rather than being buried in prose where
     comparing two means reading two sentences. */
.arc-stats{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;list-style:none;
  margin:0 0 1.5rem;padding:0;font-family:var(--mono,ui-monospace,monospace);font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text,#a1a1aa) 58%,transparent)}
.arc-stats b{display:block;font-family:var(--display,inherit);font-size:1.55rem;font-weight:750;
  letter-spacing:-.02em;text-transform:none;color:var(--accent,#e11d63);line-height:1.1}
.arc-meta{display:flex;flex-wrap:wrap;gap:.3rem .4rem;list-style:none;margin:.15rem 0 0;padding:0}
.arc-meta li{font-family:var(--mono,ui-monospace,monospace);font-size:.68rem;letter-spacing:.02em;
  padding:.16rem .5rem;border-radius:999px;
  color:color-mix(in srgb,var(--text,#a1a1aa) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--border,#27272a) 90%,transparent);
  background:color-mix(in srgb,var(--text,#fff) 3%,transparent)}
/* the record count leads, so it reads as the number that matters */
.arc-meta li:first-child{color:var(--hue,var(--accent,#e11d63));
  border-color:color-mix(in srgb,var(--hue,var(--accent,#e11d63)) 38%,transparent)}
.arc-links{margin:.15rem 0 0;font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;
  color:color-mix(in srgb,var(--text,#a1a1aa) 50%,transparent)}
.arc-links a{color:color-mix(in srgb,var(--text,#a1a1aa) 78%,transparent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--hue,var(--accent,#e11d63)) 40%,transparent);
  transition:color .18s ease,border-color .18s ease}
.arc-links a:hover{color:var(--hue,var(--accent,#e11d63));border-color:var(--hue,var(--accent,#e11d63))}
.arc-data h3{margin-bottom:.1rem}
@media(max-width:640px){.arc-stats{gap:1.1rem}.arc-stats b{font-size:1.3rem}}

/* An embed card is a CARD, not a link: it must not lift or chase the cursor like one. */
.arc-embed{cursor:default}
.arc-embed:hover{transform:none}
.arc-embed:hover .arc-ico{transform:none}
.arc-embed-act{margin-top:auto;padding-top:.55rem;display:flex;flex-direction:column;gap:.55rem}
.arc-embed .arc-go{padding-top:0;width:max-content;text-decoration:none}
.arc-embed .arc-go:hover .arc-arw{transform:translateX(4px)}
.arc-snip summary{cursor:pointer;font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;list-style:none;
  color:color-mix(in srgb,var(--text,#a1a1aa) 66%,transparent);
  border:1px solid var(--border,#27272a);border-radius:999px;padding:.32rem .72rem;width:max-content;
  transition:border-color .18s ease,color .18s ease}
.arc-snip summary::-webkit-details-marker{display:none}
.arc-snip summary:hover,.arc-snip[open] summary{color:var(--text,#fafafa);
  border-color:color-mix(in srgb,var(--hue,var(--accent,#e11d63)) 55%,var(--border,#27272a))}
.arc-snip pre{margin:.6rem 0 .5rem;padding:.7rem .8rem;border-radius:10px;overflow-x:auto;
  background:color-mix(in srgb,var(--text,#000) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--border,#27272a) 80%,transparent)}
.arc-snip code{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;line-height:1.55;
  white-space:pre;color:color-mix(in srgb,var(--text,#a1a1aa) 88%,transparent)}
.arc-copy{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;cursor:pointer;
  padding:.34rem .8rem;border-radius:999px;border:1px solid transparent;color:var(--paper,#111014);
  background:var(--hue,var(--accent,#e11d63));font-weight:700;
  transition:opacity .18s ease,transform .18s ease}
.arc-copy:hover{opacity:.9;transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){.arc-copy,.arc-snip summary{transition:none}.arc-copy:hover{transform:none}}
.arc-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;margin:0}
.arc-def{position:relative;padding:1.15rem 1.2rem 1.1rem;border:1px solid var(--border,#27272a);
  border-radius:var(--radius,14px);background:color-mix(in srgb,var(--text,#fff) 4%, transparent);
  overflow:hidden;isolation:isolate;transition:border-color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1)}
.arc-def::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .22s ease;
  background:radial-gradient(20rem 11rem at 12% -22%, color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 15%, transparent), transparent 70%)}
.arc-def:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 52%, var(--border,#27272a))}
.arc-def:hover::before{opacity:1}
.arc-def dt,.arc-def>dt{display:flex;align-items:center;gap:.55rem;margin:0 0 .55rem;font-weight:750;
  font-size:1.01rem;letter-spacing:-.005em;line-height:1.3}
.arc-def-ico{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;
  color:var(--hue,var(--accent,#e11d63));
  border:1px solid color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 28%, transparent);
  background:color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 10%, transparent)}
.arc-def-ico svg{width:15px;height:15px}
.arc-def dd{margin:0}
.arc-def dd p{margin:0 0 .6rem;font-size:.885rem;line-height:1.62;
  color:color-mix(in srgb,var(--text,#a1a1aa) 80%,transparent)}
.arc-def .arc-go{padding-top:0;font-size:.78rem}
.arc-def:hover .arc-arw{transform:translateX(4px)}
/* A pair reads as a comparison, so the head gets the visual weight and "vs" recedes. */
.arc-pair dt em{font-style:normal;font-weight:500;opacity:.6;padding:0 .12rem}
.arc-pair .arc-def-t{line-height:1.35}
.arc-def:target{border-color:var(--hue,var(--accent,#e11d63));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hue,var(--accent,#e11d63)) 18%, transparent)}
@media (prefers-reduced-motion: reduce){.arc-def{transition:none}.arc-def:hover{transform:none}}
@media (prefers-reduced-motion: reduce){
  .arc-ground i{animation:none}
  .arc-card,.arc-ico,.arc-arw,.arc-jump a{transition:none}
  .arc-card:hover{transform:none}
  .arc-card:hover .arc-ico,.arc-card:hover .arc-arw{transform:none}
  .arc-eyebrow::before{animation:none}
}
@media(max-width:640px){.arc-hero{padding-top:2rem}.arc-wrap{padding-bottom:3rem}}

.arc-blurb a{color:color-mix(in srgb,var(--text,#a1a1aa) 82%,transparent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--hue,var(--accent,#e11d63)) 42%,transparent);transition:color .18s ease,border-color .18s ease}
.arc-blurb a:hover,.arc-blurb a:focus-visible{color:var(--hue,var(--accent,#e11d63));border-bottom-color:var(--hue,var(--accent,#e11d63))}