/*
* isthiscovered.org self-hosted webfonts.
*
* Public Sans (U.S. Web Design System) — SIL Open Font License, Version 1.1.
* Source: github.com/uswds/public-sans release v2.001 (official OFL build).
* Subsets are Latin only, hinting stripped, woff2; see OFL.txt beside this
* file for the full license and copyright notice.
*
* The "Public Sans Fallback" family is a metric-matched Arial stand-in so the
* font-display: swap period holds the same line box and advance widths as the
* final webfont, minimizing cumulative layout shift. It is now wired into the
* active font stack via SiteConfig.theme.sansFontStack / displayFontStack.
*/
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/public-sans-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/public-sans-latin-700.woff2") format("woff2");
}
/*
* Metric-matched Arial fallback. Descriptors follow the Chrome for
* Developers method ("Improved font fallbacks", Hempenius) / CSS Fonts 4:
*
* size-adjust = avgCharWidth(web) / avgCharWidth(fallback)
* ascent-override = webAscent / (webUPM * size-adjust)
* descent-override = |webDescent| / (webUPM * size-adjust)
* line-gap-override = webLineGap / (webUPM * size-adjust)
*
* avgCharWidth is the per-em mean glyph advance over the documented
* representative set [A-Za-z0-9 + space], measured on the official Public
* Sans v2.001 TTFs and the system Arial Regular / Arial Bold faces. Public
* Sans sets fsSelection bit 7 (USE_TYPO_METRICS); its OS/2 typo and hhea
* vertical metrics agree (ascent 1900, descent -450, lineGap 0, UPM 2000),
* so the overrides are platform-independent. Arial is narrower than Public
* Sans at both weights, so size-adjust > 100% enlarges it onto the Public
* Sans advance grid; the overrides then restore the Public Sans line box.
* Each face references its weight-matched Arial outline — local("Arial") at
* 400 and local("Arial Bold") / local("Arial-BoldMT") at 700 — so the 700
* fallback renders a true Arial Bold rather than a faux-bolded Regular.
*
* Public Sans Regular (400) -> Arial
* avgCharWidth: web 0.593175em, fallback 0.574289em
* size-adjust = 103.29% ascent 91.98% descent 21.78% line-gap 0%
* Public Sans Bold (700) -> Arial Bold
* avgCharWidth: web 0.614103em, fallback 0.598904em
* size-adjust = 102.54% ascent 92.65% descent 21.94% line-gap 0%
*/
@font-face {
font-family: "Public Sans Fallback";
font-style: normal;
font-weight: 400;
src: local("Arial");
ascent-override: 91.98%;
descent-override: 21.78%;
line-gap-override: 0%;
size-adjust: 103.29%;
}
@font-face {
font-family: "Public Sans Fallback";
font-style: normal;
font-weight: 700;
src: local("Arial Bold"), local("Arial-BoldMT");
ascent-override: 92.65%;
descent-override: 21.94%;
line-gap-override: 0%;
size-adjust: 102.54%;
}
/* ------------------------------------------------------------------ */
/* isthiscovered.org brand visual layer ("Plain answer machine") */
/* */
/* Loaded on every page via , or on a descendant span inside a , to render the
value in verdict color at 700 weight. Scoped to table cells so they cannot
match the shared hero verdict classes (.answer-hero .verdict-word.verdict-*
lives outside any td). Existing tables are unchanged — content is frozen. */
td.verdict-yes,
td .verdict-yes {
color: var(--verdict-yes, var(--ink));
font-weight: 700;
}
td.verdict-no,
td .verdict-no {
color: var(--verdict-no, var(--ink));
font-weight: 700;
}
/* ------------------------------------------------------------------ */
/* Expressive system v2 */
/* ------------------------------------------------------------------ */
:root {
--itc-teal: #0f766e;
--itc-teal-soft: #e8f4f2;
--itc-cobalt: #1d4ed8;
--itc-cobalt-soft: #eef3ff;
--itc-amber: #b45309;
--itc-amber-soft: #fff3e6;
--itc-violet: #6d28d9;
--itc-violet-soft: #f3eeff;
--itc-slate: #475569;
--itc-slate-soft: #f1f5f9;
/* Ledger, illustrated: soft shadow scale for editorial plates. */
--shadow-soft: 0 1px 2px rgb(11 18 32 / 4%), 0 12px 32px -12px rgb(11 18 32 / 12%);
--shadow-lift: 0 2px 4px rgb(11 18 32 / 5%), 0 24px 48px -16px rgb(11 18 32 / 18%);
}
.family-teal {
--family: var(--itc-teal);
--family-soft: var(--itc-teal-soft);
}
.family-cobalt {
--family: var(--itc-cobalt);
--family-soft: var(--itc-cobalt-soft);
}
.family-amber {
--family: var(--itc-amber);
--family-soft: var(--itc-amber-soft);
}
.family-violet {
--family: var(--itc-violet);
--family-soft: var(--itc-violet-soft);
}
.family-slate {
--family: var(--itc-slate);
--family-soft: var(--itc-slate-soft);
}
/* Wider gutters than the shared base (1.25rem): ITC desktop rhythm. */
.wrap,
.prose-wrap {
padding-inline: 2rem;
}
@media (max-width: 40rem) {
.wrap,
.prose-wrap {
padding-inline: 1.25rem;
}
}
.site-header {
border-bottom-color: var(--line);
}
.site-header .wrap {
padding-block: 1.15rem;
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 0;
font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
letter-spacing: -0.035em;
}
.wordmark-segment--base {
color: #15181e;
}
.wordmark-segment--accent {
color: var(--itc-teal);
}
.wordmark-segment--badge {
color: var(--itc-teal);
letter-spacing: -0.02em;
}
.wordmark:hover .wordmark-segment--base {
color: #15181e;
}
.wordmark:hover .wordmark-segment--badge {
color: var(--itc-teal);
}
/* Nav micro-labels per the ledger spec. Scoped under .site-header because
base.css loads after brand.css: equal-specificity ties lose to base. */
.site-header .site-nav {
gap: 2.25rem;
}
.site-header .site-nav a {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--itc-slate);
padding-bottom: 0.2rem;
border-bottom: 2px solid transparent;
transition:
color 0.15s,
border-color 0.15s;
}
.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current="page"] {
color: var(--ink);
border-bottom-color: var(--itc-teal);
}
/* Breadcrumbs: ledger micro-label treatment (uppercase, tracked, slate).
Scoped under main for the same load-order reason. */
main .breadcrumbs {
margin-bottom: 1.25rem;
}
main .breadcrumbs ol {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--itc-slate);
}
main .breadcrumbs a {
color: var(--itc-slate);
}
main .breadcrumbs a:hover {
color: var(--itc-teal);
}
main .breadcrumbs [aria-current="page"] {
color: var(--ink);
}
footer.site-footer {
margin-top: 4rem;
border-top: 0;
background: #122126;
color: #c7d7d6;
}
footer.site-footer .footer-heading {
color: #fff;
}
footer.site-footer a,
footer.site-footer .small {
color: #c7d7d6;
}
footer.site-footer a:hover {
color: #8de0d8;
}
footer.site-footer .fineprint {
border-top-color: #355157;
color: #a8bcbb;
}
footer.site-footer .footer-wit {
color: #8de0d8;
font-family: var(--font-sans);
font-style: normal;
font-weight: 700;
}
.breadcrumbs--itc {
margin-bottom: 1.25rem;
}
.breadcrumbs--itc ol {
gap: 0.35rem;
}
.breadcrumbs--itc li:not(:last-child)::after {
color: color-mix(in srgb, var(--family, var(--itc-teal)) 45%, #64748b);
}
.breadcrumbs--itc a {
color: #475569;
font-weight: 700;
}
.breadcrumbs--itc [aria-current="page"],
.qa-hero .breadcrumbs [aria-current="page"] {
color: var(--ink);
font-weight: 700;
}
.page-intro,
.industry-hero {
margin-top: -2.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--family) 28%, #cbd5e1);
padding-block: 2.5rem 2.75rem;
background: linear-gradient(115deg, var(--family-soft) 0%, #fff 82%);
}
.page-intro h1,
.industry-hero h1 {
max-width: 52rem;
font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
}
.page-intro .lede,
.industry-hero .lede {
max-width: 52rem;
margin-top: 0.85rem;
margin-bottom: 0;
color: #475569;
font-size: 1.08rem;
}
.context-pill {
display: block;
width: fit-content;
color: var(--itc-teal);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.055em;
line-height: 1.4;
text-transform: uppercase;
}
/* Family defaults use :where() (zero specificity) so an explicit
.family-* class on the same element always wins. */
:where(.branded-page) {
--family: var(--itc-teal);
--family-soft: var(--itc-teal-soft);
}
.branded-page .section h2 {
border-left: 0.3rem solid var(--family);
padding-left: 0.75rem;
}
/* Ledger question rows: ink top rule, hairline rows, and a family-color
tick that animates in at the row's left edge over a soft gradient wash.
No negative-margin bleed — rows keep their geometry on hover. */
.branded-page .q-list {
border-top: 2px solid var(--ink);
}
.branded-page .q-list li {
border-color: color-mix(in srgb, var(--family) 18%, var(--line));
}
.branded-page .q-list .q-list-link {
position: relative;
padding: 1.35rem 1rem 1.35rem 1.5rem;
transition: background 180ms ease;
}
.branded-page .q-list .q-list-link::before {
position: absolute;
top: 1.35rem;
bottom: 1.35rem;
left: 0;
width: 3px;
background: var(--family);
content: "";
transform: scaleY(0);
transform-origin: top;
transition: transform 200ms ease-out;
}
.branded-page .q-list .q-list-link:hover {
background: linear-gradient(90deg, var(--family-soft), transparent 70%);
}
.branded-page .q-list .q-list-link:hover::before,
.branded-page .q-list .q-list-link:focus-visible::before {
transform: scaleY(1);
}
/* Inline verdict words lead question titles; only explicit verdicts color. */
.q-list .verdict-word.verdict-yes {
color: var(--verdict-yes);
}
.q-list .verdict-word.verdict-no {
color: var(--verdict-no);
}
.q-list .verdict-word.verdict-depends {
color: var(--verdict-depends);
}
.branded-page .what-changed {
border-color: color-mix(in srgb, var(--family) 30%, var(--line));
border-left: 0.35rem solid var(--family);
background: var(--family-soft);
}
/* Full-bleed question section: hairline-framed, transparent background so
no color band sits between the intro band and the footer. */
.wash-band {
margin-top: 3.5rem;
border-block: 1px solid var(--line);
padding-block: 3.25rem 3.75rem;
}
/* Homepage: a real two-column editorial hero with photography. */
.hero {
background: linear-gradient(110deg, var(--itc-teal-soft) 0 58%, #dcefeb 58% 100%);
}
.hero .hero-qmark {
right: 46%;
color: rgb(15 118 110 / 7%);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.hero-copy {
padding-block: 0.75rem;
}
.hero .context-pill {
margin-bottom: 1rem;
}
.hero h1 {
font-size: clamp(3rem, 2rem + 4.2vw, 5.5rem);
line-height: 0.98;
}
.hero-media {
min-width: 0;
}
.brand-photo {
margin: 0;
}
.brand-photo picture {
display: block;
overflow: hidden;
border-radius: 0;
background: #dbe4e7;
}
.brand-photo__image {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 220ms ease;
}
.hero-media .brand-photo picture {
border: 0.32rem solid #fff;
border-radius: 0;
box-shadow: 0 1.5rem 3rem rgb(15 49 56 / 18%);
transform: rotate(1deg);
}
/* Homepage category navigation. Scoped under main because base.css loads
after brand.css — equal-specificity ties lose to base. */
main .industry-chip-grid {
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0.15rem 2rem;
}
:where(.industry-chip) {
--family: var(--itc-teal);
--family-soft: var(--itc-teal-soft);
}
/* Ledger directory rows: square family marker + left-aligned label.
Icon circles are hidden — category color rides the marker. */
main .industry-chip {
flex-direction: row;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.4rem;
text-align: left;
}
main .industry-chip::before {
width: 7px;
height: 7px;
flex: none;
background: var(--family);
content: "";
}
main .industry-chip .industry-icon {
display: none;
}
main .industry-chip:hover {
background: var(--family-soft);
}
main .industry-chip:hover .industry-label {
color: var(--family);
}
.tile-grid {
display: grid;
}
/* Family defaults use :where() (zero specificity) so an explicit
.family-* class on the same element always wins. */
:where(.tile) {
--family: var(--itc-teal);
--family-soft: var(--itc-teal-soft);
}
/* One ledger grid everywhere: the hairline-framed system the homepage
uses for coverage lines is the same system on the /coverage hub —
no rounded cards floating in gaps. Scoped under main because base.css
loads after brand.css: equal-specificity ties lose to base. */
main .tile-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid #cbd5e1;
border-left: 1px solid #cbd5e1;
background: transparent;
}
main .tile {
position: relative;
min-height: 10.75rem;
padding: 1.35rem 1.4rem 2.8rem;
border: 0;
border-right: 1px solid #cbd5e1;
border-bottom: 1px solid #cbd5e1;
border-radius: 0;
background: #fff;
}
main .tile::after {
position: absolute;
right: 1.4rem;
bottom: 1rem;
color: var(--family);
font-size: 1.15rem;
content: "→";
}
/* Ledger marker replaces the old 0.3rem family top bar. */
main .tile .tile-title {
display: flex;
align-items: center;
gap: 0.6rem;
}
main .tile .tile-title::before {
width: 7px;
height: 7px;
flex: none;
background: var(--family);
content: "";
}
main .tile:hover {
border-color: var(--family);
background: color-mix(in srgb, var(--family-soft) 48%, #fff);
box-shadow: none;
transform: none;
}
main .tile:hover .tile-title {
color: var(--family);
}
@media (max-width: 58rem) {
main .tile-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40rem) {
main .tile-grid {
grid-template-columns: 1fr;
}
}
/* Industry photography and detail pages. The industries index uses the
same hairline-framed ledger grid as the coverage tiles — a contact
sheet, not a scatter of rounded cards. */
.industry-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-block: 2rem;
border-top: 1px solid #cbd5e1;
border-left: 1px solid #cbd5e1;
}
:where(.industry-photo-card) {
--family: var(--itc-slate);
--family-soft: var(--itc-slate-soft);
overflow: hidden;
border: 0;
border-right: 1px solid #cbd5e1;
border-bottom: 1px solid #cbd5e1;
border-radius: 0;
background: #fff;
color: var(--body);
}
.industry-photo-card:hover {
background: color-mix(in srgb, var(--family-soft) 55%, #fff);
box-shadow: none;
text-decoration: none;
transform: none;
}
.industry-photo-card:hover .tile-title {
color: var(--family);
}
@media (max-width: 58rem) {
.industry-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.industry-card-photo {
position: relative;
display: block;
}
.industry-card-label {
position: absolute;
bottom: 0.8rem;
left: 0.9rem;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-shadow: 0 1px 2px rgb(11 18 32 / 45%);
text-transform: uppercase;
}
.industry-photo-card .brand-photo picture {
border-radius: 0;
}
.industry-photo-card .brand-photo__image {
aspect-ratio: 4 / 3;
}
.industry-photo-card:hover .brand-photo__image {
transform: scale(1.04);
}
.industry-card-copy {
display: flex;
min-height: 12rem;
flex-direction: column;
align-items: flex-start;
padding: 1rem 1.1rem 1.15rem;
}
.industry-card-copy .tile-title {
margin-top: 0.75rem;
color: var(--ink);
font-size: 1.05rem;
font-weight: 700;
}
.industry-description {
margin-top: 0.35rem;
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.5;
}
.industry-card-copy .count {
display: flex;
width: 100%;
align-items: baseline;
justify-content: space-between;
margin-top: auto;
border-top: 1px solid var(--line);
padding-top: 0.85rem;
color: var(--family);
font-size: var(--fs-xs);
font-weight: 700;
}
.count-arrow {
transition: transform 160ms ease;
}
.industry-photo-card:hover .count-arrow {
transform: translateX(3px);
}
.industry-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
/* Industry detail hero photo: the editorial plate treatment. */
.industry-hero .brand-photo picture {
border: 1px solid var(--line);
border-radius: 0;
box-shadow: var(--shadow-soft);
}
/* Trust/editorial pages (Ledger, illustrated): a short family rule above
the breadcrumb, generous rhythm, and square-marker section headings with
a trailing hairline. No card or gradient field behind the copy. The
optional editorial plate breaks out to the full wrap width. */
.trust-page {
--family: var(--itc-violet);
--family-soft: var(--itc-violet-soft);
}
.trust-intro {
padding-block: 2.5rem 0;
}
.trust-intro::before {
display: block;
width: 3rem;
height: 3px;
margin-bottom: 2.25rem;
background: var(--family);
content: "";
}
.trust-intro h1 {
font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
line-height: 1.1;
letter-spacing: -0.028em;
}
.trust-body {
padding-bottom: 2rem;
}
.trust-page .prose h2,
.trust-page .section h2 {
display: flex;
align-items: center;
gap: 0.9rem;
}
.trust-page .prose h2::before,
.trust-page .section h2::before {
width: 7px;
height: 7px;
flex: none;
background: var(--family);
content: "";
}
.trust-page .prose h2::after,
.trust-page .section h2::after {
height: 1px;
flex: 1;
background: var(--line);
content: "";
}
.trust-plate {
max-width: var(--max-w);
margin: 2.75rem auto 0;
padding-inline: 2rem;
}
.trust-plate picture {
border: 1px solid var(--line);
border-radius: 0;
box-shadow: var(--shadow-soft);
}
.trust-plate .brand-photo__image {
aspect-ratio: 12 / 5;
}
@media (max-width: 40rem) {
.trust-plate {
padding-inline: 1.25rem;
}
.trust-plate .brand-photo__image {
aspect-ratio: 4 / 3;
}
}
.expert-card {
border-color: color-mix(in srgb, var(--family, var(--itc-violet)) 28%, var(--line));
background: #fff;
box-shadow: 0 0.7rem 1.8rem rgb(15 23 42 / 6%);
}
.avatar {
background: var(--family-soft, var(--itc-violet-soft));
color: var(--family, var(--itc-violet));
}
.credentials li {
border-color: color-mix(in srgb, var(--family, var(--itc-violet)) 34%, var(--line));
background: var(--family-soft, var(--itc-violet-soft));
color: var(--family, var(--itc-violet));
}
/* Question pages inherit family color from the linked coverage crumb.
Verdict red/green remain isolated to explicit answer words. */
.qa-hero {
--family: var(--itc-teal);
--family-soft: var(--itc-teal-soft);
border-bottom-color: color-mix(in srgb, var(--family) 28%, var(--line));
background: linear-gradient(110deg, var(--family-soft), #fff 82%);
}
.qa-hero:has(a[href="/cyber/"], a[href="/professional-liability/"]) {
--family: var(--itc-cobalt);
--family-soft: var(--itc-cobalt-soft);
}
.qa-hero:has(
a[href="/commercial-property/"],
a[href="/commercial-auto/"],
a[href="/business-interruption/"]
) {
--family: var(--itc-amber);
--family-soft: var(--itc-amber-soft);
}
.qa-hero:has(
a[href="/directors-and-officers/"],
a[href="/malpractice/"],
a[href="/surety-bonds/"]
) {
--family: var(--itc-violet);
--family-soft: var(--itc-violet-soft);
}
.qa-hero:has(a[href="/special-event/"], a[href="/other/"]) {
--family: var(--itc-slate);
--family-soft: var(--itc-slate-soft);
}
.qa-hero .qmark::before {
color: color-mix(in srgb, var(--family) 8%, transparent);
}
.error-page {
margin-top: -2.5rem;
background: linear-gradient(115deg, var(--itc-slate-soft), #fff 72%);
}
@media (max-width: 56rem) {
.hero-grid,
.industry-hero-grid {
grid-template-columns: 1fr;
}
.hero {
background: linear-gradient(180deg, var(--itc-teal-soft), #fff);
}
.hero-media,
.industry-hero .brand-photo {
max-width: 42rem;
}
.hero .hero-qmark {
right: -1rem;
}
}
@media (max-width: 40rem) {
.site-header .wrap {
align-items: center;
}
.site-nav {
width: 100%;
gap: 1rem;
}
.page-intro,
.industry-hero {
padding-block: 1.75rem 2rem;
}
.industry-card-grid {
grid-template-columns: 1fr;
}
.breadcrumbs--itc ol {
gap: 0.15rem;
}
.breadcrumbs--itc li:not(:last-child)::after {
margin-inline: 0.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.brand-photo__image,
.industry-photo-card,
main .tile,
.site-header .site-nav a,
.count-arrow,
.branded-page .q-list .q-list-link,
.branded-page .q-list .q-list-link::before {
transition: none;
}
}
/* ------------------------------------------------------------------ */
/* Homepage composition: institutional reference, not generic SaaS. */
/* ------------------------------------------------------------------ */
/* Featured guide: a single framed plate. No divider below it — dividers
belong between items, and there is only one. */
.home-feature .feature-card {
margin-top: 1.5rem;
border: 1px solid color-mix(in srgb, var(--family) 30%, var(--line));
border-left: 0.35rem solid var(--family);
border-radius: 0;
padding: 1.6rem 1.75rem 1.7rem;
background: #fff;
}
.home-feature .feature-card .kicker {
margin-bottom: 0.6rem;
color: var(--family);
}
.home-feature .feature-card .kicker::before {
background: var(--family);
}
.home-feature .feature-card h3 {
margin: 0 0 0.65rem;
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem);
letter-spacing: -0.02em;
line-height: 1.3;
}
.home-feature .feature-card h3 a {
color: var(--ink);
}
.home-feature .feature-card h3 a:hover {
color: var(--family);
text-decoration: none;
}
.home-feature .feature-card h3 + p {
max-width: 44rem;
margin: 0;
color: #334155;
font-size: 1.05rem;
line-height: 1.6;
}
/* Recently published: a ledger of record, rules between entries only. */
.recent-list {
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
}
.recent-list li {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr) auto;
gap: 0.4rem 1.75rem;
align-items: baseline;
padding-block: 1.05rem;
}
.recent-list li + li {
border-top: 1px solid #e2e8f0;
}
main .recent-kind {
color: var(--itc-teal);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.recent-list li > a {
color: var(--ink);
font-weight: 700;
}
.recent-list li > a:hover {
color: var(--itc-teal);
text-decoration: none;
}
main .recent-date {
color: var(--itc-slate);
font-size: var(--fs-sm);
text-align: right;
}
/* The colophon: library statistics and method as the closing band,
opened by a heavy ink rule. */
.home-authority {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
margin-bottom: 2rem;
padding-top: 2.75rem;
border-top: 2px solid var(--ink);
}
.authority-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.authority-stats p {
margin: 0;
color: var(--itc-slate);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
line-height: 1.5;
text-transform: uppercase;
}
.authority-stats strong {
display: block;
margin-bottom: 0.45rem;
color: var(--ink);
font-size: clamp(2.6rem, 2rem + 2.4vw, 3.75rem);
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
}
.authority-copy h2 {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 1rem;
color: var(--itc-slate);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.authority-copy h2::before {
width: 7px;
height: 7px;
flex: none;
background: var(--family);
content: "";
}
.authority-copy > p {
max-width: 40rem;
margin: 0;
color: var(--body);
font-size: 1.12rem;
line-height: 1.65;
}
.authority-copy .more {
display: inline-block;
margin-top: 1rem;
color: var(--family);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
}
@media (max-width: 58rem) {
.home-authority {
grid-template-columns: 1fr;
gap: 2.25rem;
}
}
@media (max-width: 40rem) {
.recent-list li {
grid-template-columns: minmax(0, 1fr) auto;
}
.recent-kind {
grid-column: 1 / -1;
}
.authority-stats {
gap: 1rem;
}
}
html .hero--home {
min-height: 34rem;
padding-block: 0;
border-bottom: 0;
background: #123c3d;
color: #fff;
}
.hero--home .hero-grid {
min-height: 34rem;
grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.92fr);
gap: clamp(3rem, 6vw, 6rem);
}
.hero--home .hero-copy {
padding-block: 4.5rem;
}
.hero--home .context-pill {
color: #9ee4dd;
letter-spacing: 0.09em;
}
.hero--home h1 {
max-width: 39rem;
color: #fff;
font-size: clamp(3.75rem, 2.4rem + 4.5vw, 6.25rem);
letter-spacing: -0.045em;
line-height: 0.94;
text-wrap: balance;
}
.hero--home .hero-wit {
max-width: 34rem;
margin-top: 1.5rem;
color: #fff;
font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
line-height: 1.35;
}
html .hero--home .lede {
margin-top: 1rem;
color: #c7d7d6;
font-size: 1.05rem;
}
.hero--home .hero-copy > .search-slot {
max-width: 36rem;
margin-top: 2rem;
--pagefind-ui-background: #fff;
--pagefind-ui-border: #759392;
--pagefind-ui-primary: var(--itc-teal);
--pagefind-ui-text: #15181e;
}
.hero--home .search-fallback {
color: #c7d7d6;
}
.hero--home .search-fallback a {
color: #9ee4dd;
}
.hero--home .hero-qmark {
top: -3rem;
right: 45%;
color: rgb(255 255 255 / 5%);
font-size: 21rem;
}
.hero--home .hero-media {
align-self: stretch;
padding-block: 2.25rem;
}
.hero--home .hero-media .brand-photo,
.hero--home .hero-media .brand-photo picture,
.hero--home .hero-media .brand-photo__image {
height: 100%;
}
.hero--home .hero-media .brand-photo picture {
border: 1px solid rgb(255 255 255 / 35%);
border-radius: 0;
box-shadow: none;
transform: none;
}
.hero--home .hero-media .brand-photo__image {
min-height: 27rem;
aspect-ratio: auto;
}
.home-library {
padding-top: 0.5rem;
}
.home-section {
margin-top: clamp(4.5rem, 7vw, 6.5rem);
}
.home-section .section-head {
align-items: center;
padding-bottom: 0.85rem;
border-bottom: 1px solid #94a3b8;
}
.home-section .section-head h2 {
font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.65rem);
letter-spacing: -0.025em;
}
.home-section .section-head .more {
color: #0b625d;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
}
.home-section--industries .industry-chip-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 1.5rem;
margin: 0;
padding-top: 0.75rem;
}
.home-section--industries .industry-chip {
min-height: 4.75rem;
flex-direction: row;
justify-content: flex-start;
gap: 0.85rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
border-radius: 0;
text-align: left;
}
.home-section--industries .industry-chip:hover {
background: transparent;
}
.home-section--industries .industry-chip .industry-icon {
width: 2.45rem;
height: 2.45rem;
flex: 0 0 auto;
border-radius: 0.3rem;
}
.home-section--industries .industry-label {
color: var(--ink);
font-size: 0.86rem;
font-weight: 700;
line-height: 1.25;
}
/* The coverage grid frames itself with hairlines; the section head carries
no divider of its own, so there is exactly one rule above the grid. */
.home-section--coverage .section-head {
border-bottom: 0;
padding-bottom: 0;
}
.home-section--coverage .tile-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 1.5rem;
border-top: 1px solid #cbd5e1;
border-left: 1px solid #cbd5e1;
background: transparent;
}
.home-section--coverage .tile {
position: relative;
min-height: 10.75rem;
padding: 1.35rem 1.4rem 2.8rem;
border: 0;
border-right: 1px solid #cbd5e1;
border-bottom: 1px solid #cbd5e1;
border-radius: 0;
background: #fff;
}
.home-section--coverage .tile::after {
position: absolute;
right: 1.4rem;
bottom: 1rem;
color: var(--family);
font-size: 1.15rem;
content: "→";
}
.home-section--coverage .tile:hover {
border-color: var(--family);
background: color-mix(in srgb, var(--family-soft) 48%, #fff);
box-shadow: none;
transform: none;
}
.home-section--coverage .tile-title {
font-size: 1.03rem;
line-height: 1.35;
}
.home-section--coverage .tile p {
margin-top: 0.45rem;
line-height: 1.55;
}
/* "Other" is not a coverage line — it breaks out of the tile grid as a
full-width ledger row under a heavy ink rule instead of a stretched card. */
.home-section--coverage .tile:last-child {
display: flex;
min-height: 0;
grid-column: 1 / -1;
align-items: baseline;
gap: 0.75rem 2rem;
border-top: 2px solid var(--ink);
background: transparent;
padding: 1.15rem 1.4rem;
}
.home-section--coverage .tile:last-child p {
max-width: 40rem;
margin-top: 0;
}
.home-section--coverage .tile:last-child::after {
position: static;
margin-left: auto;
}
.home-section--questions {
margin-bottom: 1.5rem;
}
.home-section--questions .faq-list {
margin-top: 0;
}
.home-section--questions .faq-item {
display: grid;
grid-template-columns: 2.75rem minmax(16rem, 0.72fr) minmax(0, 1.28fr);
gap: 1.25rem 2.25rem;
align-items: start;
padding-block: 1.65rem 1.85rem;
}
/* Rules separate questions; nothing trails the last one. */
.home-section--questions .faq-item + .faq-item {
border-top: 1px solid #cbd5e1;
}
.home-section--questions .faq-number {
padding-top: 0.2rem;
color: var(--itc-teal);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.home-section--questions .faq-item h3 {
margin: 0;
font-size: 1.08rem;
line-height: 1.4;
}
.home-section--questions .faq-item p {
margin: 0;
color: #334155;
line-height: 1.65;
}
@media (max-width: 58rem) {
html .hero--home,
.hero--home .hero-grid {
min-height: auto;
background: #123c3d;
}
.hero--home .hero-grid {
grid-template-columns: 1fr;
gap: 0;
}
.hero--home .hero-copy {
padding-block: 3.5rem 2rem;
}
.hero--home .hero-media {
max-width: none;
padding-block: 0 2.5rem;
}
.hero--home .hero-media .brand-photo__image {
min-height: 19rem;
aspect-ratio: 16 / 9;
}
.home-section--industries .industry-chip-grid,
.home-section--coverage .tile-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-section--questions .faq-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}
.home-section--questions .faq-item p {
grid-column: 2;
}
}
/* ------------------------------------------------------------------ */
/* Document furniture: provenance, citations, review marks. */
/* ------------------------------------------------------------------ */
/* "Reviewed " is the trust signal — render it as a stamped seal,
not another gray byline segment. Scoped under main because base.css
loads after brand.css: equal-specificity ties lose to base. */
main .byline .reviewed {
align-self: center;
border: 1px solid color-mix(in srgb, var(--itc-teal) 45%, #cbd5e1);
border-radius: 999px;
padding: 0.12rem 0.6rem;
background: var(--itc-teal-soft);
color: #0b625d;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
/* Provenance strip separators: byline segments read as one ruled record
line (By A · Reviewed by B · Published … · ✓ Reviewed) instead of a
run of undifferentiated gray text. */
.qa-hero .byline {
gap: 0.35rem 0.9rem;
}
.qa-hero .byline > span + span::before {
margin-right: 0.9rem;
color: #94a3b8;
content: "·";
}
/* The review stamp is self-delimiting — no middot abutting the pill, and
none orphaned at the start of a wrapped line. */
.qa-hero .byline > span.reviewed::before {
content: none;
}
/* Citations and further reading get the ledger micro-label treatment:
small tracked caps with a trailing hairline, matching trust pages. */
main .sources,
main .related {
border-top-color: #cbd5e1;
}
main .sources h2,
main .related h2 {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--itc-slate);
}
main .sources h2::after,
main .related h2::after {
height: 1px;
flex: 1;
background: var(--line);
content: "";
}
main .sources li::marker {
color: var(--itc-teal);
font-weight: 700;
}
main .sources a {
font-weight: 700;
}
/* Framed surfaces are square: tiles, expert cards, industry cards, and
photo plates all share the ledger grid's zero radius. */
.trust-page .expert-card,
main .expert-card {
border-radius: 0;
}
/* In-document section headings carry the same square family marker the
hub and trust pages use — one heading system across the whole site.
Scoped under main so base.css's later load can't take the tie. */
main .prose h2 {
display: flex;
align-items: center;
gap: 0.7rem;
}
main .prose h2::before {
width: 7px;
height: 7px;
flex: none;
background: var(--family, var(--itc-teal));
content: "";
}
@media print {
main .byline .reviewed {
border-color: #15181e;
background: none;
color: #15181e;
}
}
@media (max-width: 40rem) {
.hero--home h1 {
font-size: clamp(3.2rem, 16vw, 4.4rem);
}
.home-section--industries .industry-chip-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap-inline: 1rem;
}
.home-section--coverage .tile-grid {
grid-template-columns: 1fr;
}
.home-section--questions .faq-item {
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0.75rem 1rem;
}
.home-section--coverage .tile:last-child {
grid-column: auto;
display: block;
min-height: 10.75rem;
}
.home-section--coverage .tile:last-child p {
margin-top: 0.45rem;
}
}