/* Savory Accounting home. The sibling tools' vocabulary (Savory burnt orange
   from savoryfund.com, warm paper ground, Source Serif titles, Inter text,
   Plex Mono labels), arranged as a launcher. */
:root{
  --paper:#F4F1EC; --surface:#FFFFFF; --surface-2:#FAF8F4; --surface-3:#EFEBE4;
  --ink:#1A1D22; --ink-2:#4A505A; --ink-3:#7C8189;
  --rule:#E6E1D9; --rule-strong:#D2CBC0;
  --accent:#C4531A; --accent-2:#E8853C; --accent-soft:#FBEDE4; --accent-line:#EDC3A6; --accent-ink:#FFFFFF;
  --glow:rgba(232,120,52,.16); --glow-2:rgba(196,83,26,.08);
  --grid:rgba(26,29,34,.05); --dot:rgba(26,29,34,.09);
  --shadow-sm:0 1px 2px rgba(40,30,20,.04);
  --shadow:0 1px 2px rgba(40,30,20,.04),0 6px 20px rgba(40,30,20,.05);
  --shadow-lg:0 2px 4px rgba(40,30,20,.04),0 24px 48px -12px rgba(90,50,20,.18);
  --radius:18px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#100F0E; --surface:#191715; --surface-2:#1E1C19; --surface-3:#26231F;
  --ink:#F2EDE7; --ink-2:#BEB6AC; --ink-3:#8B847B;
  --rule:#2A2723; --rule-strong:#3B3630;
  --accent:#EC8A4A; --accent-2:#F4A35F; --accent-soft:#2E1F15; --accent-line:#6A4126; --accent-ink:#1A0F07;
  --glow:rgba(236,120,50,.17); --glow-2:rgba(236,138,74,.07);
  --grid:rgba(255,240,225,.04); --dot:rgba(255,240,225,.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 48px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#100F0E; --surface:#191715; --surface-2:#1E1C19; --surface-3:#26231F;
  --ink:#F2EDE7; --ink-2:#BEB6AC; --ink-3:#8B847B;
  --rule:#2A2723; --rule-strong:#3B3630;
  --accent:#EC8A4A; --accent-2:#F4A35F; --accent-soft:#2E1F15; --accent-line:#6A4126; --accent-ink:#1A0F07;
  --glow:rgba(236,120,50,.17); --glow-2:rgba(236,138,74,.07);
  --grid:rgba(255,240,225,.04); --dot:rgba(255,240,225,.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 48px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01';min-height:100vh;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft);color:var(--ink)}

/* ---------- backdrop: an ember glow and a faint grid, fading out ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% -8%,var(--glow),transparent 70%),
    radial-gradient(ellipse 45% 35% at 95% -5%,var(--glow-2),transparent 70%)}
.bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  /* Excel's default cell: 64 x 20 px (8.43 characters by 15 pt) */
  background-size:64px 20px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 30% 0%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 55% at 30% 0%,#000 10%,transparent 75%)}

.wrap{max-width:1360px;margin:0 auto;padding:0 40px}

/* ---------- top ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.mark .flame{display:block;width:30px;height:38px;transition:transform .5s var(--ease)}
.mark:hover .flame{transform:scale(1.08) rotate(-4deg)}
.mark .word{font-weight:600;font-size:17px;letter-spacing:.3em}
.mark .sep{width:1px;height:22px;background:var(--rule-strong)}
.mark .sub{font-size:17px;color:var(--ink-3);font-weight:500}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--rule);cursor:pointer;
  background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--ink-2);transition:color .2s,border-color .2s,transform .2s var(--ease)}
.icon-btn:hover{color:var(--ink);border-color:var(--rule-strong)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.icon-btn .i-sun{display:none}
.is-dark .icon-btn .i-sun{display:block}
.is-dark .icon-btn .i-moon{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:56px;align-items:end;padding:28px 0 64px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent)}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.4vw,76px);line-height:1;letter-spacing:-.03em;margin:20px 0 22px}
h1 .dot{color:var(--accent)}
.lede{margin:0;max-width:540px;font-size:18px;line-height:1.55;color:var(--ink-2)}

/* fiscal calendar card */
.fy{background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px 18px;box-shadow:var(--shadow)}
.fy:empty{display:none}
.fy-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fy-top b{font-weight:500;color:var(--ink-2)}
.fy-main{display:flex;align-items:center;gap:16px;margin:12px 0 18px}
.fy-p{font-family:var(--serif);font-weight:500;font-size:54px;line-height:.9;letter-spacing:-.03em}
.fy-p small{font-size:.5em;color:var(--ink-3);letter-spacing:0;margin-right:2px;vertical-align:.45em}
.fy-meta{display:flex;flex-direction:column;gap:1px;padding-left:16px;border-left:1px solid var(--rule)}
.fy-meta b{font-weight:600;font-size:15px}
.fy-meta span{font-size:13px;color:var(--ink-3)}
.track{display:flex;gap:3px;height:8px}
.seg{position:relative;flex:var(--d) 1 0;border-radius:3px;background:var(--surface-3);overflow:hidden}
.seg.done{background:color-mix(in srgb,var(--accent) 38%,var(--surface-3))}
.seg.now{background:var(--surface-3);box-shadow:0 0 0 1px var(--accent-line)}
.seg.now::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:fill 1.1s .5s var(--ease) backwards}
.track-legend{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.fy-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2)}
.pill{flex:none;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 10px}

/* ---------- tools ---------- */
.tools-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.tools-head h2{margin:0;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.count{color:var(--ink-3);margin-left:4px}
.hint{margin:0;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;font-family:var(--mono);font-size:11px;
  color:var(--ink-3);background:var(--surface);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;line-height:1}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px 0 80px}

.tool{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
/* the spotlight follows the pointer (app.js sets --mx/--my) */
.tool::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%)}
a.tool:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-line)}
a.tool:hover::before{opacity:1}
a.tool:active,a.tool.pressed{transform:translateY(-1px) scale(.99)}
a.tool:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}

