/* ========================================================================== STYLES.CSS — the one stylesheet for the whole site. Modeled closely on michelleblakewriter.com: a Caslon serif for everything, dark slate text on a pale ice-blue page, the author's name large and centered at the top, an uppercase letter-spaced serif menu, centered section headings, thin white divider rules, and lots of quiet space. ========================================================================== HOW THIS FILE IS ORGANIZED (search for the number to jump there): 1. Design tokens (colors, fonts — change the look here) 2. Base / reset 3. Placeholders (the amber "[...]" style for text still to be written) 4. Header: the name + navigation (desktop + mobile) 5. Page layout (the centered reading column) 6. Home page pieces (banner photo, name, links) + Books page 7. Work entries (Features / TV Scripts listings) 8. Recommendations 9. Contact form 10. Script page component (screenplay formatting for samples) 11. Prose sample component 12. Footer 13. Small-screen adjustments (phones) ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Colors — matched to the reference site */ --page: #e8fafd; /* pale ice-blue page background */ --ink: #263333; /* dark slate-green text */ --ink-soft: #415353; /* the big name at the top */ --muted: rgba(38, 51, 51, 0.6); /* dates, years, metadata */ --nav: rgba(38, 51, 51, 0.72); /* menu links (darken on hover) */ --rule: #ffffff; /* thin white divider lines */ /* Placeholder colors — amber, so unwritten text is unmistakable against the blue page. Real content never looks like this. */ --ph-text: #7a5c00; --ph-bg: #fdf3d1; --ph-border: #d9a800; /* Fonts (loaded from Google Fonts in each page's ). Libre Caslon Text is the closest free match to the reference site's Adobe Caslon — and it is used for nearly EVERYTHING, body included. */ --serif: "Libre Caslon Text", "Palatino Linotype", Georgia, serif; --sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif; /* small metadata only */ --courier: "Courier Prime", "Courier New", Courier, monospace; /* script samples */ /* Layout width — one centered reading column, like the reference */ --measure: 700px; } /* -------------------------------------------------------------------------- 2. BASE / RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--serif); /* serif body text, exactly like the reference */ font-size: 1rem; /* 16px */ line-height: 1.6; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; /* the reference never uses bold headings */ line-height: 1.25; color: var(--ink); margin: 0 0 0.6em; } /* Section headings are centered with a whisper of letter-spacing, like "Writing" / "Upcoming Events" on the reference site */ h2 { font-size: 1.8rem; text-align: center; letter-spacing: 1px; margin: 0 0 1em; } h3 { font-size: 1.25rem; } p { margin: 0 0 1.2em; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink-soft); text-decoration-thickness: 2px; } a:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; } /* Thin WHITE rule between sections — the reference site's divider */ hr { border: none; height: 2px; background: var(--rule); margin: 3rem auto; } /* -------------------------------------------------------------------------- 3. PLACEHOLDERS Anything wrapped in class="ph" is waiting for real words. Amber text on a pale-amber tint with a dashed underline — impossible to mistake for finished content on the blue page. When you paste real text in, ALSO REMOVE the wrapper (keep the outer tag). -------------------------------------------------------------------------- */ .ph { color: var(--ph-text); background: var(--ph-bg); border-bottom: 2px dashed var(--ph-border); padding: 0 0.25em; font-style: italic; } /* Photo placeholder blocks. Replace the whole
with a real — a commented-out example sits next to each one in the HTML. */ .img-ph { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--ph-bg); border: 2px dashed var(--ph-border); color: var(--ph-text); font-family: var(--sans); font-size: 0.9rem; font-style: italic; padding: 1.5rem; width: 100%; } .img-ph--portrait { aspect-ratio: 4 / 5; } .img-ph--landscape { aspect-ratio: 3 / 2; } /* -------------------------------------------------------------------------- 4. HEADER: THE NAME + NAVIGATION Like the reference: the author's name very large, serif, centered, in a slightly lifted slate tone; below it the menu in small uppercase serif with wide letter-spacing, at ~70% strength until hovered. -------------------------------------------------------------------------- */ .site-header { text-align: center; padding: 3rem 1.25rem 0; } .wordmark { font-family: var(--serif); font-size: 2.9rem; /* ~47px, the reference's exact scale */ font-weight: 400; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 1.75rem; } .wordmark:hover { color: var(--ink); text-decoration: none; } .site-nav { max-width: 900px; margin: 0 auto; } /* Hamburger button — hidden on desktop, shown on phones (see section 13) */ .nav-toggle { display: none; font-family: var(--serif); font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; background: none; border: 1px solid var(--ink); padding: 0.4rem 1.2rem; margin-bottom: 1rem; cursor: pointer; color: var(--ink); } .menu { list-style: none; margin: 0; padding: 0 0 1.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem; } .menu a { display: inline-block; font-family: var(--serif); /* serif menu, like the reference */ font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--nav); padding: 0.4rem 0; } .menu a:hover { color: var(--ink); } /* The page you're currently on shows at full strength */ .menu a[aria-current="page"] { color: var(--ink); } /* The menu is flat — every item is its own page, no dropdowns. */ /* -------------------------------------------------------------------------- 5. PAGE LAYOUT — one centered reading column -------------------------------------------------------------------------- */ main { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } /* Page titles match the centered section-heading style */ .page-title { font-size: 1.8rem; text-align: center; letter-spacing: 1px; margin-bottom: 0.5rem; } /* Modifier for a page title that IS the title of a specific work (used on script sample pages) — titles are set in italics per Justin */ .page-title.title-work { font-style: italic; } /* Small centered metadata line under a page title (e.g. "Updated March 2026"). Small sans type — the reference uses its sans only for metadata like this. */ .page-meta { font-family: var(--sans); text-align: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; } /* -------------------------------------------------------------------------- 6. HOME PAGE PIECES Per Justin's directions: the menu sits at the top of the page, same as every other page, with his name and "writer" above it; the portrait photo of his books/scripts comes after, below the header. -------------------------------------------------------------------------- */ /* The portrait photo below the header on the home page */ .home-photo { max-width: 460px; margin: 2.5rem auto 0; padding: 0 1.25rem; } .home-photo img { width: 100%; box-shadow: 0 2px 14px rgba(38, 51, 51, 0.12); } /* On the home page the name is bigger than the standard header wordmark */ .home-name { display: block; font-size: 3.4rem; margin-bottom: 0.25rem; } /* "writer" — smaller type, underneath the name */ .home-writer { text-align: center; font-size: 1.1rem; letter-spacing: 4px; text-transform: lowercase; color: var(--muted); margin: 0 0 1.5rem; } /* -------------------------------------------------------------------------- 6b. BOOKS PAGE — covers with Amazon links underneath Each book is one
: cover image, then the title as a link. Copy a whole block to add a book. -------------------------------------------------------------------------- */ .book { text-align: center; padding: 2.5rem 0; } .book + .book { border-top: 2px solid var(--rule); } .book-cover { margin: 0 auto 1.25rem; max-width: 260px; } .book-cover img { box-shadow: 0 3px 12px rgba(38, 51, 51, 0.18); } .book h2 { font-size: 1.35rem; margin-bottom: 0.2rem; } /* small "written as Reeve Armstrong"-type note under a book title */ .book-note { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); letter-spacing: 0.5px; margin: 0; } /* The centered list of outside links (Goodreads, Amazon, blog) */ .links-list { list-style: none; margin: 0; padding: 0; text-align: center; } .links-list li { margin: 0.6rem 0; } /* Full-width photo on an inner page (e.g. the Books page) */ .page-photo { margin: 2rem 0; } .page-photo img { width: 100%; box-shadow: 0 2px 12px rgba(38, 51, 51, 0.12); } /* The About page photo is a tall portrait crop — shown smaller and centered instead of stretched across the full column width */ .page-photo.about-photo { max-width: 320px; margin: 2.5rem auto; } /* -------------------------------------------------------------------------- 7. WORK ENTRIES — the repeating blocks on Fiction / TV / Features pages Each entry is an
. Copy-paste one to add another. -------------------------------------------------------------------------- */ .work { padding: 2rem 0; } .work + .work { border-top: 2px solid var(--rule); } /* white rule between entries */ .work-title { font-size: 1.25rem; font-style: italic; /* titles are set in italics, per Justin */ margin-bottom: 0.2rem; } .work-year { font-family: var(--sans); /* small sans metadata, like the reference */ color: var(--muted); font-size: 0.85rem; letter-spacing: 0.5px; margin-bottom: 0.8rem; } /* "Read Sample →" — a plain serif link, like their "Read more →" */ .read-sample { white-space: nowrap; } /* -------------------------------------------------------------------------- 8. RECOMMENDATIONS Each recommendation is one small
block — copy-paste a whole block to add one, delete a whole block to remove one. -------------------------------------------------------------------------- */ .rec-section { margin-bottom: 3.5rem; } .rec { margin-bottom: 1.75rem; } .rec h3 { margin-bottom: 0.2rem; } /* the "by ..." part next to a recommendation title */ .rec-by { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); font-style: normal; letter-spacing: 0.5px; } .rec p { margin-bottom: 0; } /* -------------------------------------------------------------------------- 9. CONTACT FORM White fields on the blue page; a solid square dark button, like the reference site's button style. -------------------------------------------------------------------------- */ .contact-form { margin-top: 2.5rem; } /* Labels in italics, per Justin's direction */ .contact-form label { display: block; font-style: italic; font-size: 1rem; margin-bottom: 0.4rem; } .contact-form input, .contact-form textarea { display: block; width: 100%; font-family: var(--serif); font-size: 1rem; color: var(--ink); padding: 0.65rem 0.75rem; border: 1px solid rgba(38, 51, 51, 0.3); background: #fff; margin-bottom: 1.5rem; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--ink-soft); outline-offset: 1px; } .contact-form button { font-family: var(--serif); font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--ink); border: none; padding: 0.85rem 2.2rem; cursor: pointer; } .contact-form button:hover { background: var(--ink-soft); } .contact-form button:disabled { opacity: 0.6; cursor: default; } /* Message shown under the button after sending (success or a problem) */ .form-status { margin: 1.25rem 0 0; min-height: 1.6em; } .form-status.is-error { font-style: italic; } /* Spam-trap box: pushed off-screen so people never see it */ .hp { position: absolute; left: -9999px; } /* -------------------------------------------------------------------------- 10. SCRIPT PAGE COMPONENT — screenplay formatting Wrap a sample in
and use these classes:

scene heading, e.g. INT. KITCHEN - NIGHT

action / description lines (full width)

character name above their dialogue

(parenthetical) under a character name

the spoken line(s)

CUT TO: etc., right-aligned Rendered in Courier on a white "page" — it reads like a script page sitting on the blue site background. It is plain HTML text: viewable and copyable, never downloadable; there are no PDFs on this site. -------------------------------------------------------------------------- */ .script-page { font-family: var(--courier); font-size: 0.95rem; line-height: 1.5; color: #1a1a1a; background: #fff; border: 1px solid rgba(38, 51, 51, 0.15); box-shadow: 0 2px 10px rgba(38, 51, 51, 0.06); padding: 3rem 2.5rem; margin: 2.5rem 0; } .script-page p { margin: 0; } /* Title block at the top of a script sample (optional) */ .script-page .script-title { text-align: center; text-transform: uppercase; text-decoration: underline; margin-bottom: 0.25rem; } .script-page .script-byline { text-align: center; margin-bottom: 2.5rem; } .script-page .slug { text-transform: uppercase; font-weight: 700; margin: 1.6em 0 1em; } .script-page .slug:first-of-type { margin-top: 0; } .script-page .action { margin-bottom: 1em; } .script-page .character { text-transform: uppercase; margin-left: 38%; /* standard screenplay character position */ margin-top: 1em; } .script-page .paren { margin-left: 30%; margin-right: 28%; } .script-page .dialogue { margin-left: 17%; margin-right: 17%; margin-bottom: 1em; } .script-page .transition { text-align: right; text-transform: uppercase; margin: 1em 0; } /* Centered lines inside a script (SUPER cards, END OF TEASER, etc.) */ .script-page .center { text-align: center; margin: 1em 0; } /* -------------------------------------------------------------------------- 11. PROSE SAMPLE COMPONENT — for fiction excerpts Wrap prose in

. Book-like paragraphs with first-line indents and no gap between them, like a printed page. -------------------------------------------------------------------------- */ .prose-sample { font-size: 1.05rem; line-height: 1.85; margin: 2.5rem 0; } .prose-sample p { margin: 0; text-indent: 2em; } .prose-sample p:first-of-type { text-indent: 0; } /* Back-link at the bottom of sample pages */ .sample-back { display: inline-block; margin-top: 2rem; } /* -------------------------------------------------------------------------- 12. FOOTER — bare, like the reference: ©Name Year -------------------------------------------------------------------------- */ .site-footer { text-align: center; padding: 2.5rem 1.25rem 2rem; font-size: 0.9rem; color: var(--muted); } .site-footer p { margin: 0; } /* -------------------------------------------------------------------------- 13. SMALL-SCREEN ADJUSTMENTS (phones + narrow tablets) -------------------------------------------------------------------------- */ @media (max-width: 760px) { .wordmark { font-size: 2.1rem; } h2, .page-title { font-size: 1.5rem; } /* --- Mobile menu: hamburger button + stacked links ------------------- */ .nav-toggle { display: inline-block; } .menu { display: none; /* hidden until the Menu button is tapped */ flex-direction: column; gap: 0; border-top: 2px solid var(--rule); padding-bottom: 1rem; } /* nav.js adds class="open" to the
    when the Menu button is tapped */ .menu.open { display: flex; } .menu a { padding: 0.8rem 0; } /* --- Layout ----------------------------------------------------------- */ .home-name { font-size: 2.3rem; } .home-photo { max-width: 320px; } .book-cover { max-width: 210px; } /* Script pages: keep the Courier feel but ease the deep indents so dialogue doesn't become a one-word-per-line column on small phones */ .script-page { padding: 1.75rem 1.1rem; font-size: 0.88rem; } .script-page .character { margin-left: 30%; } .script-page .paren { margin-left: 22%; margin-right: 15%; } .script-page .dialogue { margin-left: 10%; margin-right: 8%; } }