/* =============================================================================
   potentialitylabs.com — the landing page stylesheet.

   Hand-authored, no build step, no dependency. Three regions, in order:
     1. TOKENS      — the design-value law: every visual value comes from a named token
     2. @FONT-FACE  — self-hosted faces, same-origin, relative paths only
     3. COMPONENTS  — layout, components, motion, states

   Design truth: potentialitylabs-design@design/1-landing-page —
     tokens/*.json (the names cited in every declaration below)
     designs/web/screens/Landing.dc.html (the artifact; 4 states)
     designs/web/decisions.md (decisions 10-16)
   Screen spec: docs/design/screens/landing.md

   Mobile-first: the base rules ARE the mobile state (below space.breakpoint); the single
   min-width media query raises the type ramp, opens the 3-across grid, and enables hover
   motion, exactly as the artifact's two canvases show.
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* --- color.light.* (tokens/color.json), assigned to scheme-neutral names ---------------
     The dark block at the end of this region reassigns these same names from color.dark.*,
     so no component rule ever names a scheme. */
  --bg: #FBF7F0;                                   /* color.light.bg */
  --text: #2B2420;                                 /* color.light.text */
  --text-secondary: #6B5F55;                       /* color.light.textSecondary */
  --border: #ECE3D6;                               /* color.light.border */
  --button-bg: #2B2420;                            /* color.light.buttonBg */
  --button-text: #FBF7F0;                          /* color.light.buttonText */
  --accent-self-ink: #8F6220;                      /* color.light.accentSelf.ink */
  --accent-self-tint: #F5E7C8;                     /* color.light.accentSelf.tint */
  --accent-others-ink: #B14A32;                    /* color.light.accentOthers.ink */
  --accent-others-tint: #F7E0D6;                   /* color.light.accentOthers.tint */
  --accent-world-ink: #41754B;                     /* color.light.accentWorld.ink */
  --accent-world-tint: #DCEBD8;                    /* color.light.accentWorld.tint */
  --shadow-card-hover: 0 12px 24px rgba(43, 36, 32, 0.10);  /* color.shadow.cardHover */

  /* --- space.json ----------------------------------------------------------------------- */
  --space-xs: 12px;                                /* space.xs */
  --space-sm: 24px;                                /* space.sm */
  --space-md: 48px;                                /* space.md */
  --space-lg: 64px;                                /* space.lg */
  --space-xl: 96px;                                /* space.xl */
  --space-gutter-desktop: 48px;                    /* space.gutterDesktop */
  --space-gutter-mobile: 24px;                     /* space.gutterMobile */
  --space-measure: 1040px;                         /* space.measure */
  --space-measure-prose: 640px;                    /* space.measureProse */
  --space-card-gap: 24px;                          /* space.cardGap */
  /* space.breakpoint (900px) cannot live here: custom properties are not allowed inside a
     media condition and the no-build law forbids a preprocessor. It appears as a literal in
     region 3, on the media-query line, with its citation. (web decision 15, provisional) */

  /* --- radius.json ---------------------------------------------------------------------- */
  --radius-card: 20px;                             /* radius.card */
  --radius-pill: 999px;                            /* radius.pill */

  /* --- type.json ------------------------------------------------------------------------ */
  --type-family-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;  /* type.familyDisplay */
  --type-family-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;             /* type.familyBody */
  --type-display-size: 72px;                       /* type.display.size */
  --type-display-size-mobile: 42px;                /* type.display.sizeMobile */
  --type-display-weight: 700;                      /* type.display.weight */
  --type-display-line-height: 1.05;                /* type.display.lineHeight */
  --type-display-tracking: -0.01em;                /* type.display.tracking */
  --type-heading-size: 40px;                       /* type.heading.size */
  --type-heading-size-mobile: 30px;                /* type.heading.sizeMobile */
  --type-heading-weight: 600;                      /* type.heading.weight */
  --type-heading-line-height: 1.15;                /* type.heading.lineHeight */
  --type-title-size: 24px;                         /* type.title.size */
  --type-title-size-mobile: 21px;                  /* type.title.sizeMobile */
  --type-title-weight: 600;                        /* type.title.weight */
  --type-title-line-height: 1.25;                  /* type.title.lineHeight */
  --type-lead-size: 24px;                          /* type.lead.size */
  --type-lead-size-mobile: 19px;                   /* type.lead.sizeMobile */
  --type-lead-line-height: 1.5;                    /* type.lead.lineHeight */
  --type-body-size: 17px;                          /* type.body.size */
  --type-body-size-mobile: 16px;                   /* type.body.sizeMobile */
  --type-body-weight: 400;                         /* type.body.weight */
  --type-body-line-height: 1.65;                   /* type.body.lineHeight */
  --type-small-size: 14px;                         /* type.small.size */
  --type-small-line-height: 1.5;                   /* type.small.lineHeight */
  --type-label-size: 13px;                         /* type.label.size */
  --type-label-weight: 700;                        /* type.label.weight */
  --type-label-tracking: 0.06em;                   /* type.label.tracking */
  --type-wordmark-size: 20px;                      /* type.wordmark.size */
  --type-wordmark-weight: 600;                     /* type.wordmark.weight */
  --type-button-size: 18px;                        /* type.button.size */
  --type-button-weight: 700;                       /* type.button.weight */

  /* --- motion.json ---------------------------------------------------------------------- */
  --motion-duration-fast: 250ms;                   /* motion.durationFast */
  --motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* motion.easeBounce */
  --motion-bob-duration: 5s;                       /* motion.bob */
  --motion-pulse-duration: 2.4s;                   /* motion.pulse */
  --motion-pulse-opacity: 0.3;                     /* motion.pulse (opacity 1 -> 0.3) */
  --motion-pop-duration: 500ms;                    /* motion.pop */
  --motion-pop-scale: 1.5;                         /* motion.pop (scale 1 -> 1.5 -> 1) */
  --motion-hover-lift-y: -6px;                     /* motion.hoverLift */
  --motion-hover-lift-rotate: -1deg;               /* motion.hoverLift */
  --motion-letter-lift-y: -8px;                    /* motion.letterBounce */
  --motion-letter-rotate: -5deg;                   /* motion.letterBounce */
  --motion-button-scale: 1.04;                     /* motion.buttonWiggle */
  --motion-button-rotate: -1.5deg;                 /* motion.buttonWiggle */

  /* --- focus.json ------------------------------------------------------------------------ */
  --focus-ring-width: 2px;                         /* focus.ring (2px solid accentOthers.ink) */
  --focus-offset: 2px;                             /* focus.offset */

  /* =====================================================================================
     ARTIFACT VALUES AWAITING A TOKEN — web decision 16.

     Every value below is transcribed from designs/web/screens/Landing.dc.html and has no
     named token in tokens/*.json. Decision 16 enumerated the text sizes (15px header/pill
     label, 17px mobile wordmark, 16px mobile contact button), the dark hover shadow and the
     -7px bob keyframe; deriving the whole page needs the spacing, ornament and rotation
     values here too, which are the same kind of gap in the record. They are TRANSCRIPTION,
     never invention: each names the artifact element it comes from, and the next design
     session reconciles the token record. Nothing outside this block uses a raw value.
     ===================================================================================== */

  --a16-border-width: 1px;                         /* web decision 16: awaiting token - hairline borders */

  /* header + wordmark */
  --a16-header-pad-y: 28px;                        /* web decision 16: awaiting token - header padding */
  --a16-header-pad-y-mobile: 20px;                 /* web decision 16: awaiting token - header padding, mobile */
  --a16-wordmark-gap-mobile: 10px;                 /* web decision 16: awaiting token - mark/name gap, mobile */
  --a16-wordmark-size-mobile: 17px;                /* web decision 16: awaiting token - mobile wordmark */
  --a16-dot-size: 10px;                            /* web decision 16: awaiting token - dot-trio dot */
  --a16-dot-size-mobile: 8px;                      /* web decision 16: awaiting token - dot-trio dot, mobile */
  --a16-dot-gap: 4px;                              /* web decision 16: awaiting token - dot-trio gap */
  --a16-dot-gap-mobile: 3px;                       /* web decision 16: awaiting token - dot-trio gap, mobile */

  /* pills (header affordance + the four value pills) */
  --a16-pill-label-size: 15px;                     /* web decision 16: awaiting token - header/pill label */
  --a16-pill-weight: 600;                          /* web decision 16: awaiting token - value pill weight */
  --a16-pill-pad-y: 10px;                          /* web decision 16: awaiting token - pill padding */
  --a16-pill-pad-x: 20px;                          /* web decision 16: awaiting token - pill padding */
  --a16-pill-pad-y-mobile: 9px;                    /* web decision 16: awaiting token - value pill padding, mobile */
  --a16-pill-pad-x-mobile: 16px;                   /* web decision 16: awaiting token - pill padding, mobile */
  --a16-pill-gap-mobile: 10px;                     /* web decision 16: awaiting token - pill row gap, mobile */
  --a16-pill-row-margin-mobile: 20px;              /* web decision 16: awaiting token - pill row margin, mobile */

  /* hero */
  --a16-hero-pad-top: 72px;                        /* web decision 16: awaiting token - hero padding */
  --a16-hero-pad-bottom: 88px;                     /* web decision 16: awaiting token - hero padding */
  --a16-hero-pad-top-mobile: 56px;                 /* web decision 16: awaiting token - hero padding, mobile */
  --a16-hero-name-margin: 28px;                    /* web decision 16: awaiting token - H1 margin */
  --a16-hero-name-margin-mobile: 20px;             /* web decision 16: awaiting token - H1 margin, mobile */
  --a16-lead-margin-mobile: 18px;                  /* web decision 16: awaiting token - lead margin, mobile */
  --a16-orb-gap: 10px;                             /* web decision 16: awaiting token - orb gap */
  --a16-orb-size: 18px;                            /* web decision 16: awaiting token - outer orb */
  --a16-orb-size-center: 24px;                     /* web decision 16: awaiting token - centre orb */
  --a16-orb-size-mobile: 14px;                     /* web decision 16: awaiting token - outer orb, mobile */
  --a16-orb-size-center-mobile: 18px;              /* web decision 16: awaiting token - centre orb, mobile */
  --a16-orb-row-height: 34px;                      /* web decision 16: awaiting token - orb row box */
  --a16-orb-row-height-mobile: 26px;               /* web decision 16: awaiting token - orb row box, mobile */
  --a16-orb-stagger: 0.6s;                         /* web decision 16: awaiting token - bob stagger per orb */
  --a16-hero-word-space: 0.28em;                   /* web decision 16: awaiting token - H1 word gap */
  --a16-bob-lift: -7px;                            /* web decision 16: awaiting token - artifact keyframe (motion.bob says +/-6px) */

  /* connection cards */
  --a16-card-pad: 32px;                            /* web decision 16: awaiting token - card padding */
  --a16-card-pad-mobile: 28px;                     /* web decision 16: awaiting token - card padding, mobile */
  --a16-card-gap-mobile: 16px;                     /* web decision 16: awaiting token - card stack gap, mobile */
  --a16-card-stack-gap: 10px;                      /* web decision 16: awaiting token - label/title/body rhythm */
  --a16-card-stack-gap-mobile: 8px;                /* web decision 16: awaiting token - label/title/body rhythm, mobile */
  --a16-card-rotate-alternate: 1deg;               /* web decision 16: awaiting token - middle card tilts the other way */
  --a16-motif-width: 48px;                         /* web decision 16: awaiting token - two-circle motif */
  --a16-motif-height: 30px;                        /* web decision 16: awaiting token - two-circle motif */
  --a16-motif-circle: 26px;                        /* web decision 16: awaiting token - motif circle */
  --a16-motif-offset: 18px;                        /* web decision 16: awaiting token - motif circle overlap */
  --a16-motif-margin: 20px;                        /* web decision 16: awaiting token - motif to label */
  --a16-motif-width-mobile: 44px;                  /* web decision 16: awaiting token - motif, mobile */
  --a16-motif-height-mobile: 26px;                 /* web decision 16: awaiting token - motif, mobile */
  --a16-motif-circle-mobile: 22px;                 /* web decision 16: awaiting token - motif circle, mobile */
  --a16-motif-offset-mobile: 15px;                 /* web decision 16: awaiting token - motif overlap, mobile */
  --a16-motif-margin-mobile: 16px;                 /* web decision 16: awaiting token - motif to label, mobile */
  --a16-motif-stroke: 2px;                         /* web decision 16: awaiting token - motif stroke */
  --a16-motif-fade: 0.45;                          /* web decision 16: awaiting token - trailing circle opacity */
  --a16-body-line-height-mobile: 1.6;              /* web decision 16: awaiting token - body leading, mobile */

  /* status card */
  --a16-prose-narrow: 560px;                       /* web decision 16: awaiting token - narrow prose measure */
  --a16-status-pad-y: 28px;                        /* web decision 16: awaiting token - status card padding */
  --a16-status-pad-x: 36px;                        /* web decision 16: awaiting token - status card padding */
  --a16-status-dot-size: 8px;                      /* web decision 16: awaiting token - pulsing dot */
  --a16-status-dot-gap: 8px;                       /* web decision 16: awaiting token - dot to label */

  /* contact + footer */
  --a16-contact-margin: 112px;                     /* web decision 16: awaiting token - contact section margin */
  --a16-contact-margin-mobile: 72px;               /* web decision 16: awaiting token - contact section margin, mobile */
  --a16-contact-lead-margin-mobile: 10px;          /* web decision 16: awaiting token - reassurance margin, mobile */
  --a16-button-row-margin: 28px;                   /* web decision 16: awaiting token - button row margin */
  --a16-button-pad-y: 18px;                        /* web decision 16: awaiting token - contact button padding */
  --a16-button-pad-x: 36px;                        /* web decision 16: awaiting token - contact button padding */
  --a16-button-pad-y-mobile: 16px;                 /* web decision 16: awaiting token - contact button padding, mobile */
  --a16-button-pad-x-mobile: 26px;                 /* web decision 16: awaiting token - contact button padding, mobile */
  --a16-button-size-mobile: 16px;                  /* web decision 16: awaiting token - mobile contact button */
  --a16-footer-margin-mobile: 72px;                /* web decision 16: awaiting token - footer margin, mobile */
  --a16-footer-pad-y: 28px;                        /* web decision 16: awaiting token - footer padding */
  --a16-footer-gap-mobile: 6px;                    /* web decision 16: awaiting token - stacked footer gap, mobile */

  /* motion values the artifact adds to the motion tokens */
  --a16-letter-rotate-b: 4deg;                     /* web decision 16: awaiting token - per-letter hover alternation */
  --a16-letter-rotate-c: -4deg;                    /* web decision 16: awaiting token - per-letter hover alternation */
  --a16-letter-rotate-d: 5deg;                     /* web decision 16: awaiting token - per-letter hover alternation */
  --a16-rotate-alternate: 1.5deg;                  /* web decision 16: awaiting token - pill hover alternation */
  --a16-pop-rotate: 12deg;                         /* web decision 16: awaiting token - pop keyframe rotation */
}

