Blog Notebook System

The Field Notebook layout for aguidetocloud.com/blog/. Built and rolled out 8 May 2026 in a single afternoon session (~5h, 4 commits). 17 posts converted, 0 regressions.

The notebook gives the blog a personal handwritten-paper feel without disturbing the existing reading-room shell, the practice-exam SLA, or any other site sections. Mermaid diagrams are kept fully untouched (Sush's hard rule). Per-reader chrome (toolbar, focus mode, font size) inherits from the existing zen reading room.

Live source of truth: aguidetocloud.com/blog/* — every post. Layout file: C:\ssClawy\aguidetocloud-revamp\layouts\blog\notebook.html Stylesheet: C:\ssClawy\aguidetocloud-revamp\static\css\zt-notebook.css Shortcodes: layouts\shortcodes\hi.html (highlighter) · layouts\shortcodes\margin.html (margin note)

---

🌱 Founding design principle

"Handwritten over emoji." When a UI signal could be either an emoji/pictograph OR a handwritten/typewriter element — always choose the handwritten one. The notebook's voice IS the pen + the typewriter; emoji is the lazy default.

Replace	With
✅ ✔ (yes/included)	✓ in var(--ink-green) — handwritten check
❌ ✗ (no/excluded)	− (em-dash) in var(--pen) — confident strike
💡 (tip)	future {{< tip >}} shortcode (typewriter "TIP")
⚠️ (warning)	future {{< warn >}} shortcode (red dashed border + "HEADS UP")
🚀 ✨ 🎯 📊 etc.	typically delete — content does the work

Allowed exceptions (DO NOT remove): - 📎 paperclip on <blockquote> — Sush is a Clippy fan, semantic + nostalgic - Mermaid diagrams — fully untouched, never restyled, kept static across themes (this is sacred — Sush explicitly said "we will not change that in any shape or form")

Encouraged glyphs (NOT emoji — they're typeset characters): - Unicode arrows: ↗ ← ↳ → ▸ ↑ ↓ - Typewriter marks: ✓ − + − - Hand-drawn elements via Caveat font

This principle is also baked into ~/.copilot/copilot-instructions.md Zen System section so every future session inherits it.

---

Architecture

File map

aguidetocloud-revamp/
├── layouts/
│   ├── _default/baseof.html       ← head injects fonts + CSS only when layout=notebook
│   ├── blog/notebook.html         ← the notebook layout (3-col reading room shell)
│   └── shortcodes/
│       ├── hi.html                ← {{< hi >}}highlighter{{< /hi >}}
│       └── margin.html            ← {{< margin >}}aside{{< /margin >}}
├── static/css/
│   ├── zt-notebook.css            ← scoped to .zt-reading--notebook (~26 KB)
│   └── zt-reading.css             ← inherited; mobile-tables, font-size, focus, mermaid
└── content/blog/*.md              ← 17 posts, each with layout: "notebook" frontmatter

The 3-column shell (preserved from zen reading room)

┌──────────────┬───────────────────────────────────┬──────────────┐
│   ZEN        │       NOTEBOOK PAGE               │   ZEN        │
│              │ ┌───────────────────────────────┐ │              │
│  TOC         │ │ draft notes Field Journal     │ │  Companion   │
│  sidebar     │ │ ─────────────────────────     │ │  sidebar     │
│              │ │ [stamp]                       │ │              │
│  (zen        │ │                               │ │  (zen        │
│   styled)    │ │ # Caveat H1 ↘                 │ │   styled)    │
│              │ │ ━━━━━━━━━━ red scribble       │ │              │
│              │ │ ↗ for me & for you            │ │  Related     │
│              │ │ typewriter meta · sticker     │ │  articles    │
│              │ │ ─────────                     │ │              │
│              │ │                               │ │  RSS · YT    │
│              │ │ Body in Source Sans 3         │ │              │
│              │ │ {{< hi >}} highlighter        │ │              │
│              │ │ {{< margin >}} red Caveat     │ │              │
│              │ │                               │ │              │
│              │ │ ✎ Founder note (Caveat 24px)  │ │              │
│              │ │   handwritten letter          │ │              │
│              │ │   — Sush                      │ │              │
│              │ └───────────────────────────────┘ │              │
└──────────────┴───────────────────────────────────┴──────────────┘

The sidebars stay zen-themed (dark in dark mode, white in light). Only the article body's .nb-page element gets paper texture. This keeps the navigation chrome consistent with the rest of the site and limits the notebook aesthetic to where it adds value.

CSS scoping

All notebook CSS is scoped to .zt-reading--notebook so it can never leak to other pages:

.zt-reading--notebook { /* tokens + chrome */ }
.zt-reading--notebook .nb-body p { /* body styling */ }
.zt-reading--notebook .nb-body .nb-mark--yes { /* tick green */ }

