/* AruKemist's Genre Alchemist palette and local font stacks. Homepage only. */
/* Paint to the screen edges; keep only content and controls inside safe areas. */
/* Preserve outgoing page paint while Safari samples a changing body colour. */
body { background-image:linear-gradient(var(--paper),var(--paper)); }
:root { --page-gutter:56px; --footer-space:40px; background-color:var(--paper); }
.wrap { width:min(calc(100% - 2 * max(var(--page-gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))),1328px); }
.site-header { margin-top:env(safe-area-inset-top,0px); }
.site-footer { padding-bottom:calc(var(--footer-space) + env(safe-area-inset-bottom,0px)); }
.skip-link:focus { top:max(12px,env(safe-area-inset-top,0px)); left:max(16px,env(safe-area-inset-left,0px)); }
@media(max-width:1000px) { :root { --page-gutter:32px; } }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:24px; }
.project-actions .project-link { margin-top:0; font-size:.875rem; }
.theme-switch { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:13px 18px; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:var(--paper); font:inherit; font-size:.875rem; cursor:pointer; }
.theme-switch:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.theme-switch[aria-disabled="true"] { cursor:wait; }
.theme-switch[hidden], .theme-dock[hidden], .theme-splash[hidden], .theme-wash[hidden] { display:none; }
.theme-switch svg { width:17px; height:20px; fill:currentColor; flex-shrink:0; }
/* A brief colour ripple hints at AruKemist without moving or resizing the button. */
#theme-enter { position:relative; isolation:isolate; overflow:hidden; }
#theme-enter :is(svg,span) { position:relative; z-index:1; }
#theme-enter.is-hinting { animation:aru-button-hint 2.5s ease-in-out both; }
#theme-enter.is-hinting::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:radial-gradient(ellipse at 15% 60%,rgba(130,247,255,.22),transparent 70%),linear-gradient(115deg,#0b2021,#061112); animation:aru-colour-ripple 2.5s ease-in-out both; }
#theme-enter.is-hinting::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 15%,rgba(130,247,255,.2) 35%,rgba(255,79,175,.19) 50%,rgba(201,255,85,.2) 65%,transparent 85%); animation:aru-colour-sweep 2.5s ease-in-out both; }
#theme-enter.is-hinting svg { animation:aru-drop-hint 2.5s ease-in-out both; }
@keyframes aru-button-hint {
  0%,100% { color:#fff; border-color:#111; background-color:#111; }
  24%,72% { color:#c9ff55; border-color:#82f7ff; background-color:#111; }
}
@keyframes aru-colour-ripple {
  0%,100% { opacity:0; clip-path:circle(0% at 26px 50%); }
  28%,68% { opacity:1; clip-path:circle(125% at 26px 50%); }
}
@keyframes aru-colour-sweep {
  0%,18% { opacity:0; transform:translateX(-110%); }
  35% { opacity:1; }
  72%,100% { opacity:0; transform:translateX(110%); }
}
@keyframes aru-drop-hint {
  0%,100% { color:#fff; }
  24%,72% { color:#82f7ff; }
}
.theme-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.theme-dock { position:fixed; z-index:20; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:20px; padding:10px 10px 10px 18px; border:1px solid rgba(130,247,255,.58); background:#091c1d; box-shadow:0 12px 40px #0006; color:#effff7; }
.theme-dock-label { color:#82f7ff; font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; }
.theme-dock .theme-switch { min-height:44px; padding:10px 12px; font-size:.75rem; }

:root[data-theme="arukemist"] {
  color-scheme:dark;
  --ink:#effff7;
  --paper:#061112;
  --muted:#9db1ad;
  --rule:rgba(130,247,255,.3);
  --soft:#091c1d;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --aru-display:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --aru-cyan:#82f7ff;
  --aru-acid:#c9ff55;
  --aru-pink:#ff4faf;
}
/* The solid image preserves page paint while Safari's sampled colour changes. */
[data-theme="arukemist"] body {
  background:
    radial-gradient(ellipse at 85% 12%,rgba(255,79,175,.09),transparent 50%),
    radial-gradient(ellipse at 10% 80%,rgba(130,247,255,.08),transparent 45%),
    linear-gradient(rgba(130,247,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,247,255,.035) 1px,transparent 1px),
    linear-gradient(var(--paper),var(--paper)),var(--paper);
  background-size:auto,auto,54px 54px,54px 54px,auto;
  background-attachment:fixed;
}
[data-theme="arukemist"] :is(h1,h2,h3) { font-family:var(--aru-display); font-weight:900; text-transform:uppercase; letter-spacing:-.025em; line-height:1; }
[data-theme="arukemist"] :is(.hero h1,.arukemist-product h3) { color:var(--aru-acid); }
[data-theme="arukemist"] :is(.period,.contact h2>span) { color:var(--aru-pink); }
[data-theme="arukemist"] :is(.eyebrow,.service-label,.service-number,.step-number,.product-status) { color:var(--aru-cyan); }
[data-theme="arukemist"] :is(.site-header,.hero-foot,.tools-inner,.service-primary) { border-color:var(--rule); }
[data-theme="arukemist"] :is(.brand img,.footer-business>img) { filter:invert(1); }
[data-theme="arukemist"] .small-square { background:var(--aru-acid); }
[data-theme="arukemist"] .button,
[data-theme="arukemist"] .theme-switch { background:var(--aru-acid); border-color:var(--aru-acid); color:#061112; font-weight:800; }
[data-theme="arukemist"] .button:hover { background:#061112; color:var(--aru-acid); }
/* Touch Safari can retain :hover after release; reserve these styles for a mouse. */
@media(hover:hover) and (pointer:fine) {
  .theme-switch:hover { background:var(--paper); color:var(--ink); }
  [data-theme="arukemist"] .theme-switch:hover { background:#061112; color:var(--aru-acid); }
}
[data-theme="arukemist"] :focus-visible { outline:3px solid var(--aru-acid); outline-offset:5px; }
[data-theme="arukemist"] .approach { background:linear-gradient(135deg,#0b2021,#061112); color:var(--ink); border-block:1px solid var(--rule); }
[data-theme="arukemist"] :is(.approach-heading>p:last-child,.steps p,.step-number) { color:var(--muted); }
[data-theme="arukemist"] :is(.steps article,.motion-ready .build-steps article) { border-color:var(--rule); }
[data-theme="arukemist"] .motion-stage { background:radial-gradient(ellipse at center,#153536,#061112 75%); color:var(--aru-cyan); }
[data-theme="arukemist"] .build-stage { border-color:var(--rule); }
[data-theme="arukemist"] .build-meter { background:var(--rule); }
[data-theme="arukemist"] .build-meter span { background:var(--aru-acid); }
[data-theme="arukemist"] .build-steps article.is-active .step-number { color:var(--aru-acid); }
[data-theme="arukemist"] .motion-toggle { background:var(--paper); border-color:var(--rule); color:var(--aru-cyan); }
[data-theme="arukemist"] .motion-toggle:hover { border-color:var(--aru-cyan); }
[data-theme="arukemist"] .founder-mark { color:var(--aru-acid); }
[data-theme="arukemist"] .product-status { border-color:var(--aru-cyan); background:rgba(130,247,255,.04); }
[data-theme="arukemist"] .arukemist-product { position:relative; }
[data-theme="arukemist"] .arukemist-product::before { content:""; display:block; position:absolute; top:-1px; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--aru-cyan),var(--aru-pink),var(--aru-acid)); }
[data-theme="arukemist"] .project-link { color:var(--aru-cyan); }
[data-theme="arukemist"] .contact { background:rgba(9,28,29,.85); }
[data-theme="arukemist"] .contact-email { color:var(--aru-cyan); border-color:var(--aru-cyan); }
[data-theme="arukemist"] .site-header nav a:hover { color:var(--aru-cyan); }
[data-theme="arukemist"] .site-footer { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
[data-theme="arukemist"] ::selection { background:var(--aru-acid); color:var(--paper); }

/* Reveal the incoming page using native snapshots or an isolated page copy. */
:root.theme-changing { scroll-behavior:auto; }
.theme-changing::view-transition-group(root),
.theme-changing::view-transition-old(root),
.theme-changing::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
.theme-changing::view-transition-old(root) { z-index:1; }
.theme-changing::view-transition-new(root) { z-index:2; }
.theme-splash,.theme-wash { position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden; }
.theme-splash { --splash-color:#82f7ff; }
.theme-splash.is-returning { --splash-color:#effff7; }
.splash-impact { position:absolute; left:var(--splash-x); top:var(--splash-y); width:0; height:0; }
.splash-drop { position:absolute; width:16px; height:20px; border-radius:60% 60% 60% 8%; background:var(--splash-color); animation:drop-impact 280ms cubic-bezier(.32,0,.6,1) both; }
.splash-ring { position:absolute; width:64px; height:64px; border:2px solid var(--splash-color); border-radius:50%; animation:drop-ripple 260ms 140ms ease-out both; }
.splash-ring:last-child { animation-delay:190ms; border-width:1px; }
.splash-spray { position:absolute; width:5px; height:8px; border-radius:50%; background:var(--splash-color); animation:drop-spray 240ms 150ms ease-out both; }
.splash-spray:nth-of-type(1) { --spray-x:44px; --spray-y:-25px; }
.splash-spray:nth-of-type(2) { --spray-x:-40px; --spray-y:-33px; }
.splash-spray:nth-of-type(3) { --spray-x:21px; --spray-y:35px; }
.splash-spray:nth-of-type(4) { --spray-x:-28px; --spray-y:29px; }
/* A scrolling layer can paint under iOS Safari's bars; a fixed layer is clipped. */
.theme-wash,.theme-splash.is-page-impact {
  position:absolute;
  inset:calc(var(--layer-page-y,0px) - var(--layer-bleed,0px)) 0 auto;
  height:calc(100vh + 2 * var(--layer-bleed,0px));
  height:calc(100lvh + 2 * var(--layer-bleed,0px));
}
.theme-wash { background:#061112; }
.theme-wash.is-returning { background:#fff; }
.theme-page-copy { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
@keyframes drop-impact {
  0% { opacity:0; transform:translate(-50%,-90px) rotate(-45deg) scale(.35); }
  25% { opacity:1; }
  68% { opacity:1; transform:translate(-50%,-50%) rotate(-45deg) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(-45deg) scale(.2); }
}
@keyframes drop-ripple {
  from { opacity:.9; transform:translate(-50%,-50%) scale(.12); }
  to { opacity:0; transform:translate(-50%,-50%) scale(1.8); }
}
@keyframes drop-spray {
  from { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  25% { opacity:1; }
  to { opacity:0; transform:translate(var(--spray-x),var(--spray-y)) scale(.1); }
}
@media(max-width:700px) {
  :root { --page-gutter:20px; --footer-space:30px; }
  .project-actions { align-items:flex-start; flex-direction:column; gap:12px; }
  .theme-dock { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); gap:12px; padding-left:12px; }
  .theme-dock-label { font-size:.56rem; }
  [data-theme="arukemist"] body { background-attachment:scroll; }
}
@media(prefers-reduced-motion:reduce) {
  .theme-splash,.theme-wash { display:none!important; }
  #theme-enter.is-hinting,#theme-enter.is-hinting svg { animation:none; }
  #theme-enter.is-hinting::before,#theme-enter.is-hinting::after { display:none; animation:none; }
}
@media print {
  :root { background:#fff; }
  .wrap { width:100%; }
  .site-header { margin-top:0; }
  .site-footer { padding-bottom:20px; }
  .project-actions,.theme-dock,.theme-splash,.theme-wash { display:none!important; }
  [data-theme="arukemist"] body { background:#fff; color:#111; }
  [data-theme="arukemist"] :is(.approach,.contact) { background:#fff; color:#111; }
  [data-theme="arukemist"] :is(h1,h2,h3,p,a,.eyebrow,.service-label,.service-number,.step-number) { color:#111; }
  [data-theme="arukemist"] :is(.brand img,.footer-business>img) { filter:none; }
}