unravel-dispatch-summer-2026

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased;

}

/* paper grain — subtle tactility on both themes */

body::before {

  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .38; mix-blend-mode: soft-light;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

.mono { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; }

.display { font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; }

.page { max-width: 700px; margin: 0 auto; padding: 0 22px 72px; }

.page { max-width: 700px; margin: 0 auto; padding: 0 22px 72px; position: relative; z-index: 1; }

/* MASTHEAD */

.mast { padding: 44px 0 24px; margin-bottom: 6px; position: relative; }

.mast::after { content: ""; display: block; height: 3px; margin-top: 22px; background: var(--ink); }

.mast::after { content: ""; display: block; height: 6px; margin-top: 22px;

  background:

    repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 17px) top/100% 2px no-repeat,

    var(--ink) bottom/100% 2px no-repeat; }

.mast .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.wordmark { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.045em; display: flex; align-items: center; gap: 10px; color: var(--ink); }

.wordmark .tick { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }

.stamp { font-family: "SF Mono", monospace; font-size: 10.5px; color: var(--muted); letter-spacing: .14em; text-align: center; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; line-height: 1.5; text-transform: uppercase; }

.mast h1 { margin: 26px 0 0; font-size: clamp(32px, 7vw, 50px); }

.mast .sub { margin: 16px 0 0; color: var(--muted); font-size: 18px; max-width: 54ch; }

.hl { color: var(--accent); }

.lead { font-size: 19px; color: var(--muted); margin: 24px 0 8px; max-width: 62ch; }

.lead::first-letter { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 3.1em; line-height: .78; float: left; margin: 8px 12px 0 0; color: var(--accent); }

/* THREAD RAIL — a rust thread with a node at every section */

/* THREAD RAIL — a rust thread with a knotted node at every section */

.threads { position: relative; padding-left: 36px; margin-top: 22px; }

.threads::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); }

.threads::before { content: ""; position: absolute; left: 10px; top: -6px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 18%, transparent)); }

@media (max-width: 540px){ .threads { padding-left: 26px; } .threads::before { left: 6px; } }

section.block { position: relative; padding: 4px 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--border); }

section.block:last-of-type { border-bottom: none; margin-bottom: 8px; }

section.block::before { content: ""; position: absolute; left: -36px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--ground); }

section.block::before { content: ""; position: absolute; left: -36px; top: 6px; width: 14px; height: 14px; border-radius: 50%;

  background: radial-gradient(circle at 50% 50%, var(--ground) 0 2.5px, var(--accent) 3px 100%);

  box-shadow: 0 0 0 4px var(--ground); }

@media (max-width: 540px){ section.block::before { left: -26px; } }

.kicker { font-family: "SF Mono", monospace; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }

h2.headline { font-size: clamp(23px, 4.2vw, 32px); margin: 0 0 14px; letter-spacing: -0.025em; line-height: 1.08; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; color: var(--ink); }

p { margin: 0 0 15px; max-width: 64ch; }

p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

a:hover { border-bottom-color: var(--accent); }

strong { color: var(--ink); font-weight: 650; }

/* AT A GLANCE — inverted navy band, the centerpiece. Whole issue in one look. */

/* AT A GLANCE — inverted navy band, the centerpiece */

.glance-band { background: var(--ink); border-radius: 16px; padding: 6px 4px; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: var(--shadow); }

@media (max-width: 560px){ .glance-band { grid-template-columns: 1fr; } }

.gcell { padding: 22px 22px; border-left: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); display: flex; flex-direction: column; gap: 9px; }

.gcell:first-child { border-left: none; }

@media (max-width: 560px){ .gcell { border-left: none; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .gcell:first-child { border-top: none; } }

.gcell .glabel { font-family: "SF Mono", monospace; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }

.gcell .gbig { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.035em; line-height: 1; color: var(--ground); font-variant-numeric: tabular-nums; }

.gcell .gbig .u { font-size: 17px; font-weight: 700; letter-spacing: 0; margin-left: 4px; color: color-mix(in srgb, var(--ground) 76%, transparent); }

.gcell .gtake { font-size: 14px; line-height: 1.42; color: color-mix(in srgb, var(--ground) 80%, transparent); }

/* METRIC ROW */

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 20px 0; box-shadow: var(--shadow); }

@media (max-width: 560px){ .metrics { grid-template-columns: 1fr; } }

.metric { background: var(--panel); padding: 20px; }