/* --- color.dark.* (tokens/color.json) — same names, dark values ------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #211B17;                                 /* color.dark.bg */
    --text: #F2EBE2;                               /* color.dark.text */
    --text-secondary: #B5A899;                     /* color.dark.textSecondary */
    --border: #3A322B;                             /* color.dark.border */
    --button-bg: #F2EBE2;                          /* color.dark.buttonBg */
    --button-text: #211B17;                        /* color.dark.buttonText */
    --accent-self-ink: #DFB56A;                    /* color.dark.accentSelf.ink */
    --accent-self-tint: #38301F;                   /* color.dark.accentSelf.tint */
    --accent-others-ink: #E89B82;                  /* color.dark.accentOthers.ink */
    --accent-others-tint: #3A2A23;                 /* color.dark.accentOthers.tint */
    --accent-world-ink: #94C99B;                   /* color.dark.accentWorld.ink */
    --accent-world-tint: #263226;                  /* color.dark.accentWorld.tint */
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.3);  /* web decision 16: awaiting token - dark hover shadow */
  }
}


/* =============================================================================
   2. @FONT-FACE — self-hosted, same-origin, relative paths (no external request).

   Google Fonts serves ONE latin-subset woff2 per family covering the whole weight axis:
   the 600 and 700 requests for Bricolage Grotesque return the same file, as do the 400 and
   700 requests for Nunito Sans. Both families are variable-only upstream. Committing that
   one file per family and pinning the instance in each @font-face descriptor is therefore
   the faithful reading of P-6's "weights 600 + 700 / 400 + 700, latin-subset woff2" — the
   alternative would be two byte-identical binaries per family in git.
   Licenses: fonts/OFL-*.txt, as the SIL Open Font License requires.
   ============================================================================= */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-sans-latin.woff2") format("woff2");
}


