<!--
  FILE: index.html
  PURPOSE: CSA Website project page (Children's Spy Agency web
  experience for Bright Little Labs). Same layout skeleton as every
  other project page (nav beside the header only, footer with CV/
  LinkedIn shown), with one addition unique to this page: a playful
  3-stage "identity check" gate sits between the header and the real
  case study content, recreating the interactive flow already live on
  Lucrecia's Webflow portfolio.

  Section order: Project header (always visible) -> Identity check gate
  (3 stages, only one visible at a time, swapped by csa-website.js) ->
  case study content (stubbed for now, see below).

  How the gate works: stage 1 shows a short warning and a red "I AM NOT
  AN ADULT" button. Pressing it opens stage 2, a "checking for grown-
  ups" card with a green CTA (ICE CREAM) and a red CTA (HOMEWORK). The
  red CTA opens stage 3, an "access denied" warning card with a button
  back to stage 2. The green CTA (on stage 2) reveals the real case
  study and hides the gate. A subtle "skip to case study" link sits at
  the bottom of the gate on every stage, for anyone who can't or
  doesn't want to play along, jumping straight to the same reveal the
  green CTA triggers (Lucrecia's explicit request, she'll review later
  whether to keep it). All three stages live in the same fixed navy
  section (not a dimmed modal/backdrop), matching her 3 reference
  screenshots exactly, where the page footer never moves.

  Transition animation (between stages 1/2/3 only, not the reveal into
  the case study): pressing a stage-changing button holds its pressed
  visual for a beat, releases back to resting, then the shared prompt
  paragraph (#csa-gate-prompt, one persistent element reused across all
  3 stages rather than 3 separate ones) scrambles from its current text
  into the next stage's -- every character starts cycling through
  random glyphs at once, then each settles into its real letter in
  turn, left to right, per Lucrecia's request -- and only once every
  character has settled does the next stage's button/card fade+pop
  into view. The prompt's own box is a fixed height (set once from the
  longest of the 3 prompts, see lockPromptHeight() in csa-website.js),
  not left to grow/shrink with whichever stage is currently showing.
  All timing lives in csa-website.js. Respects prefers-reduced-motion
  (swaps instantly, no scramble/hold, for anyone with that OS setting
  on). The visible prompt is intentionally NOT a live region (it would
  read every scrambling character out loud to a screen reader), a
  separate hidden #csa-gate-announcer live region announces the
  complete new line once per transition instead.

  .csa-gate__stage (wraps the prompt + 3 panels, not the skip link)
  is a fixed 700px tall on desktop and fills the viewport height
  (100dvh) on mobile so the whole stage fits on one screen there, per
  Lucrecia's explicit desktop/mobile split. Its content is vertically
  centred either way. Outgoing panels also now play an exit animation
  (scale down + fade out, see .is-exiting in csa-website.css/js) timed
  to start alongside the prompt's erase phase, so the old button/card
  visibly leaves as the old text is being erased, before the new one
  pops in once the new text finishes typing.

  Copy source: the project header facts/description and all 3 gate
  stages' copy are transcribed directly from screenshots Lucrecia sent
  of her existing live case study, not placeholders. A few small calls
  made transcribing them, flagged here rather than guessed at silently:
  - Header title uses normal title case ("Children's Spy Agency Web
    Experience") rather than the all-caps styling seen in the
    screenshot, matching every other project page's h1 treatment
    (project.css's .project-header__title has no uppercase transform).
  - Stage 3's "back to stage 2" button isn't visible in the reference
    screenshot (likely below the fold there). Labelled "Try again" as a
    reasonable placeholder, trivial to reword.
  - The dashed-border card look and the navy background reuse the exact
    same colour tokens as csa-game.css's Final designs section
    (--color-csa-mobile-bg/accent/text), since this is the same CSA
    brand palette. Two new tokens this page needed that didn't exist
    yet (--color-csa-web-red, --color-csa-web-green) are eyeballed
    approximations from the screenshots, not sampled exact values, see
    tokens.css. Button press/hover states are a reasonable original
    build too: the reference animation lives on a URL this environment
    can't reach (network egress blocked), so it couldn't be inspected
    directly. Flag any of these if they look off once compared live.

  Stage 4, the real case study (#csa-case-study, revealed by the gate's
  green CTA or skip link): Final designs -> Role -> Collaborators ->
  Similar projects, in that order (deliberately different from CSA
  Mobile's own section order, per Lucrecia's explicit instruction; only
  the Final designs section's dark/grid/divider TECHNIQUE is reused from
  csa-game.css, not its position in the page).

  Final designs asset mapping, corrected by directly opening every file
  after an early guess (based on a much older, apparently wrong
  description of the folder) mixed up several of them:
  - csa-web-final-1.png: checkpoint puzzle ("Multiple clever systems...").
  - csa-web-final-2.gif: the world map ("Global network of CLASSIFIED"),
    this file is ONLY the map, nothing else.
  - csa-web-final-3.png: the falling-emoji spacebar speed-test game
    ("Our speed test..."), mobile crop csa-web-final-mobile-3.png.
  - csa-web-final-4.png: the full INTEL-tab composite (Department of
    Weapons, Local Spy Unit map, protocols, Incoming Report, CSA
    Resources) -- not used directly, its own 3 mobile crops
    (csa-web-final-mobile-4_1/2/3.png) are used instead, one per
    narrative beat ("Meet your CSA Department of Weapons" / "...register
    their local spy unit." / "...and gather intel for future missions."),
    reused at both breakpoints since they're decent resolution.
  - csa-web-final-5.png: Hedy the chatbot ("Any questions? Hedy...").
    csa-website-final-5.png is a near-duplicate tighter crop of the same
    screen, left unused.
  - csa-web-final-6.png: the restored block (left out of Lucrecia's
    reference screenshot by an export error, per her instruction) -- the
    "DO YOU HAVE WHAT IT TAKES?" / "TRAIN TO BECOME AN ELITE SPY" cards,
    mobile crop csa-web-final-mobile-6.png. No caption copy exists for
    this block since it wasn't in the screenshot, both cards already
    carry their own headline so it's images-only for now.
  csa-web-checkpoint-bckg.png (already used on the gate) rounds out the
  folder; nothing else went unused.

  The reference screenshot Lucrecia sent for this section is the DESKTOP
  design (single centered column), not mobile as I first assumed --
  mobile below is that same structure with the site's normal narrower
  padding, not a separate layout. Every divider's margin-top is a
  one-off value, computed by rendering the page and measuring each
  block's real height (same "50px clear either side, snap to the next
  100px grid line" rule csa-game.css's own dividers use), not guessed.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSA Website | Lucrecia Camiletti</title>

  <!-- Soft fade-in on load / fade-out on navigating away, see
       page-fade-init.js's own header comment for why this specific
       script can't be deferred like the others. -->
  <script src="../../src/components/shared/page-fade-init.js"></script>
  <link rel="stylesheet" href="../../src/styles/tokens.css">

  <!-- Google Fonts, see /src/components/shared/head-fonts.html -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&family=Open+Sans:wght@400;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">

  <!-- Melodrama: the shared floating nav's name, see .float-nav__logo in float-nav.css -->
  <link rel="stylesheet" href="../../assets/fonts/melodrama.css">

  <link rel="stylesheet" href="../../src/components/shared/float-nav.css">
  <link rel="stylesheet" href="../../src/components/shared/footer.css">
  <link rel="stylesheet" href="../../src/components/shared/page-fade.css">
  <link rel="stylesheet" href="../../src/components/shared/project.css">
  <link rel="stylesheet" href="csa-website.css">
</head>
<body>

  <div class="project-page">

    <!-- No sidebar nav in v2 -- the floating nav bar below is
         position:fixed, independent of this layout, see
         project-layout--v2/project-header--v2 in project.css. -->
    <div class="project-layout project-layout--v2">

      <!-- Reused as-is from /src/components/shared/float-nav.html -->
      <nav class="float-nav" aria-label="Primary">
        <a class="float-nav__logo" href="../../index.html" aria-label="Lucrecia Camiletti">
          <!-- COPY: full name (desktop) / initials (mobile) -->
          <span class="float-nav__logo-full" aria-hidden="true">Lucrecia Camiletti</span>
          <span class="float-nav__logo-initials" aria-hidden="true">LC</span>
        </a>
        <span class="float-nav__divider" aria-hidden="true"></span>
        <div class="float-nav__links">
          <a class="float-nav__link" href="../../index.html#work"><!-- COPY: nav link label -->Work</a>
          <a class="float-nav__link" href="../../about/index.html"><!-- COPY: nav link label -->About me</a>
        </div>
      </nav>

      <!-- ================= SECTION 1: PROJECT HEADER (always visible) ================= -->
      <header class="project-header project-header--v2">

        <picture><!-- Mobile uses the dedicated non-large crop, see .project-header__image in project.css -->
          <source media="(max-width: 768px)" srcset="../../../../assets/projects/csa-website/csa-website-header-mobile.jpg">
          <img
            class="project-header__image"
            src="../../assets/projects/csa-website/csa-website-header.jpg"
            alt="Laptop and tablet showing the CSA.world homepage, with a world map of classified spy locations and a keyboard mini-game"
            loading="lazy"
          ><!-- COPY: alt text, feel free to reword -->
        </picture>

        <div class="project-header__copy">
          <h1 class="project-header__title">Fictional spy agency web experience</h1>

          <div class="project-header__meta">
            <dl class="project-header__facts">
              <div class="project-header__fact">
                <dt class="project-header__fact-label">Company</dt>
                <dd class="project-header__fact-value">Bright Little Labs</dd>
              </div>
              <div class="project-header__fact">
                <dt class="project-header__fact-label">Role</dt>
                <dd class="project-header__fact-value">Project Manager, UX/UI</dd>
              </div>
            </dl>

            <div class="project-header__description project-copy__body">
              <!-- COPY: header description, transcribed from Lucrecia's reference screenshot -->
              <p>Bright Little Labs (backed by Warner Media) uses storytelling to teach 21st-century skills to children aged 6-11, through the fictional Children's Spy Agency (CSA).</p>
              <p>As part of the pre-release for the second storybook, the existing web experience needed updated branding, experience and positioning. CSA.WORLD would take the role of the agency's public-facing site, where kids could find general information, unclassified intel and a way to discover the CSA app.</p>
            </div>
          </div>
        </div>

      </header>

    </div>

    <!-- Everything after the header: full 1200px width, no nav column alongside it -->
    <main class="project-main">

      <!-- ================= SECTION 2: IDENTITY CHECK GATE ================= -->
      <!-- Every button below is a real <button> (or the skip link a
           real <a>), so the whole flow is keyboard-operable with Tab/
           Enter/Space, no extra ARIA workarounds needed. Screen reader
           announcements come from #csa-gate-announcer (a visually-
           hidden live region updated once per transition with the
           complete new stage text), NOT from aria-live on the visible
           prompt itself, since that text now animates in character by
           character (see csa-website.js) and a live region watching it
           directly would read every intermediate half-typed state out
           loud. -->
      <section class="csa-gate" aria-label="Identity check">
      <!-- .csa-gate__inner: max 1200px, 1px blue side strokes + the same
           soft blue grid background as CSA Mobile's Final designs
           section (csa-game.css), reused here at the same 100px/20%-
           opacity values so both CSA pages match. -->
      <div class="csa-gate__inner">

        <div class="csa-gate__sr-only" id="csa-gate-announcer" aria-live="polite"></div>

        <!-- .csa-gate__stage: the "text and button" area only, fixed
             700px tall on desktop (100dvh, i.e. the full viewport, on
             mobile so everything fits on one screen), vertically
             centers whichever [prompt, active panel] pair is showing.
             The skip link below stays outside this box. -->
        <div class="csa-gate__stage">

          <!-- Single persistent prompt, shared across all 3 stages
               (previously one per stage). csa-website.js erases and
               retypes its text on every transition instead of swapping
               discrete elements, and sets data-stage on it so CSS can
               size stage 3 differently (see csa-website.css). tabindex
               + data-gate-focus: JS moves focus here after each
               transition finishes, so keyboard users land somewhere
               sensible. -->
          <p class="csa-gate__prompt" id="csa-gate-prompt" data-stage="1" tabindex="-1" data-gate-focus>
            <!-- COPY: gate stage 1 text (initial state, csa-website.js owns this element's text after the first transition) -->
            Adults are not allowed in the CSA, only proceed if you are NOT an adult.
          </p>

          <!-- ---- Stage 1: start button ---- -->
          <div class="csa-gate__panel is-active" data-stage="1" aria-label="Age warning">
            <!-- Button built from Lucrecia's Figma spec: two concentric
                 circles. The outer "base" (272px, dark red fill, 3px
                 border, wide soft glow) is decorative, purely visual,
                 not part of the button itself. The inner 212px circle
                 (fill #F9162A, 9px stroke #CE071D, tight drop shadow) IS
                 the real interactive <button>, with the "I am not an
                 adult" label as its own text node so the accessible name
                 is correct. Hover/press states apply to this inner
                 button only, not the outer base. -->
            <div class="csa-gate__button-base">
              <button type="button" class="csa-gate__button csa-gate__button--start" data-gate-action="stage-2">
                <span class="csa-gate__button-label"><!-- COPY: button label -->I am not an adult</span>
              </button>
            </div>
          </div>

          <!-- ---- Stage 2: checking for grown-ups popup ---- -->
          <!-- COPY: gate stage 2 prompt text, "I would like to blindly trust you but...", lives in csa-website.js's PROMPTS map now, not here -->
          <div class="csa-gate__panel" data-stage="2" aria-label="Checking for grown-ups">
            <!-- Card background is csa-web-checkpoint-bckg.png (see
                 csa-website.css), border+shadow are shared by both
                 popup cards now (see the base .csa-gate__card rule),
                 no more per-state --checking/--denied modifier. -->
            <div class="csa-gate__card">
              <p class="csa-gate__card-eyebrow">
                <span aria-hidden="true">&#9888;&#65039;</span> Checking <span aria-hidden="true">&#9888;&#65039;</span>
              </p>
              <h2 class="csa-gate__card-title"><!-- COPY: card title -->For grown-ups</h2>
              <p class="csa-gate__card-question"><!-- COPY: card question -->Which one is tastier?</p>
              <div class="csa-gate__actions">
                <button type="button" class="csa-gate__button csa-gate__button--accept" data-gate-action="accept">
                  <!-- COPY: button label -->Ice cream
                </button>
                <button type="button" class="csa-gate__button csa-gate__button--reject" data-gate-action="stage-3">
                  <!-- COPY: button label -->Homework
                </button>
              </div>
            </div>
          </div>

          <!-- ---- Stage 3: access denied warning ---- -->
          <!-- COPY: gate stage 3 prompt text, "I knew not to trust you.", lives in csa-website.js's PROMPTS map now, not here -->
          <div class="csa-gate__panel" data-stage="3" aria-label="Access denied">
            <div class="csa-gate__card">
              <p class="csa-gate__card-eyebrow csa-gate__card-eyebrow--danger">
                <span aria-hidden="true">&#9760;&#65039;</span> Access denied <span aria-hidden="true">&#9760;&#65039;</span>
              </p>
              <h2 class="csa-gate__card-title csa-gate__card-title--danger"><!-- COPY: card title -->Grown-up detected</h2>
              <button type="button" class="csa-gate__button csa-gate__button--retry" data-gate-action="stage-2-retry">
                <!-- COPY: button label, not visible in the reference screenshot, flag if a different wording was wanted -->Try again
              </button>
            </div>
          </div>

        </div>

        <!-- COPY: skip link label. Sits at the bottom of the gate on
             every stage, jumps straight to the case study below,
             bypassing the game for keyboard/screen-reader users.
             Lucrecia asked to keep this subtle for now, she'll decide
             later whether to keep it. -->
        <a class="csa-gate__skip" href="#csa-case-study">Skip to case study</a>

      </div>
      </section>

      <!-- ================= SECTION 3: CASE STUDY ================= -->
      <!-- Revealed by the gate's green CTA or the skip link above,
           hidden until then (see #csa-case-study[hidden] in
           csa-website.css). -->
      <div class="csa-gate__case-study" id="csa-case-study" hidden>

        <!-- ---- Final designs: same full-bleed navy + grid + side-stroke
             technique as the gate above (and csa-game.css's own Final
             designs section), with solid blue dividers between each
             sub-section. Every divider's margin-top is a one-off value,
             measured against the rendered page so the line lands on the
             next 100px background grid line down with at least 50px
             clear above/below (same rule csa-game.css's own dividers
             use, see the comment there) -- computed and patched in via
             a script rather than eyeballed, re-measure if the copy
             above any divider changes enough to reflow. ---- -->
        <section class="csa-final" aria-label="Final designs">
          <div class="csa-final__inner">

            <!-- Intro: fixed 340px tall on desktop only (mobile keeps
                 the plain heading, wasn't asked to change), heading
                 capped at 900px and centred either way. -->
            <div class="csa-final__intro">
              <!-- COPY: intro heading -->
              <h2 class="csa-final__heading">Welcome agent, here is a brief introduction to the features of csa.world</h2>
            </div>

            <div class="csa-final__divider csa-final__divider--1" role="presentation"></div>

            <!-- 1: checkpoint puzzle. Desktop: text left / image right,
                 row layout (see .csa-final__feature--row), text sits
                 30px below the image's own top. Mobile: unchanged
                 (stacked, centred). -->
            <div class="csa-final__feature csa-final__feature--row">
              <!-- COPY: feature callout -->
              <p class="csa-final__callout">Multiple clever systems ensure adults stay away (as just proven).</p>
              <img
                class="csa-final__image"
                src="../../assets/projects/csa-website/csa-web-final-1.png"
                alt="Entering Classified Area checkpoint screen, a letter-scrambler puzzle spelling out a secret word"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__divider--2" role="presentation"></div>

            <!-- 2: global network map. Desktop: full-bleed width, fixed
                 600px tall, solid #02052B background (no grid showing
                 through), plain centred callout (no dashed box) with
                 "CLASSIFIED" picked out in red-on-black. Mobile:
                 unchanged. -->
            <div class="csa-final__feature csa-final__feature--bleed600">
              <p class="csa-final__callout csa-final__callout--plain">
                <!-- COPY: feature callout -->
                Global network of <span class="csa-final__highlight">CLASSIFIED</span>
              </p>
              <img
                class="csa-final__image csa-final__image--bleed"
                src="../../assets/projects/csa-website/csa-web-final-2.gif"
                alt="Animated screen cycling through CSA.world features, including a global map of classified spy locations"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__divider--3" role="presentation"></div>

            <!-- 3: speed test. Desktop: full-bleed image (no padding on
                 any side), callout absolutely positioned top-left over
                 it, inset by the section's normal padding. Mobile:
                 unchanged. -->
            <div class="csa-final__feature csa-final__feature--overlay">
              <p class="csa-final__callout csa-final__callout--overlay">
                <!-- COPY: feature callout -->
                Our speed test keeps agents sharp and agile.
              </p>
              <picture>
                <source media="(max-width: 768px)" srcset="../../../../assets/projects/csa-website/csa-web-final-mobile-3.png">
                <img
                  class="csa-final__image csa-final__image--bleed"
                  src="../../assets/projects/csa-website/csa-web-final-3.png"
                  alt="Falling emoji keyboard mini-game asking how many times you can press the space bar in 10 seconds"
                  loading="lazy"
                ><!-- COPY: alt text, feel free to reword -->
              </picture>
            </div>

            <div class="csa-final__divider csa-final__divider--4" role="presentation"></div>

            <!-- Desktop only: the whole INTEL-tab composite as one
                 full-width image, no captions, no masking, height
                 fits the image (it's a transparent PNG). -->
            <div class="csa-final__feature csa-final__feature--full csa-final__desktop-only">
              <img
                class="csa-final__image csa-final__image--bleed"
                src="../../assets/projects/csa-website/csa-web-final-4.png"
                alt="Full CSA INTEL tab: Department of Weapons blueprints, Local Spy Unit map, protocols, an incoming mission report and CSA Resources"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <!-- Mobile only: the same content as the 3 mobile crops
                 already prepared for it, each with its own callout,
                 unchanged from before. -->
            <div class="csa-final__feature csa-final__mobile-only">
              <!-- COPY: feature callout -->
              <p class="csa-final__callout">Meet your CSA Department of Weapons.</p>
              <img
                class="csa-final__image"
                src="../../assets/projects/csa-website/csa-web-final-mobile-4_1.png"
                alt="Department of Weapons screen showing Spy Phone and Spy Watch gadget cards"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__mobile-only" role="presentation" style="margin-top: 51px;"></div>

            <div class="csa-final__feature csa-final__mobile-only">
              <!-- COPY: feature callout -->
              <p class="csa-final__callout">...register their local spy unit.</p>
              <img
                class="csa-final__image"
                src="../../assets/projects/csa-website/csa-web-final-mobile-4_2.png"
                alt="Local spy unit trading cards, including Black and Aqua, Jump Squad and Proco Unit"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__mobile-only" role="presentation" style="margin-top: 51px;"></div>

            <div class="csa-final__feature csa-final__mobile-only">
              <!-- COPY: feature callout -->
              <p class="csa-final__callout">...and gather intel for future missions.</p>
              <img
                class="csa-final__image"
                src="../../assets/projects/csa-website/csa-web-final-mobile-4_3.png"
                alt="CSA Resources screen, including a password-strength guide and a Fake News explainer"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__divider--5" role="presentation"></div>

            <!-- 5: Hedy. Desktop: same row layout as feature 1 (text
                 left, image right, text 30px below the image's top).
                 Mobile: unchanged. -->
            <div class="csa-final__feature csa-final__feature--row">
              <!-- COPY: feature callout -->
              <p class="csa-final__callout">Any questions? Hedy, the CSA AI is here to guide you.</p>
              <img
                class="csa-final__image"
                src="../../assets/projects/csa-website/csa-web-final-5.png"
                alt="Hedy the chatbot, guiding an agent through a conversation about CSA.world"
                loading="lazy"
              ><!-- COPY: alt text, feel free to reword -->
            </div>

            <div class="csa-final__divider csa-final__divider--6" role="presentation"></div>

            <!-- Restored block, left out of the reference screenshot by
                 an export error (per Lucrecia). No caption copy exists
                 for it, the card's own headlines carry it, so it's laid
                 out as an image only for now, flag if a callout should
                 be added here too. Layout unchanged this round. -->
            <div class="csa-final__feature csa-final__feature--final">
              <picture>
                <source media="(max-width: 768px)" srcset="../../../../assets/projects/csa-website/csa-web-final-mobile-6.png">
                <img
                  class="csa-final__image"
                  src="../../assets/projects/csa-website/csa-web-final-6.png"
                  alt="Do you have what it takes? and Train to become an elite spy promo cards"
                  loading="lazy"
                ><!-- COPY: alt text, feel free to reword -->
              </picture>
            </div>

            <!-- Desktop: sits one grid line higher than the strict
                 "next available line" rule would otherwise place it,
                 per Lucrecia's explicit call on this one. Mobile:
                 unchanged. -->
            <div class="csa-final__divider csa-final__divider--7" role="presentation"></div>

          </div>
        </section>

        <!-- Outro: deliberately OUTSIDE .csa-final, back on the page's
             normal light background, not the dark navy. Fixed 340px
             tall, text capped at 900px and centred, H2 typography
             (matches .project-copy__title's size/weight/font, see
             csa-website.css). -->
        <section class="csa-final-outro" aria-label="Final designs outro">
          <!-- COPY: outro line -->
          <p class="csa-final-outro__text">If you cheated the system and were in fact a grown-up, cheeky! Bellow there is some more intel for you.</p>
        </section>

        <!-- Desktop-only: 1px solid divider spanning the same 1200px
             width as the stroke lines above, closing off the outro
             before Role starts. Hidden on mobile (not part of that
             layout). -->
        <hr class="csa-final-outro__divider">

        <!-- ---- Role ---- -->
        <section class="project-role" aria-labelledby="section-role-title">

          <img
            class="project-role__image"
            src="../../assets/projects/csa-website/csa-website-role.jpg"
            alt="Lucrecia pointing at a wall of sticky notes during a research and affinity-mapping session"
            loading="lazy"
          ><!-- COPY: alt text, feel free to reword -->

          <div class="project-copy">
            <div class="project-role__copy-spacer" aria-hidden="true"></div>
            <h2 class="project-copy__title" id="section-role-title">Role</h2>
            <div class="project-copy__body">
              <!-- COPY: role section body copy -->
              <p>During a busy time at the company with big deadlines approaching, I was put in charge of managing, producing and delivering the Children's Spy Agency website.</p>
              <p>My main tasks involved project planning, setting timelines and deadlines, holding stakeholder meetings, researching and user testing, wireframes, prototypes, managing the development company and QA testing.</p>
              <p>I also worked closely with the lead visual designer Lucy Burns, to co-create the design following the existing style guides.</p>
            </div>
          </div>

        </section>

        <hr class="divider--solid">

        <!-- ---- Collaborators ---- -->
        <section class="project-collaborators" aria-labelledby="section-collaborators-title">
          <h2 class="project-copy__title" id="section-collaborators-title">Collaborators</h2>
          <ul class="project-collaborators__list">
            <!-- COPY: names and roles, add/remove entries as needed -->
            <li><p class="project-collaborators__person"><span class="project-collaborators__name">Lucy Burns</span> / Lead Visual Designer</p></li>
            <li><p class="project-collaborators__person"><span class="project-collaborators__name">Anna Hyde</span> / COO</p></li>
            <li><p class="project-collaborators__person"><span class="project-collaborators__name">Sophie Deen</span> / CEO and Creative Director</p></li>
            <li><p class="project-collaborators__person"><span class="project-collaborators__name">Natasha Hicken</span> / Creative Consultant</p></li>
            <li><p class="project-collaborators__person"><span class="project-collaborators__name">iTelasoft</span> / Development Contractors</p></li>
          </ul>
        </section>

        <hr class="divider--solid">

        <!-- ---- Similar projects ---- -->
        <section class="project-similar" aria-labelledby="section-similar-title">
          <h2 class="project-copy__title" id="section-similar-title">Similar projects</h2>
          <div class="project-similar__grid">

            <div class="project-similar__item">
              <a class="project-similar__thumbnail-link" href="../spyscape-digital/index.html">
                <img
                  class="project-similar__thumbnail"
                  src="../../assets/projects/spyscape-digital/spyscape-digital-thumbnail-16-10.jpg"
                  alt="SPYSCAPE Digital project thumbnail"
                  loading="lazy"
                >
              </a>
              <h3 class="project-similar__title">
                <a class="project-similar__title-link" href="../spyscape-digital/index.html">SPYSCAPE Digital</a>
              </h3>
            </div>

            <div class="project-similar__item">
              <a class="project-similar__thumbnail-link" href="../csa-game/index.html">
                <img
                  class="project-similar__thumbnail"
                  src="../../assets/projects/csa-game/csa-mobile-profile-thumbnail-16-10.jpg"
                  alt="CSA Mobile Game project thumbnail"
                  loading="lazy"
                >
              </a>
              <h3 class="project-similar__title">
                <a class="project-similar__title-link" href="../csa-game/index.html">Fictional spy agency mobile game</a>
              </h3>
            </div>

          </div>
        </section>

      </div>

    </main>

  </div>

  <!-- Reused as-is from /src/components/shared/footer.html, no modifier: project pages show the CV/LinkedIn links -->
  <footer class="footer">
    <div class="footer__inner">

      <div class="footer__main">
        <p class="footer__blurb">
          <!-- COPY: footer intro paragraph, matches the one used elsewhere -->
          I am always open to new challenges and collaborations, so if you have a project you'd like to discuss, please
          <a class="footer__cta" href="mailto:lucre.camiletti@protonmail.com">get in touch</a>.
        </p>

        <div class="footer__extra-links">
          <a class="footer__link" href="../../assets/LucreciaCamilettiCV.pdf" target="_blank" rel="noopener noreferrer">CV</a>
          <a class="footer__link" href="https://www.linkedin.com/in/lucrecia-camiletti/" target="_blank" rel="noopener noreferrer">
            <!-- COPY: LinkedIn profile URL -->LinkedIn
          </a>
        </div>
      </div>

      <a class="footer__promo" href="https://lcamiletti.webflow.io/mate-corner/intro" target="_blank" rel="noopener noreferrer">
        <img
          class="footer__promo-illustration"
          src="../../assets/footer/mate-corner@3x.png"
          alt="Mate Corner illustration"
          loading="lazy"
        >
      </a>

    </div>
  </footer>

  <script src="csa-website.js" defer></script>
  <script src="../../src/components/shared/page-fade.js" defer></script>
  <script src="../../src/components/shared/float-nav.js" defer></script>
</body>
</html>