/* The site's two worlds, shared by every page. The pet switch on the home page
   picks one and remembers it (localStorage "saturnino-site-pet"); a one-line
   script in each page head sets data-theme="luna" on <html> before paint.
   Saturnino is day: white page, gold accent. Luna is night: black page, lilac
   accent, stars. Same faces as the app: Space Grotesk for headings, Hanken
   Grotesk for text; small labels in Space Grotesk too (the pixel font left the
   app in set/2026, and the site with it). Colour tokens are registered
   so the switch fades instead of snapping. Page content sits at z-index 1,
   above the glow (body::before) and the stars. */
@property --ground{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --surface{syntax:'<color>';inherits:true;initial-value:#f6f5f2}
@property --panel{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --panel-2{syntax:'<color>';inherits:true;initial-value:#f2f0eb}
@property --ink{syntax:'<color>';inherits:true;initial-value:#1b1814}
@property --muted{syntax:'<color>';inherits:true;initial-value:#67615a}
@property --faint{syntax:'<color>';inherits:true;initial-value:#8d877f}
@property --accent{syntax:'<color>';inherits:true;initial-value:#e8b24e}
@property --accent-hi{syntax:'<color>';inherits:true;initial-value:#f5c451}
@property --accent-text{syntax:'<color>';inherits:true;initial-value:#9b6508}
@property --line{syntax:'<color>';inherits:true;initial-value:rgba(27,24,20,.12)}
@property --line-2{syntax:'<color>';inherits:true;initial-value:rgba(27,24,20,.06)}
@property --glow{syntax:'<color>';inherits:true;initial-value:rgba(232,178,78,.13)}
@property --shadow{syntax:'<color>';inherits:true;initial-value:rgba(27,24,20,.13)}
@property --desk-1{syntax:'<color>';inherits:true;initial-value:#fbfbfa}
@property --desk-2{syntax:'<color>';inherits:true;initial-value:#ebeae6}
@property --desk-glow{syntax:'<color>';inherits:true;initial-value:rgba(232,178,78,.3)}
@property --desk-corner{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --win-bg{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --win-bar{syntax:'<color>';inherits:true;initial-value:#f1f0ec}
@property --msg{syntax:'<color>';inherits:true;initial-value:#f3f2ee}
@property --msg-me{syntax:'<color>';inherits:true;initial-value:#f6e6bd}
@property --me-bg{syntax:'<color>';inherits:true;initial-value:#f3dca0}

:root{
  --ground:#ffffff; --surface:#f6f5f2; --panel:#ffffff; --panel-2:#f2f0eb;
  --ink:#1b1814; --muted:#67615a; --faint:#8d877f;
  --accent:#e8b24e; --accent-hi:#f5c451; --accent-text:#9b6508; --on-accent:#1a130a;
  --brand:#d39b2a; --em:#1b1814; --em-mark:rgba(232,178,78,.55);
  --line:rgba(27,24,20,.12); --line-2:rgba(27,24,20,.06);
  --glow:rgba(232,178,78,.13); --shadow:rgba(27,24,20,.13);
  --desk-1:#fbfbfa; --desk-2:#ebeae6; --desk-glow:rgba(232,178,78,.3); --desk-corner:#ffffff;
  --win-bg:#ffffff; --win-bar:#f1f0ec; --win-ink:#2a2723; --win-faint:#98938c; --msg:#f3f2ee; --msg-me:#f6e6bd;
  --taskbar:rgba(255,255,255,.78); --taskbar-icon:rgba(34,28,20,.14);
  --me-bg:#f3dca0; --me-ink:#2b2010;
  --ok:#1f8a5b; --err:#b3502a;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pixel:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;   /* small uppercase labels */
  --swap:.5s ease;
}
html[data-theme="luna"]{
  --ground:#08080d; --surface:#13131c; --panel:#1d1b2b; --panel-2:#27243a;
  --ink:#eeeefe; --muted:#b6b3d0; --faint:#8f8baa;
  --accent:#aaa8e8; --accent-hi:#c8c6f6; --accent-text:#b9b7f0; --on-accent:#0f0e1a;
  --brand:#c8c6f6; --em:#aaa8e8; --em-mark:transparent;
  --line:rgba(221,222,255,.12); --line-2:rgba(221,222,255,.06);
  --glow:rgba(170,168,232,.15); --shadow:rgba(0,0,0,.6);
  --desk-1:#12121f; --desk-2:#050507; --desk-glow:rgba(170,168,232,.26); --desk-corner:#1f2140;
  --win-bg:#0f0f16; --win-bar:#191923; --win-ink:#e8e8f4; --win-faint:#8a88a3; --msg:#1c1c28; --msg-me:#35335c;
  --taskbar:rgba(5,5,9,.8); --taskbar-icon:rgba(238,238,254,.14);
  --me-bg:#4b4790; --me-ink:#ffffff;
  --ok:#54d19b; --err:#f08a64;
}
html{scroll-behavior:smooth;
  transition:--ground var(--swap),--surface var(--swap),--panel var(--swap),--panel-2 var(--swap),--ink var(--swap),
    --muted var(--swap),--faint var(--swap),--accent var(--swap),--accent-hi var(--swap),--accent-text var(--swap),
    --line var(--swap),--line-2 var(--swap),--glow var(--swap),--shadow var(--swap),--desk-1 var(--swap),--desk-2 var(--swap),
    --desk-glow var(--swap),--desk-corner var(--swap),--win-bg var(--swap),--win-bar var(--swap),--msg var(--swap),
    --msg-me var(--swap),--me-bg var(--swap)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;transition:none}
  .stars i{animation:none!important}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 50% at 88% 8%,var(--glow),transparent 70%),
  radial-gradient(55% 45% at 6% 96%,var(--glow),transparent 70%)}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
html[data-theme="luna"] .stars{opacity:.55}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--ink);opacity:.5}   /* still: nothing twinkles behind text you read */
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.85}}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:3px;border-radius:8px}
.brand{display:inline-flex;align-items:center;gap:0;font:700 21px/1 var(--display);letter-spacing:-.03em;color:var(--brand);text-decoration:none}
.brand::before{content:"";width:22px;height:22px;flex:none;margin-right:10px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff3d6,var(--accent) 45%,color-mix(in srgb,var(--accent) 55%,#5a3a10) 100%);
  box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px color-mix(in srgb,var(--accent) 55%,transparent)}
.brand span{color:var(--ink)}

/* ---- the pets, drawn live (pets3d.js) ---- */
.p3d{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.p3d-stack{position:relative;z-index:0}
.p3d-canvas,.p3d-still{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
.p3d-still{object-fit:contain}
.p3d-pool{position:absolute;left:14%;right:14%;top:84%;height:11%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side at 32% 50%,rgba(150,130,235,.55),transparent 100%),
    radial-gradient(closest-side at 68% 50%,rgba(255,176,120,.5),transparent 100%)}
.p3d-shadow{display:block;width:44%;height:10px;margin-top:-4px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,40,10,.26),transparent)}
html[data-theme="luna"] .p3d-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.p3d[data-kind="luna"] .p3d-shadow{opacity:.5}

/* the language switch (PT · EN): plain text, the page you are on in ink, the other one a link */
.lang{display:inline-flex;align-items:center;gap:6px;flex:none;font:700 13px/1 var(--display);letter-spacing:.04em;color:var(--faint);white-space:nowrap}
.lang b{color:var(--ink);font-weight:700}
.lang a{color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--accent-text)}
@media(max-width:640px){.top .lang{display:none}}   /* on a phone the header keeps the button; the switch is in the footer */