.metric .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 33px; letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }

.metric .n.good { color: var(--good); }

.metric .n .u { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 3px; }

.metric .l { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* READS — link-out digest */

.reads { list-style: none; margin: 6px 0 0; padding: 0; }

.reads li { padding: 14px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }

.reads li { padding: 14px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; transition: gap .15s ease; }

.reads li:last-child { border-bottom: 1px solid var(--border); }

.reads .rarrow { grid-row: span 2; color: var(--accent); font-family: "SF Mono", monospace; align-self: center; }

.reads .rarrow { grid-row: span 2; color: var(--accent); font-family: "SF Mono", monospace; align-self: center; transition: transform .15s ease; }

.reads li:hover .rarrow { transform: translateX(4px); }

.reads a { font-weight: 650; font-size: 17px; border: none; }

.reads span { color: var(--muted); font-size: 14px; grid-column: 2; }

/* PRODUCTS */

.prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }

@media (max-width: 640px){ .prods { grid-template-columns: 1fr; } }

.prod { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }

.prod { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .16s ease, border-color .16s ease; }

.prod:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.prod h3 { margin: 0 0 3px; font-size: 18px; letter-spacing: -.01em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; }

.prod .dom { font-family: "SF Mono", monospace; font-size: 10.5px; color: var(--accent); margin-bottom: 12px; letter-spacing: .02em; }

.prod p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; flex: 1; }

.prod a.go { font-size: 13.5px; font-weight: 650; border: none; align-self: flex-start; }

/* FRAY — the thread unravels at the sign-off */

.fray { padding-left: 0; margin: 2px 0 26px; }

@media (max-width: 540px){ .fray { margin-left: -4px; } }

.fray { margin: 6px 0 30px; margin-left: -3px; }

@media (max-width: 540px){ .fray { margin-left: -7px; } }

/* CTA */

.cta { background: var(--ink); border-radius: 18px; padding: 38px 32px; text-align: center; margin: 6px 0 40px; }

.cta { background: var(--ink); border-radius: 18px; padding: 40px 32px; text-align: center; margin: 6px 0 40px; position: relative; overflow: hidden; }

.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;

  background: radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); }

.cta > * { position: relative; }

.cta h2 { font-size: clamp(23px, 4.4vw, 32px); margin: 0 0 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.025em; color: var(--ground); }

.cta p { margin: 0 auto 24px; color: color-mix(in srgb, var(--ground) 78%, transparent); max-width: 46ch; }

