/* Home page — built directly from the "Home" frame in Figma. Shared chrome
   (vars, header/nav, footer, body background, print reset) now lives in
   site.css and applies to every page, including this one, so this file only
   adds Home's own hero layout on top.

   Imports illustration.css (not site.css directly) so the ported Animation/
   Illustration sections further down this file — a single-page experiment,
   see the comment above .home-showcase — can reuse .illustration-hero and
   .illustration-grid/.illustration-card-* as-is, exactly as they render on
   their own pages. illustration.css itself imports site.css, so nothing
   from the old import is lost. */
@import url("illustration.css");

/* illustration.css's own <main> (imported above) doubles the width and
   adds extra top padding for the Animation/Illustration pages — Home's
   .hero already has its own wider 60rem max-width and padding and was
   designed unconstrained, so that's neutralised here, Home-page only. The
   ported sections below get their own doubled-width wrapper instead
   (.home-showcase-inner), rather than changing <main> itself. */
main {
  max-width: none;
  padding: 3rem 0 8rem; /* restores main's default top padding now that
    the old .site-header nav bar above it has been removed — this also
    puts the head-lotti at the same y-position as index.html's. decent
    space at the very bottom too — the page was ending abruptly right
    at the last Illustration card with nothing below it */
}

/* --accent-rule doesn't exist on this page otherwise — illustration.css
   only imports site.css, not cv.css (where it's actually defined), so it's
   repeated here rather than pulling in cv.css's whole resume-specific
   rule set just for one variable. Same pink-light/yellow-dark swap as
   everywhere else it's used on the site. */
