/* =========================================================================
Glucagon Research — reset, typography, layout utilities
Requires tokens.css.
The Manrope belongs in (see _partials/header.html); the
@import below is a safety net so a page never renders in a fallback face.
========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
/* ---------- reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1, "tnum" 0;
overflow-x: clip; /* never `hidden` — it detaches position:fixed on iOS */
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; border: 0; }
/* is a wrapper only - the ![]()
keeps the parent's layout box. */
picture { display: contents; }
picture[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-9) 0; }
::selection { background: var(--mint-200); color: var(--n-900); }
/* ---------- type ---------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
font-weight: var(--fw-semibold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text);
text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); text-wrap: balance; }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); text-wrap: balance; }
.display-sm { font-size: var(--fs-display-sm); line-height: 1.12; letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); text-wrap: balance; }
.lede { font-size: 19px; line-height: 1.58; color: var(--text-soft); max-width: 58ch; }
.small { font-size: var(--fs-sm); }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.text-muted{ color: var(--muted); }
.text-brand{ color: var(--brand); }
.measure { max-width: 68ch; }
.tabular { font-variant-numeric: tabular-nums; }
strong, b { font-weight: var(--fw-semibold); }
/* ---------- focus --------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute; left: var(--s-5); top: -100px; z-index: 999;
background: var(--brand); color: #fff; padding: 10px 16px;
border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
transition: top var(--dur-2) var(--ease);
}
.skip-link:focus-visible { top: var(--s-5); color: #fff; }
/* ---------- layout utilities ---------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--surface { background: var(--surface); }
.section--tint { background: var(--bg-tint); }
/* 12-column grid; children opt in with .col-N (>=880px) */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap, var(--s-8)); }
.grid--tight { --grid-gap: var(--s-5); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 880px) {
.col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; }
}
@media (max-width: 879px) {
.grid > * { grid-column: 1 / -1; }
}
/* vertical stack with one gap variable */
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-5)); }
.stack--xs { --stack: var(--s-3); }
.stack--sm { --stack: var(--s-4); }
.stack--lg { --stack: var(--s-8); }
.stack--xl { --stack: var(--s-10); }
/* horizontal group that wraps */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-4)); }
.cluster--xs { --cluster: var(--s-2); }
.cluster--sm { --cluster: var(--s-3); }
.cluster--lg { --cluster: var(--s-7); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.flow > * + * { margin-top: var(--s-5); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.no-scroll { overflow: hidden; }
/* brand pattern surface — the logo icon at 6%, never a photo background */
.pattern-bg {
background-color: var(--surface);
background-image: url("../img/pattern.svg");
background-repeat: repeat;
background-size: 160px 160px;
}
/* ---------- print --------------------------------------------------------- */
@media print {
@page { margin: 16mm; }
html { scroll-behavior: auto; }
body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
.site-header, .site-footer__nav, .drawer, .nav-toggle, .header-actions,
.btn, .pagination, .search, .no-print { display: none !important; }
.card, .panel, .coa-table, .spec-table {
box-shadow: none !important;
border: 1px solid #999 !important;
background: #fff !important;
break-inside: avoid;
}
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
.accordion__panel { display: block !important; height: auto !important; }
h1, h2, h3 { break-after: avoid; }
table { break-inside: auto; }
tr, img { break-inside: avoid; }
}