/* Aurosia — shared shell.
 *
 * Deliberately the same skeleton as Lunosia: identical token names, the same
 * sticky bar, the same raise shadows and easing. Two products from one studio
 * should feel like they came from the same hands, and that resemblance is
 * carried by structure and spacing far more than by colour.
 *
 * What changes is the hour of day. Lunosia is teal — night, quiet, a crescent.
 * Aurosia is amber — dawn, first light, a sun coming up over a line. Same
 * family, opposite end of the day, which is also the difference between what
 * the two products are for.
 */

:root{
  --paper:#fbf9f5; --ink:#141110; --ink-2:#4a433e; --ink-3:#7d746c;
  --line:#e9e2d7; --panel:#ffffff; --panel-2:#f4efe6;
  --accent:#b45f16; --accent-soft:#fbeedd;
  --good:#3f7d5c; --bad:#b6412c; --warm:#9a6b2f;
  --raise-sm:0 1px 2px rgba(20,17,16,.04),0 4px 14px rgba(20,17,16,.05);
  --raise:0 2px 6px rgba(20,17,16,.05),0 22px 60px rgba(20,17,16,.10);
  --r:16px;
  --sans:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Mono','SF Mono',Consolas,monospace;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --ease:cubic-bezier(.22,.61,.24,1);
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0d0b09; --ink:#f4f1ec; --ink-2:#bdb4a8; --ink-3:#887f74;
    --line:#241f19; --panel:#151109; --panel-2:#1c1710;
    --accent:#e39a4a; --accent-soft:#2a1d0d;
    --good:#5fae86; --bad:#e0785f; --warm:#d3a05c;
    --raise-sm:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
    --raise:0 2px 6px rgba(0,0,0,.5),0 26px 70px rgba(0,0,0,.55); }
}
/* The theme toggle stamps the root, and it has to beat the media query in both
   directions — someone on a dark OS who wants a light page gets a light page. */
:root[data-theme="dark"]{ --paper:#0d0b09; --ink:#f4f1ec; --ink-2:#bdb4a8; --ink-3:#887f74;
  --line:#241f19; --panel:#151109; --panel-2:#1c1710; --accent:#e39a4a; --accent-soft:#2a1d0d;
  --good:#5fae86; --bad:#e0785f; --warm:#d3a05c;
  --raise-sm:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
  --raise:0 2px 6px rgba(0,0,0,.5),0 26px 70px rgba(0,0,0,.55); }
:root[data-theme="light"]{ --paper:#fbf9f5; --ink:#141110; --ink-2:#4a433e; --ink-3:#7d746c;
  --line:#e9e2d7; --panel:#ffffff; --panel-2:#f4efe6; --accent:#b45f16; --accent-soft:#fbeedd;
  --good:#3f7d5c; --bad:#b6412c; --warm:#9a6b2f;
  --raise-sm:0 1px 2px rgba(20,17,16,.04),0 4px 14px rgba(20,17,16,.05);
  --raise:0 2px 6px rgba(20,17,16,.05),0 22px 60px rgba(20,17,16,.10); }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:840px}

/* ---- top bar ----------------------------------------------------------- */
.sitebar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* The bar is a <header>, and every page styles its hero with a bare `header`
   selector. That rule was landing on the bar as well, pushing its contents
   74px down and out of their own box — the nav rendered as an empty band. The
   class raises specificity above any bare element rule, so a page cannot break
   the chrome by styling its own hero. */
header.sitebar{padding:0;text-align:left;position:sticky}
.sitebar .in{max-width:980px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-weight:750;letter-spacing:-.4px;font-size:17.5px;margin-right:auto}
.brand .mark{width:25px;height:25px;color:var(--accent);flex:none}
.sitebar nav{display:flex;gap:2px;align-items:center}
.sitebar nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:550;
  padding:7px 11px;border-radius:9px;transition:.15s var(--ease);white-space:nowrap}
.sitebar nav a:hover{background:var(--panel-2);color:var(--ink)}
.sitebar nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.themer{appearance:none;background:none;border:1px solid var(--line);color:var(--ink-2);
  border-radius:9px;width:32px;height:32px;cursor:pointer;font-size:14px;line-height:1;flex:none}
.themer:hover{border-color:var(--accent);color:var(--accent)}
/* Under ~640px the four links no longer fit beside the wordmark. They wrap to
   their own row rather than shrinking to unreadable, and the bar grows. */
@media (max-width:640px){
  .sitebar .in{height:auto;padding:10px 16px;flex-wrap:wrap}
  .brand{font-size:16px}
  .sitebar nav{order:3;width:100%;overflow-x:auto;padding-bottom:2px}
  .sitebar nav a{padding:6px 9px;font-size:13.5px}
}

/* ---- type -------------------------------------------------------------- */
h1{margin:0 0 12px;font-size:clamp(30px,5.6vw,52px);line-height:1.04;letter-spacing:-1.8px;
  font-weight:800;text-wrap:balance}
h2{letter-spacing:-.5px;text-wrap:balance}
.lede{max-width:58ch;color:var(--ink-2);font-size:17.5px;text-wrap:pretty;margin:0}
.sec{margin:44px 0 12px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700}