.art{position:relative;height:150px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(to bottom,var(--surface-2),color-mix(in srgb,var(--surface-2) 40%,transparent));border-bottom:1px solid var(--rule)}
.art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.art svg{position:relative;display:block;width:100%;max-width:300px;height:auto;overflow:visible}

.body{flex:1;padding:22px 24px 6px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.cat{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tool h3{margin:0 0 8px;font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.15;letter-spacing:-.015em}
.body p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.tool-foot{display:flex;justify-content:space-between;align-items:center;padding:18px 24px 22px;font-size:13.5px;font-weight:500;color:var(--ink-3);transition:color .3s}
a.tool:hover .tool-foot{color:var(--ink)}
.arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);color:var(--ink-2);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s,transform .45s var(--ease)}
.arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a.tool:hover .arrow{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}

/* the empty slot at the end of the last row */
.tool.soon{background:transparent;box-shadow:none;border:1.5px dashed var(--rule-strong);align-items:center;justify-content:center;
  text-align:center;padding:40px 28px;color:var(--ink-3);min-height:300px}
.soon .plus{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-strong);margin-bottom:16px}
.soon .plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.soon b{display:block;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink-2);margin-bottom:4px}
.soon span{font-size:14px}

/* ---------- illustrations ---------- */
.art .base{stroke:var(--rule-strong);stroke-width:1}
.art .gridln{stroke:var(--rule);stroke-width:1}
.art .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .ln-mut{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 4;stroke-linecap:round;opacity:.8}
.art .guide{stroke:var(--accent-line);stroke-width:1.5;stroke-dasharray:2 3}
.art .dot{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.art .halo{fill:var(--accent);opacity:.16}
.art .tick{fill:var(--rule-strong)}
.art .tick.on{fill:var(--accent)}
.art .paper{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1}
.art .paper-2{fill:var(--surface-2);stroke:var(--rule);stroke-width:1}
.art .t-ink{fill:var(--ink-2)}
.art .t-mut{fill:var(--rule-strong)}
.art .t-num{fill:var(--ink-3)}
.art .rule-ink{stroke:var(--ink-3);stroke-width:1}
.art .badge{fill:var(--accent)}
.art .badge-soft{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.art .on-badge{fill:none;stroke:var(--accent-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .acc-stroke{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .sig{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .bar{transform-box:fill-box;transform-origin:50% 100%}
.art .bud{fill:var(--rule-strong);opacity:.7}
.art .tickm{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .lens{fill:var(--surface);fill-opacity:.75;stroke:var(--accent);stroke-width:3}
.art .handle{stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.art .hole{fill:var(--surface);stroke:var(--accent);stroke-width:1.4}
.art .pop,.art .lift{transform-box:fill-box;transform-origin:50% 50%}
.art .lift{transition:transform .5s var(--ease)}
a.tool:hover .art .lift{transform:translateY(-5px)}

/* app.js adds .play on load and again on each hover, which replays these */
.play .art .draw{stroke-dasharray:1;animation:draw 1.15s cubic-bezier(.65,0,.35,1) both}
.play .art .bar{animation:grow .8s var(--ease) both;animation-delay:calc(var(--k) * 55ms)}
.play .art .pop{animation:pop .6s cubic-bezier(.3,1.5,.5,1) .35s both}
.play .art .fade{animation:fadein .9s ease .25s both}

@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fill{from{width:0}}

.hero-copy{animation:rise .8s var(--ease) backwards}
.fy{animation:rise .8s var(--ease) .1s backwards}

/* ---------- team: upcoming events and birthdays, in a column beside the tools ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:56px;align-items:start;padding-bottom:80px}
.layout .grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0}
.team{display:flex;flex-direction:column;gap:32px;min-width:0;animation:rise .8s var(--ease) .3s backwards}
.team-col{min-width:0;display:flex;flex-direction:column}
.team .tools-head{margin-bottom:24px}
.tools-head h2 .h-ico{width:17px;height:17px;margin:-3px 8px 0 0;vertical-align:middle;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tools-head h2 .h-ico .flame-i{fill:var(--accent-2);stroke:none}
.panel{flex:1;margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.empty{list-style:none;padding:18px 22px;color:var(--ink-3);font-size:14px}

.events{list-style:none;padding:6px 0}
.event{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 22px}
.event + .event{border-top:1px solid var(--rule)}
.ev-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:52px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--rule);line-height:1}
.ev-date span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.ev-date b{font-family:var(--serif);font-weight:600;font-size:22px}
.ev-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.ev-body b{font-weight:600;font-size:15px}
.ev-body span{font-size:13px;color:var(--ink-3)}
.ev-when{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.event.auto .ev-date{background:transparent;border-style:dashed;border-color:var(--rule-strong)}
.event.auto .ev-date span{color:var(--ink-3)}
.event.now .ev-date{background:var(--accent);border:1px solid var(--accent)}
.event.now .ev-date span,.event.now .ev-date b{color:var(--accent-ink)}
.event.now .ev-when{color:var(--accent);font-weight:600}

.cal{padding:16px 18px 18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-family:var(--serif);font-weight:600;font-size:18px}
.icon-btn.sm{width:30px;height:30px;border-radius:9px}
.icon-btn.sm svg{width:15px;height:15px}
.icon-btn.flip svg{transform:scaleX(-1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-grid .dow{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);padding-bottom:4px}
.cal-grid .day{position:relative;display:grid;place-items:center;height:34px;border-radius:9px;font-size:13px;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal-grid .day.today{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink);font-weight:600}
.cal-grid .day.bday{background:var(--accent-soft);color:var(--accent);font-weight:600;cursor:default}
.cal-grid .day.bday::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.cal-grid .day.bday.today{background:var(--accent);color:var(--accent-ink)}
.cal-grid .day.bday.today::after{background:var(--accent-ink)}
.bday-list{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.bday-list li{display:flex;align-items:center;gap:12px;font-size:14px}
.bday-list .empty{padding:0;font-size:13.5px}
.bd-day{flex:none;width:52px;font-family:var(--mono);font-size:11.5px;color:var(--accent)}
.bday-list b{font-weight:500;min-width:0}
.bday-list .pill{margin-left:auto}
.bday-list li.past{opacity:.55}

/* ---------- footer ---------- */
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 36px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-3)}
.plain{padding:20px 0 60px;line-height:2}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:minmax(0,1fr) 340px;gap:36px}
  /* Too narrow for a side column: the calendar goes back under the tools, events and birthdays side by side. */
  .layout{grid-template-columns:1fr;gap:56px}
  .team{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding:20px 0 44px;gap:32px}
  .fy{max-width:440px}
  .layout{gap:40px;padding-bottom:56px}
  .team{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .top{padding:18px 0}
  .mark .sep,.mark .sub{display:none}
  .grid,.layout .grid{grid-template-columns:1fr;gap:16px}
  .lede{font-size:16.5px}
  .tool.soon{min-height:0;padding:32px 24px}
  .event{grid-template-columns:48px minmax(0,1fr);row-gap:2px;padding:12px 16px}
  .ev-date{grid-row:span 2}
  .ev-when{grid-column:2}
}
@media (hover:none){ .hint,.tool kbd{display:none} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }