/* Generated from the Figma "My Work" variable collections. Regenerate rather than hand-edit. */
:root {
  /* primitives */
  --primitive-black: #000000;
  --primitive-white: #FFFFFF;
  --primitive-off-white: #FCFBFB;
  --primitive-blue-500: #6086C5;
  --primitive-blue-300: #72B3FF;
  --primitive-warm-900: #45423C;
  --primitive-grey-600: #555555;
  --primitive-grey-500: #7F8C8D;
  --primitive-grey-300: #A1A1A1;
  --primitive-grey-200: #E2E2E2;
  --primitive-grey-100: #ECECEC;
  --primitive-blue-050: #EDF2FA;
  --primitive-blue-700: #4E74AE;
  --primitive-grey-950: #1F1F1F;
  --primitive-grey-900: #2E2E2E;
  /* saturated hero palette — each skill card's media surface, reused as its
     flipped background */
  --primitive-gold-400: #F5C451;
  --primitive-coral-400: #ED7E74;
  --primitive-chartreuse-300: #D2ED82;
  --primitive-periwinkle-400: #8297ED;
  --primitive-pink-300: #F998C9;
  /* the surface the exported About slide graphics are drawn on, so letterboxing
     them into a square box is invisible */
  --color-media-surface: #F3F4F6;
  /* the same fill the flip cards use. Fixed white rather than
     --color-bg-page, which flips to black inside a dark section. */
  --color-slide-panel: var(--primitive-white);
  --layout-slide-card-max: 420px;    /* the card stops growing here on mobile */
  /* the peeking neighbours below 700. The scroller's inline padding is the sum
     of the two, which is what holds the peek at a constant 16px as the card
     grows to its cap. */
  --layout-slide-peek: 16px;
  --layout-slide-peek-gap: 12px;
  --radius-slide-art: 13px;
  --primitive-blue-400: #6385B8;
  --primitive-dusk-050: #F3F0FB;
  --primitive-dusk-100: #E5DFF7;
  --primitive-dusk-200: #C8C7E2;
  --primitive-dusk-600: #6144B2;
  --primitive-dusk-800: #3B2A6E;
  --primitive-dusk-900: #1A1326;

  /* semantic colour — light */
  --color-bg-page: var(--primitive-white);
  --color-bg-surface-muted: var(--primitive-off-white);
  --color-text-primary: var(--primitive-grey-900);
  --color-text-inverse: var(--primitive-white);
  --color-text-link: var(--primitive-blue-500);
  --color-text-link-hover: var(--primitive-blue-300);
  --color-nav-bg: var(--primitive-black);
  --color-nav-text: var(--primitive-white);
  --color-nav-text-hover: var(--primitive-grey-500);
  --color-button-bg: var(--primitive-white);
  --color-button-fg: var(--primitive-black);
  --color-button-border: var(--primitive-black);
  --color-button-bg-hover: var(--primitive-black);
  --color-button-fg-hover: var(--primitive-white);
  --color-button-border-hover: var(--primitive-black);
  --color-arrow-default: var(--primitive-black);
  --color-arrow-inverse: var(--primitive-white);
  --color-border-rule: var(--primitive-grey-300);
  --color-border-subtle: var(--primitive-grey-100);
  --color-bg-placeholder: var(--primitive-grey-100);
  --color-text-on-light: var(--primitive-grey-900);
  --color-text-on-dark: var(--primitive-white);
  --color-card-surface-ink: var(--primitive-black);
  --color-card-surface-blue: var(--primitive-blue-700);
  --color-card-surface-tint: var(--primitive-blue-050);
  --color-card-surface-paper: var(--primitive-off-white);
  --color-card-border: var(--primitive-grey-100);
  --color-card-border-hover: var(--primitive-blue-300);
  --color-card-placeholder-ink: var(--primitive-grey-950);
  --color-card-placeholder-blue: var(--primitive-blue-400);
  --color-text-muted: var(--primitive-grey-600);
  --color-accent-dusk-surface: var(--primitive-dusk-100);
  --color-accent-dusk-tint: var(--primitive-dusk-200);
  --color-accent-dusk-anchor: var(--primitive-dusk-600);
  --color-accent-dusk-ink: var(--primitive-dusk-800);
  --color-accent-dusk-deep: var(--primitive-dusk-900);
  --color-button-solid-bg-on-light: var(--primitive-black);
  --color-button-solid-bg-on-light-hover: var(--primitive-grey-950);
  --color-button-solid-bg-on-dark: var(--primitive-white);
  --color-button-solid-bg-on-dark-hover: var(--primitive-grey-100);
  --color-button-ghost-bg-hover-on-light: var(--primitive-grey-100);
  /* the current section reads as a filled pill, a step darker than the ghost
     hover so the two states cannot be confused */
  --color-nav-current-bg: var(--primitive-grey-200);
  --color-button-ghost-bg-hover-on-dark: var(--primitive-grey-950);

  /* typography — Edu Arizona */
  --font-family-serif: "EduArizonaSerif", Georgia, serif;
  --font-family-sans: "EduArizonaSans", system-ui, sans-serif;
  /* eyebrows only — Figma sets these in Chivo Mono, not the sans */
  --font-family-mono: "ChivoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* long-form body copy, to break up the serif. Helvetica Neue is a system
     face — Light resolves on Apple devices, Arial Regular elsewhere. */
  --font-family-grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-grotesk-light: 300;
  --font-weight-serif-thin: 100;
  --font-weight-serif-light: 300;
  --font-weight-serif-regular: 400;
  --font-weight-serif-medium: 500;
  --font-weight-serif-bold: 700;
  --font-weight-sans-regular: 400;
  --font-weight-sans-medium: 500;
  --font-weight-mono-light: 300;
  --font-weight-mono-medium: 500;

  /* scale — desktop */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 40px; --space-3xl: 48px; --space-4xl: 64px;
  --space-5xl: 100px; --space-6xl: 150px; --space-7xl: 200px;
  /* One fluid margin for the whole range. Content is capped at
     --layout-content-width, so above ~1320px the cap still yields ~108px of
     visual margin; below that this absorbs the squeeze instead of the type,
     and it reaches the Figma port's ~29px at phone widths without a cliff.
     Diverges from the Figma variable on purpose — that records the old site. */
  --layout-page-margin: clamp(28px, 6vw, 48px);
  --layout-gutter: 36px;
  --layout-content-width: 1224px;
  --layout-col-main: 768px;
  --layout-col-spacer: 96px;
  --layout-col-side: 288px;
  --layout-hero-height: 1000px;
  /* 685 is the Figma measure, but Figma renders Source Serif 4 under its
     Substitute mode and the site renders real Edu Arizona, which is wider —
     the same copy takes 5 lines here against 4 there, orphaning "precision."
     780 is where Arizona lands on 4 lines with "perfect precision." closing. */
  --layout-intro-width: 780px;
  --radius-none: 0px;
  --radius-infinite: 9999px;
  --radius-pill: 36px;
  --size-arrow-width: 25px;
  --size-arrow-width-hover: 35px;
  --size-arrow-stroke: 2px;
  --size-arrow-cap: 10px;
  --size-border-width: 1px;
  --space-stack-eyebrow: 5.76px;
  --space-stack-heading: 16.8px;
  --space-stack-body: 20.8px;
  --space-stack-button: 18px;
  --space-stack-grid-item: 48px;
  --space-skill-gap: 10.4px;
  --space-section-pad: 100px;
  /* the breathing room above and below every section below the hero. 150 is
     what the original site used; the sections had been cut to 48 to absorb
     the old 55px overlap, which no longer exists */
  --space-surface-pad: 150px;
  --layout-viewport: 1440px;
  --layout-intro-top: 150px;
  --layout-logotype-width: 1080px;
  --layout-photo-cell-w: 594px;
  --layout-photo-cell-h: 396px;
  --layout-gif-height: 0px;
  --layout-nav-close-inset: 100.8px;
  --layout-nav-height: 1024px;
  --space-stack-hero: 40px;
  --space-body-inset: 192px;
  --font-size-hero: 48px;
  --font-size-h1: 33.6px;
  --font-size-h2: 28px;
  /* the About slide copy. Its own step, so it can sit clearly below the flip
     card's 33.6 heading without dragging --font-size-h2 around with it */
  --font-size-slide: 24px;
  /* slide motion, in one place. The phone gets slower values: the card is
     small and close, so the same timings read as a flick there. */
  --motion-slide-panel: .42s;
  --motion-line-duration: .62s;
  --motion-line-stagger: 85ms;
  --motion-type-delay: 170ms;
  /* the hero reveals in order: tagline, then subtext, then the button. These
     are when the second and third start, measured from the tagline's first
     line — far enough in that the tagline is clearly leading. */
  --motion-hero-sub-delay: 380ms;
  --motion-hero-btn-delay: 620ms;
  --font-size-h4: 24px;
  --font-size-skill: 20.8px;
  --font-size-h6: 38.4px;
  --font-size-body: 20.8px;

  /* One line-height scale instead of a literal at every call site.
     Running copy sits at 130% — tighter than the 1.4/1.5 that had crept in. */
  --line-height-heading: 1.2;
  --line-height-body: 1.3;
  --line-height-ui: 1.25;
  --font-size-caption: 16px;
  --font-size-eyebrow: 16px;      /* card eyebrows */
  --font-size-eyebrow-section: 20.8px;
  --font-size-label: 16px;
  --font-size-micro: 13.6px;
  --font-size-button: 18px;
  --font-size-button-sm: 16px;
  /* the hero's second line. Figma 377:24932 sets it at 33.6 — the same step
     as H1 — against a 48 hero; it had been inheriting 20.8 body */
  --font-size-hero-support: 33.6px;
  --font-size-nav: 36px;
  --font-size-burger: 32px;
  --font-size-close: 60px;
  --radius-card: 24px;
  --radius-card-large: 36px;        /* skill cards */
  --space-card-media-inset: 16px;
  --space-card-pad-large: 40px;
  /* the card's side padding, separate from its top: 40 is generous on a phone
     where the card is only 334 wide */
  --space-card-pad-x: 40px;
  --size-card-eyebrow: 22px;   /* the eyebrow's line box, 16px Chivo Mono */
  --space-card-pad-default: 12px;
  --space-card-pad-bottom: 120px;
  --space-card-gap: 24px;
  --space-card-flip-offset: 24px;
  --space-card-action-inset: 24px;
  --size-card-action: 56px;
  --size-carousel-arrow-mobile: 48px;
  --layout-slide-media-max: 340px;   /* stacked slides stop growing here */
  --size-card-glyph: 20px;
  --layout-card-w: 580px;
  --layout-card-h: 580px;
  --layout-card-gap-x: 64px;
  --layout-card-gap-y: 40px;
  --layout-card-media-h: 240px;
  --radius-card-media: 12px;
  --layout-card-media-bleed-h: 340px;
  --layout-scroll-rule-h: 72px;

  /* glass sheets — measured off Home — Desktop 1444 */
  --sheet-radius: 0px;   /* square slices — trying it without the rounded top */
  /* the sections sat on top of each other by this much, which is what made
     them read as a stack of cards. They butt now, so it is zero. */
  --sheet-overlap: 0px;
  /* the one surface every section below the hero sits on, and the colour the
     hero fades into so the seam disappears (Figma 377:24925) */
  --color-surface-section: #F5F5F5;
  --layout-hero-fade: 176px;
  --sheet-light: rgb(245 245 245 / 0.90);
  --sheet-light-blur: 32px;
  --sheet-dark: rgb(0 0 0 / 0.80);
  --sheet-dark-blur: 32px;
}

@media (max-width: 750px) {
  :root {
    --layout-gutter: 24px;   /* 9.75 came from the 390 port and left the slide columns touching */
    /* these were reverse-engineered from a 390px phone; as fixed widths they
       stranded every section at 332px all the way up to 750px */
    --layout-content-width: none;
    --layout-col-main: none;
    --layout-col-spacer: 0px;
    --layout-col-side: 331.5px;
    --layout-hero-height: 1350px;
    --layout-intro-width: 331.5px;
    --motion-slide-panel: .62s;
    --motion-line-duration: .78s;
    --motion-line-stagger: 125ms;
    --motion-type-delay: 280ms;
    --motion-hero-sub-delay: 560ms;   /* the phone's stagger is slower */
    --motion-hero-btn-delay: 820ms;
    --space-surface-pad: 72px;   /* 150 is desktop breathing room, not phone */
    --font-size-slide: 18px;
    --font-size-body: 18px;
    --space-card-pad-x: 20px;
    --font-size-hero-support: 24px;   /* 75% of the 32 mobile hero, as desktop */
    --space-stack-heading: 15.6px;
    --layout-viewport: 390px;
    --layout-intro-top: 430px;
    --layout-logotype-width: 292.5px;
    --layout-photo-cell-w: 331.5px;
    --layout-photo-cell-h: 220.94px;
    --layout-gif-height: 400px;
    --layout-nav-close-inset: 27.3px;
    --layout-nav-height: 844px;
    --space-stack-hero: 33.6px;
    --space-body-inset: 0px;
    --font-size-hero: 32px;
    --font-size-h1: 31.2px;
    --space-card-pad-bottom: 104px;
    --layout-card-w: 100%;
    --layout-card-h: 0px;   /* content drives it once the grid is one column */
    --layout-card-gap-x: 0px;
    --layout-card-media-h: 148px;
    --layout-card-media-bleed-h: 290px;
    --layout-scroll-rule-h: 56px;
    /* the 298px overlap is a desktop measurement; it swallows the hero copy at 390 */
    --sheet-overlap: 0px;
    --sheet-radius: 0px;
  }
}

/* Opt-in: put data-theme="dark" on any section */
[data-theme="dark"] {
  --color-bg-page: var(--primitive-black);
  --color-bg-surface-muted: var(--primitive-black);
  --color-text-primary: var(--primitive-white);
  --color-text-inverse: var(--primitive-black);
  --color-text-link: var(--primitive-blue-300);
  --color-text-muted: var(--primitive-grey-500);
  --color-button-border-hover: var(--primitive-white);
  --color-accent-dusk-surface: var(--primitive-dusk-900);
  --color-accent-dusk-tint: var(--primitive-dusk-600);
  --color-accent-dusk-anchor: var(--primitive-dusk-200);
  --color-accent-dusk-ink: var(--primitive-dusk-050);
}

/* Below 900 the slide columns are ~300px — too narrow for 28px display type.
   One step down rather than a fluid scale, so the size stays nameable. */
@media (max-width: 900px) {
  :root { --font-size-h2: 22px; }
}

/* The compact range only. Bounded on purpose: the <=900 block is declared
   after the <=750 one, so an open-ended value here would override the phone
   step as well. */
@media (min-width: 751px) and (max-width: 900px) {
  :root { --font-size-slide: 21px; }
}