/* The Lonely Hearts Gazette — website. Black ink on neutral newsprint-gray paper (#E8E8E8, 2026-10-18). Responsive real text (reflow is fine here; the e-edition stays fixed-layout). No web fonts, no frameworks. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e8e8e8;color:#111;font:18px/1.6 Georgia,"Times New Roman",Times,serif}
a{color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #000;outline-offset:2px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.sc{font:bold 12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase}
/* masthead */
.masthead{border-bottom:4px double #000;padding-top:10px;margin-bottom:0}
.topline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid #000;padding-bottom:5px}
.nameplate{margin:6px 0 0;text-align:center;font:900 clamp(30px,7.2vw,78px)/1.02 "Times New Roman",Georgia,serif;letter-spacing:-.01em}
.nameplate a{text-decoration:none}
.nameplate sup,.tm{font-size:.38em;vertical-align:super;line-height:0;font-weight:700}
.motto{text-align:center;margin:2px 0 6px;font-style:italic;font-size:clamp(16px,2.4vw,21px)}
.dateline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:3px solid #000;border-bottom:1px solid #000;padding:4px 0;margin-top:6px}
.mainnav{border-bottom:1px solid #000}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.mainnav li{border-left:1px solid #000}
.mainnav li:first-child{border-left:0}
.mainnav a{display:block;padding:9px 12px;min-height:44px;line-height:26px;text-decoration:none;font:bold 13px/26px Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.mainnav a[aria-current=page]{background:#000;color:#fff}
.mainnav a:hover{text-decoration:underline}
.preview-bar{border:2px solid #000;margin:14px 0 0;padding:6px 10px;text-align:center;font:bold 12.5px/1.45 Arial,Helvetica,sans-serif;letter-spacing:.06em}
/* breadcrumbs */
.crumbs{margin:12px 0 0;font:13px/1.4 Arial,Helvetica,sans-serif}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap}
.crumbs li+li::before{content:"›";padding:0 7px}
/* headings */
main{padding-bottom:30px}
h1,h2,h3{font-family:"Times New Roman",Georgia,serif;line-height:1.12;margin:1.1em 0 .4em}
h1{font-size:clamp(34px,6vw,62px);font-weight:900;letter-spacing:-.01em;margin-top:.45em}
h2{font-size:clamp(25px,3.4vw,34px);font-weight:800}
h3{font-size:22px;font-weight:800}
.kicker{margin:22px 0 0;border-bottom:1px solid #000;display:inline-block;padding-bottom:2px}
.deck{font-size:clamp(19px,2.4vw,23px);font-style:italic;line-height:1.4;margin:.2em 0 1em}
.byline{border-top:1px solid #000;border-bottom:1px solid #000;padding:5px 0;margin:0 0 18px}
.rule{border:0;border-top:1px solid #000;margin:26px 0}
.rule.double{border-top:4px double #000}
.rule.thick{border-top:3px solid #000}
.lede{font-size:21px;line-height:1.5}
.dropcap::first-letter{float:left;font:900 4.1em/.8 "Times New Roman",Georgia,serif;margin:.06em .08em 0 0}
.prose{max-width:720px}
.prose p,.prose li{hyphens:auto}
blockquote{margin:1.2em 0;padding:4px 18px;border-left:3px solid #000;font-style:italic}
/* newspaper columns */
.cols{display:grid;grid-template-columns:1fr;gap:0}
.cols>*{padding:0 0 16px}
@media (min-width:760px){
 .cols.c2{grid-template-columns:1fr 1fr}.cols.c3{grid-template-columns:repeat(3,1fr)}
 .cols>*{padding:0 18px 10px;border-left:1px solid #000}.cols>*:first-child{padding-left:0;border-left:0}.cols>*:last-child{padding-right:0}
}
.textcols{column-gap:36px;column-rule:1px solid #000}
@media (min-width:760px){.textcols{column-count:2}}
@media (min-width:1050px){.textcols.t3{column-count:3}}
.textcols>*{break-inside:avoid}
/* hero */
.hero{text-align:center;border-bottom:1px solid #000;padding:6px 0 18px}
.hero h1{font-size:clamp(42px,9vw,104px);margin:.2em 0 .1em;font-style:italic}
.hero .lede{max-width:760px;margin:0 auto}
/* boxed notices, coupons, CTAs */
.box{border:1px solid #000;padding:14px 16px;margin:16px 0}
.box.heavy{border:3px double #000}
.box.coupon{border:2px dashed #000;position:relative}
.box h2,.box h3{margin-top:.1em}
.cta-row{display:grid;gap:14px;grid-template-columns:1fr;margin:20px 0}
@media (min-width:760px){.cta-row{grid-template-columns:repeat(3,1fr)}}
.cta-row .box{margin:0;text-align:center;display:flex;flex-direction:column;justify-content:space-between}
.btn{display:inline-block;background:#000;color:#fff;border:2px solid #000;padding:11px 18px;min-height:44px;font:bold 14px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{background:#e8e8e8;color:#000}
.btn.ghost{background:#e8e8e8;color:#000}
.btn.ghost:hover{background:#000;color:#fff}
.stamp{display:inline-block;border:3px solid #000;padding:2px 9px;font:bold 13px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.14em;transform:rotate(-4deg)}
.label{display:inline-block;background:#000;color:#fff;padding:1px 7px;font:bold 11px/1.6 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* tables (rate cards) */
table.rates{width:100%;border-collapse:collapse;margin:12px 0;font-size:17px}
table.rates caption{text-align:left;font:bold 13px Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding-bottom:6px}
table.rates th,table.rates td{border-bottom:1px dotted #000;padding:8px 6px;text-align:left;vertical-align:top}
table.rates thead th{border-bottom:2px solid #000;font:bold 12.5px Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
table.rates td.amt,table.rates th.amt{text-align:right;white-space:nowrap;font-weight:bold}
.fine{font:14px/1.5 Arial,Helvetica,sans-serif}
/* personals */
.filters{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;border-top:3px solid #000;border-bottom:1px solid #000;padding:10px 0;margin:14px 0}
.filters label{display:block;font:bold 12px Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase}
select,input,textarea{font:17px Georgia,serif;color:#000;background:#e8e8e8;border:0;border-bottom:1px solid #000;border-radius:0;padding:8px 2px;min-height:44px;width:100%}
textarea{border:1px solid #000;padding:8px}
select{appearance:none;-webkit-appearance:none;padding-right:24px;background:linear-gradient(45deg,transparent 50%,#000 50%) right 9px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,#000 50%) right 3px center/6px 6px no-repeat}
.filters select{min-width:220px}
.notice-list{list-style:none;margin:0;padding:0;column-gap:30px;column-rule:1px solid #000}
@media (min-width:700px){.notice-list{column-count:2}}
@media (min-width:1050px){.notice-list{column-count:3}}
.notice-list li{break-inside:avoid;border-bottom:1px solid #000;padding:10px 0 12px}
.notice-list .ph{display:block;font:bold 13.5px/1.35 Arial,Helvetica,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.notice-list p{margin:4px 0 6px;font-size:16.5px;line-height:1.45;text-align:justify;hyphens:auto}
.notice-list .more{font:bold 13px Arial,Helvetica,sans-serif}
.cathead{column-span:all;text-align:center;border-top:3px solid #000;border-bottom:1px solid #000;padding:4px 0;margin:18px 0 4px;font:900 20px "Times New Roman",serif;letter-spacing:.06em;text-transform:uppercase}
.count{font:14px Arial,Helvetica,sans-serif}
.notice-full{border-top:4px double #000;border-bottom:4px double #000;padding:8px 0 18px;margin:12px 0 18px}
.notice-full .meta{border-bottom:1px solid #000;padding:5px 0;margin:0 0 10px}
.notice-full p{font-size:20px;line-height:1.55}
.write{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #000;padding-top:10px;margin-top:22px;font:bold 14px Arial,Helvetica,sans-serif}
/* forms (coupon style) */
.cform{max-width:640px;border:2px dashed #000;padding:18px 20px 16px;margin:18px 0;position:relative}
.cform::before{content:"✂";position:absolute;top:-12px;left:14px;background:#e8e8e8;padding:0 4px;font-size:16px}
.cform .ctitle{text-align:center;font:900 26px/1.1 "Times New Roman",serif;text-transform:uppercase;border-bottom:3px double #000;padding-bottom:8px;margin:0 0 6px}
.cform label{display:block;margin-top:12px;font:bold 12px Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.cform label small{font-weight:normal;letter-spacing:0;text-transform:none}
.cform .row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.cform fieldset{border:1px solid #000;margin:14px 0 0;padding:6px 12px 10px}
.cform legend{font:bold 12px Arial,Helvetica,sans-serif;letter-spacing:.1em;padding:0 4px}
.cform .chk{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font:16px/1.4 Georgia,serif;margin-top:10px}
.cform .chk input{width:22px;height:22px;min-height:0;margin:2px 0 0;flex:none;accent-color:#000}
.errs{border:3px double #000;padding:8px 12px;margin:12px 0;font:15px/1.4 Arial,Helvetica,sans-serif}
.errs ul{margin:4px 0 0;padding-left:20px}
[aria-invalid=true]{border-bottom:3px solid #000;background:repeating-linear-gradient(135deg,#e8e8e8 0 6px,#cfcfcf 6px 7px)}
.result{border:1px solid #000;padding:14px 16px;margin:16px 0;max-width:640px;position:relative}
.result .stamp{position:absolute;right:14px;bottom:12px;background:#e8e8e8}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 40px}
.result dt{font:bold 12px/1.8 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.result dd{margin:0}
.draft-banner{border:4px double #000;padding:10px 14px;margin:16px 0;text-align:center;font:bold 15px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* FAQ */
.faq dt{font:800 21px/1.3 "Times New Roman",serif;margin-top:18px}
.faq dd{margin:4px 0 0}
/* footer */
.site-footer{border-top:4px double #000;margin-top:30px;padding:14px 0 30px;font:14px/1.6 Arial,Helvetica,sans-serif}
.site-footer .fname{font:900 22px "Times New Roman",serif}
.site-footer ul{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:0}
.site-footer li{padding:0 12px 0 0}
.site-footer li a{display:inline-block;min-height:44px;line-height:44px;padding:0 4px}
@media (max-width:520px){body{font-size:17px}.topline span:last-child{display:none}.mainnav a{padding:9px 9px;font-size:12px}.lede{font-size:19px}}
@media print{.mainnav,.preview-bar,.skip,.filters{display:none}a{text-decoration:none}}
@media (max-width:640px){
 .mainnav .wrap{padding:0}
 .mainnav ul{display:grid;grid-template-columns:repeat(3,1fr)}
 .mainnav li{border-left:0;border-right:1px solid #000;border-bottom:1px solid #000;text-align:center}
 .mainnav li:nth-child(3n){border-right:0}
 .mainnav li:nth-last-child(-n+3):nth-child(3n+1),.mainnav li:nth-last-child(-n+3):nth-child(3n+1)~li{border-bottom:0}
 .mainnav a{padding:8px 4px;font-size:11.5px;letter-spacing:.05em}
 .hero h1{font-size:44px}
}
table.rates thead th.amt{white-space:normal}
.tablewrap{overflow-x:auto}
@media (max-width:640px){table.rates{font-size:15px}table.rates th,table.rates td{padding:7px 4px}}
@media (min-width:1000px){.artgrid{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:0 36px}.artgrid .sidecol{border-left:1px solid #000;padding-left:24px;margin-top:22px}.artgrid .sidecol h2{margin-top:0;font-size:24px}.artgrid .sidecol .btn{margin:4px 0;display:block;text-align:center}}
/* live mode: honeypot kept off-screen; Turnstile slot */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cform .ts{margin:12px 0 4px;min-height:65px}
.center{text-align:center}