<!--
  MOCKUP 9 / STAGE
  File: /Users/gauravkeerthi/Sites/gauravkeerthi.com v_2026/mockups/mockup-9-stage.html
  Replaces the argument structure of mockup-9-the-case.html entirely. That page
  made a case. This one makes none.

  DIRECTION CONTRACT
  THESIS:         Editorial brutalism. The photography and the scale carry the
                  page, and the writing gets out of the way. Three full-bleed
                  photographs of him, a face, enormous type, and a list of
                  facts. There is no claim, no grounds, no objections and no
                  ask anywhere on it.
  OWN-WORLD:      Near-black ground, one grotesk across weights 200 to 900, every
                  photograph desaturated to hold the monochrome, and neon orange
                  #FF5F1F used only for the rules that open each section, other
                  hairlines, hover and focus. Never as decoration. The one place
                  it fills is the skip link, and the type on that fill is
                  near-black, never bone. Nothing on the page is numbered.
  STORY:          "That is a stage, and that is a career. Draw your own
                  conclusion."
  FIRST VIEWPORT: Him on a stage in front of a full room, full bleed, and his
                  name at the size of a building. Nothing else.
  FORM:           Scroll narrative. Photograph, then a short field of facts, then
                  photograph. Sections: name, descriptor, Subjects, Bio, Contact.
                  The subjects and the talks, articles and appearances are one
                  section, not two. Each subject is a heading, and what he has
                  said or written on it sits under it as quiet metadata. All six
                  run as one uninterrupted list beside the sticky column, one
                  treatment throughout, and the section ends on type rather than
                  on a photograph. Warfare in the digital domain is thin, with
                  one unlinked article, and is left thin rather than padded.

  PALETTE (exact)
                  ground        #0A0A0A
                  ink           #F5F4F0   on ground, 18.13:1
                  secondary ink #A6A6A0   on ground,  7.94:1
                  hairline      #2C2C2A
                  accent        #FF5F1F   on ground,  6.51:1
                  Bone on the accent is 2.76:1 and fails, so no bone type ever
                  sits on an accent fill. Near-black on it is 6.51:1 and passes.

  TYPE            Libre Franklin only, weights 200, 300, 400, 600, 800, 900.
                  900 carries the name and the section titles.
                  200 carries the descriptor.
                  400 carries the bio, which is the only body copy on the page
                  and is never set lighter than that, because thin weights fail
                  on a near-black ground.
                  No second family, no monospace.

  PHOTOGRAPHY     Four, all real photographs of him, all local files under
                  assets/, all desaturated in CSS so the page stays
                  near-monochrome and the accent stays the only colour. No stock,
                  and no stand-ins: every person in every frame is either him or
                  his actual audience.
                    hero            gk-stage-audience   him on stage, full room
                    subjects column gk-stage-portrait   the ground under the
                                                        video, and what the
                                                        pause control uncovers
                    bio, right half gk-headshot         his face, half the screen
                    below the bio   a reel of seven, gk-podcast-st and
                                    gk-li-01 to 06, at their own ratios
                  The wordless image beat, the sky strip and the full-bleed
                  contact skyline are cut rather than filled by repeating a
                  picture at a crop it was not shot for.

  VIDEO           One, in the sticky column of Subjects: the Black Hat Short,
                  id j8LuOv0VYoA, on the nocookie host, autoplaying and muted
                  because muted is what makes autoplay legal at all. It is
                  inert markup and needs none of our JavaScript to play. A
                  small pause control sits on it, driven by a script that is
                  deliberately outside the GSAP guard so that a blocked CDN
                  cannot leave moving content with no way to stop it. Reduced
                  motion never autoplays: it gets the photograph and a play
                  affordance. The same film is also listed as an entry in the
                  subject it belongs to, which is intended, not a duplication.
                  The treatment is high-contrast black and white, not a grey
                  wash. Two of the three stage frames put him against a very
                  pale lit backdrop, so contrast does the separating and the
                  scrims are shaped around where he actually stands rather than
                  laid on flat. Measured figures are in the report.

  MOTION          GSAP 3.15.0, ScrollTrigger and SplitText.
                  Signature: the name reveals out of its own line masks while the
                  stage behind it settles from 1.16 to 1, then the accent
                  hairline draws across the foot of the frame.
                  Then, on scroll: the full-bleed band wipes open from a clip
                  inset with its photograph on a slow parallax, the section
                  titles rise out of their masks, subjects and bio paragraphs
                  stagger in, and the one email address is magnetic on pointer
                  devices.
                  Every from-state is authored in JavaScript. Nothing is hidden
                  in the stylesheet, so with the CDN blocked or JavaScript off
                  the page renders complete: every photograph is at rest, every
                  line of type is visible, no clip and no mask.
                  Reduced motion gets the rest state and nothing else.

  COPY            No em dashes. Canonical strings only, used verbatim. Nothing
                  on this page argues, promises, or asks. The page furniture is
                  British English; the bio is his own approved text and is set
                  exactly as he wrote it, spelling and punctuation untouched,
                  including the plain apostrophe in the third paragraph.
