/* Shared styles for the state sample-letter pages and the sample-letters index. */
.sl-hero { max-width: 780px; }
.sl-crumb { font-size: var(--step--1); color: var(--muted); margin: 0 0 14px; }
.sl-crumb a { color: var(--navy); }
.sl-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:24px 0 8px; }
.sl-cta .alt { color:var(--navy); font-weight:600; }
.sl-rules { margin:36px 0 44px; background:#fff; border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--radius); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow-sm); max-width:900px; }
.sl-rules h2 { font-size:var(--step-1); margin:0 0 4px; }
.sl-rules .fine { margin:0 0 14px; }
.sl-rules dl { margin:0; display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:0; }
.sl-rules dt, .sl-rules dd { margin:0; padding:11px 0; border-top:1px solid var(--line); }
.sl-rules dt { font-weight:700; color:var(--navy); padding-right:16px; font-size:var(--step--1); }
.sl-rules dd { font-size:var(--step--1); line-height:1.55; }
.sl-rules cite { display:block; font-style:normal; color:var(--muted); font-size:.82rem; margin-top:2px; }
@media (max-width:640px){ .sl-rules dl{ grid-template-columns:1fr; } .sl-rules dd{ border-top:0; padding-top:0; } }
.sl-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start; }
@media (max-width:900px){ .sl-grid{ grid-template-columns:1fr; } .sl-notes{ position:static !important; } }
.sl-tag { display:inline-block; background:var(--navy); color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-right:6px; vertical-align:2px; }
.letter { background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:clamp(22px,5vw,56px); font-family:Georgia,'Times New Roman',serif; font-size:1rem; line-height:1.6; color:#222; overflow-wrap:anywhere; }
.letter p { margin:0 0 1em; }
.letter .addr { color:#444; }
.letter .label { font-family:'Inter',sans-serif; }
.letter mark { background:linear-gradient(transparent 55%, #f3dfb4 55%); color:inherit; padding:0 1px; }
.letter sup, .sample-paper sup { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--amber); color:#1a1206; font:700 .64rem 'Inter',sans-serif; vertical-align:super; margin-left:2px; }
.letter .sig { margin-top:2.2em; }
.letter ul { margin:0 0 1em; padding-left:1.2em; }
/* Blurred stand-ins for last names and street addresses, the way a shared real letter would look. */
.rd { filter: blur(4.5px); user-select: none; -webkit-user-select: none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sl-notes { position:sticky; top:96px; }
.sl-notes h2 { font-size:var(--step-1); margin-bottom:12px; }
.sl-notes ol { list-style:none; padding:0; margin:0; }
.sl-notes li { display:flex; gap:12px; font-size:var(--step--1); line-height:1.5; margin:0 0 16px; color:var(--ink); }
.sl-notes li b { flex:0 0 22px; height:22px; border-radius:50%; background:var(--amber); color:#1a1206; display:grid; place-items:center; font-size:.72rem; }
.sl-notes li strong { color:var(--navy); display:block; }
.sl-diff { margin-top:56px; max-width:760px; }
.sl-diff ul { padding-left:1.2em; }
.sl-diff li { margin:6px 0; }
.sl-more { margin-top:44px; max-width:900px; }
.sl-more h2 { font-size:var(--step-1); }
.sl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:14px; }
.sl-card { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm); transition:border-color .15s, transform .15s; }
.sl-card:hover { border-color:var(--amber); transform:translateY(-1px); }
.sl-card .st { font-family:'Fraunces',serif; font-weight:600; color:var(--navy); font-size:var(--step-1); display:block; margin-bottom:4px; }
.sl-card .what { font-size:var(--step--1); line-height:1.5; color:var(--muted); display:block; }
.sl-card .go { display:block; margin-top:10px; font-weight:600; color:var(--navy); font-size:var(--step--1); }
.letter .re { font-weight:700; }
.sl-hero h1 { font-size: clamp(2rem, 1.55rem + 1.7vw, 2.85rem); line-height: 1.1; }
@media (max-width:520px){ .sl-cta .btn--lg { white-space:nowrap; font-size:1.02rem; padding-left:20px; padding-right:20px; width:100%; text-align:center; } }