/* =============================================================================
   3. COMPONENTS AND LAYOUT
   Base rules are the mobile state; the desktop block near the end raises the ramp.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--type-family-body);
  font-size: var(--type-body-size-mobile);
  font-weight: var(--type-body-weight);
  line-height: var(--a16-body-line-height-mobile);
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: var(--space-measure);
  margin: 0 auto;
  padding: 0 var(--space-gutter-mobile);
}

/* Focus — focus.ring (2px solid accentOthers.ink) with focus.offset, on every interactive
   element the page has. */
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent-others-ink);
  outline-offset: var(--focus-offset);
}

/* --- Header: dot-trio wordmark + say-hello pill ---------------------------------------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--a16-header-pad-y-mobile) 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--a16-wordmark-gap-mobile);
}

.dot-trio {
  display: flex;
  gap: var(--a16-dot-gap-mobile);
}

.dot {
  display: inline-block;
  width: var(--a16-dot-size-mobile);
  height: var(--a16-dot-size-mobile);
  border-radius: 50%;
}

.dot-self { background: var(--accent-self-ink); }
.dot-others { background: var(--accent-others-ink); }
.dot-world { background: var(--accent-world-ink); }

.wordmark-name {
  font-family: var(--type-family-display);
  font-weight: var(--type-wordmark-weight);
  font-size: var(--a16-wordmark-size-mobile);
}

/* Pill: shared shape for the header affordance and the four value pills. */
.pill {
  border: var(--a16-border-width) solid var(--border);
  border-radius: var(--radius-pill);
}

