@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
  /* Brand tokens follow mikemcgregor.com.au: navy ground, Inter in a light 350 weight with tight tracking,
     gold for emphasis. The blue is the robot's eyes (#13e5f5), the same blue as the full stop in the logo. */
  :root {
    --navy: #011027;
    --navy-deep: #000914;
    --gold: #d6a159;
    --cyan: #13e5f5;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, .72);
    --faint: rgba(255, 255, 255, .5);
    --line: rgba(255, 255, 255, .18);
    --glass: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
    --font: "Inter", "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { background: var(--navy-deep); }
  body {
    margin: 0;
    font-family: var(--font);
    font-weight: 350;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background:
      radial-gradient(70rem 36rem at 50% -6rem, rgba(19, 229, 245, .14), transparent 62%),
      radial-gradient(50rem 30rem at 85% 60%, rgba(214, 161, 89, .07), transparent 60%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--gold); }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

  main { width: min(88rem, 100% - 3rem); margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 0 1rem; }

  /* ---------- hero ---------- */
  .hero { text-align: center; }
  .logo { width: clamp(3.6rem, 10vh, 6rem); height: clamp(3.6rem, 10vh, 6rem); image-rendering: pixelated; filter: drop-shadow(0 0 1.4rem rgba(19, 229, 245, .45)); animation: bob 5s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-.3rem); } }
  h1 { margin: .4rem 0 0; font-weight: 300; font-size: clamp(2.4rem, 8.5vh, 4.8rem); line-height: 1.02; letter-spacing: -0.035em; }
  .name { margin: .5rem 0 0; font-size: clamp(1.3rem, 3.8vh, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
  .name b { font-weight: 560; }
  .name i { font-style: normal; font-weight: 300; color: var(--cyan); }
  .role { display: block; margin-top: .35rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 450; }
  .lede { max-width: 44rem; margin: .8rem auto 0; font-size: clamp(1rem, 2.6vh, 1.3rem); color: var(--muted); letter-spacing: -0.01em; }
  .lede strong { color: var(--text); font-weight: 450; }

  /* ---------- email capture ---------- */
  .capture { max-width: 34rem; margin: 1rem auto 0; }
  /* ---------- the email entry, as on Mike's sites (Website's NewsletterForm / subscribe.css, D-footer-18, 43, 45):
     a pill in the gold ring, the words centred, the send arrow inside it once the address has something before an @ ---------- */
  .capture .row { display: grid; grid-template-columns: minmax(16rem, 20rem); justify-content: center; }
  .capture input[type=email], .capture .send { grid-area: 1 / 1; }
  .capture input[type=email] { width: 100%; min-width: 0; height: 2.8125rem; padding: 0 2.8125rem; font: inherit; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); text-align: center; background: transparent; border: .125rem solid var(--gold); border-radius: 999px; }
  .capture input::placeholder { color: var(--muted); }
  .capture input[type=email]:focus { outline: none; box-shadow: 0 0 0 .25rem rgba(214, 161, 89, .22); }
  .capture input[type=email]:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 1000000s; }
  .capture .send { position: relative; display: grid; place-items: center; align-self: center; justify-self: end; width: 2.0625rem; height: 2.0625rem; padding: 0; margin-inline-end: .375rem; cursor: pointer; color: var(--navy); background: var(--gold); border: 0; border-radius: 999px; transition: opacity .5s cubic-bezier(.4, 0, .2, 1), visibility .5s, background .2s; }
  .capture .send::after { content: ''; position: absolute; top: 50%; right: 0; width: 2.75rem; height: 2.75rem; transform: translateY(-50%); }
  .capture .send svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1; }
  .capture .send:is(:hover, :active) { background: color-mix(in srgb, var(--navy) 12%, var(--gold)); }
  .capture .row:not(.is-ready) .send { visibility: hidden; opacity: 0; }
  .capture.sending .send { opacity: .5; }
  @media (max-width: 56.1875rem) { .capture .row { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { .capture .send { transition: none; } }

  /* the logo is the page's heading (no words above it) */
  h1.brand { margin: .7rem 0 0; font-size: 0; line-height: 0; }
  .lockup { display: block; width: min(80vw, clamp(15rem, 44vh, 27rem)); height: auto; margin: 0 auto; }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .fine { margin: .5rem 0 0; font-size: .8rem; color: var(--faint); }
  .err { margin: .35rem 0 0; font-size: .88rem; color: #ffb4a8; }
  .err:empty { display: none; }
  .thanks { display: none; margin: 0; padding: .8rem 1.2rem; border: 1px solid rgba(19, 229, 245, .5); border-radius: 16px; background: rgba(19, 229, 245, .08); color: var(--text); }
  .capture.done .row, .capture.done .fine { display: none; }
  .capture.done .thanks { display: block; }

  /* ---------- the five boxes, in one row ---------- */
  .boxes { margin-top: clamp(.9rem, 3vh, 2rem); }
  .eyebrow { margin: 0 0 .7rem; text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 450; }
  .grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, 1.1vw, 1.1rem); }
  .box { display: flex; flex-direction: column; padding: clamp(.7rem, 1.2vw, 1.15rem); background: var(--glass); border: 1px solid var(--line); border-radius: 20px; }
  .art { display: block; width: 100%; height: clamp(4.8rem, 14vh, 9rem); margin-bottom: clamp(.5rem, 1.5vh, .9rem); border-radius: 12px; background: rgba(0, 9, 20, .45); border: 1px solid rgba(255, 255, 255, .08); }
  .box h3 { margin: 0; text-wrap: balance; font-weight: 400; font-size: clamp(1.02rem, 1.55vw, 1.45rem); line-height: 1.14; letter-spacing: -0.025em; }
  .box h3 em { font-style: normal; color: var(--cyan); }
  .box p { margin: .45rem 0 0; font-size: clamp(.8rem, 1.02vw, .93rem); line-height: 1.4; color: var(--muted); }
  .tag { margin-top: auto; padding-top: .6rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 450; }

  /* svg art */
  .art .st { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .art .dim { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .art .gd { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .art .fc { fill: rgba(19, 229, 245, .14); }
  .art .fg { fill: var(--gold); }
  .art .fw { fill: rgba(255, 255, 255, .22); }
  .art text { font-family: var(--font); }
  /* email box: three circles of dots (7, 30, 90 days). 84% dark blue, 16% the MiniYou blue */
  .art .dn { fill: #2f5aa0; }
  .art .dm { fill: var(--cyan); }
  .art .rg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
  .art .rg.w { stroke: rgba(255, 255, 255, .34); stroke-width: 1.2; }
  .art .rg.e { stroke: rgba(255, 255, 255, .14); }
  .art .rl { font-size: 13px; letter-spacing: .04em; fill: rgba(255, 255, 255, .72); }
  .art .ap { fill: #fff; }

  footer { margin-top: clamp(.7rem, 2.2vh, 1.5rem); text-align: center; font-size: .78rem; color: var(--faint); }
  footer img { width: 1.3rem; height: 1.3rem; image-rendering: pixelated; vertical-align: -.3rem; margin-right: .35rem; }

  /* Under 1100px wide (tablet and phone) the boxes stack and the page scrolls. */
  @media (max-width: 1099px) {
    main { justify-content: flex-start; padding-top: 2.5rem; width: min(70rem, 100% - 2rem); }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .box:nth-child(5) { grid-column: span 2; }
    .art { height: auto; aspect-ratio: 16 / 9; }
    .box h3 { font-size: 1.4rem; }
    .box p { font-size: .98rem; }
    .eyebrow { margin-top: 1.4rem; }
    footer { padding-bottom: 1.6rem; }
  }
  @media (max-width: 640px) {
    .grid { grid-template-columns: 1fr; }
    .box:nth-child(5) { grid-column: span 1; }
  }
  /* Short desktop screens (laptops around 720 to 760px tall) get a little less air so it stays one page. */
  @media (min-width: 1100px) and (max-height: 780px) {
    main { padding: .6rem 0 .5rem; }
    .art { height: 5.8rem; margin-bottom: .45rem; }
    .capture { margin-top: .7rem; }
    .boxes { margin-top: .8rem; }
    footer { margin-top: .5rem; }
  }
  @media (prefers-reduced-motion: reduce) { .logo { animation: none; } }