/* The landing page's own styles.
 *
 * Everything cosmic — tokens, fonts, background, starfield, fanbar, hero, sun, wordmark, colophon,
 * motion — is in /assets/style.css. What is left here is the one thing this page actually is:
 * a list of toys.
 *
 * The .tool cards get the shared .glass finish from the markup (class="tool glass"), so the
 * background/border/blur/radius are the family's. Only the parts that are specifically a TOOL CARD
 * live here: the amber rail, the lift on hover, and the arrow that nudges.
 */
.tools{display:grid; grid-template-columns:1fr; gap:16px; max-width:560px; margin:44px auto 0}

.tool{
  display:block; text-decoration:none; color:inherit;
  padding:22px 24px;
  transition:transform .2s ease, border-color .2s, box-shadow .25s;
}
/* The rail. It overrides the shared .glass::before sheen on purpose — a card that is a LINK gets a
 * left-edge mark that says "go here," which the flat surfaces elsewhere in the family do not want. */
.tool::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; right:auto;
  width:3px; height:auto;
  border-radius:3px; background:linear-gradient(var(--amber),var(--flare)); opacity:.85;
}
.tool:hover,.tool:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,209,102,.5);
  box-shadow:0 20px 44px -26px rgba(255,138,61,.5);
  outline:none;
}

.tool-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.tool-tag{
  font-family:var(--display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.tool-arrow{font-size:20px; color:var(--amber); transition:transform .2s}
.tool:hover .tool-arrow,.tool:focus-visible .tool-arrow{transform:translateX(4px)}
.tool-name{
  font-family:var(--display); font-weight:600; font-size:23px;
  margin:0 0 7px; letter-spacing:-.01em;
}
.tool-desc{color:var(--muted); font-size:14.5px; line-height:1.55; margin:0}

.more{text-align:center; color:var(--faint); font-size:13.5px; margin:22px 0 0; font-style:italic}

/* The run feed link's icon. Not the project's first inline SVG -- the hero sun in
   templates/base.html.j2 already is one -- but the first at UI-icon scale. There is no unicode
   glyph for a feed that renders acceptably across platforms, and the feed mark is a convention
   a bare text link does not signal. */
.feedlink{display:inline-flex; align-items:center; gap:5px; margin-left:8px; color:var(--amber); text-decoration:none; white-space:nowrap}
.feedlink:hover{text-decoration:underline}
.feedicon{flex:none}

/* ---- the front door keeps moving ------------------------------------------------------------
 * The shared sheet suppresses the colophon's aurora and sparkles under prefers-reduced-motion, and
 * that is the right default for the pages you actually go to READ -- the Songbook, the Scorecard,
 * the Tape Measure. You are there to use a tool, and a spinning gradient is not part of the job.
 *
 * The landing page is not a tool. It is the front door, it is four cards and a sun, and the
 * hover-triggered flourish in its footer is the one bit of showing off the site allows itself.
 * So it opts back in, explicitly and only here.
 *
 * This is a deliberate exception to a real accessibility default, so it is worth being honest
 * about the cost: a visitor who has asked their OS for less motion still gets movement here if
 * they hover the blog link. It is small, it is quarantined to one element, and it never fires
 * unless they point at it. That is the trade, made on purpose, on one page.
 *
 * (This is also why it must live in the PAGE's stylesheet and not the shared one: it is the
 * landing page's opinion, not the family's.) */
@media (prefers-reduced-motion:reduce){
  .colophon:hover::before,.colophon:focus-within::before{
    animation:swirl 9s linear infinite !important;
  }
  .blogwrap:hover .spark-i,.blog:focus-visible ~ .spark-i{
    animation:sparkle 1.15s var(--sd) ease-in-out infinite !important;
  }
}