.pill-link {
  padding: var(--a16-pill-pad-y) var(--a16-pill-pad-x-mobile);
  color: var(--text);
  font-size: var(--type-small-size);
  font-weight: var(--type-label-weight);
  text-decoration: none;
  white-space: nowrap;
}

/* --- Hero: orbs, display name, mission lead -------------------------------------------- */

.hero {
  padding: var(--a16-hero-pad-top-mobile) 0 var(--space-lg);
  text-align: center;
}

/* The row is a fixed box, not a shrink-to-fit one: the artifact gives it 34px desktop / 26px
   mobile, taller than the 24px/18px centre orb, so the hero rhythm below it does not move when
   the orbs bob and the gap to the H1 is the designed one. */
.orbs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--a16-orb-row-height-mobile);
  gap: var(--a16-orb-gap);
}

.orb {
  display: inline-block;
  width: var(--a16-orb-size-mobile);
  height: var(--a16-orb-size-mobile);
  border-radius: 50%;
  cursor: pointer;
  animation: pl-bob var(--motion-bob-duration) ease-in-out infinite;  /* motion.bob */
}

.orb-self { background: var(--accent-self-ink); }

.orb-others {
  width: var(--a16-orb-size-center-mobile);
  height: var(--a16-orb-size-center-mobile);
  background: var(--accent-others-ink);
  animation-delay: var(--a16-orb-stagger);
}