-->
<!DOCTYPE html>
<html lang="en-SG">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gaurav Keerthi</title>
<meta name="description" content="Gaurav Keerthi. Founder of StrongKeep. Previously Deputy Chief Executive of the Cyber Security Agency of Singapore, and a Brigadier-General in the Republic of Singapore Air Force.">
<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=Libre+Franklin:wght@200;300;400;600;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
<style>
  :root {
    color-scheme: only dark;

    --ground:   #0A0A0A;
    --ink:      #F5F4F0;
    --ink-2:    #A6A6A0;
    --hair:     #2C2C2A;
    --accent:  #FF5F1F;

    --font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --pad: clamp(1.25rem, 5vw, 5rem);

    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.75rem;
    --s-4: 3rem;
    --s-5: clamp(4.5rem, 12vw, 11rem);
  }

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, p, ul, ol, figure, figcaption { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img { display: block; max-width: 100%; }

  /* ---------- links ---------- */

  a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: rgba(255, 95, 31, 0.55);
    transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
  }
  a:hover { color: var(--accent); text-decoration-color: var(--accent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    background: var(--accent);
    color: #0A0A0A;
    font-weight: 800;
    padding: 0.75rem 1rem;
    text-decoration: none;
  }
  .skip:focus-visible { left: 0; color: #0A0A0A; }

  /* ---------- layout ---------- */

  .wrap { padding-inline: var(--pad); }
  .measure { max-width: 38rem; }

  /* ---------- photographic surfaces ----------
     The hero and the sticky column both carry a picture 118% of the surface
     height, offset by -9%, so a parallax of plus or minus 8% never uncovers an
     edge. With no JavaScript each simply sits centred and covers, which is the
     rest state.

     Every photograph on the page shares one treatment: high-contrast black and
     white rather than a flat grey wash, because these are real photographs of
     a person and a grey wash makes people look embalmed. Contrast separates
     him from the pale backdrops he tends to be standing in front of, and
     brightness comes down only as far as it takes to seat the picture on a
     near-black page. Per-surface overrides below, because they are lit very
     differently. */

  .scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* ---------- the name ---------- */

  .hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    min-height: 32rem;
  }
  .hero > img {
    position: absolute;
    left: 0;
    top: -9%;
    width: 100%;
    height: 118%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.16) brightness(0.80);
  }
  /* Shaped, not uniform. He stands about a quarter of the way down the frame,
     so the scrim opens across that band and leaves his face alone, then closes
     hard from the midpoint down, which is the only place type sits. The old
     gradient was heaviest at 28 per cent, which is exactly where his face is,
     and would have buried the reason for using the photograph at all. */
  .hero .scrim {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 10, 0.45) 0%,
        rgba(10, 10, 10, 0.16) 16%,
        rgba(10, 10, 10, 0.16) 38%,
        rgba(10, 10, 10, 0.58) 56%,
        rgba(10, 10, 10, 0.88) 74%,
        rgba(10, 10, 10, 0.95) 88%,
        rgba(10, 10, 10, 0.98) 100%);
  }
  .hero-in {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(1.75rem, 4vw, 3rem);
  }
  .name {
    display: flow-root;
    font-size: clamp(3.25rem, 14.5vw, 12rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-transform: uppercase;
  }
  .hero-rule {
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
    margin-top: clamp(1.25rem, 3vw, 2.25rem);
  }

  /* ---------- the descriptor ---------- */

  .descriptor-sec { padding-block: var(--s-5); }
  .descriptor {
    display: flow-root;
    max-width: 17em;
    font-size: clamp(1.375rem, 3.9vw, 3.125rem);
    font-weight: 200;
    line-height: 1.14;
    letter-spacing: -0.024em;
    text-wrap: pretty;
  }
  @media (min-width: 64rem) {
    .descriptor { margin-left: 8vw; }
  }

  /* ---------- section furniture ---------- */

  /* The numbered eyebrows are gone. They were carrying real weight next to the
     titles, so two things replace them rather than leaving a hole: the accent
     moves into a short rule in the same position, which is the device the hero
     already uses under the name, and the titles take a size step up, from a
     6.5rem cap to 7.5rem. The rule keeps the accent a job on the page now that
     nothing is numbered. */
  .sec-rule {
    width: clamp(3.25rem, 7vw, 6.5rem);
    height: 3px;
    background: var(--accent);
  }
  .title {
    display: flow-root;
    margin-top: clamp(1.1rem, 2.4vw, 1.9rem);
    font-size: clamp(2.75rem, 9.4vw, 7.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  /* The wordless image beat that used to sit here is gone. It existed to carry
     a stock photograph of an empty room, and there is no real photograph spare
     to put in it. Repeating one of the four at the same crop would have been
     worse than cutting the moment. */

  /* ---------- subjects ---------- */

  /* The section no longer ends on a photograph, so it needs a foot of its own:
     the last subject carries a closing rule and then this space, rather than
     stopping dead against the next section. */
  .subjects {
    padding-top: var(--s-5);
    padding-bottom: clamp(1.75rem, 4vw, 3.25rem);
  }
  .subjects-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
  }
  .subjects-media {
    position: relative;
    overflow: hidden;
    height: 58vh;
    height: 58svh;
    min-height: 18rem;
    /* Never an empty hole: the ground shows through if the embed fails. */
    background: #141414;
  }
  .subjects-media > img {
    position: absolute;
    left: 0;
    top: -9%;
    width: 100%;
    height: 118%;
    object-fit: cover;
    /* The tall stage frame. It is now the fallback behind the video, and what
       the pause control uncovers. He is a dark navy figure against a backdrop
       that is nearly white, so contrast is pushed furthest here: it drops the
       suit to near-black, holds his face in the mid-tones, and lets the
       backdrop clip out to a clean luminous field, which has the useful side
       effect of losing the event branding. */
    filter: grayscale(1) contrast(1.26) brightness(0.72);
  }

  /* ---------- the video in the sticky column ----------
     A vertical Short in a column that is not 9:16, so the frame is sized to
     cover the column and the overflow is clipped, exactly as a photograph with
     object-fit: cover would be. Container query units do the arithmetic
     because the column's width comes from a grid track and cannot be written
     as a viewport unit. The plain fill above is the fallback for anything that
     does not support them. */

  .vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  @supports (width: 1cqw) {
    .subjects-media { container-type: size; }
    .vid {
      inset: auto;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: max(100cqw, calc(100cqh * 9 / 16));
      height: auto;
      aspect-ratio: 9 / 16;
    }
  }

  /* Small, quiet, and in the page's own label language. The fill is solid
     ground rather than a tint, so the label sits at 18.13:1 whatever frame of
     the video happens to be behind it. */
  .vid-toggle {
    position: absolute;
    left: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    appearance: none;
    cursor: pointer;
    background: var(--ground);
    color: var(--ink);
    border: 1px solid var(--hair);
    padding: 0.55rem 0.9rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
  }
  .vid-toggle:hover { color: var(--accent); border-color: var(--accent); }
  /* No type sits on this one, and his head is high in the frame, so the scrim
     stays open at the top and only closes at the foot, where the column has to
     hand back to the ground the subjects are set on. */
  .subjects-media .scrim {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.14) 0%,
      rgba(10, 10, 10, 0.16) 46%,
      rgba(10, 10, 10, 0.74) 100%);
  }
  .subjects-list { padding-inline: var(--pad); }
  .subject {
    padding-block: clamp(2rem, 5vw, 3.25rem);
    border-top: 1px solid var(--hair);
  }
  .subjects-list .subject:first-child { border-top: 0; padding-top: clamp(2rem, 5vw, 3rem); }
  /* The run is closed off before the photograph that ends the section. Class
     selector, not a descendant li, so the nested entries stay unruled. */
  .subjects-list .subject:last-child { border-bottom: 1px solid var(--hair); }
  .subject h3 {
    max-width: 19ch;
    font-size: clamp(1.5rem, 3.6vw, 2.625rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  /* ---------- the entries under a subject ----------
     The talks, articles and appearances. They are set two steps down from the
     heading and indented off it, so a subject reads as one confident line with
     its evidence beneath, not as a second list competing with it. Where a
     subject has nothing yet it says so, in the muted ink, and is not padded. */

  .entries { margin-top: clamp(0.9rem, 2.2vw, 1.5rem); }
  .entry + .entry { margin-top: clamp(0.55rem, 1.4vw, 0.85rem); }
  .entry-a {
    display: block;
    max-width: 44ch;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    text-decoration: none;
    text-wrap: pretty;
    transition: color 180ms var(--ease);
  }
  .entry-t { transition: color 180ms var(--ease); }
  .entry-m { font-weight: 300; color: var(--ink-2); }
  /* The arrow is what marks an entry as a link, so the distinction is never
     carried by colour alone. An entry without one is text, and is not a link. */
  .entry-x {
    display: inline-block;
    margin-left: 0.3em;
    font-weight: 300;
    color: var(--ink-2);
    transition: transform 200ms var(--ease), color 180ms var(--ease);
  }
  a.entry-a:hover .entry-t { color: var(--accent); }
  a.entry-a:hover .entry-x { color: var(--accent); transform: translate(3px, -3px); }
  a.entry-a:focus-visible { outline-offset: 4px; }

  /* Every subject now has at least one entry, so the held-open slot and its
     label are gone. Warfare in the digital domain is the one thin subject, with
     a single unlinked article, and it is left thin rather than padded. */

  @media (min-width: 48rem) {
    .entries { padding-left: clamp(1rem, 2.4vw, 2.25rem); }
  }

  @media (min-width: 62rem) {
    .subjects-grid { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); }
    .subjects-media {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      height: 100svh;
    }
    .subjects-list { padding-block: clamp(3rem, 8vw, 7rem); }
    .subject { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
  }

  /* ---------- the reel ----------
     Seven photographs at mixed ratios, from 4:3 to a 1800x828 panorama. They
     are not squashed into a common frame: above 48rem this is a filmstrip, one
     shared height and each picture at its own natural width, which is the
     treatment that suits a page already built on full-bleed imagery. Below
     that a filmstrip would either be unreadably short or push single slides
     wider than the screen, which breaks mandatory snapping, so narrow screens
     get one full-width frame per slide and crop rather than squash. */

  .reel-band {
    position: relative;
    margin-top: var(--s-5);
    background: #141414;
  }
  .reel {
    display: flex;
    gap: clamp(0.5rem, 1.2vw, 1rem);
    margin: 0;
    padding-inline: var(--pad);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--pad);
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hair) transparent;
  }
  .reel:focus-visible { outline-offset: -3px; }
  .reel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: #141414;
  }
  .reel-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* The same treatment as every other photograph here, so the reel does not
       read as something pasted in from another page. */
    filter: grayscale(1) contrast(1.12) brightness(0.84);
  }
  .reel-item { width: calc(100vw - 2 * var(--pad)); }

  @media (min-width: 48rem) {
    /* Filmstrip. Height is capped three ways: 30rem, so nothing is ever drawn
       taller than 480px and therefore never taller than the shortest source,
       which is 533px, so none of these is upscaled; 40vh, so it stays in
       proportion to the screen; and 39vw, which is what keeps even the 2.17:1
       panorama narrower than the scrollport. That last one matters, because a
       slide wider than the scrollport is unreachable under mandatory snap. */
    .reel-item { width: auto; }
    .reel-item img {
      width: auto;
      height: min(30rem, 40vh, 39vw);
      aspect-ratio: auto;
      max-width: none;
      object-fit: fill;
    }
  }

  /* Below the strip, not on it, so the controls never sit on a photograph and
     never have a contrast problem. Hidden until the script is running. */
  .reel-ui {
    display: flex;
    align-items: baseline;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding-top: clamp(0.9rem, 2vw, 1.4rem);
    padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
  }
  .reel-btn {
    appearance: none;
    cursor: pointer;
    background: none;
    color: var(--ink);
    border: 1px solid var(--hair);
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 160ms var(--ease), border-color 160ms var(--ease);
  }
  .reel-btn:hover { color: var(--accent); border-color: var(--accent); }
  /* aria-disabled rather than disabled, so the buttons stay in the tab order
     and a keyboard user is never dropped into a hole at either end. */
  .reel-btn[aria-disabled="true"] { color: var(--ink-2); cursor: default; }
  .reel-btn[aria-disabled="true"]:hover { color: var(--ink-2); border-color: var(--hair); }
  .reel-pos {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- bio ----------
     The dated record and the background section that used to sit here are both
     gone: his own bio covers what they said, and running all three would have
     made the page repeat itself three times over.

     This is the only continuous prose on the page. Everything else is a
     heading, a line or a label, so five paragraphs could very easily read as a
     grey slab dropped into an editorial layout. Three things stop that. The
     measure is held between 60 and 75 characters. There is a size step into the
     first paragraph, so the section opens instead of simply starting. And his
     face now takes the entire right half of the screen, bleeding off the right
     edge, so the prose is read against a face rather than against nothing. */

  .bio-sec { padding-block: var(--s-5) 0; }
  .bio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.25rem);
    margin-top: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }

  /* Stacked, below the prose. A square source in a full-width band would have
     to crop away most of its height and would cut his chin, so the stacked
     block keeps the square and is capped instead. */
  .bio-media {
    position: relative;
    overflow: hidden;
    background: #141414;
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 1 / 1;
  }
  .bio-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 58 per cent across and 18 per cent down. Both are solved rather than
       guessed. His head spans 33 to 75 per cent of the square, so at the
       tightest crop the page ever produces, the half-width column at 1248,
       only 47.6 per cent of the source is visible and the head occupies 42 of
       it. 58 per cent centres the view on the head and leaves roughly 3 per
       cent of clearance at each ear; 62 per cent, the obvious guess, left half
       a per cent and would have shaved him. The vertical figure only bites on
       very wide screens, where it keeps the crown in frame and never cuts the
       chin. */
    object-fit: cover;
    object-position: 58% 18%;
    filter: grayscale(1) contrast(1.10) brightness(0.92);
  }

  /* Light type on a near-black ground needs more than the same settings used
     on white: it is set above the 17px floor, at weight 400 and never lighter,
     with the line-height opened up and a touch of positive tracking so the
     letterforms do not bleed into the ground. */
  /* The ch unit is the width of a zero, and the average glyph in this face is
     narrower than that, so a max-width in ch always renders about half as many
     characters again as the number says. These two values are measured, not
     assumed: they put every full line between 60 and 75 characters. */
  /* No text-wrap: pretty here, deliberately. It shortens the last few lines of
     every paragraph to avoid orphans, which on five paragraphs in a half-width
     column pulled individual lines down into the forties. The measure is the
     point in a block this long, so the rag is left to fall where it falls. */
  .bio-copy p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.006em;
    max-width: 47ch;
  }
  .bio-copy p + p { margin-top: 1.4em; }
  .bio-copy p:first-child {
    font-size: clamp(1.3125rem, 1.9vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: 0.002em;
    max-width: 50ch;
  }

  /* The split starts at 78rem, not at the 62rem used elsewhere, and the number
     is measured rather than chosen. Half the viewport minus two page margins is
     the prose column, and below about 1240px that column drops under 60
     characters. Raising the breakpoint was the instruction; letting the measure
     collapse was not. At 78rem the prose runs 61 characters, at 1440 it runs
     71, and above that the max-width holds it there. */
  @media (min-width: 78rem) {
    .bio-grid {
      grid-template-columns: minmax(0, 1fr) 50vw;
      column-gap: 0;
      gap: 0;
      align-items: stretch;
      margin-top: clamp(2.5rem, 5vw, 4rem);
    }
    /* The right-hand page margin is dead space here, because the photograph is
       hard against it, so the prose takes some of it back. That is what buys
       the measure the characters the half-width column would otherwise cost. */
    .bio-copy {
      grid-column: 1;
      grid-row: 1;
      padding-right: clamp(1.5rem, 3vw, 3.5rem);
      padding-bottom: clamp(2rem, 4vw, 3.5rem);
    }
    /* The lead steps down at the split, and this is the one place where the
       instruction to hold 60 to 75 characters and the instruction to open on a
       size step actually fight each other. A 24px lead cannot hold 60
       characters in half a 1248px viewport; it holds 47, and rags down to 33.
       So the step is kept, but made a smaller one, and the full step is used at
       the stacked widths where the column is wide enough to carry it. */
    .bio-copy p:first-child { font-size: clamp(1.1875rem, 1.35vw, 1.375rem); }
    /* Half the viewport, the full height of the row the prose sets, and hard
       off the right edge of the screen rather than inside the content wrap. */
    .bio-media {
      grid-column: 2;
      grid-row: 1;
      max-width: none;
      width: 50vw;
      aspect-ratio: auto;
      height: 100%;
      min-height: 32rem;
    }
  }

  /* ---------- contact ---------- */

  /* This section used to be a full-bleed skyline with every line of type sitting
     on it. There are four real photographs and they are all of him, none of them
     a closing image, so rather than repeat one at a crop it was not shot for,
     the page ends on ground. The headshot immediately above is the last picture,
     which puts his face directly before his address. The section also stops
     holding a full viewport of height it no longer has anything to fill with. */
  .contact { padding-block: var(--s-5) clamp(2.5rem, 6vw, 4rem); }
  .contact-lines { margin-top: clamp(1.75rem, 4vw, 3rem); }
  .email {
    display: inline-block;
    font-size: clamp(1.5rem, 5.2vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 95, 31, 0.55);
    padding-bottom: 0.08em;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
  }
  .email:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .contact-alt {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 2;
  }
  .contact-alt span { display: block; }

  /* ---------- footer ---------- */

  footer { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .foot-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
    border-top: 1px solid var(--hair);
    padding-top: clamp(1.25rem, 3vw, 2rem);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* ---------- SplitText line masks ----------
     Nothing here applies until SplitText runs, so no initial state is hidden.
     A line mask clips to the line box, and these lines are set tight, so the
     descenders would be shaved. Pad the line, take the same amount back off the
     mask, and let flow-root on the host stop the negative margin collapsing out
     of the box instead of shrinking it. */

  .sline { padding-bottom: 0.14em; }
  .sline-mask { margin-bottom: -0.14em; }

  /* ---------- motion preference ---------- */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    /* The reel's buttons scroll it, and smooth scrolling is motion too. */
    .reel { scroll-behavior: auto; }
  }
</style>
</head>
<body>

<a class="skip" href="#main">Skip to content</a>

<header class="hero">
  <img
    src="assets/gk-stage-audience.jpg"
    alt="Gaurav Keerthi speaking on stage to a seated audience, Singapore Healthcare Management 2025."
    width="2400" height="1600"
    fetchpriority="high" decoding="async">
  <div class="scrim"></div>
  <div class="hero-in wrap">
    <h1 class="name" aria-label="Gaurav Keerthi">Gaurav <br>Keerthi</h1>
    <div class="hero-rule" role="presentation"></div>
  </div>
</header>

<main id="main">

  <!-- THE DESCRIPTOR -->
  <section class="descriptor-sec wrap" aria-label="Profile">
    <p class="descriptor">Founder of StrongKeep. Previously Deputy Chief Executive of the Cyber Security Agency of Singapore, and a Brigadier-General in the Republic of Singapore Air Force.</p>
  </section>

  <!-- SUBJECTS, WITH WHAT HE HAS SAID AND WRITTEN ON EACH -->
  <section class="subjects" aria-labelledby="h-subjects">
    <div class="wrap">
      <div class="sec-rule" role="presentation"></div>
      <h2 class="title" id="h-subjects">Subjects</h2>
    </div>

    <div class="subjects-grid">
      <div class="subjects-media">
        <!-- The ground under the video. If the embed is blocked, refused or
             simply fails, the column shows this stage frame instead of an empty
             hole, and it is what the pause control uncovers. Decorative alt,
             because when it is visible it is standing in for the video. -->
        <img
          src="assets/gk-stage-portrait.jpg"
          alt=""
          width="1200" height="1800" loading="lazy" decoding="async">
        <!-- Inert HTML: this plays with or without our JavaScript. Muted is not
             a preference, it is what makes autoplay legal in every browser, and
             loop needs playlist to name the same id back to itself. -->
        <iframe
          class="vid"
          src="https://www.youtube-nocookie.com/embed/j8LuOv0VYoA?autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=j8LuOv0VYoA&amp;playsinline=1&amp;controls=0&amp;modestbranding=1&amp;rel=0"
          title="Black Hat Stories: Where Cybersecurity Professionals Go to Learn"
          allow="autoplay; encrypted-media; picture-in-picture"
          referrerpolicy="strict-origin-when-cross-origin"
          loading="lazy"></iframe>
        <div class="scrim"></div>
        <!-- Hidden until the script that drives it is running, so it is never a
             dead control. Anything that moves for more than five seconds needs
             a way to stop it. -->
        <button type="button" class="vid-toggle" aria-label="Pause video" hidden>Pause</button>
      </div>

      <ol class="subjects-list">
        <li class="subject">
          <h3>Managing digital risk and cybersecurity</h3>
          <ul class="entries">
            <li class="entry">
              <a class="entry-a" href="https://rsis.edu.sg/rsis-publication/rsis/is-cybersecurity-a-public-or-private-good/">
                <span class="entry-t">Is Cybersecurity a Public or Private Good?</span>
                <span class="entry-m">RSIS Commentary, 2023.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.blackhat.com/asia-20/briefings/schedule/">
                <span class="entry-t">Black Hat Asia.</span>
                <span class="entry-m">Keynote, 2020.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.csa.gov.sg/news-events/speeches/speech-by-dce(development)-gaurav-keerthi-at-atxsg-cybersecurity-summit-on-1-june/">
                <span class="entry-t">ATxSG Cybersecurity Summit.</span>
                <span class="entry-m">Keynote, 2022.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=ifA3kLv6D2c">
                <span class="entry-t">Fireside Chat: Jeff Moss and Gaurav Keerthi.</span>
                <span class="entry-m">Black Hat, 2023.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <!-- This is the same film that plays in the column alongside. It is
                 listed here because the list is the record of where he has
                 appeared, and leaving it out would be the odder choice. -->
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/shorts/j8LuOv0VYoA">
                <span class="entry-t">Where Cybersecurity Professionals Go to Learn.</span>
                <span class="entry-m">Black Hat, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=UNBkWOIw-IM">
                <span class="entry-t">Cybersecurity shouldn&#8217;t be a luxury.</span>
                <span class="entry-m">Code Riff, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=5LpzTFJU6AI">
                <span class="entry-t">Black Hat Stories: Gaurav Keerthi, CEO and Founder of StrongKeep.</span>
                <span class="entry-m">Black Hat.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.darkreading.com/vulnerabilities-threats/addressing-the-supply-chain-risk-why-protecting-smaller-companies-is-the-key-to-keeping-big-enterprises-secure">
                <span class="entry-t">Addressing the Supply Chain Risk: Why Protecting Smaller Companies Is the Key to Keeping Big Enterprises Secure.</span>
                <span class="entry-m">Dark Reading, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.straitstimes.com/singapore/think-youre-safe-from-cyber-crooks-why-99-of-companies-are-exposed">
                <span class="entry-t">Think you&#8217;re safe from cyber crooks? Why 99% of companies are exposed.</span>
                <span class="entry-m">The Straits Times, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.techinasia.com/startup-ikeaify-cybersecurity-smes">
                <span class="entry-t">This startup wants to &#8220;IKEAify&#8221; cybersecurity for SMEs.</span>
                <span class="entry-m">Tech in Asia.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
          </ul>
        </li>

        <li class="subject">
          <h3>Emerging technologies and innovation</h3>
          <ul class="entries">
            <li class="entry">
              <a class="entry-a" href="https://rsis.edu.sg/rsis-publication/rsis/why-singapores-ai-push-needs-a-cyber-layer/">
                <span class="entry-t">Why Singapore&#8217;s AI Push Needs a Cyber Layer.</span>
                <span class="entry-m">RSIS Commentary, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=ONe6SoeGeYQ">
                <span class="entry-t">Kopi Time E182: AI cyber risks.</span>
                <span class="entry-m">DBS, 2026.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
          </ul>
        </li>

        <li class="subject">
          <h3>Geopolitics and technology</h3>
          <ul class="entries">
            <li class="entry">
              <a class="entry-a" href="https://docs-library.unoda.org/Open-Ended_Working_Group_on_Information_and_Communication_Technologies_-_(2021)/Gaurav_Keerthi-_Threats.pdf">
                <span class="entry-t">Briefing on threats.</span>
                <span class="entry-m">UN Open-Ended Working Group on the Security of ICTs, 2024.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <!-- The SICW speaker page now returns 404. Text, not a link. -->
            <li class="entry">
              <p class="entry-a">
                <span class="entry-t">Singapore International Cyber Week.</span>
                <span class="entry-m">Moderator.</span>
              </p>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=ZNAY-qnKQZY">
                <span class="entry-t">Kopi Time E142: Tech and security.</span>
                <span class="entry-m">DBS, 2024.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://govinsider.asia/intl-en/article/the-internet-belongs-to-no-one-so-who-is-responsible-for-defending-it-gaurav-keerthi-csa">
                <span class="entry-t">The internet belongs to no one. So who is responsible for defending it?</span>
                <span class="entry-m">GovInsider.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://govinsider.asia/intl-en/article/aixgov-how-singapore-is-shaping-its-cyber-defence-with-international-collaboration-gaurav-keerthi-csa">
                <span class="entry-t">How Singapore is shaping its cyber defence with international collaboration.</span>
                <span class="entry-m">GovInsider.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="subject">
          <h3>Warfare in the digital domain</h3>
          <ul class="entries">
            <li class="entry">
              <p class="entry-a">
                <span class="entry-t">The Use of Pre-Emptive Force by Small States.</span>
                <span class="entry-m">Pointer, Journal of the Singapore Armed Forces, 2015.</span>
              </p>
            </li>
          </ul>
        </li>

        <li class="subject">
          <h3>How technology shapes us</h3>
          <ul class="entries">
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=E85nb4facEA">
                <span class="entry-t">How a cybersecurity expert nearly got scammed.</span>
                <span class="entry-m">Type A Podcast, episode 5.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://govinsider.asia/intl-en/article/gaurav-keerthi-better-sg-how-civic-tech-can-fix-singapores-social-gaps">
                <span class="entry-t">How civic tech can fix Singapore&#8217;s social gaps.</span>
                <span class="entry-m">GovInsider.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://cnaluxury.channelnewsasia.com/people/gaurav-keerthi-better-sg-singapore-184011">
                <span class="entry-t">How this former TV show judge is helping in Singapore&#8217;s tech-for-good efforts.</span>
                <span class="entry-m">CNA Luxury, 2021.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
          </ul>
        </li>

        <li class="subject">
          <h3>Constructive discourse</h3>
          <ul class="entries">
            <li class="entry">
              <a class="entry-a" href="https://www.youtube.com/watch?v=7VmlMuOCa8w">
                <span class="entry-t">Debate and disagreement today.</span>
                <span class="entry-m">TEDx, Harvard Graduate School of Education.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://en.wikipedia.org/wiki/The_Arena_(TV_series)">
                <span class="entry-t">The Arena, Mediacorp.</span>
                <span class="entry-m">Co-creator and judge. Nominated for an International Emmy, 2007.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
            <li class="entry">
              <a class="entry-a" href="https://books.google.com.sg/books/about/Think_Speak_Win_Discover_the_Art_of_Deba.html?id=FOoVBQAAQBAJ">
                <span class="entry-t">Think, Speak, Win.</span>
                <span class="entry-m">Marshall Cavendish, 2011.</span>
                <span class="entry-x" aria-hidden="true">&#8599;</span>
              </a>
            </li>
          </ul>
        </li>
      </ol>
    </div>
  </section>

  <!-- BIO
       His own approved copy, set verbatim. The apostrophe in the third
       paragraph is the plain one he wrote, not the typographic one used
       elsewhere on the page, because the instruction on this text was that not
       a character of it changes. -->
  <section class="bio-sec" aria-labelledby="h-bio">
    <div class="wrap">
      <div class="sec-rule" role="presentation"></div>
      <h2 class="title" id="h-bio">Bio</h2>
    </div>

    <div class="bio-grid">
      <figure class="bio-media">
        <img
          src="assets/gk-headshot.jpg"
          alt="Gaurav Keerthi."
          width="1200" height="1200" loading="lazy" decoding="async">
      </figure>

      <div class="bio-copy wrap">
        <p>Brig. General (NS) Gaurav Keerthi is the Chief Executive Officer and Founder of <a href="https://www.strongkeep.com">StrongKeep</a>, a Singapore-based company providing cybersecurity to the world&#8217;s smaller businesses. StrongKeep provides simple, affordable, comprehensive cyber protection and compliance for companies without the budget, technical know-how, and time to do it themselves.</p>

        <p>He was the former Deputy Commissioner of Cybersecurity and Deputy Chief Executive of the Cyber Security Agency of Singapore, where he shaped national regulations and global norms at the United Nations, secured critical infrastructure, and supported cyber crisis management. He also served as an invited expert to the United Nations on emerging digital threats, and has held roles as Chief Information Officer of the Republic of Singapore Air Force and Executive Vice President at Ensign InfoSecurity. He gives talks and advises boards and governments on digital innovation and cybersecurity.</p>

        <p>He has been a speaker and trainer at top security conferences including GovWare, Black Hat Asia, Black Hat USA and DEFCON. Gaurav's work in cybersecurity has been covered by Channel News Asia, The Straits Times, Tech in Asia, and other leading media outlets.</p>

        <p>He holds degrees from Stanford University and Harvard University (both on full scholarship) and is an Adjunct Senior Fellow at the S. Rajaratnam School of International Studies at Nanyang Technological University, Singapore.</p>

        <p>Outside work, he is the co-founder of better.sg, the national tech-for-good charity. He is also a published author of a local bestselling book on debating and a television personality on an Emmy-nominated show.</p>
      </div>
    </div>

    <!-- The reel, directly under the bio. A native scroller: overflow-x with
         scroll snapping, which means it swipes, scrolls and takes the keyboard
         with no script at all. The buttons and the counter below are the only
         parts that need JavaScript, and they stay hidden until it is running so
         they are never dead controls. No auto-advance: the Black Hat Short in
         Subjects is already moving, and a second moving thing would make the
         page restless. -->
    <div class="reel-band" role="region" aria-label="Photographs">
      <ul class="reel" tabindex="0">
        <li class="reel-item">
          <img
            src="assets/gk-podcast-st.jpg"
            alt="Gaurav Keerthi recording a podcast at The Straits Times studio."
            width="2200" height="1237" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-01.jpg"
            alt="Gaurav Keerthi on a panel at CyCon, the International Conference on Cyber Conflict."
            width="799" height="533" loading="lazy" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-02.jpg"
            alt="Gaurav Keerthi moderating the panel Designing Cyber-Resilient Healthcare: Regulation as a Catalyst for Sector-Wide Change."
            width="1800" height="1199" loading="lazy" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-03.jpg"
            alt="Gaurav Keerthi speaking at Milipol TechX 2026."
            width="1600" height="1200" loading="lazy" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-04.jpg"
            alt="Gaurav Keerthi on a GovWare 2025 panel on supply chain ecosystem risks."
            width="800" height="600" loading="lazy" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-05.jpg"
            alt="A full auditorium during one of Gaurav Keerthi&#8217;s talks."
            width="1800" height="828" loading="lazy" decoding="async">
        </li>
        <li class="reel-item">
          <img
            src="assets/gk-li-06.jpg"
            alt="Gaurav Keerthi on stage at the National Resolution Symposium 2025."
            width="1800" height="1199" loading="lazy" decoding="async">
        </li>
      </ul>

      <div class="reel-ui wrap" hidden>
        <button type="button" class="reel-btn" data-dir="-1" aria-label="Previous photograph">Previous</button>
        <p class="reel-pos" aria-hidden="true"><span class="reel-i">1</span> / 7</p>
        <button type="button" class="reel-btn" data-dir="1" aria-label="Next photograph">Next</button>
      </div>
    </div>
  </section>

  <!-- CONTACT -->
  <section class="contact" aria-labelledby="h-contact">
    <div class="wrap">
      <div class="sec-rule" role="presentation"></div>
      <h2 class="title" id="h-contact">Contact</h2>

      <div class="contact-lines">
        <a class="email" href="mailto:gaurav@strongkeep.com">gaurav@strongkeep.com</a>
        <p class="contact-alt">
          <span><a href="https://www.linkedin.com/in/gaurav-keerthi/">LinkedIn</a></span>
          <span>Singapore.</span>
        </p>
      </div>
    </div>
  </section>

</main>

<footer class="wrap">
  <div class="foot-row">
    <p>Gaurav Keerthi</p>
  </div>
</footer>

<script>
/* ---------------------------------------------------------------------------
   THE VIDEO CONTROL
   Deliberately outside the motion layer and with no dependency on GSAP. If the
   CDN is blocked the page still has to offer a way to stop something that moves
   by itself, so this must not sit behind the same guard.

   Stopping swaps the iframe element rather than its src. That genuinely stops
   playback instead of hiding it, leaves no history entry behind, and uncovers
   the photograph underneath rather than a blank white frame.
   --------------------------------------------------------------------------- */
(function () {
  'use strict';

  var host = document.querySelector('.subjects-media');
  if (!host) return;

  var frame = host.querySelector('.vid');
  var btn = host.querySelector('.vid-toggle');
  if (!frame || !btn) return;

  var LIVE = frame.getAttribute('src');
  var playing = true;

  function render() {
    var next = frame.cloneNode(false);
    if (playing) next.setAttribute('src', LIVE);
    else next.removeAttribute('src');
    next.hidden = !playing;
    frame.replaceWith(next);
    frame = next;
    btn.textContent = playing ? 'Pause' : 'Play';
    btn.setAttribute('aria-label', playing ? 'Pause video' : 'Play video');
  }

  /* Only now is the control real, so only now is it shown. */
  btn.hidden = false;
  btn.addEventListener('click', function () {
    playing = !playing;
    render();
  });

  /* Reduced motion never gets the autoplay. It gets the photograph and a play
     affordance, and can opt in. */
  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');
  if (reduce && reduce.matches) {
    playing = false;
    render();
  }
}());

/* ---------------------------------------------------------------------------
   THE REEL, ENHANCED
   Also outside the motion layer. The carousel already works without any of
   this: it is a scroll container with snap points, so it swipes on touch,
   scrolls on a trackpad, and takes arrow keys once focused. All this adds is
   two buttons and a counter, which is why they ship hidden and are only
   revealed once this has run.
   --------------------------------------------------------------------------- */
(function () {
  'use strict';

  var reel = document.querySelector('.reel');
  var ui = document.querySelector('.reel-ui');
  if (!reel || !ui) return;

  var items = Array.prototype.slice.call(reel.children);
  var counter = ui.querySelector('.reel-i');
  var btns = Array.prototype.slice.call(ui.querySelectorAll('.reel-btn'));
  if (!items.length || btns.length < 2) return;

  function padStart() {
    return parseFloat(getComputedStyle(reel).paddingInlineStart) || 0;
  }

  /* Whichever slide sits closest to the snap line is the current one. */
  function current() {
    var origin = reel.getBoundingClientRect().left + padStart();
    var best = 0, bestD = Infinity;
    items.forEach(function (li, i) {
      var d = Math.abs(li.getBoundingClientRect().left - origin);
      if (d < bestD) { bestD = d; best = i; }
    });
    return best;
  }

  function sync() {
    if (counter) counter.textContent = String(current() + 1);
    var end = reel.scrollWidth - reel.clientWidth - 2;
    btns[0].setAttribute('aria-disabled', reel.scrollLeft <= 2 ? 'true' : 'false');
    btns[1].setAttribute('aria-disabled', reel.scrollLeft >= end ? 'true' : 'false');
  }

  btns.forEach(function (b) {
    b.addEventListener('click', function () {
      if (b.getAttribute('aria-disabled') === 'true') return;
      var dir = Number(b.getAttribute('data-dir')) || 1;
      var i = Math.min(items.length - 1, Math.max(0, current() + dir));
      var origin = reel.getBoundingClientRect().left + padStart();
      reel.scrollBy({ left: items[i].getBoundingClientRect().left - origin });
    });
  });

  reel.addEventListener('scroll', sync, { passive: true });
  window.addEventListener('resize', sync);

  ui.hidden = false;
  sync();
}());
</script>

<script>
/* ---------------------------------------------------------------------------
   MOTION LAYER
   Additive only. Every from-state below is authored here and nowhere else, so
   if this never runs, or the CDN is blocked, or JavaScript is off, the markup
   above is already the finished page: all six photographs at rest, all type
   visible, no clip and no mask.
   --------------------------------------------------------------------------- */
(function () {
  'use strict';

  if (!window.gsap || !window.ScrollTrigger || !window.SplitText) return;

  gsap.registerPlugin(ScrollTrigger, SplitText);

  var mm = gsap.matchMedia();

  /* Everything the motion layer touches, so a failure anywhere can be undone
     back to the rest state rather than leaving the page half hidden. */
  var touched = [];
  function track(x) {
    var arr = Array.isArray(x) ? x : [x];
    arr.forEach(function (el) { if (el && touched.indexOf(el) === -1) touched.push(el); });
    return x;
  }
  function restAll() {
    gsap.set(touched, { clearProps: 'all' });
  }

  /* =========================================================================
     1. LINE REVEALS
        One helper for every masked heading on the page. The mask fix lives in
        the stylesheet, on .sline and .sline-mask, because changing line
        geometry inside onSplit makes autoSplit re-measure and revert.
     ========================================================================= */

  function revealLines(el, opts) {
    if (!el) return;
    opts = opts || {};
    var finished = false;

    try {
      SplitText.create(el, {
        type: 'lines',
        mask: 'lines',
        /* GSAP 3.15.0 accepts "auto", "hidden" or "none" here. Anything else,
           `true` included, hides the split fragments from assistive technology
           and writes no label, which leaves the heading silent. Headings that
           carry a hard <br> get "none" plus a static aria-label on the element,
           because "auto" would join the two halves without a space. */
        aria: opts.aria || 'auto',
        autoSplit: true,
        linesClass: 'sline',
        onSplit: function (self) {
          /* A re-split after the reveal has played is a resize or a font swap,
             not a new arrival. Land on the rest state instead of replaying. */
          if (finished) return;

          track(self.lines);

          var tl = gsap.timeline({
            defaults: { ease: 'power3.out' },
            delay: opts.delay || 0,
            onComplete: function () { finished = true; },
            scrollTrigger: opts.scroll
              ? { trigger: el, start: 'top 88%', once: true }
              : undefined
          });

          tl.from(self.lines, {
            yPercent: 120,
            duration: opts.duration || 0.85,
            stagger: opts.stagger || 0.08
          });

          /* Returned so autoSplit reverts it cleanly before any re-split. */
          return tl;
        }
      });
    } catch (err) {
      gsap.set(el, { clearProps: 'all', opacity: 1 });
    }
  }

  /* =========================================================================
     2. THE OPENING. The stage settles, the name rises out of it, the accent
        hairline draws across the foot of the frame.
     ========================================================================= */

  mm.add('(prefers-reduced-motion: no-preference)', function () {

    var heroImg  = document.querySelector('.hero > img');
    var heroRule = document.querySelector('.hero-rule');
    var name     = document.querySelector('.name');

    if (heroImg) {
      track(heroImg);
      gsap.from(heroImg, { scale: 1.16, duration: 1.9, ease: 'power3.out' });
    }

    if (heroRule) {
      track(heroRule);
      gsap.set(heroRule, { scaleX: 0, transformOrigin: 'left center' });
      gsap.to(heroRule, { scaleX: 1, duration: 0.9, ease: 'power3.out', delay: 0.62 });
    }

    revealLines(name, { aria: 'none', duration: 1.0, stagger: 0.09 });

    /* Backstop. If anything upstream stalls, the reader gets the finished page. */
    gsap.delayedCall(4, function () {
      if (heroRule && gsap.getProperty(heroRule, 'scaleX') < 0.99) {
        gsap.set(heroRule, { scaleX: 1 });
      }
    });

    return restAll;
  });

  /* =========================================================================
     3. PARALLAX AND CLIP REVEALS ON THE PHOTOGRAPHY
        The bands are the structure of this page, so this is where the motion
        budget goes. Each band wipes open once; its photograph drifts under a
        scrub while the band is on screen.
     ========================================================================= */

  mm.add('(prefers-reduced-motion: no-preference)', function () {

    /* the reel wipes open from its bottom edge, the way the full-bleed bands
       used to. The clip is on the wrapper, never on the scroll container. */
    gsap.utils.toArray('.reel-band').forEach(function (band) {
      track(band);
      gsap.fromTo(band,
        { clipPath: 'inset(0% 0% 100% 0%)' },
        {
          clipPath: 'inset(0% 0% 0% 0%)',
          duration: 1.15,
          ease: 'power3.inOut',
          scrollTrigger: { trigger: band, start: 'top 88%', once: true }
        }
      );
    });

    /* the hero photograph holds behind the name as the page moves off it */
    var heroImg = document.querySelector('.hero > img');
    if (heroImg) {
      track(heroImg);
      gsap.fromTo(heroImg,
        { yPercent: 0 },
        {
          yPercent: 8,
          ease: 'none',
          scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true }
        }
      );
    }

    /* the sticky subjects photograph, a slow drift while it is pinned */
    var subjImg = document.querySelector('.subjects-media > img');
    if (subjImg) {
      track(subjImg);
      gsap.fromTo(subjImg,
        { scale: 1.06, yPercent: -4 },
        {
          scale: 1.14, yPercent: 4,
          ease: 'none',
          scrollTrigger: { trigger: '.subjects-grid', start: 'top bottom', end: 'bottom top', scrub: true }
        }
      );
    }

    return restAll;
  });

  /* =========================================================================
     4. THE TYPE ARRIVING. Quiet by comparison: this page is carried by the
        photographs, and the words are only there to be read.
     ========================================================================= */

  mm.add('(prefers-reduced-motion: no-preference)', function () {

    revealLines(document.querySelector('.descriptor'), { scroll: true, stagger: 0.07 });

    document.querySelectorAll('.title').forEach(function (t) {
      /* A title carrying a hard <br> cannot use aria: "auto", because the
         generated label reads straight through the break. It gets a static
         label built with the break counted as a space, and aria: "none". */
      var hasBreak = !!t.querySelector('br');
      if (hasBreak && !t.getAttribute('aria-label')) {
        var label = Array.prototype.map.call(t.childNodes, function (n) {
          return n.nodeName === 'BR' ? ' ' : n.textContent;
        }).join('').replace(/\s+/g, ' ').trim();
        t.setAttribute('aria-label', label);
      }
      revealLines(t, { scroll: true, aria: hasBreak ? 'none' : 'auto' });
    });

    /* the accent rule that opens each section, drawn rather than faded */
    gsap.utils.toArray('.sec-rule').forEach(function (n) {
      track(n);
      gsap.from(n, {
        scaleX: 0,
        transformOrigin: 'left center',
        duration: 0.7,
        ease: 'power3.out',
        scrollTrigger: { trigger: n, start: 'top 92%', once: true }
      });
    });

    /* subjects, one at a time as they are read past */
    gsap.utils.toArray('.subject').forEach(function (s) {
      track(s);
      gsap.from(s, {
        opacity: 0,
        y: 26,
        duration: 0.7,
        ease: 'power3.out',
        scrollTrigger: { trigger: s, start: 'top 86%', once: true }
      });
    });

    /* the bio, a paragraph at a time. The entries under a subject need nothing
       of their own: they arrive inside the subject block that carries them. */
    var bioParas = gsap.utils.toArray('.bio-copy p');
    if (bioParas.length) {
      track(bioParas);
      gsap.from(bioParas, {
        opacity: 0,
        y: 18,
        duration: 0.6,
        stagger: 0.07,
        ease: 'power3.out',
        scrollTrigger: { trigger: '.bio-copy', start: 'top 84%', once: true }
      });
    }

    /* his face, alongside the bio */
    var slot = document.querySelector('.bio-media');
    if (slot) {
      track(slot);
      gsap.from(slot, {
        opacity: 0,
        y: 24,
        duration: 0.7,
        ease: 'power3.out',
        scrollTrigger: { trigger: slot, start: 'top 88%', once: true }
      });
    }

    return restAll;
  });

  /* =========================================================================
     5. THE ONE ADDRESS, magnetic. Pointer devices only, 6px ceiling.
     ========================================================================= */

  mm.add('(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)', function () {

    var email = document.querySelector('.email');
    if (!email) return;

    var xTo = gsap.quickTo(email, 'x', { duration: 0.4, ease: 'power3.out' });
    var yTo = gsap.quickTo(email, 'y', { duration: 0.4, ease: 'power3.out' });
    var clamp = gsap.utils.clamp(-6, 6);

    function pull(e) {
      var r = email.getBoundingClientRect();
      xTo(clamp((e.clientX - (r.left + r.width / 2)) * 0.10));
      yTo(clamp((e.clientY - (r.top + r.height / 2)) * 0.28));
    }
    function release() { xTo(0); yTo(0); }

    email.addEventListener('pointermove', pull);
    email.addEventListener('pointerleave', release);
    email.addEventListener('blur', release);

    return function () {
      email.removeEventListener('pointermove', pull);
      email.removeEventListener('pointerleave', release);
      email.removeEventListener('blur', release);
      gsap.set(email, { x: 0, y: 0 });
    };
  });

  /* Fonts land after first paint and re-flow the sticky column and the bands,
     so the triggers are re-measured once the real metrics are in. */
  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(function () { ScrollTrigger.refresh(); });
  }
  window.addEventListener('load', function () { ScrollTrigger.refresh(); });

}());
</script>

</body>
</html>