/*
Theme Name: STPHNWLKR Legal Pad
Theme URI: https://stphnwlkr.com/
Author: Stephen Walker
Author URI: https://stphnwlkr.com/
Description: A sparse, text-first WordPress theme built as a yellow legal pad. It preserves posts, pages, navigation, search, comments, and WooCommerce content while giving the site a ruled-paper surface.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: stphnwlkr-legal-pad
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, custom-menu, featured-images, threaded-comments, translation-ready, woocommerce
*/

/* Design system: STPHNWLKR Legal Pad — original text-first publishing structure,
   yellow ruled paper, a restrained red margin, binder holes outside the reading measure, and Courier-style text. */
:root { --pad:#fff7ad; --ink:#28281f; --muted:#67665d; --rule:rgba(74,84,132,.3); --margin:rgba(183,65,61,.74); --accent:#7f322e; --line:39px; --margin-offset:clamp(62px,12vw,146px); --side:clamp(24px,4vw,58px); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#eae6d1; font-family:"Courier Prime","Courier New",monospace; font-size:16px; line-height:1.5; } body::before { content:""; position:fixed; z-index:-1; inset:0; max-width:1440px; margin:auto; background-color:var(--pad); background-image:linear-gradient(to right,transparent calc(var(--margin-offset) - 1px),var(--margin) calc(var(--margin-offset) - 1px),var(--margin) var(--margin-offset),transparent var(--margin-offset)),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--line) - 2px),var(--rule) calc(var(--line) - 1px),transparent var(--line)); background-size:100% 100%,100% var(--line); box-shadow:0 0 22px rgba(56,51,26,.16); } a { color:inherit; text-underline-offset:4px; } a:hover { color:var(--accent); } img { max-width:100%; height:auto; } button,input,textarea,select { font:inherit; } button,input[type="submit"] { cursor:pointer; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; } ::selection { color:var(--pad); background:var(--accent); }
.skip-link { position:absolute; z-index:100; top:-100px; left:20px; padding:9px 12px; color:var(--pad); background:var(--ink); font-size:13px; }.skip-link:focus { top:15px; }.site-pad { position:relative; max-width:1440px; min-height:100vh; margin:auto; }.pad-holes { position:absolute; z-index:-1; top:116px; left:clamp(22px,4.7vw,56px); display:grid; gap:225px; pointer-events:none; }.pad-hole { width:29px; height:29px; display:block; border:1px solid rgba(96,89,53,.32); border-radius:50%; background:#e2d98e; box-shadow:inset 2px 2px 3px rgba(75,65,28,.25),1px 1px 1px rgba(255,255,223,.8); }
.site-header { min-height:91px; padding:26px var(--side) 17px calc(var(--margin-offset) + var(--side)); display:flex; align-items:baseline; gap:32px; border-bottom:1px solid var(--ink); background:rgba(255,247,173,.56); }.site-branding { flex:0 0 auto; }.site-title { margin:0; font-size:17px; font-weight:700; letter-spacing:-.08em; line-height:1; }.site-title a { color:var(--ink); text-decoration:none; }.site-description { margin:7px 0 0; color:var(--muted); font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }.primary-navigation { margin-left:auto; }.primary-navigation ul,.footer-navigation ul { display:flex; flex-wrap:wrap; gap:7px 18px; margin:0; padding:0; list-style:none; }.primary-navigation ul { justify-content:flex-end; max-width:650px; }.primary-navigation a,.footer-navigation a { border-bottom:1px solid transparent; color:var(--ink); font-size:13px; text-decoration:none; }.primary-navigation a:hover,.primary-navigation .current-menu-item>a,.footer-navigation a:hover { color:var(--accent); border-color:var(--accent); }.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:13px; text-transform:uppercase; }
.site-main { width:min(100% - calc(var(--margin-offset) + var(--side) * 2),945px); min-height:calc(100vh - 147px); margin:0 auto 0 calc(var(--margin-offset) + var(--side)); padding:74px 0 57px; }.home-intro { max-width:750px; padding-bottom:58px; }.home-intro .identity { margin:0 0 35px; font-size:clamp(1.25rem,2.25vw,1.72rem); line-height:1.42; letter-spacing:-.025em; }.home-intro .identity strong { font-weight:700; }.newsletter-link { display:inline-flex; align-items:baseline; gap:8px; max-width:735px; color:#6e2e2c; font-size:14px; line-height:1.45; text-decoration-thickness:1px; }.newsletter-link span { transition:transform .16s cubic-bezier(.23,1,.32,1); }.newsletter-link:hover span { transform:translateX(3px); }.post-list { border-top:1px solid var(--ink); }.post-row { display:grid; grid-template-columns:48px minmax(0,1fr); gap:17px; min-height:176px; padding:25px 0 20px; border-bottom:1px solid var(--ink); }.post-row__number { padding-top:7px; color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; }.post-row__title { max-width:730px; margin:0 0 12px; font-size:clamp(1.55rem,3vw,2.15rem); font-weight:700; letter-spacing:-.055em; line-height:1.05; }.post-row__title a { border-bottom:1px solid transparent; color:var(--ink); text-decoration:none; }.post-row__title a:hover { color:var(--accent); border-color:var(--accent); }.post-row__excerpt { max-width:755px; margin:0 0 13px; font-size:15px; line-height:1.48; }.post-row__meta,.entry-meta,.archive-description,.search-term,.page-not-found__lead { color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; }.pagination { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:31px 0 0 65px; color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; }.pagination .nav-links { display:flex; flex-wrap:wrap; gap:9px; }.pagination a,.pagination .current { padding:3px 0; }.pagination a { border-bottom:1px solid var(--ink); color:var(--ink); text-decoration:none; }.pagination a:hover { border-color:var(--accent); color:var(--accent); }.pagination .current { color:var(--accent); }
.archive-header,.search-header { margin-bottom:43px; padding-bottom:23px; border-bottom:1px solid var(--ink); }.archive-title,.search-title,.page-not-found h1 { max-width:800px; margin:0; font-size:clamp(2.6rem,5.6vw,5.35rem); letter-spacing:-.075em; line-height:.96; }.archive-description { max-width:660px; margin-top:18px; line-height:1.6; }.single-article,.page-content { max-width:810px; }.back-to-posts { display:inline-flex; align-items:center; gap:7px; margin-bottom:58px; border-bottom:1px solid var(--ink); color:var(--ink); font-size:13px; text-decoration:none; }.back-to-posts:hover { border-color:var(--accent); color:var(--accent); }.single-entry-header,.page-header { padding-bottom:42px; border-bottom:1px solid var(--ink); }.single-entry-header .entry-meta { margin:0 0 18px; }.entry-title { max-width:740px; margin:0; font-size:clamp(3rem,6.3vw,5.8rem); letter-spacing:-.075em; line-height:.94; }.page-header .entry-title { font-size:clamp(2.6rem,5.6vw,5.2rem); }.entry-content { max-width:670px; padding-top:41px; font-size:19px; line-height:1.64; }.entry-content>*:first-child { margin-top:0; }.entry-content p,.entry-content ul,.entry-content ol { margin:0 0 28px; }.entry-content h2,.entry-content h3 { margin:51px 0 18px; line-height:1.1; }.entry-content h2 { font-size:clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-.05em; }.entry-content h3 { font-size:1.45rem; }.entry-content a { color:var(--accent); text-decoration-thickness:1px; }.entry-content blockquote { margin:45px -35px 46px; padding:23px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font-size:clamp(1.65rem,3vw,2.55rem); font-weight:700; letter-spacing:-.045em; line-height:1.1; }.entry-content blockquote p:last-child { margin-bottom:0; }.entry-content figure { margin:38px 0; }.entry-content figcaption { color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.entry-content img { border:1px solid rgba(40,40,31,.22); }.entry-footer { margin-top:50px; padding-top:24px; border-top:1px solid var(--ink); color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; }.entry-footer a { color:var(--ink); }.entry-footer a:hover { color:var(--accent); }.article-newsletter { margin-top:47px; padding-top:24px; border-top:1px solid var(--ink); }.article-newsletter p { max-width:440px; margin:0 0 18px; font-size:16px; line-height:1.43; }.article-newsletter .newsletter-link { padding:12px 13px; color:var(--pad); background:var(--accent); text-decoration:none; }.article-newsletter .newsletter-link:hover { color:var(--pad); background:var(--ink); }.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:23px; margin-top:69px; padding-top:25px; border-top:1px solid var(--ink); }.post-navigation a { color:var(--ink); font-size:14px; text-decoration:none; }.post-navigation a:hover { color:var(--accent); }.post-navigation .nav-next { text-align:right; }
.comments-area { max-width:670px; margin-top:67px; padding-top:25px; border-top:1px solid var(--ink); }.comments-title,.comment-reply-title { margin:0 0 25px; font-size:1.5rem; line-height:1.1; }.comment-list { margin:0; padding:0; list-style:none; }.comment-body { margin:0 0 23px; padding-bottom:22px; border-bottom:1px solid var(--rule); }.comment-meta { color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.comment-content { font-size:15px; line-height:1.5; }.comment-reply-link { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; }.comment-respond { margin-top:39px; }.comment-form label { display:block; margin-bottom:5px; font-family:"DM Mono",monospace; font-size:11px; }.comment-form input:not([type="submit"]),.comment-form textarea,.search-form .search-field { width:100%; padding:9px 10px; border:1px solid var(--ink); border-radius:0; background:rgba(255,255,255,.2); color:var(--ink); }.comment-form input[type="submit"],.search-form .search-submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button { border:0; border-radius:0; padding:11px 13px; background:var(--accent); color:var(--pad); font-family:"DM Mono",monospace; font-size:12px; }.comment-form input[type="submit"]:hover,.search-form .search-submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover { background:var(--ink); color:var(--pad); }.search-form { display:flex; max-width:580px; gap:8px; margin-top:25px; }.search-form .search-submit { flex:0 0 auto; }.page-not-found { max-width:730px; padding:30px 0 80px; }.page-not-found__lead { max-width:540px; margin:22px 0 0; font-size:14px; line-height:1.5; }
.site-footer { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:5px; padding:24px var(--side) 32px calc(var(--margin-offset) + var(--side)); border-top:1px solid var(--ink); color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.site-footer a { color:var(--ink); text-decoration:none; }.site-footer a:hover { color:var(--accent); }.footer-navigation { margin-left:auto; }.woocommerce .woocommerce-breadcrumb { margin:0 0 30px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.woocommerce .woocommerce-breadcrumb a { color:var(--ink); }.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering { margin-bottom:28px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.woocommerce ul.products li.product { text-align:left; }.woocommerce ul.products li.product .woocommerce-loop-product__title { color:var(--ink); font-family:"Courier Prime",monospace; font-size:1.1rem; }.woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce div.product span.price { color:var(--accent); font-family:"DM Mono",monospace; }.woocommerce div.product .product_title { font-size:clamp(2.2rem,4.6vw,4.8rem); line-height:.98; }.woocommerce span.onsale { min-height:auto; min-width:auto; padding:5px 7px; border-radius:0; background:var(--accent); font-family:"DM Mono",monospace; font-size:10px; }
@media (max-width:750px) { :root { --margin-offset:42px; --side:20px; --line:37px; } body::before { background-image:linear-gradient(to right,transparent 41px,var(--margin) 41px,var(--margin) 42px,transparent 42px),repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--rule) 36px,transparent 37px); background-size:100% 100%,100% 37px; }.pad-holes { display:none; }.site-header { min-height:auto; padding:17px 19px 14px 62px; display:block; }.site-description { margin-top:7px; }.menu-toggle { display:inline-block; position:absolute; top:16px; right:18px; }.primary-navigation { display:none; margin:14px 0 0; }.primary-navigation.is-open { display:block; }.primary-navigation ul { justify-content:flex-start; gap:7px 14px; }.primary-navigation a { font-size:11px; }.site-main { width:auto; margin:0 20px 0 62px; padding:49px 0 39px; }.home-intro { padding-bottom:42px; }.home-intro .identity { margin-bottom:29px; font-size:1.24rem; }.newsletter-link { font-size:13px; }.post-row { grid-template-columns:26px minmax(0,1fr); gap:10px; min-height:0; padding:20px 0 19px; }.post-row__number { padding-top:4px; font-size:9px; }.post-row__title { margin-bottom:9px; font-size:1.48rem; }.post-row__excerpt { margin-bottom:11px; font-size:13px; line-height:1.43; }.post-row__meta,.entry-meta { font-size:10px; }.pagination { padding:25px 0 0 36px; font-size:10px; }.archive-header,.search-header { margin-bottom:33px; }.archive-title,.search-title,.page-not-found h1 { font-size:2.9rem; }.single-article,.page-content { max-width:none; }.back-to-posts { margin-bottom:42px; font-size:12px; }.single-entry-header,.page-header { padding-bottom:30px; }.entry-title { font-size:clamp(2.8rem,12vw,4.6rem); }.entry-content { padding-top:31px; font-size:17px; line-height:1.6; }.entry-content p,.entry-content ul,.entry-content ol { margin-bottom:24px; }.entry-content blockquote { margin:38px 0 40px; font-size:1.9rem; }.article-newsletter { margin-top:35px; }.post-navigation { grid-template-columns:1fr; margin-top:50px; }.post-navigation .nav-next { text-align:left; }.site-footer { padding:17px 20px 26px 62px; font-size:10px; }.footer-navigation { width:100%; margin-left:0; }.footer-navigation ul { gap:8px 13px; }.search-form { flex-direction:column; }.search-form .search-submit { width:max-content; }.woocommerce ul.products[class*=columns-] li.product { width:100%; margin-right:0; } }