.orb-world {
  background: var(--accent-world-ink);
  animation-delay: calc(var(--a16-orb-stagger) * 2);
}

/* The pop class task #4's joy.js toggles. Its values live here, in CSS, by law: JS holds no
   style value. Pop replaces the bob for its duration; joy.js drops the class on animationend
   and bobbing resumes. */
.orb.is-popping {
  animation: pl-pop var(--motion-pop-duration) var(--motion-ease-bounce);  /* motion.pop */
}

.hero-name {
  margin: var(--a16-hero-name-margin-mobile) 0 0;
  font-family: var(--type-family-display);
  font-size: var(--type-display-size-mobile);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-tracking);
  cursor: default;
}

.ltr {
  display: inline-block;
}

.lead {
  max-width: var(--space-measure-prose);
  margin: var(--a16-lead-margin-mobile) auto 0;
  color: var(--text-secondary);
  font-size: var(--type-lead-size-mobile);
  line-height: var(--type-lead-line-height);
}

/* --- Connection cards ------------------------------------------------------------------ */

.cards {
  display: grid;
  gap: var(--a16-card-gap-mobile);
}

.card {
  padding: var(--a16-card-pad-mobile);
  border-radius: var(--radius-card);
  background: var(--card-tint);
}

.card-self { --card-ink: var(--accent-self-ink); --card-tint: var(--accent-self-tint); }
.card-others { --card-ink: var(--accent-others-ink); --card-tint: var(--accent-others-tint); }
.card-world { --card-ink: var(--accent-world-ink); --card-tint: var(--accent-world-tint); }

