Make the next handoff ready.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"><title>Make the next handoff ready.</title><style>:root{--accent:#4b4969;--wash:#eeedf4;--paper:#faf9fc}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper,#f6f4ee);color:#222b32;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:0 auto;padding:32px}header{padding-bottom:20px;border-bottom:2px solid var(--accent);margin-bottom:24px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}h1{font:600 clamp(28px,4.5vw,40px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px;max-width:760px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 8px}p{margin:0 0 12px}p:last-child{margin-bottom:0}.lede{max-width:740px;color:#47545c}.small{font-size:13px;line-height:1.5;color:#53616b}.tag{display:inline-block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.02em;padding:4px 8px;background:var(--wash);color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px}.split>*{min-width:0}.panel{padding:22px;background:#fff;border:1px solid #cbd1d1}.callout{padding:16px 20px;border-left:4px solid var(--accent);background:var(--wash);margin-bottom:20px}.warning{background:#fff2df;border-left-color:#8a4c17}.section{margin-top:26px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}button,input,select,textarea{font:inherit}button,select,summary{min-height:44px}button{background:#fff;color:#24313c;border:1px solid #9aa6aa;border-radius:5px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.4}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #bb5b1d;outline-offset:3px}select{width:100%;padding:9px;border:1px solid #859397;background:white;color:#222b32;border-radius:4px}textarea{width:100%;padding:12px;min-height:100px;border:1px solid #859397;border-radius:4px}label{cursor:pointer}input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}fieldset{min-width:0;border:1px solid #c4cece;margin:0 0 16px;padding:18px}legend{font-weight:700;padding:0 7px}.choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border:1px solid #cbd1d1;background:white;margin-right:8px;margin-bottom:8px;border-radius:4px}.choice:has(input:checked){border-color:var(--accent);background:var(--wash)}.feedback{padding:10px 12px;background:#edf1f3;font-size:14px;margin-top:12px;min-height:44px}.feedback[data-state=correct]{background:#e4f1e9;color:#194c35}.feedback[data-state=incorrect]{background:#fff0e3;color:#79451f}details{border-top:1px solid #cbd1d1;margin-top:14px}summary{padding:10px 0;font-weight:650;cursor:pointer}details>div,details>p{padding-bottom:12px}.list{list-style:none;padding:0;margin:0}.list>li{padding:13px 0;border-bottom:1px solid #d2d9da}.list b{display:block}dl{margin:0}dt{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#53616b;margin-top:14px}dt:first-child{margin-top:0}dd{margin:3px 0 0}table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left;font-weight:700;margin-bottom:10px}th,td{padding:12px 9px;border-bottom:1px solid #cbd1d1;text-align:left;vertical-align:top}th{font-size:12px;color:#52616c;letter-spacing:.04em;background:var(--wash)}td .mobile-label{display:none}.rule{padding:16px 0;border-top:1px solid #cbd1d1;margin-top:24px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #bac7cb;font-size:13px;color:#53616b}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.number{font-variant-numeric:tabular-nums}.empty{color:#754d23;font-weight:650}.row-button{width:100%;border:0;border-bottom:1px solid #cbd1d1;border-radius:0;padding:14px;background:transparent}.row-button[aria-pressed=true]{background:var(--wash);color:var(--accent);border-left:4px solid var(--accent)}.row-button small{display:block;font-size:12px;margin-bottom:4px}.rows{border-top:1px solid #cbd1d1}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:12px 0 12px 18px;border-left:2px solid #b8c5ca;position:relative}.timeline li:before{content:'';position:absolute;width:8px;height:8px;left:-5px;top:23px;background:var(--accent);border-radius:50%}.timeline time{font-size:12px;font-weight:750;color:var(--accent);display:block}main>*{overflow-wrap:break-word}
@media(max-width:760px){main{padding:24px}.split{grid-template-columns:1fr;gap:20px}h1{font-size:31px}}@media(max-width:480px){main{padding:18px 16px}h1{font-size:28px}.panel{padding:16px}header{margin-bottom:18px}table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}table.responsive thead{display:none}table.responsive tr{border-bottom:1px solid #aebec2;padding:10px 0}table.responsive td{border:0;padding:4px 0}td .mobile-label{display:inline;font-weight:650}fieldset{padding:14px}.toolbar button{flex:1 1 auto}}@media print{body{background:white}main{max-width:none;padding:0}button{color:black!important;background:white!important}.panel{break-inside:avoid}footer{margin-top:18px}}
.issue-banner{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:20px 0;border-bottom:1px solid #c1c7cd;margin-bottom:20px}.issue-banner b{font-size:22px;color:#424c68}.newsletter{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr)}@media(max-width:760px){.newsletter{grid-template-columns:1fr}}@media(max-width:480px){.issue-banner{grid-template-columns:1fr;gap:14px}.issue-banner b{font-size:20px}}</style></head><body><main><header><p class="eyebrow">Illustrative issue · Proposed dates in October 2026</p><h1>Make the next handoff ready.</h1><p class="lede">A venue date is still unconfirmed. Trace that missing fact through editing and any proof that includes its story.</p></header>
<div class="issue-banner"><div><p class="eyebrow">Proposed release target</p><b>October 27, 2026</b><p class="small">Target, not completed publication.</p></div><div><p class="eyebrow">Approval</p><b>[NOT YET RECORDED]</b><p class="small">A deadline never counts as approval.</p></div></div><div class="callout warning"><b>S1 · Community event announcement</b><p>Venue date: [UNCONFIRMED]. This blocks S1's edited-content handoff and any proof including it. Other stories are not automatically blocked.</p></div><div class="split newsletter"><section><h2>Chronological handoffs</h2><div class="rows"><button class="row-button" data-handoff="0" aria-pressed="false" aria-controls="handoff-detail"><small>Oct 19 · Contributors</small><b>Draft copy delivered</b></button><button class="row-button" data-handoff="1" aria-pressed="true" aria-controls="handoff-detail"><small>Oct 20 · Editor</small><b>Edited content ready</b></button><button class="row-button" data-handoff="2" aria-pressed="false" aria-controls="handoff-detail"><small>Oct 22 · Designer</small><b>Layout proof delivered</b></button><button class="row-button" data-handoff="3" aria-pressed="false" aria-controls="handoff-detail"><small>Oct 23 · Proofreader / editor</small><b>Corrections returned</b></button><button class="row-button" data-handoff="4" aria-pressed="false" aria-controls="handoff-detail"><small>Oct 26 · Approver</small><b>Final approval requested</b></button><button class="row-button" data-handoff="5" aria-pressed="false" aria-controls="handoff-detail"><small>Oct 27 · Distribution owner</small><b>Target release</b></button></div></section><section><div id="handoff-detail" class="panel" aria-live="polite"></div></section></div><details><summary>Resolve the story without hiding the gap</summary><div><p><b>Option 1:</b> Hold S1 until its venue date is confirmed; record the source.</p><p><b>Option 2:</b> Obtain an editorial decision to omit S1 from this issue; identify the remaining content and its version before layout.</p><p>No decision has been made here. Working copy, factual sources, approvals, and delivery evidence remain in the maintained production tools. If dates change, distinguish original and revised targets and inspect downstream arrangements.</p></div></details><footer>Original illustrative example · Local controls only. Changes are temporary and clear when this page is reloaded. Keep actual records in your approved source tools.</footer></main><script>const $=s=>document.querySelector(s);const $$=s=>Array.from(document.querySelectorAll(s));function pressed(attr,i){$$('[data-'+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset[attr])===i)));}

const handoffs=[["Oct 19","Draft copy delivered","Contributors","Current text and factual sources.","Draft-copy packet · version [TO IDENTIFY]","Draft arrival alone does not resolve S1’s venue date.","Copy delivered is a proposed milestone; receipt evidence [NOT SUPPLIED]."],["Oct 20","Edited content ready","Editor","Confirmed facts and a decision on included items.","Approved-for-layout content · version [TO IDENTIFY]","S1 venue date is [UNCONFIRMED]. Hold S1, or obtain an explicit editorial decision to omit it.","S1 factual check open. No omission decision is recorded."],["Oct 22","Layout proof delivered","Designer","The identified approved-for-layout content version.","Layout proof · version [TO IDENTIFY]","A proof including S1 depends on its factual check. Unrelated confirmed items need an explicit inclusion packet.","Proof and content version evidence [NOT SUPPLIED]."],["Oct 23","Corrections returned","Proofreader / editor","The identified layout proof.","Consolidated correction list linked to that proof.","Returned corrections are requested work, not evidence that changes were applied.","Correction list and proof identifier [NOT SUPPLIED]."],["Oct 26","Final approval requested","Approver","Corrected proof compared with the correction list.","Actual approval decision on an identified version.","A due date does not create approval. Keep the approval field unrecorded until an actual decision exists.","Approval [NOT YET RECORDED]. Corrected proof [NOT SUPPLIED]."],["Oct 27","Target release","Distribution owner","Approved final version and confirmed delivery arrangements.","Distribution evidence in the maintained production record.","Release remains a target. Approval and delivery arrangements must be confirmed.","Release [NOT COMPLETED IN THIS EXAMPLE]. Delivery evidence [NOT SUPPLIED]."]];function handoff(i){pressed('handoff',i);const x=handoffs[i];$('#handoff-detail').innerHTML='<span class="tag">'+x[0]+', 2026 · '+x[2]+'</span><h2 style="margin-top:14px">'+x[1]+'</h2><dl><dt>Required input</dt><dd>'+x[3]+'</dd><dt>Output / version</dt><dd>'+x[4]+'</dd><dt>Current evidence</dt><dd>'+x[6]+'</dd><dt>Next blocking decision</dt><dd>'+x[5]+'</dd></dl>';}$$('[data-handoff]').forEach(b=>b.addEventListener('click',()=>handoff(Number(b.dataset.handoff))));handoff(1);</script></body></html>