zt-notebook.css is loaded via baseof conditional:

{{ if eq .Params.layout "notebook" }}
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Special+Elite&display=swap">
<link href="...same Google Fonts URL..." rel="stylesheet">
<link rel="stylesheet" href="/css/zt-notebook.css?v={{ site.Params.cache_version }}">
{{ end }}

So pages without layout: "notebook" never download the fonts or CSS — zero perf cost on non-notebook pages.

---

Design tokens

Light mode (cream paper)

.zt-reading--notebook {
  --paper:        #F4EFE3;   /* page background */
  --paper-deep:   #ECE4D2;   /* blockquotes, callouts, founder note */
  --grid-line:    rgba(184, 174, 146, 0.22);  /* faint graph paper */
  --ink:          #1B2A4A;   /* deep navy primary text */
  --ink-soft:     #3A4762;   /* body copy */
  --ink-faint:    #6E7892;   /* meta, captions */
  --pen:          #B83230;   /* red ink — H2 underline, margin notes, scribbles */
  --pen-soft:     #D4574F;   /* link underline */
  --ink-green:    #2D7A4F;   /* tick mark for nb-mark--yes */
  --hi:           #F3D88A;   /* yellow highlighter */
  --rule:         #B8AE92;   /* dashed border colour */
  --sticker-yel:  #FBE89F;   /* sticker tag bg */
}

Dark mode (midnight notebook)

[data-theme="dark"] .zt-reading--notebook {
  --paper:        #14182A;
  --paper-deep:   #0F1320;
  --grid-line:    rgba(110, 120, 146, 0.14);
  --ink:          #E8E2D2;
  --ink-soft:     #C4BFB0;
  --ink-faint:    #8E8678;
  --pen:          #FF7B6E;
  --pen-soft:     #FF9A90;
  --ink-green:    #6BCC8E;
  --hi:           rgba(243, 216, 138, 0.32);
  --rule:         #2A3148;
}

The dark mode is "midnight notebook" — same graph grid, dark navy paper, warm coral pen.

---

Per-post frontmatter

Every notebook post has these fields beyond the standard Hugo title/date/etc.:

layout: "notebook"                   # Triggers notebook.html layout
stamp: "draft · v1"                  # Typewriter rotated tag (or "monthly recap", "guide", "decision guide", etc.)
intro_note: "↗ for me & for you — figured this out for our org first"
                                     # The red Caveat pen-note under H1
founder_note: |                      # Multi-line YAML block — handwritten closing letter
  This is the version I wish I had when I started.

  If you remember nothing else, the X section is the part that matters.

Conventions for intro_note

The pen-note answers "why does this post exist?" in 1 line. Author chooses the arrow (↗ exploring forward, ← back-reference).

Examples shipped: - "↗ for me & for you — figured this out for our org first, then wrote it down" (E7) - "← for the customer who asked me this for the third time in one week" (Agent Builder) - "← what changed this month, in plain English" (monthly recaps — series identifier) - "↗ wrote this after the third 'we just turned it on and panicked' phone call" (Deployment best practices) - "↗ for every CISO who's asked 'where does my data go?'" (Layer-by-layer) - "↗ for the IT team that just realised three departments built agents without telling them" (Agent 365 security)

Rule of thumb: use Sush's actual lead paragraph as the source. Don't invent a backstory — pull the real origin from the article's opening.

Conventions for founder_note

The founder_note is a 1–2 paragraph handwritten closing letter at the bottom of the article. Should reference the actual article content. Closes with — Sush (auto-rendered by the layout).

Examples shipped: - "E7 caught me off guard when it dropped. Took me a weekend of reading licensing PDFs and a few coffees with the EA team... This page is the version I wish I'd had before that weekend started." (E7) - "A customer built a procurement agent in 20 minutes. It happily tried to email supplier bank details outside the org. That's the moment everyone understood why Agent 365 exists." (Agent 365)

Conventions for stamp

Typewriter rotated tag in the top-left, looks hand-stamped on paper. Patterns shipped: - draft · v1 (E7 — initial post) - decision guide (Agent Builder) - guide (long-form references) - train-the-trainer (T3 docs) - monthly recap (Jan/Feb/Mar/Apr 2026 updates) - heads up (timely change posts) - checklist (deployment best practices) - explainer (architecture deep dives) - post-GA (tied to GA dates) - listicle (numbered features)

If stamp: frontmatter is omitted, the layout auto-falls-back to: - updated · {date} if lastmod ≠ date - fresh · v1 if post is < 14 days old - nothing otherwise

---

Content shortcodes

{{< hi >}} — yellow highlighter

The risk isn't Copilot — it's {{< hi >}}overshared SharePoint permissions{{< /hi >}}.

Renders as a yellow-marker span (background: var(--hi); padding: 0 4px;) behind the wrapped text. Use sparingly — at most 1 per H2 section. Pick the line that's the post's "if you remember nothing else, remember this" sentence.

{{< margin >}} — red Caveat margin note

Microsoft just announced its biggest licensing shakeup in years.

{{< margin >}}I sat with the EA team for an hour to confirm this. The bundle math actually checks out.{{< /margin >}}

Here's the honest version...

Renders inline as a red Caveat aside with a dashed pen border. Always inline — earlier abs-positioning attempt (right margin) caused overlap with companion sidebar at viewport widths < 1500px and was removed.

Use as a personal aside — the margin note is Sush in the margin of his own article. Pattern works best when: - Annotating a key paragraph with first-person context - Pointing the reader to the most important section ("← if you only read one section, make it this one") - Adding a "← saw this happen live in a customer demo" personal note

Limit: 1–2 per post for narrative articles, 0–1 for listicles.

---

The quiet marks system (✓ / −)

Sush's existing markdown widely uses ✅ / ❌ for yes/no in lists and tables. These are loud green/red emojis. The notebook replaces them client-side with handwritten ✓ (green) and − (red) marks via a runtime DOM walker.

How it works

The walker runs once on page load, after the DOM is parsed:

var hasYesNo = /[\u2705\u2714\u274C\u2717\u2718]/;
var YES_G = /[\u2705\u2714]/g;        // ✅ ✔
var NO_G  = /[\u274C\u2717\u2718]/g;  // ❌ ✗ ✘

var walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
  acceptNode: function(n){
    if (!n.nodeValue || !hasYesNo.test(n.nodeValue)) return REJECT;
    var p = n.parentNode;
    while (p && p !== body) {
      // Skip Mermaid SVG, code blocks, existing nb-mark spans
      if (p.classList && (p.classList.contains('mermaid') || p.classList.contains('nb-mark'))) return REJECT;
      var tag = p.nodeName;
      if (tag === 'CODE' || tag === 'PRE' || tag === 'SCRIPT' || tag === 'STYLE' || tag === 'svg' || tag === 'SVG') return REJECT;
      p = p.parentNode;
    }
    return ACCEPT;
  }
});

Every accepted text node gets emoji replaced with <span class="nb-mark nb-mark--yes" aria-label="yes">✓</span> etc.

What's intentionally skipped

• Mermaid SVG content — <svg> and <foreignObject> ancestors are skipped. Mermaid markdown like B --> C{"✅ Identity OK?"} keeps its ✅ inside the diagram. Sush's "Mermaid is sacred" rule.
• <code> and <pre> — code samples keep emojis literal
• Existing .nb-mark spans — prevents double-processing on hot reload

Original markdown stays untouched

Authors keep using ✅/❌ if they want — the swap happens client-side at render. To revert the swap, delete the JS block in notebook.html. To extend it (add more emoji replacements), edit the regex sets in the same JS block.

Accessibility

Each replaced mark gets aria-label="yes" / aria-label="no" so screen readers still announce the meaning, not the literal ✓ character.

---

Inherited features (from zt-reading.css / zt-reading-enhance.js)

The notebook layout uses the same .zt-reading grid shell as the classic blog reading room, so these features work for free:

Feature	Source	Status on notebook
Z21 — Mobile table → cards (640px breakpoint)	zt-reading-enhance.js wraps <table> in .zt-table-wrap; rows become stacked cards	✅ + paper-themed colour overrides in zt-notebook.css
Z22 — Font A−/A/A+ size persistence	zt-reading-enhance.js + localStorage	✅ works as-is
Z23 — Kindle warm tint	zt-reading--warm modifier	⚠️ button removed from notebook toolbar (notebook IS already warm)
Z24 — Focus mode (hide sidebars)	zt-reading--focused	✅ works as-is
Heading anchor #	added by inline JS, red Caveat-coloured	✅
Code copy buttons	added by inline JS, paper-themed	✅ skips <pre class="mermaid">
TOC active highlight on scroll	inline JS	✅
Reading progress bar	.zt-reading-progress div, fixed top, 3px	✅ overridden to pen-red
Pagefind search	global, no notebook-specific code	✅ posts indexed normally
BlogPosting + FAQPage + BreadcrumbList JSON-LD	partials/seo-jsonld.html	✅ FIXED 8 May 2026 — see Known Issues #1
OG image, Twitter card, canonical URL	baseof.html	✅

Polish-layer overrides (zt-notebook.css)

These zen-reading CSS rules clashed with paper aesthetics in light mode and were overridden:

1. Mobile table cards — paper-deep bg + dashed border + red typewriter labels (instead of dark indigo)
2. .prompt-cards (used in some posts) — yellow "PROMPT" sticker + paper-deep bg
3. .cowork-scenario blockquote — dashed paper override
4. Reading progress bar — pen red, 3px (instead of indigo, 2px)
5. <figure> images — Polaroid frame + Caveat caption + slight rotate
6. <details> / <summary> (FAQ accordions) — paper-deep + red ▸ arrow

Hard-stop cascade for Mermaid

The notebook would otherwise leak its --ink-soft colour into Mermaid SVG <text> elements via currentColor, making text dark-on-dark in light mode. Fixed by:

.zt-reading--notebook .nb-body .mermaid,
.zt-reading--notebook .nb-body .mermaid * {
  color: #E2E8F0;  /* matches Mermaid's intended textColor */
}

This is the only notebook rule that touches .mermaid. All other Mermaid styling (dark canvas, dot grid, fullscreen button) inherits from zt-reading.css. Sush's rule: don't change Mermaid in any way.

---

Performance + accessibility