.motif {
  position: relative;
  width: var(--a16-motif-width-mobile);
  height: var(--a16-motif-height-mobile);
  margin-bottom: var(--a16-motif-margin-mobile);
}

.motif-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--a16-motif-circle-mobile);
  height: var(--a16-motif-circle-mobile);
  border: var(--a16-motif-stroke) solid var(--card-ink);
  border-radius: 50%;
}

.motif-circle-faded {
  left: var(--a16-motif-offset-mobile);
  opacity: var(--a16-motif-fade);
}

.card-label {
  margin: 0;
  color: var(--card-ink);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.card-title {
  margin: var(--a16-card-stack-gap-mobile) 0 0;
  font-family: var(--type-family-display);
  font-size: var(--type-title-size-mobile);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line-height);
}

.card-body {
  margin: var(--a16-card-stack-gap-mobile) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size-mobile);
  line-height: var(--a16-body-line-height-mobile);
}

/* --- How we build: heading, value pills, privacy promise -------------------------------- */

.build {
  margin-top: var(--space-lg);
  text-align: center;
}

.section-title {
  margin: 0;
  font-family: var(--type-family-display);
  font-size: var(--type-title-size-mobile);
  font-weight: var(--type-title-weight);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--a16-pill-gap-mobile);
  margin: var(--a16-pill-row-margin-mobile) 0 0;
  padding: 0;
  list-style: none;
}

.pills .pill {
  padding: var(--a16-pill-pad-y-mobile) var(--a16-pill-pad-x-mobile);
  font-size: var(--type-small-size);
  font-weight: var(--a16-pill-weight);
}

.promise {
  max-width: var(--a16-prose-narrow);
  margin: var(--a16-pill-row-margin-mobile) auto 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size-mobile);
  line-height: var(--a16-body-line-height-mobile);
}

/* --- Now growing: status card ----------------------------------------------------------- */

.status {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

.status-card {
  max-width: var(--a16-prose-narrow);
  padding: var(--space-sm);
  border: var(--a16-border-width) solid var(--border);
  border-radius: var(--radius-card);
  text-align: center;
}

.status-label {
  display: inline-flex;
  align-items: center;
  gap: var(--a16-status-dot-gap);
  margin: 0;
  color: var(--accent-world-ink);
  font-family: var(--type-family-body);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.status-dot {
  width: var(--a16-status-dot-size);
  height: var(--a16-status-dot-size);
  border-radius: 50%;
  background: var(--accent-world-ink);
  animation: pl-pulse var(--motion-pulse-duration) ease infinite;  /* motion.pulse */
}

.status-line {
  margin: var(--a16-card-stack-gap-mobile) 0 0;
  font-size: var(--type-body-size-mobile);
  line-height: var(--a16-body-line-height-mobile);
}

/* --- Say hello: contact ----------------------------------------------------------------- */

.contact {
  margin-top: var(--a16-contact-margin-mobile);
  text-align: center;
}

.contact-title {
  margin: 0;
  font-family: var(--type-family-display);
  font-size: var(--type-heading-size-mobile);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line-height);
}

.contact-reassurance {
  margin: var(--a16-contact-lead-margin-mobile) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size-mobile);
  line-height: var(--a16-body-line-height-mobile);
}

