/*
 * Styles for the app-rendered pages (policies, blog, contact, 404) in the
 * October 2026 design. Loaded after /site/style.css. Class names are the ones
 * those pages already use, so their wording and structure stay untouched.
 */
:root{--seafoam:var(--ink);--hairline:var(--line);--slate:var(--body);--deep-ink:var(--ink);--sea-mist:var(--mist)}
main{display:block}
.overflow-x-clip{overflow-x:clip}

/* Page openings */
.eyebrow-hl{display:inline-block;font:500 10px/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.025em;color:var(--ink);font-size:clamp(46px,11vw,72px);margin:0}
.display{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.025em;color:var(--ink);font-size:clamp(50px,13vw,88px);margin:0}
.h3{font:600 25px/1.2 var(--display);letter-spacing:-.04em;color:var(--ink)}
.accent{font-family:var(--serif);font-style:italic;color:var(--coral)}
.lede{font-size:16px;max-width:560px}
.post-date{font:500 10px/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nav-link{font-size:12px;font-weight:500;text-decoration:underline}
code{font-size:.9em;background:var(--mist);padding:1px 6px}

/* Long-form text: policies and blog posts */
.prose{font-size:15px;line-height:1.9;color:var(--body)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,6vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:56px 0 18px}
.prose h3{font:600 20px/1.25 var(--display);letter-spacing:-.03em;color:var(--ink);margin:36px 0 12px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:1.3em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--coral)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.prose strong{color:var(--ink);font-weight:500}
.prose em{font-family:inherit;font-style:italic}
.prose blockquote{font:400 22px/1.4 var(--serif);color:var(--ink);border-left:3px solid var(--coral);padding-left:20px;margin:28px 0}
.prose table{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 24px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--ink)}

/* Blog list */
.post-card{display:block;padding:32px 0;border-top:1px solid var(--line);text-decoration:none}
.post-card:last-child{border-bottom:1px solid var(--line)}
.post-title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,6vw,42px);line-height:1.1;color:var(--ink);margin:10px 0 0}
.post-desc{font-size:14px;max-width:600px;margin-top:12px}
.post-more{display:inline-block;margin-top:16px;font-size:11px;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.post-card:hover .post-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* Lists of next steps (404 and contact) */
.ed-list,.route-list{list-style:none;margin:30px 0 0;padding:0}
.ed-list li,.route-list li{padding:22px 0;border-top:1px solid var(--line)}
.ed-list li:last-child,.route-list li:last-child{border-bottom:1px solid var(--line)}
.ed-list a,.route-list a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.contact-facts{margin:35px 0 0;padding:0;border-top:1px solid var(--line)}
.contact-facts>div{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-facts dt{font-weight:500;font-size:12px}
.contact-facts dd{margin:4px 0 0;font-size:14px}

/* Page layout helpers */
.page-article{padding:70px 0 100px}
.page-article .wrap{max-width:760px}
.page-end{margin-top:48px;padding-top:34px;border-top:1px solid var(--line)}
.page-photo{position:relative;height:420px;margin-top:40px}
@media(min-width:761px){
  .page-article{padding:110px 0 130px}
  .page-photo{height:560px;margin-top:0}
  .page-intro .intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:center}
}