/* ============================================================
   Draft: serif hero, mimicking rahuljain.framer.website's layout
   (small mark + text nav, mixed serif/italic headline, thin
   divider) while keeping this site's own mood system (circle
   graphic + Zen/Snappy cycle) and work-sample cards intact.
   home-v2.css is loaded alongside this file for the nav logo, the
   card row, and the callout-circle base rules; only the hero/nav
   layout itself is custom here (d-* classes), so nothing in
   home-v2.css's own .v2-nav/.v2-hero rules is actually triggered by
   this page's markup.
   Not linked from the live site — preview only.
   ============================================================ */

body.draft-hero {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* ---------- NAV ---------- */
/* .v2-nav (from home-v2.css) supplies the sticky bar and space-between
   layout, but its own max-width/padding (1600px / 96px, tuned for the
   live homepage) doesn't match this draft's narrower hero (1200px /
   24px) — overridden here so the logo lines up with the hero text
   below it instead of sitting further in. */
.d-nav { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
.d-nav .v2-logo-img { height: 30px; }
.d-nav-links { display: flex; align-items: center; gap: 28px; }
/* Normal-case labels (not the all-caps site-wide nav style) in the
   site's muted gray-mid, same as everywhere else — just without the
   uppercase/letter-spacing treatment. Selected page gets an underline. */
.d-nav-links a {
  font-size: 14px; font-weight: 400; color: var(--gray-mid); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.d-nav-links a.is-active { color: var(--black); border-bottom-color: var(--black); }
.d-nav-links a:hover { color: var(--black); }
/* Resting color already matches the circle graphic's live accent color
   (teal/orange with mood), not just on hover — and lighter weight than
   the plain nav links since it's a value being displayed, not a label. */
.d-mood-cycle {
  /* Fixed width (sized to the longest label, "[snappy]") and left-aligned
     text — so cycling to a shorter label like "[zen]" never changes this
     button's own footprint, which would otherwise shift Home/About/
     LinkedIn to its left (this whole group is flush against the nav's
     right edge via .v2-nav's space-between). */
  display: inline-block; min-width: 62px; text-align: left;
  font-size: 13px; font-weight: 400; color: var(--accent);
  background: none; cursor: pointer; font-family: inherit;
  transition: opacity 0.15s ease;
  -webkit-user-select: none; user-select: none;
  /* .d-nav-links a has an invisible 1px border-bottom + 2px padding-bottom
     reserved for its active-page underline — without the same here, this
     button's own box is 3px shorter, and .v2-nav's align-items:center
     centers each on its own box, so its text lands a couple px lower
     than the links' text. Matching (transparent) border keeps the boxes
     the same height without showing anything extra. */
  border: none; border-bottom: 1px solid transparent; padding: 0 0 2px;
  /* <button> elements get their own browser-default line-height
     ("normal") instead of actually inheriting the page's, unlike the
     <a> links next to it — forcing it back to inherit is what was
     really causing the couple-px vertical offset, more than the
     border/padding box-height mismatch above. */
  line-height: inherit;
}
.d-mood-cycle:hover { opacity: 0.7; }

/* No default browser focus ring (blue box) or text-select cursor on any
   of this draft's clickable bits — mouse clicks shouldn't leave a
   lingering outline, and text-swap buttons shouldn't look editable. */
.d-mood-cycle:focus,
.d-nav-links a:focus,
.v2-scroll-nav-btn:focus,
.v2-logo:focus { outline: none; }
.d-mood-cycle:focus-visible,
.d-nav-links a:focus-visible,
.v2-scroll-nav-btn:focus-visible,
.v2-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.d-nav-links a, .v2-scroll-nav-btn, .v2-logo {
  -webkit-user-select: none; user-select: none;
}

/* ---------- HERO ---------- */
/* A CSS grid rather than a nested flex row — avatar and the "Based
   in..." line each span the full width on their own row, while the
   headline and circle share a row and stay vertically centered against
   each other (align-items: center). Doing it this way keeps all four
   pieces genuine siblings of .d-hero-text, which matters on mobile: an
   auto-margin only distributes space among an element's real siblings,
   and browsers don't reliably promote a nested child to sibling status
   just because its wrapper is display:contents. */
.d-hero { max-width: 1200px; margin: 110px auto 100px; padding: 0 24px; }
.d-hero-text {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "avatar avatar" "headline circle" "sub sub";
  align-items: center; column-gap: 48px;
}
.d-headline { grid-area: headline; max-width: 700px; }
.d-hero-circle { grid-area: circle; }
.d-sub { grid-area: sub; }

.d-avatar-wrap { grid-area: avatar; width: 64px; height: 64px; margin-top: 56px; margin-bottom: 24px; align-self: start; }
.d-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}

.d-headline {
  font-family: 'Crimson Text', Georgia, serif; font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--black);
  /* Same spacing in every mood (Snappy's values), so switching moods
     only swaps the words, never reflows the headline. The per-mode
     type variables in home-v2.css still apply to the card teasers. */
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.d-headline em { font-style: italic; font-weight: 400; }
/* Only the copy for the current mood is rendered; the other is removed
   from the page (and from the accessibility tree) rather than hidden. */
.d-mode-copy { display: none; }
body[data-mood="snappy"] .d-mode-copy[data-mode="snappy"],
body[data-mood="zen"] .d-mode-copy[data-mode="zen"] { display: inline; }
.d-glyph {
  display: inline-block; color: var(--accent); font-size: 0.72em;
  transform: translateY(-0.12em);
}

.d-sub { margin-top: 24px; font-size: 15px; color: var(--gray-mid); }
.d-more {
  color: var(--gray-mid); text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s ease;
  /* Keeps "More about me ↗" together as one unit — it can still wrap to
     its own line below the location/languages if it doesn't fit, but
     never splits internally (e.g. "me" stranding the arrow on its own
     line below it). */
  white-space: nowrap;
}
.d-more:hover { color: var(--black); }
.d-arrow { display: inline-block; }

.d-hero-circle {
  position: relative;
  width: 260px; height: 260px;
  -webkit-user-select: none; user-select: none;
}
/* Desktop only, and scoped by min-width rather than reset inside the
   mobile block, so the mobile layout (where the circle is centered in a
   single column) can't pick this up. The grid otherwise sits the circle
   hard against the hero's right content edge; this is the knob for how
   far in from that edge it reads best. */
@media (min-width: 781px) {
  .d-hero-circle { margin-right: 16px; }
}
.d-hero-circle .v2-callout-circle {
  position: absolute; top: 0; left: 0; width: 260px; height: 260px;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease; cursor: pointer;
}
.d-hero-circle .v2-callout-circle.is-active { opacity: 1; pointer-events: auto; }

/* Desktop/normal-width: pushed down further, more clearly under the
   fold. Overridden smaller on tablet/mobile below, where there's much
   less vertical room to spare. */
/* Desktop: the hero fills exactly the first screen below the nav (82px
   tall), with its content centered in it, so the snapshots always start
   at the fold however tall the window is, instead of a fixed distance
   down that peeked into view on taller screens. min-height, so on a
   short window it's just as tall as its content needs. */
@media (min-width: 781px) {
  .d-hero {
    margin-top: 0; margin-bottom: 0; box-sizing: border-box;
    min-height: calc(100vh - 82px); min-height: calc(100svh - 82px);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 40px; padding-bottom: 56px;
  }
  .d-hero .d-avatar-wrap { margin-top: 0; }
  .d-hero + .d-snapshots-band { margin-top: 0; }
}

/* ---------- SNAPSHOTS BAND ---------- */
/* Light gray backdrop behind the section head + card row. Top padding
   matches the 24px gap .v2-section-head already keeps above the card
   row (its own margin-bottom), so the whitespace reads even on both
   sides of the heading; bottom padding is 0 so the band hugs the
   cards' own bottom edge exactly, with no added gray beneath them. */
.d-snapshots-band {
  background: var(--gray-band);
  padding: 24px 0 0;
  /* Same left/right inset the nav/hero's max-width:1200px + auto-margin
     centering produces — computed directly instead of copying that
     recipe, so it stays correct on every element regardless of that
     element's own width. Used below on both the section head (so the
     heading/arrows still line up with the nav) and the scroll-wrap
     (so the row starts at the same spot but stays uncapped on the
     right, rather than being boxed into the same narrow 1200px column
     and cutting cards short). */
  /* 100% here (not 100vw) resolves against each consumer's own
     containing-block width once substituted in — which excludes the
     scrollbar, same as the nav's max-width:1200px + auto-margin
     centering does. 100vw includes the scrollbar and was landing ~8px
     off from the nav on typical desktop widths. */
  --band-inset: max(24px, calc((100% - 1200px) / 2 + 24px));
}
/* The second row sits in the same grey field as the first, so the only
   thing between its heading and the cards above it is this padding. The
   24px the band carries by default is sized for sitting under the hero's
   white space, and read cramped directly beneath a row of cards. Must
   come after the rule above, whose `padding` shorthand would otherwise
   win on equal specificity. */
.d-systems-band { padding-top: 88px; }
/* Heading text stays matched to the card row's left edge (--band-inset);
   the prev/next arrows sit on the opposite end of this same flex row,
   so their own edge is independent — pinned to the page's flat 24px
   margin instead, flush with the true right edge of the page rather
   than lining up with the (narrower) 1200px text column. */
.d-snapshots-band .v2-section-head {
  margin-top: 0; max-width: none; padding-left: var(--band-inset); padding-right: 24px;
}
.d-snapshots-band .v2-scroll-wrap { max-width: none; padding-bottom: 0; }
/* Row's own base 96px left padding (home-v2.css) is tuned for the live
   homepage's wider page margin — matched to the same computed inset as
   the section head above it, so the first card's left edge always
   lines up with the heading regardless of viewport width. */
.d-snapshots-band .v2-card-row { padding-bottom: 0; padding-left: var(--band-inset); }

/* ---------- COMPANY SECTIONS ----------
   The band itself sits on the page color now; under a "Quick project
   samples" title, each company gets its cards on a light gray strip and,
   below that, a white strip with the company name and a short framing
   paragraph plus a proof link. Card bottoms sit flush on the white strip. */
.d-snapshots-band.d-work { background: none; padding-top: 0; }
.d-snapshots-title {
  padding: 0 24px 0 var(--band-inset); margin-bottom: 20px; font-size: 15px;
}
.d-snapshots-title p { margin: 0; }
.d-snapshots-title strong { color: var(--accent); font-weight: 600; margin-right: 8px; }
.d-snapshots-title em { color: var(--gray-mid); font-size: 13px; }
.d-company .v2-scroll-wrap { background: #f0f0ee; padding-top: 24px; }
.d-company-info {
  display: flex; align-items: flex-start; gap: 24px; box-sizing: border-box;
  padding: 28px 24px 56px var(--band-inset);
  max-width: calc(var(--band-inset) + 1176px);
}

/* Extra air under Remitly's text, before the Duolingo cards begin. */
.d-company[aria-label="Remitly"] .d-company-info { padding-bottom: 96px; }
.d-company-name {
  flex: 0 0 104px; margin: 0; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--black);
  text-transform: lowercase;
}
.d-company-body { flex: 1 1 auto; min-width: 0; }
.d-company-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray-mid); }
.d-company-link {
  display: inline-block; margin-top: 10px; font-size: 13px;
  color: var(--accent); text-decoration: none;
}
.d-company-link:hover { text-decoration: underline; }
/* Card titles a size down from the base 17px, as in the mockup, so the
   longest one ("home and navigation revamp") stays on one line. */