.contact-action {
  margin: var(--space-sm) 0 0;
}

.button {
  display: inline-block;
  padding: var(--a16-button-pad-y-mobile) var(--a16-button-pad-x-mobile);
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: var(--a16-button-size-mobile);
  font-weight: var(--type-button-weight);
  text-decoration: none;
}

/* --- Footer ----------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--a16-footer-gap-mobile);
  margin-top: var(--a16-footer-margin-mobile);
  padding: var(--space-sm) 0;
  border-top: var(--a16-border-width) solid var(--border);
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* --- Motion keyframes -------------------------------------------------------------------- */

@keyframes pl-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--a16-bob-lift)); }
}

@keyframes pl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--motion-pulse-opacity); }
}

/* Defined here for the artifact's fidelity and for task #4's garnish, which only toggles
   .is-popping — no style value ever crosses into JavaScript. */
@keyframes pl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(var(--motion-pop-scale)) rotate(var(--a16-pop-rotate)); }
  100% { transform: scale(1); }
}

/* =============================================================================
   Desktop state — at and above space.breakpoint. The token's value is written as a literal
   because a custom property cannot appear in a media condition and no preprocessor may exist
   (plan P-11); when the token is ratified, this literal changes with it. Everything hover-
   driven lives in here: landing.md marks the hover layer desktop-only.
   ============================================================================= */

