<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Stun Media | Websites, presentations and marketing that stun</title>
<meta name="description" content="Websites, newsletters, presentations and marketing that make you want to meet yourself. Stun Media. Coming soon.">
<link rel="canonical" href="https://stunmedia.com/">
<meta name="theme-color" content="#F3EFE8">
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Stun Media">
<meta property="og:url" content="https://stunmedia.com/">
<meta property="og:title" content="Stun Media | Websites, presentations and marketing that stun">
<meta property="og:description" content="Websites, newsletters, presentations and marketing that make you want to meet yourself. Stun Media. Coming soon.">
<meta property="og:image" content="https://stunmedia.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Stun Media. Wow, that’s good.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Stun Media | Websites, presentations and marketing that stun">
<meta name="twitter:description" content="Websites, newsletters, presentations and marketing that make you want to meet yourself. Stun Media. Coming soon.">
<meta name="twitter:image" content="https://stunmedia.com/og.png">
<link rel="preload" href="fonts/cormorant-garamond-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/cormorant-garamond-500-italic.woff2" as="font" type="font/woff2" crossorigin>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Stun Media","url":"https://stunmedia.com/","description":"Websites, newsletters, presentations and marketing that make you want to meet yourself. Stun Media. Coming soon."}</script>
<style>
  @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500.woff2) format("woff2"); }
  @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500-italic.woff2) format("woff2"); }
  @font-face { font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter.woff2) format("woff2"); }

  :root {
    --paper: #F3EFE8; --ink: #141312; --accent: #C8372D;  /* the spark in the wordmark */
    --text: #3B3834;   /* body copy */
    --quiet: #6E6A64;  /* colophon */
    --rule: #DCD5CA;
    --pad: clamp(22px, 6vw, 72px);
  }
  * { box-sizing: border-box; margin: 0; }
  html { background: var(--paper); -webkit-text-size-adjust: 100%; }
  /* Phone first: the whole page fits one screen, no scrolling. */
  body {
    min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
    background: var(--paper); color: var(--ink);
    font: 400 17px/1.55 Inter, system-ui, -apple-system, sans-serif;
    padding: 0 var(--pad);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .wordmark, main, footer { width: 100%; max-width: 1200px; margin: 0 auto; }
  .wordmark {
    padding-top: max(22px, 3.5svh);
  }
  .wordmark svg { display: block; height: 24px; width: auto; }
  /* Menu: three bars top right, the same as the note page; the button sits in the logo's row without making it taller */
  .wordmark { display: flex; align-items: center; justify-content: space-between; }
  .burger { width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; cursor: pointer;
            display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
  .burger i { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 1px; }
  .burger:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
  .menu { position: fixed; inset: 0; z-index: 50; background: var(--paper); padding: 96px clamp(22px, 6vw, 72px) 40px; display: flex; flex-direction: column; }
  .menu[hidden] { display: none; }
  .menu ul { list-style: none; padding: 0; max-width: 1200px; width: 100%; margin: 0 auto; }
  .menu li { border-top: 1px solid #DCD5CA; } .menu li:last-child { border-bottom: 1px solid #DCD5CA; }
  .menu a { display: block; padding: 14px 0; font: 500 clamp(32px, 8vw, 56px)/1.1 "Cormorant Garamond", Georgia, serif; color: var(--ink); text-decoration: none; }
  .menu a:hover, .menu a:focus-visible { color: var(--accent); }
  .menu p { max-width: 1200px; width: 100%; margin: 22px auto 0; color: #6E6A64; font-size: 15px; }
  .menu-x { position: absolute; top: 14px; right: calc(clamp(22px, 6vw, 72px) - 10px); width: 44px; height: 44px; border: 0; background: none; font-size: 34px; line-height: 1; cursor: pointer; color: var(--ink); }
  /* main is one column as wide as the headline; the copy under it fills that width and no more */
  /* Same treatment at every size: line 2 steps in, and everything under it hangs on that step */
  main { --h: min(17.6vw, 11.5svh, 264px); --indent: calc(var(--h) * .62); align-self: center; padding: 4svh 0; display: grid; grid-template-columns: minmax(0, max-content); }
  .reaction, .statement, .lines { width: 0; margin-left: var(--indent); min-width: calc(100% - var(--indent)); }
  /* Headline: the reaction, then the verdict, closed with the bolt from the wordmark */
  h1 {
    font: 500 var(--h)/.9 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.025em; margin-left: -.05em;
    font-feature-settings: "kern", "liga";
  }
  h1 > span { display: block; }
  h1 .w1 { font-style: italic; letter-spacing: -.01em; }
  h1 .w2 { margin-left: .62em; }
  h1 .bolt { display: inline-block; height: .72em; width: auto; margin-left: .07em; vertical-align: baseline; fill: var(--accent); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .reaction {
    margin-top: 3.2svh;
    font: italic 500 clamp(20px, min(3vw, 4.2svh), 38px)/1.25 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance;
  }
  .statement {
    margin-top: 3.4svh;
    font: 500 clamp(21px, min(5.8vw, 3.7svh), 54px)/1.16 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.005em; text-wrap: pretty;
  }
  .lines { margin-top: 2.8svh; color: var(--text); font-size: 16px; }
  .lines > span { display: block; }
  .wow { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; }
  ::selection { background: var(--accent); color: var(--paper); }
  footer {
    padding: 14px 0 max(18px, 3svh); border-top: 1px solid var(--rule);
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
    font-size: 14px; color: var(--quiet);
  }
  .status { color: var(--ink); font-weight: 500; }
  .note { color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; white-space: nowrap; display: table; margin-top: 4px; }
  @media (min-width: 760px) { .note { display: inline; margin: 0 0 0 6px; } }
  .note:hover, .note:focus-visible { color: var(--accent); }
  .contact {
    grid-column: 1 / -1; grid-row: 2;
    display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0;
    color: var(--quiet); text-decoration: none; justify-self: start;
  }
  .contact span { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
  .contact:hover span, .contact:focus-visible span { color: var(--accent); }
  .contact:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  @media (min-width: 760px) {
    body { font-size: 18px; }
    main { --h: min(17vw, 22.5svh, 264px); }
    .statement { font-size: min(2.95vw, 5svh, 50px); margin-top: 3.2svh; text-wrap: pretty; }
    .lines { margin-top: 2.6svh; font-size: 18px; }
    .reaction { margin-top: 3.6svh; }
    .wordmark svg { height: 28px; }
    footer { grid-template-columns: 1fr auto 1fr; padding-top: 18px; }
    .contact { grid-column: 2; grid-row: 1; padding: 0; min-height: 0; }
    .copy { justify-self: end; }
  }
  @media (min-width: 1100px) {
    .lines { white-space: nowrap; }
    .lines > span { display: inline; }
  }
  /* Small phones (iPhone SE in Safari): a touch tighter so it still fits */
  @media (max-width: 759px) and (max-height: 600px) {
    body { font-size: 16px; line-height: 1.5; }
    main { --h: min(17.6vw, 11svh); }
    .reaction { font-size: 19px; }
    .statement { font-size: 19px; margin-top: 2.2svh; }
    .lines { font-size: 15px; }
    .lines { margin-top: 1.8svh; }
    main { padding: 2svh 0; }
    .reaction { margin-top: 2.4svh; }
    .lines { line-height: 1.4; }
    .wordmark { padding-top: 16px; }
    footer { padding-bottom: 10px; }
    .contact { min-height: 40px; padding: 8px 0; }
  }
  /* Short laptop screens */
  @media (min-width: 760px) and (max-height: 780px) {
    main { --h: min(17vw, 21svh, 264px); }
    .reaction { margin-top: 4.4svh; }
    .statement { font-size: min(3.4vw, 4.8svh, 56px); margin-top: 2.4svh; }
    .lines { margin-top: 2svh; }
    main { padding: 2svh 0; }
  }

  /* One entrance: the headline arrives, then everything is still. */
  @media (prefers-reduced-motion: no-preference) {
    h1 > span { animation: arrive .9s cubic-bezier(.2, .7, .2, 1) backwards; }
    h1 .w2 { animation-delay: .16s; }
    h1 .bolt { animation: strike .5s cubic-bezier(.3, 1.6, .5, 1) .85s backwards; transform-origin: 50% 100%; }
    @keyframes arrive { from { opacity: 0; transform: translateY(.12em); } }
    @keyframes strike { from { opacity: 0; transform: translateY(-.25em) scale(.6); } }
  }
</style>
</head>
<body>
<nav class="menu" id="menu" aria-label="Main" hidden>
  <button type="button" class="menu-x" data-close aria-label="Close menu">&times;</button>
  <ul>
    <li><a href="/" data-close aria-current="page">Home</a></li>
    <li><a href="note/">A note from Michael</a></li>
    <li><a href="mailto:hello@stunmedia.com">Get in touch</a></li>
  </ul>
  <p>Our work is coming soon.</p>
</nav>
<div class="wordmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 18 475 86" role="img" aria-label="Stun Media"><path fill="#1C1B19" d="M23.4 100.9Q18.2 100.9 14.2 99.3Q10.2 97.8 7.4 95.3Q4.5 92.9 2.8 90.3L9.5 84.5Q11.4 87.9 14.9 90.3Q18.5 92.8 23.5 92.8Q27.9 92.8 30.5 90.9Q33 89.1 33 86.1Q33 83.7 31.4 82.2Q29.8 80.8 27.2 79.8Q24.6 78.9 21.5 78.2Q18.7 77.4 15.8 76.4Q12.9 75.4 10.6 73.8Q8.2 72.3 6.8 69.8Q5.3 67.4 5.3 63.8Q5.3 57.5 10.2 53.6Q15 49.8 23 49.8Q28.7 49.8 33.4 52.1Q38.1 54.5 40.7 59.1L34.6 63.8Q32.6 60.5 29.5 59Q26.3 57.5 22.6 57.5Q19.1 57.5 16.8 59Q14.4 60.4 14.4 62.9Q14.4 64.7 15.4 65.8Q16.5 67 18.8 67.8Q21 68.7 24.3 69.5Q27.4 70.2 30.6 71.2Q33.8 72.2 36.5 73.8Q39.2 75.4 40.9 78.1Q42.6 80.8 42.6 85.1Q42.6 89.8 40.2 93.3Q37.8 96.9 33.5 98.9Q29.2 100.9 23.4 100.9ZM68.1 100.9Q64.5 100.9 61.5 99.5Q58.4 98.1 56.7 94.9Q54.9 91.8 54.9 86.8V58.3H45.1V50.7H54.9V38.1L64.8 32.6V50.7H76V58.3H64.8V84.2Q64.8 88.3 66.1 90.5Q67.3 92.8 70.7 92.8Q71.7 92.8 73.1 92.5Q74.4 92.3 76 91.9V99.5Q74 100.2 72 100.6Q70 100.9 68.1 100.9ZM100.1 100.9Q94.6 100.9 90.7 98.7Q86.7 96.4 84.7 92.2Q82.6 87.9 82.6 81.8V50.7H92.4V78.7Q92.4 83.1 93.5 86.2Q94.6 89.2 97 90.8Q99.3 92.3 102.9 92.3Q107.1 92.3 109.8 90.2Q112.4 88.1 113.7 83.9Q115 79.8 115 73.6V50.7H124.7V100H115V93.6Q113.1 96.4 110.3 98.1Q105.8 100.9 100.1 100.9ZM135.5 100V50.7H145.4V57.6Q146.2 56.3 147.2 55.2Q149.6 52.6 153 51.2Q156.3 49.8 160.2 49.8Q168.4 49.8 173.1 54.5Q177.7 59.3 177.7 68.4V100H167.9V72Q167.9 64.9 165.4 61.6Q162.8 58.3 157.5 58.3Q153.5 58.3 150.9 60.1Q148.2 61.9 146.8 65.8Q145.4 69.7 145.4 75.7V100Z"/><path fill="#C8372D" d="M202.2 20 L188.1 55.2 L197.3 55.2 L193.1 82 L207.9 44 L198.7 44 L205.8 20 Z"/><path fill="#A39C92" d="M218.8 100V50.7H228.7V58.2Q228.9 57.8 229.1 57.5Q230.7 54.8 232.9 53.1Q235 51.4 237.5 50.6Q240 49.8 242.6 49.8Q246.9 49.8 250.4 51.4Q253.8 53.1 256.2 56.5Q256.6 57.3 257.1 58.1Q257.4 57.6 257.7 57.2Q260.1 53.5 263.7 51.6Q267.2 49.8 271.8 49.8Q278 49.8 281.8 52.6Q285.5 55.4 287.2 59.8Q289 64.3 289 69.6V100H279.3V72Q279.3 67.7 278.3 64.6Q277.3 61.6 275.2 59.9Q273.1 58.3 269.6 58.3Q266.2 58.3 263.8 60Q261.4 61.8 260.2 65.3Q258.9 68.8 258.9 74V100H249.1V71.4Q249.1 64.8 246.7 61.5Q244.2 58.3 239.6 58.3Q236.2 58.3 233.8 60Q231.3 61.8 230 65.3Q228.7 68.8 228.7 74V100ZM320.3 100.9Q314.3 100.9 309.9 98.9Q305.5 96.9 302.6 93.3Q299.7 89.8 298.3 85.2Q296.8 80.7 296.8 75.7Q296.8 70.7 298.2 66Q299.6 61.4 302.4 57.8Q305.2 54.1 309.5 51.9Q313.7 49.8 319.5 49.8Q325.3 49.8 329.5 51.8Q333.7 53.7 336.4 57.1Q339.1 60.6 340.5 64.9Q341.8 69.2 341.8 74Q341.8 74.5 341.8 75.8Q341.7 77.2 341.5 78.4H306.6Q306.9 85 310.7 88.5Q314.4 92.1 320.6 92.1Q324.8 92.1 328.1 90.8Q331.4 89.4 334.2 86.5L340.2 92.7Q337.3 95.6 334.3 97.4Q331.2 99.2 327.9 100.1Q324.5 100.9 320.3 100.9ZM332.4 71.2Q332.4 70.7 332.4 70.3Q332.4 68 331.6 65.8Q330.8 63.6 329.2 61.8Q327.6 60.1 325.3 59Q322.9 58 319.8 58Q315.7 58 312.8 59.8Q309.9 61.7 308.4 64.7Q306.8 67.7 306.5 71.2ZM369.8 100.9Q363.1 100.9 358.2 97.6Q353.3 94.2 350.6 88.3Q347.8 82.5 347.8 75.3Q347.8 67.4 350.8 61.7Q353.7 56 358.7 52.9Q363.7 49.8 369.8 49.8Q374.2 49.8 377.9 51.6Q381.5 53.4 384 56.6Q384.5 57.3 385 58V30.3H394.7V100H385V92.6Q384.5 93.4 384 94Q381.4 97.4 377.8 99.2Q374.1 100.9 369.8 100.9ZM371.8 91.9Q376.1 91.9 379.3 89.8Q382.4 87.7 384.2 84Q385.9 80.2 385.9 75.3Q385.9 70.4 384.2 66.7Q382.4 62.9 379.3 60.8Q376.1 58.8 371.8 58.8Q367.6 58.8 364.4 60.8Q361.2 62.9 359.5 66.7Q357.7 70.4 357.7 75.3Q357.7 80.2 359.5 84Q361.2 87.7 364.4 89.8Q367.6 91.9 371.8 91.9ZM405.3 100V50.7H415.1V100ZM404.6 42.2V30.3H415.7V42.2ZM457.8 100 457.2 92.8Q457.1 92.9 457 93Q454.4 96.9 450.6 98.9Q446.7 100.9 441.9 100.9Q436.4 100.9 432.2 98.9Q428 96.9 425.7 93.3Q423.4 89.8 423.4 85.1Q423.4 81 425.1 78Q426.8 75.1 429.5 73.5Q432 71.9 435.3 71.2Q438.5 70.6 442.2 70.6H457V69Q457 63.8 454 61Q451 58.2 445.3 58.2Q441.3 58.2 437.7 59.8Q434 61.4 430.7 65L424.6 58.7Q429 54.1 434.4 51.9Q439.7 49.8 446 49.8Q455.9 49.8 461.4 54.8Q466.8 59.9 466.8 69V100ZM457 78H443.6Q441.6 78 439.5 78.3Q437.3 78.7 435.8 79.8Q434.6 80.7 433.9 82.1Q433.2 83.4 433.2 85.2Q433.2 88.7 435.9 90.8Q438.6 92.9 443.1 92.9Q446.9 92.9 450.1 91.2Q453.2 89.4 455.1 86.3Q457 83.3 457 79.4Z"/></svg><button class="burger" type="button" id="burger" aria-label="Menu" aria-controls="menu" aria-expanded="false"><i></i><i></i><i></i></button></div>
<main>
  <h1><span class="w1">Wow,</span> <span class="w2">that’s good<span class="sr">.</span><svg class="bolt" viewBox="187 19 22 64" aria-hidden="true" focusable="false"><path d="M202.2 20 L188.1 55.2 L197.3 55.2 L193.1 82 L207.9 44 L198.7 44 L205.8 20 Z"/></svg></span></h1>
  <p class="reaction">That’s the only reaction we work for.</p>
  <p class="statement">Websites, newsletters, presentations and marketing that make you want to meet yourself.</p>
  <p class="lines"><span>When it’s right, it stops you.</span> <span>That’s the standard.</span> <span>If you don’t say <span class="wow">“wow, that’s good”</span>,</span> <span>it’s a miss.</span></p>
</main>
<footer>
  <p class="status">Coming soon. <a class="note" href="note/">A note from Michael</a></p>
  <a class="contact" href="mailto:hello@stunmedia.com">Get in touch <span>hello@stunmedia.com</span></a>
  <p class="copy">© 2026 Stun Media</p>
</footer>
<script>
(() => {
  const menu = document.getElementById('menu'), burger = document.getElementById('burger');
  const shut = () => { menu.hidden = true; burger.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; };
  burger.addEventListener('click', () => { menu.hidden = false; burger.setAttribute('aria-expanded', 'true'); document.body.style.overflow = 'hidden'; menu.querySelector('a').focus(); });
  menu.addEventListener('click', e => { if (e.target.closest('[data-close]')) { e.target.closest('a[href="/"]') && e.preventDefault(); shut(); } });
  addEventListener('keydown', e => { if (e.key === 'Escape' && !menu.hidden) { shut(); burger.focus(); } });
})();
</script>
</body>
</html>
