/* ================================
   Layer 1: Reset & Foundation
   ================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html,
body {
	min-height: 100vh;
}

body {
	background: #2c2c2c;
	color: #1a1a1a;
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ================================
   Layer 2: Tractor-feed Perforations
   ================================ */
.paper {
	max-width: 1050px;
	margin: 2rem auto;
	background: #f4f2e9;
	position: relative;
	padding: 0 16px 0 36px; /* top right-bottom left(perforation gutter) */
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.paper::before,
.paper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 24px;
	background-image: repeating-radial-gradient(circle at center, transparent 0px, transparent 3px, #d8d6cd 3.5px, #d8d6cd 7px);
	background-size: 100% 40px;
}

.paper::before {
	left: -24px;
}

.paper::after {
	right: -24px;
	left: auto;
}

@media (max-width: 960px) {
	.paper { max-width: 100%; margin: 0.5rem; }
	.paper::before, .paper::after { width: 12px; background-size: 100% 30px; }
}

@media (max-width: 600px) {
	.paper::before, .paper::after { display: none; }
}

/* ================================
   Layer 8: Paper Texture (faint ruled lines)
   ================================ */
.paper {
	background: repeating-linear-gradient(to bottom, #f4f2e9, #f4f2e9 27px, rgba(0,0,0,0.015) 27px, rgba(0,0,0,0.015) 28px), #f4f2e9;
}

/* ================================
   Layer 3: Typography
   ================================ */
.content-body,
.content-body h1, .content-body h2, .content-body h3,
.content-body p, .content-body blockquote, .content-body pre,
.content-body code, .content-body ul, .content-body ol {
	font-family: inherit; /* body is already monospace */
}

.content-body h1 {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 1.5rem 0 0.5rem 0;
	letter-spacing: -0.02em;
}

.content-body h2 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.25rem 0 0.4rem 0;
}

.content-body h3 {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 1rem 0 0.3rem 0;
}

.content-body p {
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

.content-body blockquote {
	border-left: 3px solid #8c8776;
	padding-left: 1rem;
	margin: 1rem 0;
	font-style: italic;
	color: #5a5546;
}

.meta, .job-header, .home-group-header, .warning-final {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.job-header table td {
	font-size: 0.85rem;
	padding: 2px 0;
}

pre, code {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9em;
	line-height: 1.6;
}

pre {
	background: #edeae0;
	border: 1px solid #d0cdb8;
	padding: 1rem;
	overflow-x: auto;
	margin: 1rem 0;
}

code {
	background: #edeae0;
	border-radius: 3px;
	padding: 2px 5px;
}

/* ================================
   Layer 4: Article Layout
   ================================ */
.job-header {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	margin: 1.5rem 32px 0 0;
	color: #3a3730;
	white-space: pre-wrap;
}

.job-header pre.ascii-art {
	background: none; border: none; padding: 0; margin: 0;
	font-size: inherit; line-height: 1.35;
	color: #000;
	overflow-x: auto;
}

.post-body {
	padding: 1rem 32px 2rem 32px;
}

.paper-fold-line {
	border: none;
	height: 1px;
	margin: 1.5rem 32px;
	border-top: 1px dashed #c8c5b6;
}

/* ================================
   Layer 5: Navigation
   ================================ */
.home-nav {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.95rem;
	padding: 1.25rem 32px;
	border-bottom: 2px solid #2c2c2c;
	background: #efece4;
}

/* ================================
    Layer 5b: Post footer links
    ================================ */
.footer-links {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	color: #8c8776;
	margin: 1rem 32px 0 32px;
}

.source-ref a {
	color: #4a4639;
	text-decoration: none;
}

.source-ref a:hover {
	background: #d0cdb8;
}

/* ================================
    Layer 5c: Navigation
    ================================ */
.home-nav {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.95rem;
	padding: 1.25rem 32px;
	border-bottom: 2px solid #2c2c2c;
	background: #efece4;
}

.home-nav a {
	color: #1a1a1a;
	text-decoration: none;
	margin-right: 1.5rem;
}

.home-nav a:hover {
	text-decoration: underline;
}

/* ================================
    Layer 6: Home Page Directory Listing
    ================================ */
.directory-list {
	padding: 1rem 32px 2rem 32px;
}

.home-group-header {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	color: #8c8776;
	margin-top: 1.5rem;
	margin-bottom: 0.25rem;
	padding-left: 4px;
	border-top: 1px solid #d8d6cd;
}

.home-entry, .home-list-entry {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.9rem;
	padding: 2px 0;
	color: #1a1a1a;
}

.home-entry a, .home-list-entry a {
	color: #4a4639;
	text-decoration: none;
}

.home-entry a:hover, .home-list-entry a:hover {
	background: #d0cdb8;
	text-decoration: none;
	cursor: pointer;
}

.home-entry .sequence-num,
.home-list-entry .seq {
	display: inline-block;
	width: 2.5rem;
	color: #8c8776;
}

.home-entry .tw-warning,
.home-list-entry .tw-warning {
	color: #b44a4a;
	margin-left: 0.4rem;
}

/* ================================
   Layer 7: ASCII Decoration
   ================================ */
.ascii-art {
	font-family: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
	overflow-x: auto;
	white-space: pre;
}

.ascii-line {
	border: none;
	height: 1px;
	margin: 0.75rem 32px;
}

.ascii-line::after {
	content: '';
	display: block;
	background: repeating-linear-gradient(90deg, #2c2c2c 0px, #2c2c2c 4px, transparent 4px, transparent 8px);
	height: 1px;
}

/* ================================
     Trigger Warning Styles
     ================================ */
.warning-gate { text-align:center; padding:48px 32px; margin:48px 0 32px; border-bottom:1px solid rgba(0,0,0,.15); }
.warning-text { font-size:17px;color:#8b0000;font-weight:bold;margin-bottom:8px; }
.warning-final { font-size:13px;color:#444;margin-bottom:24px;font-style:italic; }
.opt-in-btn { background:none;border:1px solid #4a4639;padding:8px 28px;cursor:pointer;font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;font-size:13px;color:#1a1a1a; }
.opt-in-btn:hover {background:rgba(0,0,0,.05);}
.opt-in-btn:focus {outline:2px solid #4a4639;outline-offset:2px;}

/* ================================
     Caesar cipher reveal (tw posts)
     ================================ */
.cipher-container .content-body-content { /* plain text wrapper for TW content */ }

/* ================================
    Home Page Styles
   ================================ */
.home-title { text-align:center;font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;font-size:15px;color:#4a4639;letter-spacing:.15em;margin-bottom:28px;text-transform:uppercase; }
.day-group { margin-top:32px;border-left:2px dashed rgba(0,0,0,.15); padding-left:20px; }
.day-header { font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;font-size:13px;color:#8c8776;margin-bottom:8px;padding-left:4px;border-top:1px solid #d8d6cd;line-height:1.7; }
.home-list-entry { font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;font-size:0.9rem;padding:3px 0;color:#1a1a1a;display:flex;align-items:baseline;gap:12px; }
.seq { display:inline-block;width:48px;text-align:right;color:#8c8776;flex-shrink:0; }
.entry-title a { color:#4a4639;text-decoration:none; }
.entry-title a:hover {background:#d0cdb8;}
.home-seq { color:#8c8776; }
.warning-mark { color:#b44a4a;font-size:12px;margin-left:4px;font-weight:bold;letter-spacing:.05em; }
.feed-links { margin-top:36px;padding-top:16px;border-top:1px solid rgba(0,0,0,.12);font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;font-size:13px;line-height:2;text-align:center;color:#4a4639; }
.feed-links a { color:#4a4639;text-decoration:none; }
.feed-links a:hover { background:#d0cdb8; text-decoration:none; }

/* ================================
   Post HTML Helper Classes
   ================================ */
.content-body { padding:32px 32px 48px;line-height:1.75;overflow-wrap:break-word;word-wrap:break-word; }
.job-line { width:100%;height:1px;border:none;margin:16px 0;border-top:1px dashed #c8c5b6; }

/* ================================
   Accessibility
   ================================ */
*:focus, *:focus-visible {
	outline: 2px solid #4a4639;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ascii-art, .ascii-art * { animation: none !important; }
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 960px) {
	.content-body h1 { font-size:2rem; }
	.content-body h2 { font-size:1.4rem; }
}

@media (max-width: 600px) {
	body { padding:8px 0; }
	.paper { max-width:100%;margin:0;border-radius:0; }
	.content-body { padding:12px 16px; }
	.post-nav { margin-left:16px;margin-right:16px; }
	.job-header { font-size:13px;margin-left:16px;margin-right:16px; }
}