@media (min-width: 900px) {  /* space.breakpoint (provisional, web decision 15) */

  body {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
  }

  .page {
    padding: 0 var(--space-gutter-desktop);
  }

  /* Header */
  .site-header { padding: var(--a16-header-pad-y) 0; }
  .wordmark { gap: var(--space-xs); }
  .dot-trio { gap: var(--a16-dot-gap); }
  .dot { width: var(--a16-dot-size); height: var(--a16-dot-size); }
  .wordmark-name { font-size: var(--type-wordmark-size); }

  .pill-link {
    padding: var(--a16-pill-pad-y) var(--a16-pill-pad-x);
    font-size: var(--a16-pill-label-size);
    transition: transform var(--motion-duration-fast) var(--motion-ease-bounce),
                background var(--motion-duration-fast);
  }

  /* landing.md: pill fills accentOthers.tint and rotates slightly - no scale. */
  .pill-link:hover {
    background: var(--accent-others-tint);
    transform: rotate(var(--motion-button-rotate));
  }

  /* Hero */
  .hero { padding: var(--a16-hero-pad-top) 0 var(--a16-hero-pad-bottom); }
  .orbs { height: var(--a16-orb-row-height); }
  .orb { width: var(--a16-orb-size); height: var(--a16-orb-size); }
  .orb-others { width: var(--a16-orb-size-center); height: var(--a16-orb-size-center); }
  .hero-name {
    margin-top: var(--a16-hero-name-margin);
    font-size: var(--type-display-size);
  }
  .lead {
    margin-top: var(--space-sm);
    font-size: var(--type-lead-size);
  }

  /* Per-letter hover: motion.letterBounce, with the artifact's alternating rotation and the
     three accents cycling across the letters. */
  .ltr {
    transition: transform var(--motion-duration-fast) var(--motion-ease-bounce),
                color var(--motion-duration-fast);
  }
  /* The gap between the two words is 0.28em in the artifact's desktop states, where the H1 is a
     row of per-letter boxes; its mobile state is a plain text node, whose natural word space the
     span keeps by holding a real space character. So the fixed width is set HERE, desktop only,
     and the mobile page renders the ordinary space the artifact shows. */
  .word-space {
    display: inline-block;
    width: var(--a16-hero-word-space);
  }

  .ink-self:hover { color: var(--accent-self-ink); }
  .ink-others:hover { color: var(--accent-others-ink); }
  .ink-world:hover { color: var(--accent-world-ink); }
  .rot-a:hover { transform: translateY(var(--motion-letter-lift-y)) rotate(var(--motion-letter-rotate)); }
  .rot-b:hover { transform: translateY(var(--motion-letter-lift-y)) rotate(var(--a16-letter-rotate-b)); }
  .rot-c:hover { transform: translateY(var(--motion-letter-lift-y)) rotate(var(--a16-letter-rotate-c)); }
  .rot-d:hover { transform: translateY(var(--motion-letter-lift-y)) rotate(var(--a16-letter-rotate-d)); }

  /* Cards: three across, motion.hoverLift + color.shadow.cardHover on hover */
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-card-gap);
  }
  .card {
    padding: var(--a16-card-pad);
    transition: transform var(--motion-duration-fast) var(--motion-ease-bounce),
                box-shadow var(--motion-duration-fast);
  }
  .card:hover {
    transform: translateY(var(--motion-hover-lift-y)) rotate(var(--motion-hover-lift-rotate));
    box-shadow: var(--shadow-card-hover);
  }
  .card-others:hover {
    transform: translateY(var(--motion-hover-lift-y)) rotate(var(--a16-card-rotate-alternate));
  }

  .motif {
    width: var(--a16-motif-width);
    height: var(--a16-motif-height);
    margin-bottom: var(--a16-motif-margin);
  }
  .motif-circle {
    width: var(--a16-motif-circle);
    height: var(--a16-motif-circle);
  }
  .motif-circle-faded { left: var(--a16-motif-offset); }
  .card-title {
    margin-top: var(--a16-card-stack-gap);
    font-size: var(--type-title-size);
  }
  .card-body {
    margin-top: var(--a16-card-stack-gap);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
  }

  /* How we build */
  .build { margin-top: var(--space-xl); }
  .section-title { font-size: var(--type-title-size); }
  .pills {
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }
  .pills .pill {
    padding: var(--a16-pill-pad-y) var(--a16-pill-pad-x);
    font-size: var(--a16-pill-label-size);
    transition: background var(--motion-duration-fast),
                transform var(--motion-duration-fast) var(--motion-ease-bounce);
  }
  .pills .pill:nth-child(odd):hover { transform: rotate(var(--motion-button-rotate)); }
  .pills .pill:nth-child(even):hover { transform: rotate(var(--a16-rotate-alternate)); }
  .pill-self:hover { background: var(--accent-self-tint); color: var(--accent-self-ink); }
  .pill-others:hover { background: var(--accent-others-tint); color: var(--accent-others-ink); }
  .pill-world:hover { background: var(--accent-world-tint); color: var(--accent-world-ink); }
  .promise {
    margin-top: var(--space-sm);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
  }

  /* Status */
  .status { margin-top: var(--space-xl); }
  .status-card { padding: var(--a16-status-pad-y) var(--a16-status-pad-x); }
  .status-line {
    margin-top: var(--a16-card-stack-gap);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
  }

  /* Contact */
  .contact { margin-top: var(--a16-contact-margin); }
  .contact-title { font-size: var(--type-heading-size); }
  .contact-reassurance {
    margin-top: var(--space-xs);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
  }
  .contact-action { margin-top: var(--a16-button-row-margin); }
  .button {
    padding: var(--a16-button-pad-y) var(--a16-button-pad-x);
    font-size: var(--type-button-size);
    transition: transform var(--motion-duration-fast) var(--motion-ease-bounce);
  }
  .button:hover {
    transform: scale(var(--motion-button-scale)) rotate(var(--motion-button-rotate));
  }

  /* Footer */
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding: var(--a16-footer-pad-y) 0;
    text-align: left;
  }
}

/* =============================================================================
   Reduced motion — motion.policy: ALL animation and transition off, layout identical.
   Last block in the file so it wins over every rule above, including the desktop hovers.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}