/* ---- controls ---------------------------------------------------------- */
label{display:block;font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.opts{display:flex;gap:9px;flex-wrap:wrap}
.opt{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:11px;padding:10px 15px;font:inherit;font-size:15px;cursor:pointer;
  transition:.15s var(--ease)}
.opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.opt small{display:block;font-size:12px;opacity:.75;font-weight:400}
.btn{appearance:none;background:var(--accent);color:#fff;border:none;border-radius:11px;
  padding:11px 18px;font:inherit;font-size:15px;font-weight:650;cursor:pointer;
  transition:.15s var(--ease);box-shadow:var(--raise-sm)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn[disabled]{opacity:.45;cursor:default;filter:none;transform:none}
.btn.ghost{background:none;color:var(--ink-2);border:1px solid var(--line);font-weight:500;box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn.big{padding:15px 26px;font-size:16.5px;border-radius:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
textarea,input[type=text],select{background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;font:inherit;
  max-width:100%;min-width:0}

/* ---- surfaces ---------------------------------------------------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--raise-sm)}
.card h2{margin:0 0 6px;font-size:18px}
.card > p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px;text-wrap:pretty}
.card > p:last-child{margin-bottom:0}
.tabs{display:flex;gap:2px;margin:26px 0 20px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;overflow-x:auto}
.tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--ink-3);font:600 15px var(--sans);padding:10px 13px;cursor:pointer;
  margin-bottom:-1px;white-space:nowrap;transition:.15s var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.status{font-size:14px;color:var(--ink-3);margin-top:12px;min-height:1.4em}
.status.err{color:var(--bad)}
.note{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:12px;padding:14px 17px;font-size:14.5px;color:var(--ink-2);text-wrap:pretty}
.note b{color:var(--ink)}

footer{border-top:1px solid var(--line);margin-top:52px;padding:24px 0 60px;
  color:var(--ink-3);font-size:13.5px;text-wrap:pretty}
footer .links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:15px}

/* ---- motion -------------------------------------------------------------
 *
 * The brief was classy, professional, futuristic. Those pull in different
 * directions, and the resolution is restraint: futuristic here means precise
 * rather than flashy — sharp easing, short durations, one thing moving at a
 * time. Sci-fi glow and endless float would read as a template, and a study
 * tool someone opens twice a day cannot afford to be tiring.
 *
 * Every transform is on `transform` and `opacity` only, which the compositor
 * handles without touching layout. Anything animating width, top or box-shadow
 * repaints the page and stutters on the mid-range phone this is really for.
 */

/* Progressive enhancement: the class is only added by script, so with no JS
   every section is simply visible rather than permanently invisible. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.on{opacity:1;transform:none}

/* Children stagger behind their parent. The delay is small — 55ms — because a
   long cascade looks like the page is loading slowly rather than arriving. */
.js .reveal.stagger > *{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .reveal.stagger.on > *{opacity:1;transform:none}
.js .reveal.stagger.on > *:nth-child(1){transition-delay:0ms}
.js .reveal.stagger.on > *:nth-child(2){transition-delay:55ms}
.js .reveal.stagger.on > *:nth-child(3){transition-delay:110ms}
.js .reveal.stagger.on > *:nth-child(4){transition-delay:165ms}
.js .reveal.stagger.on > *:nth-child(5){transition-delay:220ms}
.js .reveal.stagger.on > *:nth-child(6){transition-delay:275ms}

/* First paint. The hero arrives rather than appearing, and only once — a
   page-load animation that replays on every navigation becomes a toll. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .enter{animation:rise .8s var(--ease) both}
.js .enter-1{animation-delay:.06s}
.js .enter-2{animation-delay:.14s}
.js .enter-3{animation-delay:.22s}

/* A hairline that draws itself in under section headings. Cheap, and it gives
   the eye something to follow down a long page. */
.sec{position:relative;padding-bottom:9px}
.sec::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--accent),transparent);
  transition:width .9s var(--ease)}
.js .sec.on::after{width:100%}

/* Buttons and cards lift on a spring rather than a linear ramp — the overshoot
   is what makes an interface feel responsive instead of merely animated. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.btn{transition:transform .22s var(--spring),filter .18s var(--ease),box-shadow .22s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--raise)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}
.opt{transition:transform .2s var(--spring),border-color .18s var(--ease),background .18s var(--ease)}
.opt:active{transform:scale(.97);transition-duration:.08s}
.card{transition:transform .3s var(--ease),border-color .25s var(--ease),box-shadow .3s var(--ease)}

/* A single sweep of light across the primary button, slow and very faint. One
   ambient effect on the page is elegant; three is a casino. */
.btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.ghost)::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .75s var(--ease)}
.btn:not(.ghost):hover::before{transform:translateX(120%)}

/* The bar earns a border only once you have scrolled past the hero, so the top
   of the page reads as one uninterrupted surface. */
.sitebar{transition:border-color .3s var(--ease),background .3s var(--ease)}
.sitebar:not(.scrolled){border-bottom-color:transparent}

.sitebar nav a{position:relative}
.sitebar nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;
  bottom:2px;height:2px;border-radius:2px;background:var(--accent);
  animation:rise .4s var(--ease) both}

/* Focus gets its own animation so keyboard users get the same sense of
   responsiveness that hover gives everyone else. */
@keyframes focuspulse{from{outline-offset:8px;opacity:.4}to{outline-offset:3px;opacity:1}}
.js :focus-visible{animation:focuspulse .25s var(--ease) both}

/* One rule turns all of it off. Motion here is decoration on top of a page
   that already works, so honouring the preference costs nothing. */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.stagger > *{opacity:1;transform:none}
  .js .enter{animation:none}
  .js .sec.on::after{width:100%;transition:none}
  .btn:hover,.opt:hover,.tile:hover{transform:none}
  .btn:not(.ghost)::before{display:none}
}