/* Harborline Mutual, the informational pages: coverage, agents, the
 * company pages, billing and proof of insurance, the legal pages, stories
 * and the newsroom. HAR-32, 2026-10-18.
 *
 * Loaded after css/site.css, and only by those pages. It is a separate file
 * on purpose: site.css is the token source for the desks, the harness and
 * the claims pages, and a change there restamps every page that a demo
 * drives. Nothing here redefines a token or a site.css rule those pages use.
 *
 * The same reservations hold: bay for actions and bands, signal red for
 * claims only (nothing here uses it), brass for 1px rules only.
 */

/* --------------------------------------------------------------- page head
   Two shapes: a split head with a photograph to the edge (coverage, about,
   agents, careers), and a plain ruled head for everything else. */

.page-head { border-bottom: 1px solid var(--rule); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; }
.page-head-text {
  padding: 3.5rem 4rem 3.5rem max(2rem, calc((100vw - 82rem) / 2 + 2rem));
  display: flex; flex-direction: column; justify-content: center;
}
.page-head h1 { font-size: 3.2rem; margin-bottom: 1rem; max-width: 16ch; }
.page-head .lede { margin-bottom: 1.5rem; }
.page-head-photo { margin: 0; background: var(--paper); min-height: 18rem; }
.page-head-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-head.plain .wrap { padding-top: 3rem; padding-bottom: 2.75rem; }
.page-head.plain h1 { max-width: 22ch; }
.page-head.plain .lede { margin-bottom: 0; }
.page-head.plain .head-actions { margin: 1.5rem 0 0; }
.head-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- body grid */

.page-body {
  display: grid; grid-template-columns: minmax(0, 48rem) minmax(0, 1fr);
  gap: 5rem; padding-top: 3.5rem; padding-bottom: 5rem; align-items: start;
}
.page-body.single { grid-template-columns: minmax(0, 50rem); }

.prose { min-width: 0; }
.prose > h2 { font-size: 1.75rem; margin: 3rem 0 .8rem; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.75rem 0 .4rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose .lede { margin-bottom: 1.5rem; }
.prose .note { margin: 1.5rem 0; }
.prose .note p:last-child { margin-bottom: 0; }
.prose .timeline, .prose .news-list { padding-left: 0; }

.aside-panel { padding-top: 1.25rem; border-top: 1px solid var(--brass); position: sticky; top: 1.5rem; max-width: 24rem; }
.aside-panel h2 { font-size: 1.3rem; font-stretch: 112%; margin-bottom: .9rem; }
.aside-panel p, .aside-panel li { font-size: .96rem; color: var(--ink-2); }
.aside-panel ul { padding-left: 1.1rem; margin: 0 0 1.25rem; }
.aside-panel li { margin-bottom: .45rem; }
.aside-panel .btn { margin-top: .25rem; }
.aside-panel .phone { font-family: var(--font-brand); font-stretch: 112%; font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.aside-panel .phone a { color: var(--ink); text-decoration: none; }
.aside-panel .phone a:hover { text-decoration: underline; }
.aside-panel + .aside-panel { margin-top: 2.5rem; }
.aside-stack { position: sticky; top: 1.5rem; }
.aside-stack .aside-panel { position: static; }

/* ----------------------------------------------------- coverage components */

.cover-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; margin: 1.25rem 0 1.5rem; }
.cover-list > div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.cover-list h3 { margin: 0 0 .35rem; }
.cover-list p { margin: 0; color: var(--ink-2); font-size: .97rem; }

.out-list { background: var(--paper); padding: 1.4rem 1.6rem .6rem; margin: 1.25rem 0 1.5rem; }
.out-list h3 { margin-top: 0; }
.out-list ul { padding-left: 1.2rem; }
.out-list li { color: var(--ink); }

.plain-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .97rem; }
.plain-table caption { text-align: left; color: var(--ink-2); font-size: .9rem; padding-bottom: .5rem; }
.plain-table th, .plain-table td { text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--rule); }
.plain-table thead th { font-weight: 650; font-size: .9rem; color: var(--ink-2); border-bottom-color: var(--ink); }
.plain-table tbody th { font-weight: 600; }
.plain-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.def-list { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); margin: 1rem 0 1.5rem; }
.def-list dt, .def-list dd { padding: .75rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.def-list dt { font-weight: 650; padding-right: 1.5rem; }
.def-list dd { color: var(--ink-2); }

.state-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 1.25rem 0 1.5rem; }
.state-split > div { padding-top: 1rem; border-top: 1px solid var(--brass); }
.state-split h3 { margin-top: 0; }
.state-split p:last-child { margin-bottom: 0; }

