/* Verified Paper reference values. See ../DESIGN.md.
   Layout and the inferred 620px switch live in home.css; fonts in global.css.
   Mobile/desktop suffixes describe references, not global layout defaults.
   Tallest-quote sizing and the mobile photo bleed are local rules in home.css;
   they introduce no fixed-height or additional spacing tokens.
   The hero name uses the existing medium weight; both mobile photo gutters
   are part of the local scrolling layout, with end padding matching the content gutter.
   Keyboard refinement removes the homepage skip link and limits photo-strip
   focus to actual overflow; the existing focus outline is unchanged.
   Project label punctuation and single-source testimonial reading change no
   visual tokens. Grid preserves the controls' header position while their DOM
   order follows the quote. Decorative hero artwork is hidden from assistive technology.
   Homepage motion is limited to the approved greeting, scroll reveals, project-title feedback, testimonial story, About Me photo interactions and the Jakarta footer clock. */
:root {
  /* Approved browser motion decisions; greeting matches the case hero control. */
  --home-greeting-duration: var(--case-hero-control-duration);
  --home-reveal-duration: 600ms;
  --home-project-underline-duration: 450ms;
  --home-project-underline-easing: cubic-bezier(.4, 0, .02, 1);
  --home-story-duration: 7000ms;
  --home-story-scramble-duration: var(--case-hero-control-duration);
  --home-story-text-duration: 900ms;
  --home-story-word-duration: 180ms;
  --home-story-portrait-duration: 400ms;
  --home-story-highlight-duration: 1200ms;
  --home-story-highlight-color: #059275;
  --home-story-highlight-opacity: .15;
  --home-story-highlight-height: .5em;
  --home-photo-spread-duration: 900ms;
  --home-photo-hover-duration: 360ms;
  --home-photo-hover-scale: 1.1;
  --home-photo-caption-top: -38px;
  --home-clock-flip-duration: 600ms;
  --home-clock-face-background: #FAFAFA;
  --home-clock-blink-duration: 1000ms;
  --home-photo-caption-size: 20px;
  --home-photo-caption-line-height: 24px;
  --home-sparkle-duration: 3200ms;
  --home-sparkle-min-scale: .86;

  /* Colors */
  --color-background: #FFFFFF;
  --color-text-primary: #3B4241;
  --color-text-secondary: #5D6564;
  --color-border: #E3E6EB;
  --color-name-underline: #91C8BE;
  --home-project-cursor-background: #059275;

  /* Typography primitives */
  --font-body: "Geist", system-ui, sans-serif;
  --font-project-title: "Manrope", system-ui, sans-serif;
  --font-size-number-mobile: 10px;
  --font-size-small: 12px;
  --font-size-supporting: 14px;
  --font-size-body: 16px;
  --line-height-number-mobile: 14px;
  --line-height-small: 16px;
  --line-height-supporting: 20px;
  --line-height-body-mobile: 22px;
  --line-height-project-title: 24px;
  --line-height-body: 25px;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --tracking-body: 0.2px;
  --tracking-small: 0.3px;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-88: 88px;

  /* Borders and radius */
  --border-width: 1px;
  --radius-cover: 4px;
  --radius-portrait: 8px;
  --radius-testimonial-mobile: 12px;
  --radius-testimonial-desktop: 24px;
  --radius-pill: 1000px;

  /* Homepage reference measurements (not global layout defaults) */
  --home-content-desktop: 530px;
  --home-content-mobile-reference: 350px;
  --home-gutter-mobile: 20px;
  --home-padding-top-desktop: 80px;
  --home-padding-bottom-desktop: 80px;
  --home-padding-top-mobile: 64px;
  --home-padding-bottom-mobile: 48px;
  --home-section-gap-desktop: 56px;
  --home-section-gap-mobile: 48px;
  --home-testimonial-desktop: 580px;
  --home-project-number-desktop: 32px;
  --home-project-number-mobile: 24px;
  --home-project-gap-desktop: 14px;
  --home-project-gap-mobile: 10px;
  --home-cover-width-desktop: 468px;
  --home-cover-height-desktop: 263px;
  --home-cover-width-mobile-reference: 305px;
  --home-cover-height-mobile-reference: 171.4px;
  --home-cover-surround-desktop: 8px;
  --home-cover-surround-mobile: 5.21368px;
  --home-cover-radius-mobile: 2.60684px;
  --home-portrait-size: 56px;
  --home-testimonial-portrait-size: 48px;

  /* Observed cover shadow variants (CSS filter values) */
  --home-cover-filter-first-desktop: drop-shadow(0px 0px 2px #00000014) drop-shadow(0px 0px 2px #00000014);
  --home-cover-filter-other-desktop: drop-shadow(0px 0px 2px #00000014) drop-shadow(0px 2px 6px #0000001A);
  --home-cover-filter-mobile: drop-shadow(0px 0px 1.3px #00000014) drop-shadow(0px 1.3px 3.91px #0000001A);

  /* Case Study 1: observed Paper colors, width and section spacing.
     The 900px browser switch and safe-area header are implementation decisions.
     Rich-text markers use the existing medium weight.
     2026-10-03: Paper navigation touch fill; requested header/back-label motion uses
     an inferred 220ms ease-out curve, disabled for reduced motion. */
  --case-nav-touch-background: #F6FBFA;
  /* User-requested fully rounded desktop Back hover surface. */
  --case-back-hover-radius: 999px;
  /* Supplied navigation SVG: five main nodes and compact solution children. */
  --case-progress-step: 51px;
  --case-progress-child-step: 21px;
  --case-progress-node-size: 11px;
  --case-progress-halo-size: 17px;
  --case-progress-label-gap: 12px;
  --case-progress-complete: #B5BEBD;
  --case-progress-pending: #E3E6EB;
  --case-progress-node-fill: #FAFAFA;
  --case-progress-pulse-duration: 2800ms;
  --case-progress-group-duration: 360ms;
  --case-progress-label-duration: 240ms;
  --case-progress-label-padding: 2px 8px;
  --case-progress-label-radius: 4px;
  --case-progress-content-clearance: 0px;
  /* Authorized quick section scroll and top-down contents reveal. */
  --case-nav-dropdown-duration: 240ms;
  --case-nav-dropdown-gap: 4px;
  --case-nav-motion-duration: 220ms;
  --case-nav-motion-easing: cubic-bezier(.22, 1, .36, 1);
  /* User-requested responsive corrections: visible native Overview borders
     and navigation aligned with the centered 712px mobile reading width. */
  --case-overview-border-width: 1px;
  /* Existing Overview corner values reused by framed Problem images. */
  --case-image-frame-radius-desktop: 8px;
  /* Latest user-approved tablet/mobile radius supersedes Paper scaling. */
  --case-image-frame-radius-mobile: 4px;
  --case-mobile-content-gutter: max(20px, calc((100vw - 712px) / 2));
  --case-carousel-end-gutter: var(--case-mobile-content-gutter);
  --case-desktop-outer-gutter: 56px;
  --case-desktop-max-width: 1728px;
  --case-overview-image-gap: 24px;
  --case-overview-image-gap-mobile: 12px;
  --case-text-link-underline-offset: 5px;
  --case-text-link-underline-thickness: 1.5px;
  /* Observed Problem quote colors; frames reuse the approved Overview stroke. */
  /* Updated Paper phone frames now contain supplied WebP artwork.
     All framed Problem images reuse the persistent Overview stroke/corner treatment.
     Stakeholder rows stack below 620px; quote attribution uses a sentence pause. */
  --case-problem-phone-stroke: 4.32px;
  --case-problem-phone-border: #2E3543;
  --case-problem-phone-radius: 13.824px;
  --case-quote-background: #F8FCFF;
  --case-quote-ink: #1D4D42;
  /* Context uses exact desktop/mobile Paper diagram proportions.
     Tablet retains the native 651x218 composition, shrinking only to fit;
     below 620px the mobile composition applies. Skip navigation targets H1.
     Team strips bleed to both viewport edges with the existing reading gutter.
     Rich paragraphs expose one reading unit; no typography tokens change.
     Workflow reading begins with its image title. Scroll keyboard handlers
     exist only on overflowing regions; static content has no click actions. */
  --case-color-heading: #031613;
  --case-color-active: #2BA188;
  /* Observed Paper content-mapping hover: opposite color group is 40% opaque.
     Pointer-only emphasis; the entire diagram remains one accessible image. */
  /* Home Evolution: inspected Paper colors; authorized motion timings inferred. */
  /* MVO: observed saved Paper section/chip spacing and caption inset. */
  --case-mvo-copy-gap: 16px;
  --case-mvo-section-gap: 32px;
  --case-mvo-chip-gap: 8px;
  --case-mvo-caption-inset: 23px;
  /* Guiding Users: source caption inset/dots; approved equal-card refinement. */
  --case-guidance-caption-inset: 23px;
  --case-guidance-mobile-card-width: 340px;
  --case-guidance-card-width: 340px;
  --case-guidance-phone-width: 180px;
  /* Both returned-user phones share the top-up ratio; benefit story crops at bottom. */
  --case-guidance-phone-ratio: 180 / 380;
  /* Revamp Saku: source text rhythm; approved comparison insets and comic gap. */
  --case-saku-info-group-gap: 32px;
  --case-saku-info-copy-gap: 16px;
  --case-saku-comparison-inset: 32px;
  --case-saku-comic-gap: 8px;
  --case-saku-comic-frame-border-width: 1px;
  --case-saku-comic-preview-relative-width: calc(218 / 486);
  --case-saku-comic-decision-background: #FDFAFA;
  --case-saku-exploration-label-size: 16px;
  --case-saku-exploration-label-size-mobile: 14px;
  --case-guidance-image-top-inset: 32px;
  --case-guidance-image-caption-gap: 28px;
  --case-guidance-image-caption-gap-mobile: 24px;
  --case-benefit-story-duration: 5000ms;
  --case-benefit-story-transition-duration: 350ms;
  --case-benefit-story-float-duration: 4600ms;
  --case-benefit-story-float-distance: 6px;
  --case-guidance-dot-gap: 4px;
  --case-evolution-indicator: #91C8BE;
  --case-evolution-active: #059275;
  --case-evolution-inactive: #B5BEBD;
  --case-evolution-transition: 240ms;
  --case-evolution-image-fade: 480ms;
  --case-evolution-image-easing: cubic-bezier(.4,0,.2,1);
  --case-evolution-pulse: 2200ms;
  --case-evolution-travel: 360ms;
  --case-evolution-switch-duration: 460ms;
  --case-evolution-point-hover: #91A09D;
  /* Approved centered mobile timeline: equal endpoint insets and quieter toggle. */
  --case-evolution-timeline-mobile-expansion: 36px;
  --case-evolution-timeline-mobile-start: 38px;
  --case-evolution-timeline-mobile-end: 38px;
  --case-evolution-switch-stretch: 1.02;
  --case-evolution-switch-compression: .98;
  --case-mapping-dim-opacity: .4;
  /* Showcasing Saku: observed Paper shadow, selection ink and opacity.
     Prose bullet size is the user's approved smaller-marker decision. */
  /* Native inline SVG mockups preserve these shadows and original dimensions. */
  --case-mockup-shadow: 0 .87px 1.73px #28293D0A, 0 3.47px 6.93px #60617029;
  --case-choice-dim-opacity: .4;
  /* Explicit user value for hovering inactive Saku choices. */
  --case-choice-hover-background: #FAFAFA;
  --case-choice-border: #91C8BE;
  --case-choice-background: #FDFFFF;
  --case-choice-alternative-border: #F3BBAE;
  --case-choice-alternative-background: #FFFEFE;
  /* User-authorized Saku reveal/confetti; reduced motion disables both.
     Particles start outside the card and follow page/carousel scrolling;
     continuous spring/gravity motion preserves the existing pastel palette. */
  --case-saku-reveal-duration: 360ms;
  /* Approved mobile detail strip: first card fits, next card peeks 24px. */
  --case-saku-detail-mobile-reserve: 56px;
  /* Independent bursts finish naturally across answer changes.
     Saku choices retain the 712px native row whenever it fits the reading column. */
  --case-confetti-playback-rate: 1.3;
  --case-confetti-restitution: .46;
  --case-confetti-mint: #CDE8E2;
  --case-confetti-peach: #FED5CC;
  --case-confetti-blue: #DCECF5;
  --case-confetti-lilac: #E9E2F2;
  --case-prose-bullet-size: 3px;
  /* Shared reading column stays centered with equal responsive side tracks. */
  --case-content-desktop: 712px;
  --case-section-gap-desktop: 112px;
  --case-section-gap-mobile: 64px;
  /* Closing: observed Paper fills, rhythm and photo frame; hover motion approved by user. */
  --case-outcome-chip-background: #F6FBFA;
  --case-award-background: #F8FCFF;
  --case-closing-text-gap: 16px;
  --case-closing-section-gap-mobile: 72px;
  --case-team-photo-surround: 6.78095px;
  --case-team-carousel-end-padding: calc(8px + 2 * var(--case-team-photo-surround) + 1px);
  --case-team-photo-radius: 3.39047px;
  --case-team-photo-shadow: drop-shadow(0 0 .85px #00000014) drop-shadow(0 1.7px 2.55px #0000001A);
  --case-next-preview-width: 360px;
  --case-next-preview-width-mobile: 240px;
  --case-next-preview-gap: 36px;
  --case-next-preview-gap-mobile: 20px;
  --case-next-preview-duration: 180ms;
  /* Approved follow-up: two 1700ms holds and two 600ms transitions per loop.
     Gentle is approximated; Figma does not supply a numeric spring curve. */
  --case-hero-loop-duration: 4600ms;
  --case-hero-reveal-duration: 360ms;
  --case-hero-control-duration: 240ms;
  --case-hero-motion-easing: cubic-bezier(.25, .1, .25, 1);
}