.d-company .v2-card-title { font-size: 15px; }

/* ---------- ENTRANCE ---------- */
/* Sequenced in two beats: the circle fades in on its own first
   (.d-fade-in, no delay), then once that's mostly settled the rest of
   the hero (avatar, headline, subtext) slides up and fades in together
   — same delay across all three so they move as one group, slower than
   before (1.1s, was 0.8s) so it reads as a deliberate settle. */
@keyframes d-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.d-fade-up {
  opacity: 0;
  animation: d-fade-up 1.6s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--fade-delay, 0s);
}
@keyframes d-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.d-fade-in {
  opacity: 0;
  animation: d-fade-in 0.6s ease forwards;
  animation-delay: var(--fade-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .d-fade-up, .d-fade-in { animation: none; opacity: 1; }
}

@media (max-width: 780px) {
  /* Single column now (avatar, headline, circle, sub are genuine
     siblings, so this just falls back to a plain flex stack). Switched
     from the earlier min-height + auto-margin centering scheme to plain
     fixed spacing throughout — with this many specific pixel/line-count
     requests to hit, a dynamic "share the leftover space" layout made
     the numbers a moving target; fixed values are predictable and the
     column is just as tall as its content, so there's no risk of
     stretching into a mobile browser's address bar either. */
  .d-hero { margin-top: 40px; }
  /* Nav items were nearly edge-to-edge with no room left over for
     space-between to push the logo away from "Home" — a narrower gap
     between the links themselves frees up that room instead of adding a
     separate margin between the logo and the group. This tier is sized
     for real phones (~360px and up); an even tighter override for
     narrower contexts (a docked sidebar, say) follows below. */
  .d-nav { padding-left: 20px; padding-right: 20px; position: relative; z-index: 50; }
  /* The dropdown's parent here is .d-nav-links (no padding to inherit), so
     match the nav's 20px side padding directly. */
  .d-nav .nav-menu { padding-left: 20px; padding-right: 20px; }
  .d-nav .v2-logo-img { height: 28px; }
  .d-nav-links { gap: 16px; }
  .d-mood-cycle { min-width: 58px; }
  /* "Project snapshots | I'll be quick." stacks into two lines instead of
     staying on one — the divider pipe only made sense inline, so it's
     hidden once the tagline drops to its own line below the title. */
  .d-snapshots-band .v2-section-head p { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .d-snapshots-band .v2-section-head .v2-accent-divider { display: none; }
  /* Name stacks above its paragraph; the tagline drops under the title. */
  .d-company-info { flex-direction: column; gap: 6px; padding-bottom: 44px; }
  .d-company[aria-label="Remitly"] .d-company-info { padding-bottom: 72px; }
  .d-company-name { flex-basis: auto; }
  .d-snapshots-title em { display: block; margin-top: 2px; }
  /* At least one full screen tall regardless of the device's actual
     height, so the snapshots band right after it never peeks into the
     first screen on a taller phone — without hardcoding a gap tuned for
     one specific device height, which either wastes space on shorter
     screens or isn't enough on taller ones (both happened here before).
     Content stays put at the top; on a short screen the hero is just as
     tall as its content needs (min-height doesn't force it shorter), on
     a tall one the natural gap after .d-sub simply grows to fill it. */
  /* Sized so the hero ends right at the fold rather than a full screen
     below its own top (the nav + 40px margin above it already take
     ~112px of that screen), and capped so a very tall window (a
     stretched desktop side panel, say) doesn't pad it out with a big
     empty gap — real phones stay under the cap, so the band still
     starts just below the fold on them. */
  .d-hero {
    min-height: min(calc(100vh - 112px), 760px);
    min-height: min(calc(100svh - 112px), 760px);
    box-sizing: border-box;
    margin-bottom: 0; /* the base rule's 100px is for the desktop layout's own rhythm — min-height plus the band's own margin-top below already provide the mobile gap */
  }
  .d-hero-text { display: flex; flex-direction: column; }
  /* Fluid instead of a fixed size — scales with the viewport so it's
     always as large as comfortably fits, rather than a single px value
     that reads small on a wide phone and cramped on a narrow one. 60vw
     keeps roughly a fifth of the width as breathing room on each side
     (e.g. ~70px each at 375px wide); the floor keeps it from shrinking
     too far on very narrow screens, the ceiling caps it at the desktop
     size so it doesn't balloon past that once there's tablet-width room
     to spare within this same breakpoint. */
  .d-hero-circle, .d-hero-circle .v2-callout-circle { width: clamp(180px, 60vw, 260px); height: clamp(180px, 60vw, 260px); }
  .d-hero-circle { align-self: center; margin-bottom: 28px; }
  /* Two fewer lines than the 26px floor it was clamped to. */
  .d-headline { font-size: 22px; }
  /* margin-top (not the headline's own margin-bottom) is the gap that
     was reading as "too close" — moves the language row down away from
     the headline without touching the fixed 40px below it, which was
     already right. Smaller font so "English, Portuguese (BR), Swedish"
     fits on one line instead of wrapping mid-list. */
  .d-sub { margin-top: 28px; margin-bottom: 40px; font-size: 12px; }
  /* A small fixed breathing gap on top of whatever min-height above
     already guarantees — the band should never sit flush against the
     exact fold pixel either. */
  .d-hero + .d-snapshots-band { margin-top: 24px; }
}
/* Rescues the nav specifically on genuinely narrow contexts (a resized
   sidebar down around 300-320px, smaller/older phones) where even the
   tier above would overflow and clip "[snappy]" off the right edge. */
@media (max-width: 340px) {
  .d-nav { padding-left: 16px; padding-right: 16px; }
  .d-nav .nav-menu { padding-left: 16px; padding-right: 16px; }
  .d-nav .v2-logo-img { height: 24px; }
  .d-nav-links { gap: 10px; }
  .d-nav-links a { font-size: 13px; }
  .d-mood-cycle { min-width: 54px; font-size: 12px; }
}
/* Portrait only — landscape phones/tablets keep the avatar-first order
   above, where there's width to spare and the same top-heavy stack reads
   fine. In portrait the circle leads instead, ahead of the avatar. */
@media (max-width: 780px) and (orientation: portrait) {
  .d-hero-circle { order: -1; }
}
@media (max-width: 640px) {
  .d-hero { padding: 0 20px; }
}

/* ---------- FOOTER ROW ----------
   Copyright on the left edge of the content column; a discreet
   "Unlock" + padlock on the right edge (see dive-lock.js), with its
   small password field opening just to its left. */
.d-footer-row {
  justify-content: flex-start; gap: 10px; max-width: 1200px; margin: 0 auto;
  padding-left: 24px; padding-right: 24px; box-sizing: border-box;
}
.d-footer-row .dive-lock-form { margin-left: auto; }
.d-footer-row .dive-lock-form[hidden] + .dive-lock { margin-left: auto; }
.dive-lock {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  /* The accent color, like the VIVIAN logo (it follows the mood too). */
  font: inherit; font-size: 12px; line-height: 1; color: var(--accent);
  transition: opacity 0.15s ease;
}
.dive-lock:hover, .dive-lock:focus-visible { opacity: 0.7; }
.dive-lock:focus { outline: none; }
.dive-lock:focus-visible { outline: 1px solid var(--gray-light); outline-offset: 2px; border-radius: 3px; }
.dive-lock-icon { width: 12px; height: 12px; }
.dive-lock[hidden] { display: none; }
.dive-lock .dive-lock-open, .dive-unlocked .dive-lock .dive-lock-closed { display: none; }
.dive-unlocked .dive-lock .dive-lock-open { display: block; }
.dive-unlocked .dive-lock .dive-lock-label.dive-lock-open { display: inline; }
.dive-lock-form { margin: 0; }
.dive-lock-input {
  width: 110px; font: inherit; font-size: 12px; color: var(--black);
  background: transparent; border: 0; border-bottom: 1px solid #d6d6d2; padding: 1px 2px; outline: none;
}
.dive-lock-input:focus { border-bottom-color: var(--gray-mid); }
.dive-lock-input.is-wrong { animation: dive-lock-shake 0.35s ease; border-bottom-color: #e07a7a; }
@keyframes dive-lock-shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@media (max-width: 780px) { .d-footer-row { padding-left: 20px; padding-right: 20px; } }
/* footer.site-footer itself picks up 24px side padding at this width (style.css). */
@media (max-width: 640px) { .d-footer-row { padding-left: 0; padding-right: 0; } }

/* ---------- SYSTEM SNAPSHOTS: FLOATING CARD STACK ----------
   Three cards fanned out and overlapping on a gray strip (see
   system-stack.js). Every card is black on its front and white on its
   back, in big bold type. Each .sys-card is a stack of three layers so
   their transforms never fight: the card itself takes its slot
   (position, tilt, layer); .sys-float bobs it gently; .sys-inner flips
   it. */
.sys-strip {
  background: #f0f0ee; padding: 56px 24px 44px; text-align: center; overflow: hidden;
}
.sys-stage {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --sys-w: 300px; --sys-h: 500px; --sys-fan: 84px;
  position: relative; margin: 0 auto;
  width: calc(var(--sys-w) + var(--sys-fan) * 3 + 24px);
  max-width: 100%; height: calc(var(--sys-h) + 72px);
  container-type: inline-size; /* lets Zen's row measure itself in cqw */
}
.sys-card {
  --tx: 0px; --ty: 0px; --rot: 0deg; --sc: 1;
  position: absolute; top: 24px; left: 50%;
  width: var(--sys-w); height: var(--sys-h); margin-left: calc(var(--sys-w) / -2);
  /* --dx / --drot are set by system-stack.js while the front card is
     being dragged; they're unset (0) otherwise. */
  transform: translate(calc(var(--tx) + var(--dx, 0px)), var(--ty)) rotate(calc(var(--rot) + var(--drot, 0deg))) scale(var(--sc));
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y; /* vertical swipes still scroll the page */
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.sys-card.is-dragging { transition: none; cursor: grabbing; }
.sys-card[data-slot="0"] { z-index: 5; }
/* The other four fan out either side of the front card, each one further
   back, lower and more tilted. */
.sys-card[data-slot="1"] { z-index: 4; --tx: calc(var(--sys-fan) * -1); --ty: 12px; --rot: -6deg; --sc: 0.95; }
.sys-card[data-slot="2"] { z-index: 3; --tx: var(--sys-fan); --ty: 20px; --rot: 6deg; --sc: 0.91; }
.sys-card[data-slot="3"] { z-index: 2; --tx: calc(var(--sys-fan) * -2); --ty: 32px; --rot: -11deg; --sc: 0.87; }
.sys-card[data-slot="4"] { z-index: 1; --tx: calc(var(--sys-fan) * 2); --ty: 44px; --rot: 11deg; --sc: 0.83; }
/* Any further cards wait out of sight behind the stack. */
.sys-card[data-slot="5"], .sys-card[data-slot="6"] {
  z-index: 0; --tx: 0px; --ty: 26px; --rot: 0deg; --sc: 0.8;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, visibility 0s linear 0.6s;
}
/* Only the front card reacts to hover (a little lift); the ones behind
   stay put. */
.sys-card[data-slot="0"]:hover { --ty: -6px; }
.sys-card:focus-visible .sys-face { outline: 2px solid var(--accent); outline-offset: 3px; }

.sys-float {
  width: 100%; height: 100%; perspective: 1200px;
  animation: sys-bob 6s ease-in-out infinite alternate;
}
.sys-card:nth-child(2) .sys-float { animation-duration: 7.2s; animation-delay: -2.4s; }
.sys-card:nth-child(3) .sys-float { animation-duration: 6.6s; animation-delay: -4.1s; }
.sys-card:nth-child(4) .sys-float { animation-duration: 7.8s; animation-delay: -1.3s; }
.sys-card:nth-child(5) .sys-float { animation-duration: 6.9s; animation-delay: -5.2s; }
@keyframes sys-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
.sys-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.sys-card.is-flipped .sys-inner { transform: rotateY(180deg); }

.sys-face {
  position: absolute; inset: 0; box-sizing: border-box; padding: 28px 26px 26px;
  border-radius: 18px; overflow: hidden; text-align: left;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Front: black. Back: white. */
.sys-front {
  background: #232322; color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.sys-back {
  transform: rotateY(180deg); background: #fff; color: var(--v2-black);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* A short bar in the accent color (teal in Snappy, orange in Zen) tops
   each face. */
.sys-face::before {
  content: ''; display: block; width: 36px; height: 5px; margin-bottom: 22px;
  border-radius: 3px; background: var(--accent);
}
/* The cards behind sit in shadow: a dark veil over each face that fades
   away when the card comes forward (and back when it goes behind). */
.sys-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.6s ease;
}
.sys-card[data-slot="1"] .sys-face::after,
.sys-card[data-slot="2"] .sys-face::after,
.sys-card[data-slot="3"] .sys-face::after,
.sys-card[data-slot="4"] .sys-face::after { opacity: 1; }

.sys-title { margin: 0; }
/* The front is one line, set big and bold: it's the whole front. */
.sys-front .sys-line {
  margin: 0; font-weight: 800; font-size: 31px; line-height: 1.12; letter-spacing: -0.032em;
}
.sys-icon {
  display: block; width: 44px; height: 44px; margin-bottom: 22px; background: var(--accent);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.sys-face:has(> .sys-icon)::before { display: none; } /* the icon takes the bar's place */
.sys-icon-rabbit { --icon: url('../images/icons/rabbit.svg'); }
.sys-icon-clock { --icon: url('../images/icons/clock-clockwise.svg'); }
.sys-icon-bug { --icon: url('../images/icons/bug-beetle.svg'); }
.sys-icon-lego { --icon: url('../images/icons/lego.svg'); }
.sys-icon-island { --icon: url('../images/icons/island.svg'); }
.sys-back .sys-hl { color: var(--accent); }
.sys-back .sys-title {
  font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-mid);
}
.sys-back .sys-note {
  margin: 16px 0 0; font-weight: 600; font-size: 14pt; line-height: 1.4; letter-spacing: -0.015em;
}
.sys-flip-icon {
  position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.5s ease;
}
.sys-card[data-slot="0"]:hover .sys-flip-icon { opacity: 0.95; transform: rotate(90deg); }

@media (max-width: 640px) {
  .sys-strip { padding: 40px 16px 32px; }
  .sys-stage { --sys-w: min(66vw, 270px); --sys-h: calc(var(--sys-w) * 1.6); --sys-fan: 24px; }
  .sys-face { padding: 22px 20px 20px; }
  .sys-face::before { margin-bottom: 16px; }
  .sys-front .sys-line { font-size: 25px; }
  .sys-back .sys-note { font-size: 14px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-float { animation: none; }
  .sys-card, .sys-inner { transition-duration: 0.01s; }
}

/* More air between the last company's text and the System snapshots
   heading below it. Scoped to that band, so the spacing between the
   company sections (and above the footer) is unchanged. */
.d-snapshots-band.d-work.d-systems { padding-top: 56px; }

/* Taglines under the section headings are parked for now: they carry
   `hidden` in index.html, and this keeps them off despite their display rule. */
.d-snapshots-title em[hidden] { display: none; }

/* The mood word inside the System snapshots subheader: same accent color
   as the nav's [snappy] label, and it cycles the mood the same way. */
.d-mood-inline {
  display: inline; padding: 0; border: none; background: none;
  font: inherit; color: var(--accent); cursor: pointer; text-align: left;
  -webkit-user-select: none; user-select: none; transition: opacity 0.15s ease;
}
.d-mood-inline:hover { opacity: 0.7; }
.d-mood-inline:focus { outline: none; }
.d-mood-inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Carousel dots under the stack: one per card, the front (or, in Zen, the
   last-picked) one lit in the accent color. They're real buttons, so
   tapping one brings that card up. The button is a roomy 28px tap target
   with the visible dot drawn inside it. */
.sys-dots { display: flex; justify-content: center; gap: 2px; margin: -10px 0 0; position: relative; z-index: 6; }
.sys-dot {
  position: relative; width: 28px; height: 28px; padding: 0; border: none; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sys-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}
.sys-dot.is-active::before { background: var(--accent); transform: scale(1.3); }
.sys-dot:focus { outline: none; }
.sys-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- ZEN: the same cards in a straight, still row ----------
   In Zen the fan lays out flat across the same width the text above uses
   (min(100%, 1152px) inside the strip's padding lines up with
   --band-inset). Cards sit upright, evenly spaced from the left edge to
   the right, and overlap when they don't all fit. They don't bob or lift,
   and each flips where it stands. The last one tapped is raised above the
   others (system-stack.js sets its z-index) and stays there, even after
   it's turned back over; the first tap lifts a card, the second turns it. --i is each card's place in the row. */
.sys-card:nth-child(1) { --i: 0; }
.sys-card:nth-child(2) { --i: 1; }
.sys-card:nth-child(3) { --i: 2; }
.sys-card:nth-child(4) { --i: 3; }
.sys-card:nth-child(5) { --i: 4; }
body[data-mood="zen"] .sys-stage { width: min(100%, 1152px); }
body[data-mood="zen"] .sys-card,
body[data-mood="zen"] .sys-card[data-slot] {
  --tx: calc(var(--i) * ((100cqw - var(--sys-w)) / var(--sys-gaps, 3)) - 50cqw + var(--sys-w) / 2);
  --ty: 0px; --rot: 0deg; --sc: 1;
  z-index: calc(var(--i) + 1);
  opacity: 1; visibility: visible; pointer-events: auto;
}
body[data-mood="zen"] .sys-card[data-slot]:hover { --ty: 0px; }
body[data-mood="zen"] .sys-float { animation: none; }
body[data-mood="zen"] .sys-card[data-slot] .sys-face::after { opacity: 0; }
/* Once a card has been picked, the others dim a touch. */
body[data-mood="zen"] .sys-stage.has-pick .sys-card[data-slot]:not(.is-top) .sys-face::after { opacity: 0.4; }
body[data-mood="zen"] .sys-card:hover .sys-flip-icon { opacity: 0.95; transform: rotate(90deg); }