# Margin

An original editorial journal template by MRHTML. A warm paper palette, expressive system serif typography, custom geometric cover art, and three complete sample essays make a calm starting point for a personal publication or independent magazine.

## Open it

Unzip the entire folder and open `index.html` in a modern browser. Keep `styles.css`, `script.js`, and `assets/` beside it. There are no packages, build commands, API keys, hosted fonts, or CDN dependencies. All content and artwork are local.

The three essays use native HTML `details` and `summary`. Click their titles, or focus a title and press Enter or Space. JavaScript only opens an essay when following a direct article link. The articles remain readable without JavaScript. Navigation and article anchors work when the page is opened directly from disk.

## Make it yours

1. Edit the journal name, navigation, issue date, essays, about section, and footer in `index.html`. The publication and sample essays are fictional original MRHTML writing. Replace them with your own real content before launch.
2. Set your title and description in the HTML head. The demo includes `<meta name="robots" content="noindex,follow">`. Remove that demo directive when publishing a real site that you want indexed. Add a canonical URL only after choosing your actual public URL. Do not copy a preview URL into your site metadata.
3. Change the color variables at the top of `styles.css`: `--paper`, `--ink`, `--rust`, and `--olive`. The type uses Georgia and Arial with local fallbacks, so the exact letter shapes can vary by platform.
4. Replace `assets/paper-study.svg` or adjust its original geometric shapes. Update its meaningful `alt` text if the art changes. The three small article illustrations are CSS shapes in `.story-art` rules.
5. To add an essay, duplicate an `article.story`. Give its `details` element a unique ID and update the number, category, date, title, excerpt, and article body. A reading link can target that ID and use a matching `data-read` value.
6. Keep the first heading an `h1`, section headings `h2`, and headings inside essays `h3`. Keep visible focus styles, sufficient color contrast, descriptive links, and the reduced-motion CSS rules when restyling.

## Publishing and forms

Upload the folder contents to any static web host and keep the relative paths intact. HTTPS and caching depend on the host you choose. No deployment service or account is included.

There is no newsletter signup, contact submission, analytics, database, or consent storage. The editor's letter explains this openly. To add subscriptions, connect a real endpoint or provider, provide an appropriate privacy notice, and implement true success and error states before collecting information. Never replace the note with an unconnected form that claims delivery.

## Files and license

- `index.html`: page, navigation, and full sample essays.
- `styles.css`: layout, typography, native article controls, and responsive/reduced-motion rules.
- `script.js`: optional direct-link enhancement, with no network calls or storage.
- `assets/paper-study.svg`: original MRHTML geometric art.
- `ASSETS.md`: complete asset provenance.
- `LICENSE`: MIT license for the original code, writing, and illustration.

The footer includes a visible `Designed by MRHTML` credit linking to `https://mrhtml.com/` with `rel="nofollow"`. This is a creator credit, not an SEO promise or an additional license restriction. The MIT license does not require a followed backlink.