/* HWG Character Dossier — Field File Stylesheet Print Edition: halftone · CMYK registration · ink bleed · fold crease ─────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=IM+Fell+English:ital@0;1&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap'); :root { --paper: #f5f0e8; --paper-warm: #ede8d8; --paper-ruled: #e8e2d0; --ink: #1a1209; --rule: #2a1f0e; --accent: #7a1010; --muted: #6b5e4e; --faint: rgba(42,31,14,0.12); --stamp-red: #8b1a1a; --manila: #d4b896; --typewriter: 'Courier Prime', 'Courier New', monospace; --editorial: 'Special Elite', 'Courier New', monospace; --serif: 'Libre Baskerville', Georgia, serif; --display: 'Playfair Display', Georgia, serif; --fell: 'IM Fell English', serif; /* CMYK ghost offsets — tune these for more/less drama */ --cmyk-offset-light: 1.5px; --cmyk-offset-heavy: 2.5px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════════════════════════ SVG FILTERS — injected into the DOM via a hidden SVG. Because CSS filter: url() needs a DOM id, paste this SVG snippet at the very top of your HTML : ═══════════════════════════════════════════════════════════ */ /* ─── BODY ─────────────────────────────────────────────────── */ body { background: #b8a888; background-image: repeating-linear-gradient( 0deg, transparent, transparent 27px, rgba(100,80,50,0.06) 27px, rgba(100,80,50,0.06) 28px ); font-family: var(--serif); color: var(--ink); padding: 30px 20px; min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* ─── PAPER SHELL ───────────────────────────────────────────── */ .newspaper { max-width: 960px; margin: 0 auto; background: var(--paper); box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.35), inset 0 0 60px rgba(0,0,0,0.02); position: relative; z-index: 1; border-top: 4px solid var(--manila); /* HALFTONE — tiny dot matrix simulating letterpress ink screen */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Ccircle cx='2.5' cy='2.5' r='0.82' fill='rgba(26%2C18%2C9%2C0.065)'/%3E%3C/svg%3E"); } /* Punched margin rule */ .newspaper::after { content: ''; position: absolute; left: 18px; top: 60px; bottom: 60px; width: 1px; border-left: 1px dashed rgba(42,31,14,0.15); pointer-events: none; } /* Dog-eared top-right corner */ .newspaper::before { content: ''; position: absolute; top: 0; right: 0; z-index: 10; width: 0; height: 0; border-style: solid; border-width: 0 38px 38px 0; border-color: transparent #b8a888 transparent transparent; filter: drop-shadow(-3px 3px 2px rgba(0,0,0,0.22)); pointer-events: none; } /* ─── CMYK REGISTRATION GHOST ───────────────────────────────── */ /* Usage: Your text here For major display headings use .cmyk-heavy instead. */ .cmyk { position: relative; display: inline; } .cmyk::before, .cmyk::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; font: inherit; white-space: inherit; width: 100%; } .cmyk::before { color: rgba(0, 155, 175, 0.20); transform: translate(var(--cmyk-offset-light), calc(var(--cmyk-offset-light) * -0.67)); filter: url(#doss-bleed-body); } .cmyk::after { color: rgba(195, 22, 58, 0.15); transform: translate(calc(var(--cmyk-offset-light) * -0.67), var(--cmyk-offset-light)); filter: url(#doss-bleed-body); } .cmyk-heavy { position: relative; display: inline; } .cmyk-heavy::before, .cmyk-heavy::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; font: inherit; white-space: inherit; width: 100%; } .cmyk-heavy::before { color: rgba(0, 155, 175, 0.25); transform: translate(var(--cmyk-offset-heavy), calc(var(--cmyk-offset-heavy) * -0.6)); filter: url(#doss-bleed-mid); } .cmyk-heavy::after { color: rgba(195, 22, 58, 0.20); transform: translate(calc(var(--cmyk-offset-heavy) * -0.8), var(--cmyk-offset-heavy)); filter: url(#doss-bleed-mid); } /* ─── MASTHEAD ──────────────────────────────────────────────── */ .masthead { padding: 24px 36px 0; border-bottom: 3px double var(--rule); } .masthead-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--fell); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; filter: url(#doss-bleed-body); } .masthead-title { text-align: center; padding: 10px 0 6px; } .masthead-title h1 { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 9vw, 90px); line-height: 1; color: var(--ink); filter: url(#doss-bleed-title); position: relative; } .masthead-title .subtitle { font-family: var(--fell); font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-top: 4px; filter: url(#doss-bleed-body); } .masthead-rule-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; } .masthead-rule-row hr { flex: 1; border: none; border-top: 1px solid var(--rule); } .masthead-rule-row .hwg-badge { font-family: var(--fell); font-size: 11px; letter-spacing: 0.15em; color: var(--accent); text-transform: uppercase; white-space: nowrap; } .masthead-bottom { display: flex; justify-content: space-between; font-family: var(--fell); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; padding: 8px 0 12px; border-top: 1px solid var(--rule); filter: url(#doss-bleed-body); } /* ─── SECTION LABEL ─────────────────────────────────────────── */ .section-label { text-align: center; font-family: var(--editorial); font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 5px 0; border-bottom: 2px solid var(--rule); filter: url(#doss-bleed-heavy); } /* ─── PROFILE CONTENT ───────────────────────────────────────── */ .profile-content { padding: 28px 36px 28px 52px; background: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Ccircle cx='2.5' cy='2.5' r='0.75' fill='rgba(26%2C18%2C9%2C0.055)'/%3E%3C/svg%3E"), repeating-linear-gradient( transparent, transparent 27px, rgba(42,31,14,0.07) 27px, rgba(42,31,14,0.07) 28px ); } /* ─── FILE STAMP BAND ───────────────────────────────────────── */ .file-stamp-band { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--rule); border-left: 4px solid var(--rule); padding: 6px 12px; margin-bottom: 18px; background: var(--paper-warm); font-family: var(--editorial); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); filter: url(#doss-bleed-body); } .file-stamp-band .file-ref { font-size: 11px; color: var(--ink); } .file-stamp-band .file-class { font-family: var(--editorial); font-size: 14px; letter-spacing: 0.08em; font-weight: 700; color: var(--stamp-red); border: 2px solid var(--stamp-red); padding: 1px 8px; opacity: 0.85; transform: rotate(-1deg); display: inline-block; filter: url(#doss-bleed-heavy); } /* ─── PROFILE HEADER ────────────────────────────────────────── */ .profile-header { display: grid; grid-template-columns: 200px 1fr; gap: 24px; border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 20px; } .profile-portrait { display: flex; flex-direction: column; gap: 0; } .profile-portrait img { width: 100%; display: block; border: 1px solid var(--rule); background: #ddd6c6; filter: sepia(15%) contrast(1.05) url(#doss-bleed-body); } .portrait-caption { font-family: var(--typewriter); font-size: 9.5px; color: var(--muted); text-align: center; padding: 5px 4px; border: 1px solid var(--rule); border-top: none; background: var(--paper-warm); line-height: 1.5; filter: url(#doss-bleed-body); } /* ─── DOSSIER TABLE ─────────────────────────────────────────── */ .dossier-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-family: var(--typewriter); font-size: 11px; background: var(--paper-warm); border: 1px solid rgba(42,31,14,0.2); filter: url(#doss-bleed-body); } .dossier-table tr { border-bottom: 1px dashed rgba(42,31,14,0.2); } .dossier-table tr:last-child { border-bottom: none; } .dossier-table td { padding: 4px 8px; vertical-align: top; line-height: 1.45; } .dossier-table td:first-child { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 9px; color: var(--muted); white-space: nowrap; padding-right: 10px; width: 80px; border-right: 1px solid rgba(42,31,14,0.15); background: rgba(42,31,14,0.03); } /* ─── PROFILE TITLE AREA ────────────────────────────────────── */ .profile-title-area { display: flex; flex-direction: column; justify-content: flex-start; } .profile-kicker { font-family: var(--typewriter); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; filter: url(#doss-bleed-body); } .profile-name { font-family: var(--display); font-size: clamp(28px, 4vw, 48px); font-weight: 900; line-height: 1.05; color: var(--ink); margin-bottom: 4px; filter: url(#doss-bleed-title); } .profile-epithet { font-family: var(--typewriter); font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.6; max-width: 520px; border-left: 2px solid var(--faint); padding-left: 10px; filter: url(#doss-bleed-body); } .profile-status { display: inline-block; font-family: var(--editorial); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 2px 10px; border: 2px solid; margin-bottom: 12px; transform: rotate(-0.5deg); filter: url(#doss-bleed-heavy); } .status-active { color: #2a5e2a; border-color: #2a5e2a; background: rgba(42,94,42,0.06); } .status-missing { color: var(--stamp-red); border-color: var(--stamp-red); background: rgba(139,26,26,0.06); } .status-deceased { color: var(--muted); border-color: var(--muted); background: rgba(107,94,78,0.08); } .status-unknown { color: var(--ink); border-color: rgba(42,31,14,0.4); background: rgba(26,18,9,0.04); } /* ─── PROFILE BODY ──────────────────────────────────────────── */ .profile-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } .profile-body.single { grid-template-columns: 1fr; } .profile-section { margin-bottom: 20px; } .profile-section h3 { font-family: var(--editorial); font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper); background: var(--muted); padding: 3px 8px; margin-bottom: 10px; display: inline-block; filter: url(#doss-bleed-heavy); } .profile-section p { font-family: var(--serif); font-size: 13px; line-height: 1.8; color: var(--ink); margin-bottom: 8px; text-align: justify; hyphens: auto; filter: url(#doss-bleed-body); } .profile-section p:first-of-type::first-letter { font-family: var(--display); font-size: 46px; font-weight: 900; float: left; line-height: 0.78; margin: 6px 6px 0 0; color: var(--ink); filter: url(#doss-bleed-heavy); } /* ─── PULL QUOTE ────────────────────────────────────────────── */ .pull-quote { border-left: 3px solid var(--accent); padding: 6px 0 6px 12px; margin: 14px 0; font-family: var(--typewriter); font-size: 12px; line-height: 1.6; color: var(--ink); background: rgba(122,16,16,0.04); filter: url(#doss-bleed-body); } /* ─── CONNECTIONS ───────────────────────────────────────────── */ .entanglements { margin-top: 4px; } .entanglement-row { display: grid; grid-template-columns: 130px 1fr; gap: 0 8px; padding: 5px 0; border-bottom: 1px dashed rgba(42,31,14,0.18); font-size: 12px; filter: url(#doss-bleed-body); } .entanglement-row:last-child { border-bottom: none; } .ent-name { font-family: var(--typewriter); font-weight: 700; font-size: 11px; color: var(--ink); min-width: 0; text-decoration: none; } .ent-name:hover { text-decoration: underline; text-decoration-color: var(--accent); } .ent-rel { font-family: var(--typewriter); font-size: 11px; color: var(--muted); } /* ─── GAZETTE LOG ───────────────────────────────────────────── */ .gazette-log { margin-top: 4px; } .log-entry { display: grid; grid-template-columns: 90px 1fr; gap: 0 10px; padding: 5px 0; border-bottom: 1px dashed rgba(42,31,14,0.15); font-size: 11px; filter: url(#doss-bleed-body); } .log-entry:last-child { border-bottom: none; } .log-date { font-family: var(--typewriter); color: var(--muted); white-space: nowrap; font-size: 10px; } .log-text { font-family: var(--typewriter); font-size: 11px; line-height: 1.5; color: var(--ink); } .log-text a { color: var(--accent); text-decoration: underline; } /* ─── NOTICES BAR ───────────────────────────────────────────── */ .notices-bar { background: #1a1209; color: #f5f0e8; padding: 10px 36px; font-family: var(--typewriter); font-size: 11px; display: flex; gap: 20px; flex-wrap: wrap; filter: url(#doss-bleed-body); } .notices-bar strong { color: var(--manila); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; margin-right: 4px; } .notices-bar a { color: var(--manila); text-decoration: underline; } /* ─── FOOTER ────────────────────────────────────────────────── */ .footer { padding: 14px 36px 0; border-top: 3px double var(--rule); margin-top: 4px; display: flex; justify-content: space-between; align-items: center; font-family: var(--typewriter); font-size: 10px; color: var(--muted); letter-spacing: 0.05em; filter: url(#doss-bleed-body); } .footer-logo { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--ink); filter: url(#doss-bleed-mid); } /* ─── RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 700px) { .profile-header { grid-template-columns: 1fr; } .profile-body { grid-template-columns: 1fr; } .masthead, .profile-content, .footer, .notices-bar { padding-left: 18px; padding-right: 18px; } .profile-portrait { max-width: 240px; } } /* ─── SPOILER SYSTEM ────────────────────────────────────────── */ .spoiler-block { position: relative; margin: 14px 0; } .spoiler-label { display: flex; align-items: center; gap: 8px; font-family: var(--editorial); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--paper); background: #5a3a1a; padding: 3px 10px; cursor: pointer; user-select: none; border: none; width: 100%; text-align: left; filter: url(#doss-bleed-heavy); } .spoiler-label:hover { background: #3d2810; } .spoiler-label::before { content: '▶'; font-size: 7px; transition: transform 0.2s; display: inline-block; } .spoiler-block.open .spoiler-label::before { transform: rotate(90deg); } .spoiler-content { display: none; border-left: 3px solid #5a3a1a; padding: 10px 12px; background: rgba(90,58,26,0.05); } .spoiler-block.open .spoiler-content { display: block; } .spoiler-inline { background: var(--ink); color: var(--ink); border-radius: 2px; padding: 0 3px; cursor: pointer; transition: color 0.15s; } .spoiler-inline:hover { opacity: 0.85; } .spoiler-inline.revealed { color: var(--paper); } /* ─── REDUCED MOTION ────────────────────────────────────────── */ /* Strip SVG filters for users who prefer it. feTurbulence can cause reflow on some rendering engines. */ @media (prefers-reduced-motion: reduce) { * { filter: none !important; } }