.btn { display: inline-block; background: var(--accent); color: #FFF8EF; font-weight: 700; font-size: 16px; padding: 14px 30px; border-radius: 10px; border: none; letter-spacing: -0.01em; }

.btn:hover { filter: brightness(1.08); }

.btn { display: inline-block; background: var(--accent); color: #FFF8EF; font-weight: 700; font-size: 16px; padding: 14px 30px; border-radius: 10px; border: none; letter-spacing: -0.01em; transition: transform .15s ease, filter .15s ease; }

.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.cta .alt { display: block; margin-top: 16px; font-size: 14px; color: color-mix(in srgb, var(--ground) 60%, transparent); }

.cta .alt a { color: color-mix(in srgb, var(--ground) 80%, transparent); }

      <div class="wordmark"><span class="tick"></span>Unravel</div>

      <div class="stamp">The Dispatch<br>No. 01 · Summer 2026</div>

    </div>

    <h1 class="display">How one rebuild killed a <span class="hl">runaway cloud bill</span>.</h1>

    <p class="sub">The last quarter in one page. A rebuild that paid for itself, generative video shipped weekly, and a few notes worth stealing.</p>

    <h1 class="display">A brittle engine, rebuilt in <span class="hl">two weeks</span>.</h1>

    <p class="sub">The last quarter in one page. A Java-to-Python rebuild shipped in two weeks, generative video every week, and a few notes worth stealing.</p>

  </header>

  <p class="lead">If you are building an AI product, here is the quarter in one page: how one rebuild cut a cloud bill to near zero, how we ship generative video every week without quality falling apart, and notes you can use whether or not we ever work together.</p>

  <p class="lead">If you are building an AI product, here is the quarter in one page: how we rebuilt a brittle engine from Java to Python in two weeks, how we ship generative video every week without quality falling apart, and notes you can use whether or not we ever work together.</p>

  <div class="threads">

    <section class="block">

      <p class="kicker">At a glance</p>

      <div class="glance-band">

        <div class="gcell"><span class="glabel">Cloud bill</span><span class="gbig">~$0</span><span class="gtake">Media egress, down from a projected $45k to $180k a month.</span></div>

        <div class="gcell"><span class="glabel">Time to ship</span><span class="gbig">2<span class="u">wks</span></span><span class="gtake">A full Java-to-Python engine rebuild, start to cutover.</span></div>

        <div class="gcell"><span class="glabel">Reliability</span><span class="gbig">0</span><span class="gtake">Reverts after the rewrite, against 28 in the service before it.</span></div>

        <div class="gcell"><span class="glabel">Shipped</span><span class="gbig">116</span><span class="gtake">Things built and put into production, June to August.</span></div>

      </div>

    </section>

    <section class="block">

      <p class="kicker">Case study · Client engine rebuild</p>

      <h2 class="headline">A rewrite that paid for itself.</h2>

      <h2 class="headline">A rebuild, done in two weeks.</h2>

      <div class="metrics">

        <div class="metric"><div class="n good">2<span class="u">wks</span></div><div class="l">Start to cutover, Java to Python</div></div>

        <div class="metric"><div class="n good">0</div><div class="l">Reverts after cutover, against 28 before</div></div>

        <div class="metric"><div class="n">~50%</div><div class="l">Less code, for a larger API surface</div></div>

        <div class="metric"><div class="n good">~$0</div><div class="l">Media egress, from a projected $45k–180k a month</div></div>

      </div>

      <p>A client's AI music-video engine, written in Java, had grown brittle: frequent reverts, mobile apps breaking in production, and a cloud bill that climbed with every view. We rebuilt it in Python, contract-first and verified against the real clients, so the bugs and the bill fell together.</p>

      <p>A client's AI music-video engine, written in Java, had grown brittle: frequent reverts and mobile apps breaking in production. We rebuilt it in Python, contract-first and verified against the real clients, and shipped the cutover in two weeks with nothing rolled back.</p>

    </section>

    <section class="block">

  </div><!-- /threads -->

  <div class="fray" aria-hidden="true">

    <svg width="120" height="46" viewBox="0 0 120 46" fill="none">

      <path d="M11 0 L11 16" stroke="var(--accent)" stroke-width="2"/>

      <path d="M11 16 C 11 30, 4 34, 2 46" stroke="var(--accent)" stroke-width="2" opacity="0.85"/>

      <path d="M11 16 C 12 30, 20 32, 30 44" stroke="var(--accent)" stroke-width="1.6" opacity="0.6"/>

      <path d="M11 16 C 13 28, 34 30, 52 40" stroke="var(--accent)" stroke-width="1.3" opacity="0.4"/>

      <path d="M11 16 C 14 26, 50 28, 78 36" stroke="var(--accent)" stroke-width="1" opacity="0.25"/>

    <svg width="184" height="72" viewBox="0 0 184 72" fill="none">

      <path d="M11 0 L11 22" stroke="var(--accent)" stroke-width="2.4"/>

      <path d="M11 22 C 11 44, 3 52, 1 72" stroke="var(--accent)" stroke-width="2.1" opacity="0.9"/>

      <path d="M11 22 C 12 46, 24 50, 34 70" stroke="var(--accent)" stroke-width="1.7" opacity="0.68"/>

      <path d="M11 22 C 13 44, 46 46, 68 64" stroke="var(--accent)" stroke-width="1.4" opacity="0.48"/>

      <path d="M11 22 C 14 42, 70 44, 106 58" stroke="var(--accent)" stroke-width="1.1" opacity="0.32"/>

      <path d="M11 22 C 15 40, 96 42, 150 52" stroke="var(--accent)" stroke-width="0.9" opacity="0.2"/>

    </svg>

  </div>

  <div class="cta">

    <h2>Weighing a rebuild or a cost cut?</h2>

    <p>Thirty minutes. We will tell you straight whether it is worth doing, what it would take, and how we would do it. No pitch deck required.</p>

    <h2>Weighing a rebuild?</h2>

    <p>Thirty minutes. We will tell you straight whether it is worth doing, what it would take, and how fast we could do it. No pitch deck required.</p>

    <a class="btn" href="https://unravel.tech/call">Book a 30-minute call →</a>

    <span class="alt">Or just reply to this email. It reaches us directly. <a href="mailto:kapil@unravel.tech">kapil@unravel.tech</a></span>

  </div>