/* The quote band: bay, like the quote box it sends people back to. */
.cta-band { background: var(--bay); color: #fff; }
.cta-band .wrap { display: flex; align-items: center; gap: 2.5rem; padding-top: 2.6rem; padding-bottom: 2.6rem; }
.cta-band h2 { color: #fff; font-size: 1.8rem; margin: 0 0 .35rem; }
.cta-band p { color: #CFE1F3; margin: 0; max-width: 44rem; }
.cta-band .btn { margin-left: auto; background: #fff; color: var(--bay-deep); }
.cta-band .btn:hover { background: var(--bay-pale); }
.cta-band .btn:focus-visible { outline-color: #fff; }

.related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.related-links > div { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.related-links h3 { margin-bottom: .35rem; }
.related-links p { color: var(--ink-2); font-size: .97rem; }
.related-links a { font-weight: 650; }

/* -------------------------------------------------------- agents directory */

.dir-state { margin-top: 3.5rem; }
.dir-state:first-child { margin-top: 0; }
.dir-state > h2 { padding-bottom: .75rem; border-bottom: 1px solid var(--brass); margin-bottom: 0; }
.dir-city { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.dir-city > h3 { font-stretch: 125%; font-size: 1.25rem; margin: 0; }
.dir-agencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.agency { font-size: .96rem; }
.agency .name { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.agency p { margin: 0; color: var(--ink-2); }
.agency a { color: var(--ink); font-weight: 600; text-decoration: none; }
.agency a:hover { text-decoration: underline; }
.agency .lines { font-size: .88rem; margin-top: .3rem; }

/* ------------------------------------------------------ about: the company */

.timeline { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.timeline .yr { font-family: var(--font-brand); font-stretch: 125%; font-weight: 750; color: var(--bay); font-variant-numeric: tabular-nums; }
.timeline p { margin: 0; }

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin: 1.25rem 0 1.5rem; }
.people > div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.people h3 { margin: 0 0 .15rem; }
.people .role { color: var(--ink-2); font-size: .92rem; margin: 0 0 .6rem; }
.people p { font-size: .95rem; }
.prose .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 1.25rem 0 0; border-top: 1px solid var(--brass); }
.fact-grid b { display: block; font-family: var(--font-brand); font-stretch: 125%; font-weight: 750; font-size: 2rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact-grid span { color: var(--ink-2); font-size: .95rem; }

/* ----------------------------------------------------------- contact cards */

.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin: 1.25rem 0 1.5rem; }
.contact-grid > div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.contact-grid h3 { margin: 0 0 .3rem; }
.contact-grid .phone { font-family: var(--font-brand); font-stretch: 112%; font-weight: 700; font-size: 1.3rem; margin: 0 0 .3rem; }
.contact-grid .phone a { color: var(--ink); text-decoration: none; }
.contact-grid .phone a:hover { text-decoration: underline; }
.contact-grid p { color: var(--ink-2); font-size: .95rem; margin: 0 0 .3rem; }
.prose .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.addr { font-style: normal; line-height: 1.6; }

/* ------------------------------------------------------- stories and news */

.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.story-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.story-card .ph { margin: 0 0 1rem; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.story-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.story-card:hover .ph img { opacity: .9; }
.story-card .tag { font-size: .88rem; color: var(--ink-2); margin: 0 0 .35rem; }
.story-card h3 { font-stretch: 112%; font-size: 1.35rem; margin: 0 0 .5rem; }
.story-card:hover h3 { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.story-card p { color: var(--ink-2); font-size: .97rem; margin: 0 0 .5rem; }
.story-card time { font-size: .88rem; color: var(--ink-3); }
.story-card.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.story-card.lead .ph { margin: 0; }
.story-card.lead h3 { font-stretch: 125%; font-size: 2rem; }

.news-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.news-list li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.news-list time { color: var(--ink-2); font-size: .95rem; font-variant-numeric: tabular-nums; padding-top: .15rem; }
.news-list h3 { font-stretch: 112%; font-size: 1.25rem; margin: 0 0 .35rem; }
.news-list h3 a { color: var(--ink); text-decoration: none; }
.news-list h3 a:hover { text-decoration: underline; }
.news-list p { color: var(--ink-2); margin: 0; font-size: .97rem; }

.article-wrap { padding-top: 2.5rem; padding-bottom: 4.5rem; }
.article { max-width: 46rem; }
.article-head h1 { font-size: 2.9rem; line-height: 1.08; margin-bottom: 1rem; }
.article-head .tag { font-size: .92rem; color: var(--ink-2); margin: 0 0 .75rem; }
.byline { color: var(--ink-2); font-size: .95rem; margin: 0 0 2rem; }
.byline b { color: var(--ink); }
.article-hero { margin: 0 0 .6rem; max-width: 64rem; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.figcap { font-size: .9rem; color: var(--ink-2); margin: 0 0 2.25rem; max-width: 46rem; }
.article-body .opener { font-size: 1.2rem; line-height: 1.55; }
.article-body h2 { font-size: 1.6rem; margin: 2.5rem 0 .8rem; }
.article-body ul, .article-body ol { padding-left: 1.2rem; margin: 0 0 1.25rem; }
.article-body li { margin-bottom: .45rem; }
.pullquote { margin: 2.25rem 0; padding: 1.25rem 0 0; border-top: 1px solid var(--brass); }
.pullquote p { font-family: var(--font-brand); font-stretch: 112%; font-weight: 600; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin: 0 0 .6rem; }
.pullquote cite { font-style: normal; color: var(--ink-2); font-size: .95rem; }
.glance { background: var(--paper); padding: 1.4rem 1.6rem .5rem; margin: 2rem 0; }
.glance h2 { font-size: 1.25rem !important; font-stretch: 112%; margin: 0 0 .75rem !important; }
.log { list-style: none; padding: 0 !important; margin: 1rem 0 1.5rem; }
.log li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); margin: 0 !important; }
.log .t { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bay); }
.article-foot { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.article-foot p { margin: 0; color: var(--ink-2); font-size: .9rem; flex: 1 1 20rem; }
.release-end { color: var(--ink-2); font-size: .95rem; }
.about-box { background: var(--paper); padding: 1.25rem 1.5rem; margin: 2rem 0 0; font-size: .95rem; }
.about-box h2 { font-size: 1.1rem !important; font-stretch: 112%; margin: 0 0 .5rem !important; }
.about-box p { color: var(--ink-2); }
.about-box p:last-child { margin-bottom: 0; }

.more { padding-top: 3.5rem; padding-bottom: 5rem; border-top: 1px solid var(--rule); }
.more > h2 { font-size: 1.6rem; margin-bottom: 2rem; }

/* ------------------------------------------------------------------- legal */

.legal-updated { color: var(--ink-2); font-size: .95rem; }
.toc { padding: 1rem 0 0; border-top: 1px solid var(--brass); }
.toc ol { padding-left: 1.2rem; margin: 0; font-size: .95rem; }
.toc li { margin-bottom: .4rem; }

/* ------------------------------------------------------------- narrow view */

@media (max-width: 1100px) {
  .dir-city { grid-template-columns: 1fr; gap: .75rem; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .page-head-grid, .page-body, .page-body.single, .story-card.lead { grid-template-columns: 1fr; }
  .page-head-text { padding: 2.5rem 1.15rem; }
  .page-head h1, .article-head h1 { font-size: 2.3rem; }
  .page-body { gap: 3rem; }
  .aside-panel, .aside-stack { position: static; }
  .cover-list, .state-split, .related-links, .dir-agencies, .people, .prose .people,
  .contact-grid, .prose .contact-grid, .story-grid, .more .story-grid, .fact-grid { grid-template-columns: 1fr; }
  .def-list { grid-template-columns: 1fr; }
  .def-list dt { border-bottom: 0; padding-bottom: 0; }
  .news-list li, .timeline li, .log li { grid-template-columns: 1fr; gap: .3rem; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .cta-band .btn { margin-left: 0; }
  .plain-table { font-size: .9rem; display: block; overflow-x: auto; }
}

/* Error and not-built pages: the monkey illustration beside the facts.
   Dave's ask, 2026-10-18: every site's error page carries a funny cartoon of
   monkeys, an exception to the site's "no jokes" register that applies to
   these two pages only. */
.nb-with-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 3rem; align-items: start; }
.nb-art { margin: .5rem 0 0; }
.nb-art img { display: block; width: 100%; height: auto; border: 1px solid var(--line, #d9dde3); }
@media (max-width: 900px) { .nb-with-art { grid-template-columns: 1fr; gap: 2rem; } }