Concern	Implementation
Font loading	Caveat (700KB) + Special Elite (50KB) loaded only on /blog/* via baseof.html conditional. font-display: swap set by Google Fonts URL. <link rel="preload"> in head for early discovery.
FOUC prevention	Fonts are in <head> (not body), so first paint already has Caveat available
CLS guard	.nb-h1 { min-height: 1.05em; font-size-adjust: 0.5; } reserves H1 space before Caveat finishes loading. No title-jump.
Reduced motion	@media (prefers-reduced-motion: reduce) kills all rotations on stamps, scribbles, founder note, etc.
Hyphens / overflow-wrap	hyphens: auto; overflow-wrap: anywhere; on body <p> and <li> for long product names on narrow viewports
Focus visible	outline: 2px dashed var(--pen); outline-offset: 3px; on tab navigation
Skip link	preserved from baseof
ARIA labels	nb-mark spans get aria-label="yes" / "no"
Theme toggle	works as-is (notebook listens to [data-theme] selector cascade)

---

QA approach (use this for any future blog work)

Built and used during the rollout:

1. Static HTML deep scan (PowerShell + regex)

Fetch each live URL, regex-check for: notebook chrome elements, schema preservation, broken anchors, Hugo template leakage, ZgotmplZ, font load, alt text, etc.

2. Visual programmatic audit (Playwright headless Chromium)

Script: ~/.copilot/session-state/<id>/files/qa-visual.js

For each post × viewport ({1440x900, 375x812}) × theme ({dark, light}): - Take a screenshot to disk - Capture console errors + network failures - Detect horizontal overflow + offending elements - Verify chrome element visibility + computed colors - Verify Mermaid SVG render - Verify nb-mark swap effectiveness - Verify theme application

Output: 68 screenshots + findings.json. ~7 min total.

3. Ecosystem safety pass

Verify these pages are NOT affected by notebook changes: - /blog/ listing - / homepage - /guided/explore/ (practice exam page — SLA-protected) - /guided/data/questions/az-900.json (practice data — SLA-protected) - /free-tools/, /mind-maps/, /licensing-docs/, /about/

---

Deployment history (8 May 2026)

Commit	What
8849b7be	Phase A — rolled notebook chrome to all 17 posts (frontmatter only, no body changes). cache_version 2026050801. Live in 61s.
912adf4c	Phase B — voice tweaks (5 intro_notes + 3 founder_notes refined) + content polish (13 highlighters + 18 margin notes). cache_version 2026050802. Live in 122s.
2834e065	Anchor fix — repaired 5 pre-existing broken in-page anchors caught by SME audit. cache_version 2026050803. Live in 41s.

Total: 3 deploy commits to aguidetocloud-revamp + 1 commit to copilot-instructions.md (principle).

---

Known issues — flagged for future sessions

1. ✅ JSON-LD nested-quote bug (FIXED 8 May 2026, commit 779b7ba6)

Was: every page's BlogPosting / FAQPage / BreadcrumbList / Article / Organization / WebSite / VideoObject / SoftwareApplication / Person schema had nested escaped quotes around string values:

{
  "headline": "\"22 M365 Copilot Features...\"",   ← was BUG
  "item": "\"https://www.aguidetocloud.com/\""    ← was BUG
}

Now renders cleanly:

{
  "headline": "22 M365 Copilot Features...",
  "item": "https://www.aguidetocloud.com/"
}

Root cause: Go's html/template package applies context-aware JS-string escaping inside <script> tags. {{ X | jsonify }} produces a JSON-quoted string ("My Title"), but Hugo then JS-escapes it again for safety ("\"My Title\""). This affects every <script type="application/ld+json"> block — JSON output formats (.json) are unaffected because they don't get JS-context escaping.

Fix: append | safeJS to every | jsonify call inside <script> tags. safeJS tells html/template the value is already safe for JS context, so it skips re-escaping.

- "name": {{ .Site.Title | jsonify }},
+ "name": {{ .Site.Title | jsonify | safeJS }},

Scope of the 8 May fix (commit 779b7ba6, 71 files, 219+/219−): - layouts/partials/seo-jsonld.html (40 calls — site-wide partial) - layouts/partials/video-single-content.html (2) - 68 per-tool layouts/{tool}/list.html and single.html files (154 calls — FAQPage on tool pages, BlogPosting on cert-tracker, etc.)

Verified clean on live site for: home (WebSite + Organization + ItemList), about (Person + BreadcrumbList), notebook blog post (BlogPosting + FAQPage + BreadcrumbList), tool page (FAQPage), AI Hub video page (VideoObject + BreadcrumbList).

Untouched (by design): layouts/_default/index.json still uses bare | jsonify (17 calls) — JSON output format doesn't go through JS escaping, so safeJS would be a no-op or wrong. Verified clean on live /index.json.

Hugo gotcha — when to use | jsonify vs | jsonify | safeJS: - <script type="application/ld+json">{{ X | jsonify | safeJS }}</script> ← always pair them inside <script> - <script>var data = {{ X | jsonify | safeJS }};</script> ← same - output.json / output.xml / output.txt files: bare | jsonify (no safeJS needed) - HTML attributes: don't use either, use | safeHTMLAttr or escape manually

1.5. ⚠️ Hugo incremental build can leave stale public/ files

When testing template-only changes (e.g., the | safeJS rollout above), Hugo's incremental build may not regenerate every page that depends on a changed partial. After the first hugo --quiet run, 9/3441 schema blocks still showed the old buggy output on 3 mind-map pages. The fix:

Remove-Item -Recurse -Force public, resources\_gen
pwsh scripts\hugo-safe.ps1 --cleanDestinationDir --quiet

Always do a clean rebuild before doing site-wide grep verification.

2. 🟡 SEO content lengths (16 of 17 posts)

Title length — 16 posts have titles >75 chars. Google SERPs truncate at ~60 char. Worst offenders: - January 2026 updates: 106 chars - April 2026 updates: 104 chars - Cowork: 100+ chars

Meta description length — 10 posts have descriptions >175 chars. Google truncates at ~155–160 chars. Worst: - Licensed T3: 323 chars - Cowork: 267 chars - Brand Kit: 269 chars

Why not fixed: content-side editorial decisions, not technical bugs. Sush should review and tighten when re-reading posts.

3. 🟡 Microsoft Clarity tracking blocked by CSP (pre-existing, all posts)

Console shows: "Connecting to 'https://y.clarity.ms/collect' violates CSP directive"

This is intentional security — CSP connect-src doesn't allow Clarity. Two options: - Accept: drop Clarity, use only Cloudflare Insights (already loaded and working) - Or fix: add https://*.clarity.ms to CSP connect-src in _headers if Clarity is wanted

4. 🟢 Mermaid emojis preserved (NOT a bug)

11 ✅ emojis remain inside Mermaid SVG diagrams across 2 posts (how-microsoft-365-copilot-works-layer-by-layer + agent-365-security-governance-complete-guide). They're inside Mermaid markdown source like B --> C{"✅ Identity OK?"}. The JS walker correctly skips Mermaid SVG content. Sush's rule: Mermaid is sacred, never restyled or modified.

---

How to add a new blog post (going forward)

1. Create the markdown file in content/blog/<slug>.md
2. Add the standard Hugo frontmatter (title, description, date, lastmod, card_tag, tag_class, faq, images, tags)
3. Add notebook frontmatter:

   layout: "notebook"
   stamp: "guide"                               # or appropriate type
   intro_note: "↗ for X who Y"                  # 1-line origin pen-note
   founder_note: |                              # 1–2 paragraph closing letter
     Wrote this because [authentic origin]. The X section is where most of the value is.
   

4. (Optional) Sprinkle 0–2 {{< hi >}} highlighters and 0–2 {{< margin >}} margin notes in the body where they add value. Don't force them.
5. Build locally with pwsh scripts\hugo-safe.ps1 server --port 1314 and verify
6. Bump cache_version in hugo.toml if any CSS/JS changed
7. Commit + push

---

How to extend the notebook system

Adding more replaceable emojis

Edit notebook.html JS — extend the YES_G and NO_G regex character classes:

var hasYesNo = /[\u2705\u2714\u274C\u2717\u2718]/;
var YES_G = /[\u2705\u2714]/g;
var NO_G  = /[\u274C\u2717\u2718]/g;

For tip/warn emoji replacement, add new regex + class pairs and corresponding CSS in zt-notebook.css.

New shortcodes to consider

• {{< tip >}} — typewriter "TIP" sticker on paper-deep bg, replaces 💡 callouts
• {{< warn >}} — red dashed border + "HEADS UP" sticker, replaces ⚠️ callouts
• {{< pull >}} — large Caveat pull-quote across full content width, breaks up long sections
• {{< sketch >}} — Polaroid-framed image with Caveat caption (for images that should feel hand-glued)
• {{< kbd >}} — typewriter keyboard key wrapper (already styled via <kbd> in CSS)

Any new shortcode should follow the handwritten-over-emoji principle — prefer typewriter/Caveat treatments over icon emoji.

Applying notebook to other layouts

The CSS is scoped to .zt-reading--notebook so it could be applied to: - About page (single <article>) - Cosmos atlas hub - Plain AI museum essays

For each: add a frontmatter layout: "notebook" and create a corresponding layouts/<section>/notebook.html (mostly copy of layouts/blog/notebook.html) or alias.

Don't apply to: - Listing pages (/blog/ index, /free-tools/, etc.) — would feel gimmicky at volume - Tools — they're zen by design - Practice exam pages — SLA-protected, never touch

---

What stays untouched (DO NOT change)

These are firewalls. Future sessions should not modify:

1. Mermaid diagrams — never restyled, kept static across themes. Don't add notebook-specific Mermaid CSS. Don't touch partials/...mermaid script init in baseof.html.
2. Practice exam system — PracticeQuiz.tsx, practice.astro, data/questions/*.json, build-question-data.mjs. SLA-protected, paid product.
3. Other site sections — homepage, free-tools, mind-maps, licensing, etc. Notebook is blog-only.
4. Zen guardrails — single accent (indigo), 8px grid, no backdrop-filter, no decorative chrome. Notebook adds the --pen (red) and --ink-green tokens as scoped exceptions within .zt-reading--notebook only — they don't break the global guardrail.
5. One Body, Two Organs (Hugo+Astro parity) — notebook is Hugo-only. If Astro ever needs to render a blog-style page, this playbook is the spec to follow.

---

References

• Source files: C:\ssClawy\aguidetocloud-revamp\layouts\blog\notebook.html · C:\ssClawy\aguidetocloud-revamp\static\css\zt-notebook.css
• Live URL: aguidetocloud.com/blog/
• Origin mockup: ~/.copilot/session-state/<8-may-cosmos-session-id>/files/cosmos-mockups/03-notebook.html (the Field Notebook variant of the Cosmos atlas mockup)
• Cross-reference: Zen System Quickref · Voice & Tone · Deployment Playbook