:root { --accent-rule: var(--yellow); }
:root[data-theme="light"] { --accent-rule: #cb2787; }

/* --- Background, exact match to index.html --------------------------
   Same darker navy / warm off-white pair index.html's own page-scoped
   override uses (css/home-cv-draft.css), applied the same way: --blue is
   inherited from :root (where bulb.js sets it inline), so redeclaring it
   here on body overrides that inherited value for this page without a
   specificity fight against the inline style (which only applies at the
   element it's actually set on, :root itself). Unscoped by any class,
   unlike index.html's body.fig-home version — this file is already only
   ever loaded by illustration.html, so there's no other page's background
   it could accidentally affect. */
:root[data-theme="dark"] body { --blue: #1c2740; }
:root[data-theme="light"] body { --blue: #faf7ee; }

/* --- Bulb toggle, repositioned to match index.html ---------------------
   site.css's default .bulb-toggle sits top-left (left: 2.5rem) — the
   standard treatment for every page that keeps the normal nav header.
   index.html moved it top-right instead and this page now matches that
   exactly, same three rules (base, mobile, wide-viewport gap-matched)
   copied from home-cv-draft.css. */
body .bulb-toggle {
  left: auto;
  right: 2.5rem;
}
@media (max-width: 640px) {
  body .bulb-toggle { right: 1.75rem; }
}
/* Same distance from the content column's edge as .hero-head-lottie-link
   keeps on the opposite side, below — see that rule's own comment. */
@media (min-width: 1360px) {
  body .bulb-toggle {
    left: calc(50% + 30.71875rem);
    right: auto;
  }
}

/* Decorative character, exact match to index.html's own (css/home-cv-
   draft.css) — same size, same position relative to the content column,
   same hide-below-1360px breakpoint, same link-wraps-render-target split.
   Unlike index.html, clicking it here is a real navigation (back to
   index.html), not a same-page no-op. */
.hero-head-lottie-link {
  position: absolute;
  /* -16rem here vs. -17.5rem on index.html: this page's hero box
     (main > .illustration-hero, the positioned ancestor) carries its own
     1.5rem side padding, unlike .fig-hero there, which has none — the
     actual content starts 1.5rem inside this box's own left edge, so the
     offset is 1.5rem shorter to land the character the same real distance
     from the content itself. */
  left: -16rem;
  top: -0.5rem;
  display: block;
  width: 10.5rem;
  height: 9.375rem;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-head-lottie-link:hover { transform: scale(1.08); }
.hero-head-lottie-link:active { transform: scale(0.92); transition: transform 0.1s ease; }
.hero-head-lottie {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1359px) {
  .hero-head-lottie-link { display: none; }
}

/* 2026-08 pass: brought this page's width and type scale in line with
   index.html's own refreshed system (css/home-cv-draft.css) rather than
   its previous wider, separately-tuned reading column — same 759px
   content column, same heading/body treatment. Targets the direct main
   child + .home-showcase-inner specifically so it doesn't touch
   .home-illustration-project .illustration-hero's own rules further down,
   or site.css's shared .illustration-hero-title/-intro/-meta rules, which
   the separate detail sub-pages (work/illustration/<collection>.html,
   work/animation/breakfast.html) still use unchanged — this page is the
   only one that loads this file. */
main > .illustration-hero {
  /* main's padding (site.css: 3rem 1.5rem 4rem) eats 1.5rem (48px) off
     each side, so 50.4375rem = 759px + 48px is what renders the column at
     759px, same maths as home-cv-draft.css. */
  max-width: 50.4375rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 1.5rem 0;
  /* Was a flex row (title left, intro right) — in a 759px column there's
     rarely room for both side by side anyway, so this stacks them the
     same way index.html's own h1 + .fig-intro stack, rather than relying
     on the row wrapping as a side effect. */
  display: block;
  margin-bottom: 3.5rem;
  /* Positioned ancestor for .hero-head-lottie-link below, same role
     .fig-hero plays on index.html. */
  position: relative;
}
/* Used to reserve extra top padding at ≥1501px (where the head-lotti/bulb
   are visible) so Back to home + the heading cleared them, sitting well
   below — same change as .fig-hero on index.html: that pair now lines up
   with the head-lotti/bulb's own row instead, at the same 2.5rem padding
   every width gets, character visible or not. */
main > .illustration-hero .illustration-hero-title {
  max-width: none;
  font-size: clamp(1.9rem, 4vw, 2.25rem); /* matches .fig-hero h1 */
  line-height: 1.2;
}
main > .illustration-hero .illustration-hero-intro {
  flex: none;
  margin: 1rem 0 0;
  max-width: none;
  font-weight: 400; /* matches .fig-intro — was bold */
  font-size: 1rem; /* matches .fig-intro — was 17.5px */
  line-height: 1.7;
}
@media (max-width: 640px) {
  main > .illustration-hero .illustration-hero-intro {
    flex-basis: auto;
    font-size: 0.875rem;
    margin: 1rem 0 0;
  }
}

/* Each project's own title ("Breakfast", "Pinnacle Valley", etc.) — was
   sharing .illustration-hero-title's full page-heading treatment
   (clamp(2rem, 5vw, 2.73rem)), now sized down to match index.html's own
   section-heading style (css/home-cv-draft.css's .fig-section-heading) —
   a small bold uppercase label with the same 2px accent underline, rather
   than reading as a second page title for every project. Targeted by tag
   (h2, vs. the page's own h1) since both share the .illustration-hero-title
   class. */
h2.illustration-hero-title {
  display: inline-block;
  max-width: none;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-rule);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: normal;
}
@media (max-width: 640px) {
  h2.illustration-hero-title { font-size: 0.875rem; }
}

/* Role/Copyright meta line under each project title — was matching
   .illustration-hero-intro's old bold 17.5px treatment; brought down to
   match the rest of this page's now-smaller body text instead. */
.home-illustration-project .illustration-hero-meta {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.6;
}

.hero {
  max-width: 60rem;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 0.75rem; /* top padding raised so the gap above
    the copy (this + .site-header's own 1.25rem bottom padding = 6.75rem)
    matches the gap below it (this rule's 0.75rem bottom padding +
    .home-showcase's 6rem margin-top = 6.75rem too) */
  text-align: center;
}

/* Two colour variants of the wordmark art exist (img/home/wordmark.svg —
   cream, and wordmark-blue.svg — dark mode's own background blue).
   bulb.js swaps the <img>'s src between them to match the theme, since a
   CSS mask-image swap (tried first) turned out unreliable across
   browsers — plain <img src> swapping is guaranteed to render. */
.hero-wordmark {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  aspect-ratio: 551 / 280;
  margin: 0 auto 1.5rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--cream);
  font-weight: 700; /* matches .illustration-hero-intro's weight on the
    other pages (itself matched to slimjimstudios.com/work/pat's bold body
    paragraph) rather than the site's normal regular weight */
  font-size: 20px;
  line-height: 20px; /* site.css sets body's line-height to 1.6 for long-form
                         reading pages — that was cascading in here too and
                         is almost certainly what read as "way too big": at
                         20px type, 1.6 line-height is 32px between lines.
                         Pinned to a tight 1:1 (20px) instead. */
}

/* Each line stays on one row down to a fairly narrow viewport — matches
   Figma's whitespace-nowrap on all three lines. The mobile breakpoint below
   is the deliberate escape hatch: below that width wrapping is unavoidable
   and allowed. */
.hero-copy p {
  margin: 0; /* browsers give every <p> a default ~1em top/bottom margin —
                that was stacking on top of .hero-copy's flex gap above,
                which is what made the spacing balloon and made the first
                line sit oddly far from the wordmark. The flex gap is now
                the only thing controlling spacing between lines. */
  white-space: nowrap;
}

.hero-copy a {
  color: inherit;
  text-decoration: none;
  background-image: url("../img/home/underline.svg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 0.15em;
}
.hero-copy a:hover { opacity: 0.85; }

/* Subtle waving-hand emoji: a few small rotations with a squash/stretch
   (opposing x/y scale) on each swing for a bit of weight, then a rest
   before it loops — reads as an occasional wave hello rather than
   something constantly flapping. transform-origin sits near the wrist
   (bottom-right of the glyph) so it pivots like a real wave instead of
   spinning around its centre. */
.wave-emoji {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 2.5s ease-in-out infinite;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg) scale(1, 1); }
  10% { transform: rotate(14deg) scale(1.05, 0.95); }
  20% { transform: rotate(-8deg) scale(0.97, 1.03); }
  30% { transform: rotate(14deg) scale(1.05, 0.95); }
  40% { transform: rotate(-4deg) scale(0.98, 1.02); }
  50% { transform: rotate(10deg) scale(1.03, 0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-emoji { animation: none; }
}

@media (max-width: 640px) {
  .hero { padding: 5.25rem 1.25rem 0.5rem; } /* same balancing as the
    desktop rule: this + .site-header's 1.25rem = 6.5rem above, matching
    this rule's 0.5rem + .home-showcase's 6rem = 6.5rem below */
  .hero-copy { font-size: 16px; }
  .hero-copy p { white-space: normal; }
}

/* Illustration content, ported onto Home below the hero as a single-page
   experiment — with so little content on the site yet, having it all on
   one page reads better than near-empty pages. The top nav is untouched
   either way — it still points at work/animation/breakfast.html and
   work/illustration.html as real, separate pages; this is purely an
   additional preview living on Home.

   Every project's full gallery (its own .illustration-hero +
   .illustration-list) is stacked vertically right on Home, draft-only for
   now in index-draft.html — including Breakfast, which is just the first
   project in the same stack rather than a separate linked-out card: its
   animations sit in an .illustration-list like any other project's images
   (see the .illustration-card-anim rules further down), still playing via
   js/work-data.js + js/work-grid.js (both loaded on index.html too). See
   .home-illustration-project below for the spacing between each stacked
   project. */
.home-showcase {
  margin-top: 6rem; /* fairly big gap between hero and the showcase content
    below it */
}
/* Each stacked project (its own .illustration-hero + .illustration-list,
   draft-only in index-draft.html) needs real separation from the one
   before it — unlike the two-column .illustration-list grid, consecutive
   projects aren't siblings in a grid with their own row-gap, they're full
   blocks stacked in normal flow, so this is a plain margin instead. 9rem —
   bigger than site.css's own 6rem .illustration-hero bottom margin — is
   deliberate: that 6rem is being overridden right below to a much tighter
   1.5rem between a project's title and its own artwork, so the two gaps
   read as clearly different in kind: tight within a project, generous
   between projects, rather than one undifferentiated rhythm. Not
   :first-child, so the very first project sits flush under
   .home-illustration's own margin-top above instead of getting a
   redundant extra 9rem on top of that. */
.home-illustration-project + .home-illustration-project {
  margin-top: 4.5rem;
}
/* Page descriptions (.illustration-hero-intro) are dropped entirely on
   this draft page — titles/artwork only, no blurb — which leaves
   site.css's 6rem .illustration-hero bottom margin (sized to sit well
   below a title AND a paragraph of intro copy) way too generous for a
   title sitting alone above its own grid. Tightened to 1.5rem, scoped to
   just this page's stacked projects so the real illustration detail pages
   (which still show their intro paragraph) keep their original 6rem. */
.home-illustration-project .illustration-hero {
  margin-bottom: 1.5rem;
}
.home-showcase-inner {
  max-width: 50.4375rem; /* same 759px content column as main > .illustration-hero above */
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Title + Role/Copyright, inline on the same row instead of stacked —
   site.css's own .illustration-hero-left wraps them in a column for the
   real detail pages (where there's also a wide .illustration-hero-intro
   on the right needing its own left column to sit next to); this draft
   page drops that wrapper from its markup entirely and lays title/meta
   out as direct flex children of .illustration-hero instead.
   justify-content: space-between pushes the title to the row's start and
   the meta to its end with the gap between them doing the work (no
   auto-margin needed, since .illustration-hero-left's max-width isn't in
   play here) — align-items: baseline keeps the two sitting on the same
   text line rather than one drifting to vertically centre against the
   other's height. Breakfast's header has no meta line at all (it's a
   personal piece, not client work), so for it this just left-aligns the
   title same as before. */
.home-illustration-project .illustration-hero {
  justify-content: space-between;
  align-items: baseline;
}
.home-illustration-project .illustration-hero-meta {
  margin: 0; /* site.css's own rule puts 1rem on top, sized for sitting
    under the title — not needed once it's beside it instead */
  text-align: right;
}
@media (max-width: 640px) {
  /* Once the row no longer has room for both side by side (.illustration-
     hero already has flex-wrap: wrap from site.css), the meta drops below
     the title same as before — right-aligned text reading against the
     left edge the title also starts from would look like a mistake, so
     this flips it back to the left, stacked, same as the real detail
     pages' own mobile layout. */
  .home-illustration-project .illustration-hero-meta {
    flex-basis: 100%;
    text-align: left;
    margin-top: 0.75rem;
  }
}

/* Breakfast's hero animation, stacked in the same .illustration-list grid
   as every other project's images (see index-draft.html) as a single
   full-width piece — the individual character lotties (toaster, sausage,
   coffee, avacado, beans) that used to sit below it here have been
   dropped entirely, so there's no row of smaller pieces to lay out any
   more, just this one banner. .illustration-card-anim itself (shared with
   the real Animation/Breakfast pages, via illustration.css) has no width/
   height/radius of its own beyond its child <svg> filling it, so every
   dimension here is this page's own: width 100% to fill the grid cell
   like .illustration-piece img does, the same 24px radius every other
   piece on the site uses (site.css's .illustration-card-frame uses a
   smaller 12px on its own dedicated page — not relevant once this is just
   another piece in the same grid as the photos), overflow: hidden so the
   radius actually clips the lottie's square SVG corners, and breakfast.
   html's own wide 959:259 aspect ratio for the banner itself. */
.home-illustration-project .illustration-piece .illustration-card-anim {
  display: block;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 959 / 259;
}
/* Clickable, same as every other piece in this grid: site.css's own
   .illustration-piece { cursor: pointer } already covers it, and
   js/illustration-lightbox-draft.js now wires up the Breakfast hero
   .illustration-card-anim as a lightbox trigger alongside every photo,
   opening a second, bigger instance of the same animation in the overlay
   (see .illustration-lightbox-anim below) rather than a static image.

   The Breakfast hero's two tool-icon badges (After Effects, Lottie) are
   plain <img>s inside that same .illustration-piece, same as
   breakfast.html's own markup — site.css's generic .illustration-piece
   img:not(.illustration-badge) rule (width: 100%) was winning over
   .illustration-card-badges img's own 28px sizing (illustration.css),
   since the two rules tie on specificity and the generic one happens to
   come later in the cascade, which is what blew the icons up to fill the
   whole card. .illustration-card-badges itself already handles the
   group's position/layout (illustration.css) — just its img sizing needed
   forcing back down, to the 34px every other card's single
   .illustration-badge icon already uses (not the 28px .illustration-card-
   badges img itself specifies — matching this page's own badge size felt
   more consistent than the Animation page's, now that both sit in the
   same grid).

   border-radius crops both to the same rounded-square shape
   img/illustration/photoshop-icon.svg already has, regardless of what
   each one's own source SVG actually draws — After Effects' icon bakes in
   a flatter rx, and Lottie's isn't a rounded rect at all, it's a rounder
   "squircle" path, so neither matched Photoshop's corners on their own.
   Photoshop's own rx is 16.3014 on a 68x68 canvas (~24% of its width);
   8.15px is that same ratio applied to this page's 34px badge size. */
.home-illustration-project .illustration-piece .illustration-card-badges img {
  width: 34px;
  height: 34px;
  border-radius: 8.15px;
}

/* The lightbox's enlarged view of the Breakfast animation — a second
   lottie instance js/illustration-lightbox-draft.js builds into this span
   (same source data, same renderer settings as the grid's own, via
   js/work-grid.js), shown instead of .illustration-lightbox-image
   whenever the current item is an animation rather than a photo (the two
   are toggled by that script, never both visible at once). Sized and
   styled to match .illustration-lightbox-image's own treatment in
   illustration.css — same radius, same shadow, same width cap — just with
   the grid banner's own 959:259 ratio instead of a photo's intrinsic one,
   and the same placeholder tint .illustration-card-anim uses everywhere
   else while the animation data loads. */
.illustration-lightbox-anim {
  display: block;
  width: min(45vw, 600px);
  aspect-ratio: 959 / 259;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  background: #daedff;
}
.illustration-lightbox-anim svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* "Back to top" — Home only (js/back-to-top.js toggles .is-visible once the
   user has scrolled roughly a viewport down). Styled to match the site's
   secondary button (.fig-cta--secondary in home-cv-draft.css): page-bg
   fill, 1px accent border, accent-coloured icon — same formula, just kept
   circular/icon-only rather than the pill label shape, matching the
   lightbox controls' round 48px footprint for a consistent floating-button
   feel. Opacity+scale hover/active also now mirrors .fig-cta exactly.

   Shared spring easing for both this button and .fig-float-cta below —
   a back-ease overshoot (the 1.7 control point sails past 1 before
   settling), applied to BOTH the hidden->visible and visible->hidden
   transform transitions (each state's own rule spells out the same curve
   explicitly, rather than one side inheriting it implicitly) so the
   bounce reads clearly on the way in and the way out, not just on
   arrival — kept identical to index.html's copy of these same rules. */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent-rule);
  border-radius: 999px;
  background: var(--blue);
  color: var(--accent-rule);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.7, 0.64, 1),
    visibility 0s 0.3s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.7, 0.64, 1);
}
.back-to-top:hover { opacity: 0.92; transform: scale(1.05); }
.back-to-top.is-visible:hover { opacity: 0.92; }
.back-to-top:active { opacity: 1; transform: scale(0.95); transition-duration: 0.1s; }
@media (max-width: 768px) {
  .back-to-top { right: 1rem; bottom: 1rem; }
}

/* --- Email me / Download CV buttons -----------------------------------
   This page has no hero CTA pair of its own (it's the illustration
   portfolio, not the CV) — these only ever exist as the floating copy,
   so there's no separate .fig-cta-row to keep in sync with here. Button
   look (.fig-cta/--primary/--secondary) copied from home-cv-draft.css
   verbatim; --accent-rule is used directly rather than via a --fig-accent
   alias since (unlike index.html's .fig-page) nothing on this page scopes
   it narrower than :root anyway (see the --accent-rule definition above). */
.fig-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fig-cta:hover { opacity: 0.92; transform: scale(1.05); }
.fig-cta:active { opacity: 1; transform: scale(0.95); transition-duration: 0.1s; }
.fig-cta svg { flex-shrink: 0; }
.fig-cta--primary { background: var(--accent-rule); color: var(--blue); border: 1px solid var(--accent-rule); }
.fig-cta--secondary { background: var(--blue); color: var(--accent-rule); border: 1px solid var(--accent-rule); }

/* --- Floating Email me / Download CV ---------------------------------
   js/float-cta.js adds .is-active in lockstep with #back-to-top's own
   .is-visible (MutationObserver on its class attribute) — fades in/out at
   exactly the same scroll position as Back to top, same spring. Sits
   immediately to Back to top's left on the same line (left-aligned to
   it), not stacked above it. Email me hands off to the mail app via
   js/nav-contact.js (.nav-contact); Download CV can't just window.print()
   this page (it isn't styled as a resume) — it links to index.html's own
   printable CV with ?print=1, which index.html's own small inline script
   reads to trigger the print dialog automatically once that page loads. */
.fig-float-cta {
  position: fixed;
  /* Back to top: right 1.5rem + 48px wide (3rem) = its own left edge sits
     4.5rem in from the viewport's right edge; +0.75rem gap so this sits
     cleanly beside it rather than touching. Same bottom as Back to top
     puts both on one line. */
  right: 5.25rem;
  bottom: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* safety net on very narrow phones; doesn't engage at
    any width this site actually ships at */
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.7, 0.64, 1),
    visibility 0s 0.3s;
}
.fig-float-cta.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.7, 0.64, 1);
}
@media (max-width: 768px) {
  .fig-float-cta { right: 4.75rem; bottom: 1rem; } /* matches .back-to-top's
    own 1rem mobile shift: 1rem + 3rem + 0.75rem gap */
}
/* Below ~460px there's no longer room beside Back to top for both
   buttons without crowding the right edge — fall back to stacking the
   pair above it instead, same spring, just back on the vertical axis. */
@media (max-width: 460px) {
  .fig-float-cta {
    right: 1rem;
    bottom: 4.75rem;
    flex-direction: column;
    align-items: flex-end;
  }
}
@media print {
  .fig-float-cta { display: none !important; }
}

/* "Back to home" — sits above the page title, styled as the same
   secondary button (page-bg fill, 1px accent border, accent text/icon) as
   .back-to-top and index.html's .fig-cta--secondary, just in its normal
   pill-with-label shape since this one carries text. */
.illustration-back-home {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 48px;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  background: var(--blue);
  color: var(--accent-rule);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.illustration-back-home svg { flex-shrink: 0; }
.illustration-back-home:hover { opacity: 0.92; transform: scale(1.05); }
.illustration-back-home:active { opacity: 1; transform: scale(0.95); transition-duration: 0.1s; }