/* =========================================================================
 * The cq theme's own rules (2026-10-28): what moving cq.net's chrome onto
 * the intranet's code and Bootstrap 5 needed. cq-general/cq-style/cq-archive/
 * cq-issue.css are cq.net's stylesheets as they were.
 * ========================================================================= */
body.cq-site { background-color: #dde8f3 !important; }
/* The frame, as cq.net's newer pages draw it (header-new.php on Bootstrap 4):
   the container's 15px sides, and the header and menu pulled out to its edge
   (the menu's margin and padding are cq-style.css's .navbar) */
.cq-site .cq-container { position: relative; padding: 0 15px; }
.cq-header { margin: 0 -15px; }
.cq-header .header_wrap { padding: 0; }
.cq-hero { display: block; width: 100%; height: auto; margin-top: 10px; }
.cq-nav-search .form-control { min-width: 160px; }
/* Bootstrap 4's 30px gutters, which put cq.net's text 15px inside the frame */
.cq-content { --bs-gutter-x: 30px; margin: 0 -15px; padding: 15px 0 20px; }
.cq-sidebar { padding-top: 15px; }
.cq-footer { margin: 10px; padding: 14px 0 20px; border-top: 1px solid #dde8f3; text-align: center; color: #062364; font-size: 12px; }
.cq-footer p { margin: 0; font-size: 12px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; padding: 6px 10px; }
.skip-link:focus { left: 10px; }
.cq-sidebar .issue-sidebar { text-align: center; }
.cq-recent { list-style: none; padding: 0; margin: 6px 0 14px !important; }
.cq-recent li { margin: 4px 0; }
.cq-mdsg { padding: 0 10px; font-variant: small-caps; margin-top: 18px; }
.cq-logos img { width: 80%; height: auto; }
.cq-stay-head { font-weight: bold; color: #424242; margin: 14px 0 6px; }
.social-media-icons { display: flex; justify-content: center; gap: 10px; font-size: 24px; margin-bottom: 14px; }
.cq-support { padding: 10px 20px 0; }
.cq-breadcrumb { padding: 15px 0; margin: 0 0 6px; }
.cq-site .cq-breadcrumb a { color: #336699; text-decoration: none; }
.cq-site .cq-breadcrumb a:hover { text-decoration: underline; }
.archive-search .es_list_search input { max-width: 520px; }
.search-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.search-sort .es_list_sort { background: none; border: 0; padding: 0 6px; color: #336699; text-decoration: underline; cursor: pointer; }
.archive-child { padding-left: 16px; }

/* core's stylesheets colour headings for the intranet's dark banner; the
   magazine's are cq.net's blue (cq-style.css) */
.cq-site .cqtext h1, .cq-site .cqtext h1 a, .cq-site .cqtext h2, .cq-site .cqtext h2 a,
.cq-site .cqtext h3, .cq-site .cqtext h3 a, .cq-site .cq-sidebar h3 a, .cq-site .cq-sidebar h4 a { color: #336699; }
.cq-site .cqtext h1 a:hover, .cq-site .cqtext h3 a:hover { text-decoration: underline; }
.cq-site .cq-sidebar a { text-decoration: none; }
.cq-site .cq-sidebar a:hover { text-decoration: underline; }

/* cq.net's headings are Georgia, like its text, and its title links unlined */
.cq-site .cqtext h1, .cq-site .cqtext h2, .cq-site .cqtext h3, .cq-site .cqtext h4,
.cq-site .cq-sidebar h2, .cq-site .cq-sidebar h3, .cq-site .cq-sidebar h4 { font-family: Georgia, "Times New Roman", Times, serif; }
.cq-site .cqtext h1 a, .cq-site .cqtext h3 a { text-decoration: none; }

/* ------------------------------------------------------------------
 * Videos, photo galleries, Subscribe, the share link (CQArchive 1.0.6)
 * ---------------------------------------------------------------- */
.cq-video-issue { margin-top: 1.75rem; }
.cq-video-issue h2 small { font-size: .8em; font-weight: normal; color: #555; }
.cq-video { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0; }
.cq-video-thumb { flex: 0 0 96px; }
.cq-video-thumb img { width: 96px; height: auto; display: block; }
.cq-video h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.cq-video p { margin: 0 0 .4rem; }
.cq-video-length { font-weight: normal; color: #555; }
.cq-video-credit { font-style: italic; color: #555; }

.cq-gallery { margin-top: 1.75rem; }
.cq-gallery h2 small { font-size: .8em; font-weight: normal; color: #555; }
.cq-gallery-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.cq-gallery-photos figure { margin: 0; }
.cq-gallery-photos img { width: 100%; height: auto; display: block; }
.cq-gallery-photos figcaption { font-size: .85rem; margin-top: .35rem; }
.cq-gallery-photos .cq-credit { font-style: italic; color: #555; }

.cq-subscribe-form { max-width: 36rem; }
.cq-print-address summary { cursor: pointer; font-weight: bold; }
.cq-form-note, .cq-required-note { font-size: .85rem; color: #555; }

.article-share { margin: 1.5rem 0 1rem; }
.cq-staff { padding-left: 1.25rem; }
.cq-staff li { margin-bottom: .5rem; }

@media (max-width: 575.98px) {
    .cq-video-thumb { flex-basis: 64px; }
    .cq-video-thumb img { width: 64px; }
}

/* ------------------------------------------------------------------
 * The newer issues (CQArchive issue.twig's "newer" branch), as
 * chesapeakequarterly.net's _dynamic_issues/index.php draws them
 * ---------------------------------------------------------------- */
.cq-site .cqtext h1 { line-height: normal; margin: 0 0 10px; }
.cq-breadcrumb { margin-bottom: 0; }
.cq-site .issue-dateline { font-weight: 400; margin-bottom: 10px; }
.issue-newer .full-head { margin-bottom: .2em; }
.issue-newer .full-head img, .issue-newer-row img { display: block; width: 100%; height: auto; border: 0; }
.issue-newer .mobile-text { padding-top: 10px; padding-bottom: 8px; }
.issue-newer-row { --bs-gutter-x: 30px; margin: .4em -15px 0; padding: 5px 0; }
.issue-newer-row .mobile-text { padding-top: 0; }
.cq-site .cqtext .issue-newer-title { font-size: 21px !important; font-weight: 800; line-height: normal; margin: 0 0 10px; }
.cq-site .cqtext .issue-newer-lead .issue-newer-title { font-weight: 700; }
.cq-site .cqtext .issue-newer-title a { text-decoration: none; }
.cq-site .cqtext .issue-newer-title a:hover { text-decoration: underline; }
.issue-newer address.author { font-style: italic; margin: 0 0 10px; }
/* the teasers were written in Google Docs in Open Sans; the sanitizer keeps no
   font, so the face is the theme's */
.issue-newer-summary, .issue-newer-summary p { font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #212529; }
.issue-newer-summary p { margin: 0 0 8px; }

/* The sidebar, as their side.php: left-aligned in a 20px pad, the Related
   Links band across it */
.cq-sidebar .issue-sidebar { text-align: center; padding: 0 0 10px; }
.issue-sidebar .issue-aside, .issue-sidebar .cq-links { padding: 20px; text-align: left; }
.issue-sidebar .issue-pdf { text-align: center; margin: 0 0 15px; }
.issue-sidebar .issue-cover { text-align: center; margin: 0; }
.issue-sidebar .issue-cover img { max-width: 100%; height: auto; }
.issue-sidebar .issue-cover-blurb { text-align: left; font-size: .8em; font-style: italic; margin-top: 5px; }
.issue-sidebar .issue-description, .issue-sidebar .issue-description p { font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; margin-top: 10px; }
.issue-sidebar .issue-toc { margin: 0; padding: 0; }
.cq-site .issue-sidebar .issue-toc h3, .cq-site .issue-sidebar .cq-links h3 { margin: 0 0 10px; }
.issue-sidebar .issue-toc-list { list-style: none; padding: 0 !important; margin: 10px 20px 10px 0 !important; }
.issue-sidebar .issue-toc-list li { margin: 0 0 5px; font-size: 14px; line-height: 21px; }
.issue-sidebar .issue-toc-list .navlink { list-style: none; padding-left: 12px; margin: 3px 0 0; }
.issue-sidebar .issue-toc-list .current > a { font-weight: bold; }
.cq-site .cq-related { padding: 10px; margin: 0; background-color: #545454; font-weight: bold; color: #fff; font-size: 13px; text-align: left; }
.issue-sidebar .cq-links h4 { margin: 0 0 10px; }
.issue-sidebar .cq-recent { margin: 10px 20px 10px 0 !important; }
.issue-sidebar .cq-recent li { margin: 0 0 10px; }
.issue-sidebar .cq-links h4 a { font-weight: bold; }
.cq-recent { text-align: left; }

/* ------------------------------------------------------------------
 * The menu: core's nav.twig (Admin → Content → Navigation for the cq
 * site), behaving as the intranet's (core/assets/js/nav_menu.js),
 * dressed as cq.net's black bar (cq-style.css's .navbar / .nav-item)
 * ---------------------------------------------------------------- */
.cq-navrow { position: relative; display: flex; align-items: center; margin: 0 -15px; background: #000; min-height: 45px; }
.cq-navrow nav.navbar { flex: 1 1 auto; max-width: none; margin: 0; padding: 0 15px; background-color: #000 !important; min-height: 45px; }
.cq-navrow .navbar-nav { align-items: stretch; }
.cq-navrow .navbar-nav > li.nav-item { position: relative; display: flex; align-items: center; }
.cq-navrow .navbar-nav .nav-link,
.cq-navrow .navbar-nav button.nav-link {
    color: #fff !important; background: none; border: 0; border-right: thin solid #424242; border-radius: 0 !important;
    font-family: Georgia, "Times New Roman", serif; font-size: 13.5px !important; line-height: 20px;
    padding: 5px 1.3rem !important; height: auto; text-decoration: none;
}
.cq-navrow .navbar-nav > li.nav-item:hover > .nav-link,
.cq-navrow .navbar-nav > li.nav-item.is-open > .nav-link { background-color: #424242; }
.cq-navrow .navbar-nav .nav-link.active { text-decoration: underline; }
.cq-navrow .navbar-nav .fa-chevron-down, .cq-navrow .navbar-nav svg.fa-chevron-down { font-size: 9px; margin-left: 4px; transition: transform .15s ease; }
.cq-navrow .navbar-nav [aria-expanded="true"] > .fa-chevron-down, .cq-navrow .navbar-nav [aria-expanded="true"] > svg { transform: rotate(180deg); }
/* a panel: cq.net's black dropdown */
.cq-navrow .navbar-nav > li > .dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 1040; min-width: 220px;
    margin: 0 !important; padding: 0; border: 0; border-radius: 0; background: #000;
}
.cq-navrow .dropdown-menu li.dropdown-item { padding: 0; margin: 0; background: transparent; }
.cq-navrow .dropdown-menu a.dropdown-item {
    display: block; padding: 8px 1.3rem !important; color: #fff !important; background: #000;
    border: 0; border-bottom: thin solid #fff; font-size: 12.6px !important; white-space: nowrap; text-decoration: none;
}
.cq-navrow .dropdown-menu a.dropdown-item:hover, .cq-navrow .dropdown-menu a.dropdown-item:focus-visible { background: #424242; }
.cq-navrow .navbar-toggler { color: #fff; border: thin solid #424242; margin: 6px 0; padding: 4px 10px; }
.cq-navrow .navbar-toggler .fa-bars { color: #fff; }
.cq-navrow .notpublished { opacity: .6; font-style: italic; }
.cq-navrow .cq-nav-search { flex: 0 0 auto; margin: 0 15px 0 auto; }
.cq-navrow .cq-nav-search .form-control { padding: 5px; height: 30px; border-radius: 2px; font-size: 12.6px; min-width: 160px; }
.cq-navrow .cq-nav-search .btn { height: 30px; padding: 3px 10px; border-radius: 4px; }

/* below 992px: the menu folds into its toggle, panels open in place */
@media (max-width: 991.98px) {
    .cq-navrow { flex-wrap: wrap; }
    .cq-navrow nav.navbar { flex: 1 1 100%; order: 1; }
    .cq-navrow .cq-nav-search { position: absolute; top: 7px; right: 0; }
    .cq-navrow .navbar-collapse { flex-basis: 100%; }
    .cq-navrow .navbar-nav > li.nav-item { flex-wrap: wrap; }
    .cq-navrow .navbar-nav .nav-link, .cq-navrow .navbar-nav button.nav-link { flex: 1 1 auto; text-align: left; border-right: 0; border-bottom: thin solid #424242; padding: 10px 12px !important; }
    .cq-navrow .navbar-nav > li > .dropdown-menu { position: static; flex: 1 0 100%; min-width: 0; padding-left: 12px; }
    .cq-navrow .dropdown-menu a.dropdown-item { white-space: normal; border-bottom-color: #424242; }
}
@media (max-width: 420px) {
    .cq-navrow .cq-nav-search .form-control { min-width: 110px; width: 110px; }
}

/* ------------------------------------------------------------------
 * The account controls (core's account-nav.twig) for someone signed in:
 * small white controls in the ribbon, left of "Maryland Sea Grant", the
 * account menu dropping below as a white panel (the intranet's mdsg theme
 * does the same in its header). Core marks the labels .sr-only, Bootstrap
 * 4's name, so Bootstrap 5 here needs it defined.
 * ---------------------------------------------------------------- */
.cq-site .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cq-header .cq-account { position: absolute; top: 0; right: 190px; z-index: 30; height: 25px; display: flex; align-items: center; }
.cq-account .account-badge { position: static; display: flex; align-items: center; background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; text-align: left; }
.cq-account .account-badge .profile { display: flex; flex-direction: row-reverse; align-items: center; gap: 2px; clear: none; }
.cq-account .account-badge .profile .pic { float: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); background-size: cover; background-color: #fff; margin: 0 0 0 6px; }
.cq-account .account-badge .profile .pic:hover,
.cq-account .account-badge .profile .pic[aria-expanded="true"] { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.cq-account .site_notify_badge, .cq-account .es_quicklinks { float: none; margin: 0; }
.cq-account .open_notifications, .cq-account .open_quicklinks { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border-radius: 4px; color: #fff !important; font-size: 12px; text-decoration: none; }
.cq-account .open_notifications:hover, .cq-account .open_quicklinks:hover { background: rgba(255, 255, 255, .16); }
.cq-account .open_notifications svg, .cq-account .open_quicklinks svg, .cq-account .open_notifications i, .cq-account .open_quicklinks i { color: #fff; }
.cq-account .account-nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1050; width: 250px; margin: 0 !important; padding: 6px; border: 1px solid #d9dee2; border-radius: 10px; background: #fff; box-shadow: 0 16px 36px -14px rgba(9, 30, 36, .38); font-family: 'Open Sans', Arial, sans-serif; }
.cq-account .account-nav li { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 14px; }
.cq-account .account-nav li:hover { background: transparent; }
.cq-account .account-nav li a, .cq-account .account-nav li a:visited { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; color: #212529; text-decoration: none; }
.cq-account .account-nav li a:hover { background: #eef2f5; color: #336699; }
.cq-account .account-nav .account-who { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #e6e9ec; color: #212529; }
.cq-account .account-nav .account-who span { font-size: 12.5px; color: #6c757d; }
.cq-account .account-nav .account-signout-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e6e9ec; }
/* a menu item, not the .btn-info it is marked up as for other themes */
.cq-account .account-nav a.account-signout, .cq-account .account-nav a.account-signout:visited,
.cq-account .account-nav a.account-signout:hover {
    --bs-btn-color: #b42318; --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #8f1c13; --bs-btn-hover-bg: #fbedeb; --bs-btn-hover-border-color: transparent;
    width: 100%; background: transparent; border: 0; color: #b42318 !important; font-size: 14px; font-weight: 600; text-align: left; justify-content: flex-start; gap: 8px;
}
.cq-account .account-nav a.account-signout:hover { background: #fbedeb !important; }
@media (max-width: 575.98px) { .cq-header .cq-account { right: 150px; } }

/* ==================================================================
 * The refresh (2026-10-28): the same structure, lighter and more
 * elegant. Newsreader headlines, Source Serif reading text, Source Sans
 * for the menu, labels, bylines and teasers; a deep ink menu bar, the
 * CQ blue deepened a touch, hairlines instead of grey boxes. Values from
 * the design canvas "CQ theme refresh".
 * ================================================================== */
.cq-site {
    --cq-ink: #142430; --cq-text: #22323d; --cq-body: #2d3e49; --cq-muted: #5c6f7b; --cq-faint: #a7b5be;
    --cq-blue: #2a5b8c; --cq-blue-dark: #1d4268; --cq-bar: #0f1c24; --cq-bar-line: #2f4352; --cq-slate: #3e5563;
    --cq-line: #e3e9ed; --cq-tint: #f6f9fb; --cq-ground: #eef3f7;
    --cq-serif: 'Source Serif 4', Georgia, serif; --cq-display: 'Newsreader', Georgia, serif; --cq-sans: 'Source Sans 3', Arial, sans-serif;
}
body.cq-site { background-color: var(--cq-ground) !important; color: var(--cq-text); font-family: var(--cq-serif); }
.cq-site .cq-container { box-shadow: 0 1px 0 #dbe4ea, 0 24px 48px -32px rgba(15, 28, 36, .35) !important; }
.cq-site a { color: var(--cq-blue); }
.cq-site a:hover { color: var(--cq-blue-dark); }

/* the ribbon */
.cq-site span.top_ribbon_bg { background-color: var(--cq-slate); border-radius: 0; }
.cq-site a.top_ribbon { font-family: var(--cq-sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; padding-top: 5px; color: white !important; }

/* the menu: deep ink, tracked small caps, no separators */
.cq-site .cq-navrow, .cq-site .cq-navrow nav.navbar { background: var(--cq-bar) !important; min-height: 52px; }
.cq-site .cq-navrow .navbar-nav .nav-link,
.cq-site .cq-navrow .navbar-nav button.nav-link {
    border-right: 0; color: #d5e1e8 !important; font-family: var(--cq-sans); font-size: 12.5px !important; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; padding: 16px 14px !important; line-height: 20px;
}
.cq-site .cq-navrow .navbar-nav > li.nav-item:hover > .nav-link,
.cq-site .cq-navrow .navbar-nav > li.nav-item.is-open > .nav-link { background: transparent; color: #fff !important; }
.cq-site .cq-navrow .navbar-nav > li.nav-item:has(.active) > .nav-link,
.cq-site .cq-navrow .navbar-nav .nav-link.active { color: #fff !important; text-decoration: none; box-shadow: inset 0 -3px 0 #7fb3d5; }
.cq-site .cq-navrow .navbar-nav > li > .dropdown-menu { background: var(--cq-bar); padding: 6px 0; border-radius: 0 0 6px 6px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.cq-site .cq-navrow .dropdown-menu a.dropdown-item { background: transparent; border-bottom: 0; font-family: var(--cq-sans); font-size: 14px !important; letter-spacing: 0; text-transform: none; padding: 9px 18px !important; color: #e4edf2 !important; }
.cq-site .cq-navrow .dropdown-menu a.dropdown-item:hover, .cq-site .cq-navrow .dropdown-menu a.dropdown-item:focus-visible { background: #1b2f3b; color: #fff !important; }
.cq-site .cq-navrow .cq-nav-search { margin-right: 20px; }
.cq-site .cq-navrow .cq-nav-search .form-control {
    width: 220px; height: 34px; padding: 0 14px; margin: 0 !important; border: 1px solid var(--cq-bar-line); border-right: 0;
    border-radius: 17px 0 0 17px; background: #172933; color: #fff; font-family: var(--cq-sans); font-size: 14px;
}
.cq-site .cq-navrow .cq-nav-search .form-control::placeholder { color: #9fb3bf; }
.cq-site .cq-navrow .cq-nav-search .btn { height: 34px; width: 42px; padding: 0; border: 1px solid var(--cq-bar-line); border-radius: 0 17px 17px 0 !important; background: var(--cq-blue); }

/* the page: more air */
.cq-site .cq-content { padding: 32px 25px 56px; }
.cq-site .cqtext { font-family: var(--cq-serif); color: var(--cq-text); }
.cq-site .cq-breadcrumb { padding: 0 0 26px; font-family: var(--cq-sans); font-size: 13px; color: var(--cq-muted); }
.cq-site .cq-breadcrumb a { color: var(--cq-muted); }
.cq-site .cq-sep { margin: 0 6px; color: var(--cq-faint); }
.cq-site .cq-kicker { margin: 0 0 10px; font-family: var(--cq-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cq-blue); }
.cq-site .cq-kicker a { color: var(--cq-blue); }
.cq-site .cqtext h1, .cq-site .cqtext h1.MAIN-HEAD { font-family: var(--cq-display); font-weight: 500; font-size: 44px !important; line-height: 1.12; letter-spacing: -.01em; color: var(--cq-ink); margin: 0 0 30px; }
.cq-site .cqtext h2, .cq-site .cqtext h3, .cq-site .cqtext h4 { font-family: var(--cq-display); font-weight: 500; color: var(--cq-ink); }
.cq-site .cqtext h1 a, .cq-site .cqtext h2 a, .cq-site .cqtext h3 a { color: var(--cq-ink); }

/* a newer issue's articles */
.cq-site .issue-newer .full-head img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.cq-site .issue-newer-lead { margin-bottom: 36px; }
.cq-site .issue-newer-lead .mobile-text { padding-top: 18px; }
.cq-site .cqtext .issue-newer-title { font-family: var(--cq-display); font-weight: 500 !important; font-size: 25px !important; line-height: 1.2; margin-bottom: 8px; }
.cq-site .cqtext .issue-newer-lead .issue-newer-title { font-size: 32px !important; line-height: 1.15; }
.cq-site .issue-newer-row { margin: 0 -15px; padding: 32px 0; border-top: 1px solid var(--cq-line); }
.cq-site .issue-newer-row img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.cq-site .issue-newer address.author { font-style: normal; font-family: var(--cq-sans); font-size: 14px; color: var(--cq-muted); margin-bottom: 12px; }
.cq-site .issue-newer address.author strong { color: var(--cq-text); font-weight: 600; }
.cq-site .issue-newer-summary, .cq-site .issue-newer-summary p { font-family: var(--cq-sans); font-size: 16px; line-height: 1.6; color: var(--cq-body); }
.cq-site .issue-newer-lead .issue-newer-summary, .cq-site .issue-newer-lead .issue-newer-summary p { font-size: 17px; max-width: 680px; }
/* a freeform entry (a poster, a notice): a quiet panel */
.cq-site .issue-newer-row:has(> .col-12:only-child) .mobile-text { margin: 0 15px; padding: 24px 28px; border: 1px solid var(--cq-line); border-radius: 6px; background: var(--cq-tint); }
.cq-site .issue-newer-row:has(> .col-12:only-child) { border-top: 0; }

/* an article */
.cq-site .archive-article .article-head { max-width: 720px; }
.cq-site .archive-article .article-head h1 { font-size: 46px !important; line-height: 1.1; margin-bottom: 14px; }
.cq-site .archive-article .sub-title { margin: 0 0 22px; font-family: var(--cq-display); font-style: italic; font-weight: 400 !important; font-size: 23px !important; line-height: 1.35; color: #3d505c; }
.cq-site .article-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 28px; padding: 14px 0; border-top: 1px solid var(--cq-line); border-bottom: 1px solid var(--cq-line); font-family: var(--cq-sans); font-size: 14px; color: var(--cq-muted); }
.cq-site .article-byline strong { color: var(--cq-text); font-weight: 600; }
.cq-site .article-byline .article-share { font-weight: 600; }
.cq-site .archive-article .article-body { max-width: 680px; font-family: var(--cq-serif); font-size: 18.5px; line-height: 1.72; color: var(--cq-text); }
.cq-site .archive-article .article-body p { font-size: inherit; line-height: inherit; margin: 0 0 22px; }
.cq-site .archive-article .article-body h2, .cq-site .archive-article .article-body h3, .cq-site .archive-article .article-body h4,
.cq-site .archive-article .article-body .SUB-HEAD { font-family: var(--cq-display); font-weight: 500; font-size: 27px !important; line-height: 1.2; color: var(--cq-ink); margin: 40px 0 14px; text-transform: none; }
.cq-site .archive-article img { border-radius: 4px; }
.cq-site .archive-article figcaption, .cq-site .archive-article .LEGEND, .cq-site .archive-article .masthead-legend-box {
    font-family: var(--cq-sans); font-size: 14px !important; line-height: 1.5; color: #4a5d69; border: 0;
}
.cq-site .archive-article .LEGEND b, .cq-site .archive-article .LEGEND strong, .cq-site .archive-article .LEGEND span[style*="bold"] { color: var(--cq-text); }
.cq-site .archive-article .photographer { color: #7b8c96; }
.cq-site .archive-article blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--cq-blue); font-family: var(--cq-display); font-size: 24px; line-height: 1.4; color: var(--cq-ink); }
.cq-site .article-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--cq-line); }
.cq-site .article-nav a { flex: 1 1 260px; display: block; padding: 18px 20px; border: 1px solid var(--cq-line); border-radius: 6px; text-decoration: none; }
.cq-site .article-nav a:hover { border-color: #c9d5dd; background: var(--cq-tint); }
.cq-site .article-nav .article-nav-next { text-align: right; }
.cq-site .article-nav-label { display: block; font-family: var(--cq-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cq-muted); }
.cq-site .article-nav-title { display: block; margin-top: 6px; font-family: var(--cq-display); font-size: 19px; line-height: 1.3; color: var(--cq-ink); }

/* the sidebar: no grey box, a quiet column with hairlines */
.cq-site .cq-sidebar { font-family: var(--cq-sans); }
.cq-site .cq-sidebar .cqtableback, .cq-site .cq-sidebar .issue-sidebar { background: transparent !important; padding: 0; text-align: left; }
.cq-site .issue-sidebar .issue-aside, .cq-site .issue-sidebar .cq-links { padding: 0; }
.cq-site .issue-sidebar .issue-cover img { border-radius: 3px; box-shadow: 0 18px 30px -18px rgba(15, 28, 36, .55); }
.cq-site .issue-sidebar .issue-cover { text-align: left; }
.cq-site .issue-sidebar .issue-cover-blurb { font-family: var(--cq-sans); font-size: 13px; color: var(--cq-muted); margin: 10px 0 0; }
.cq-site .issue-sidebar .issue-pdf { order: 2; margin: 18px 0 0; }
.cq-site .issue-sidebar .issue-aside { display: flex; flex-direction: column; }
.cq-site .issue-sidebar .issue-cover { order: 1; }
.cq-site .issue-sidebar .issue-description { order: 3; }
.cq-site .issue-sidebar .issue-toc { order: 4; }
.cq-site .issue-sidebar .issue-pdf .btn, .cq-site .issue-sidebar .download_cq.btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px;
    border: 1px solid var(--cq-blue); border-radius: 22px !important; background: transparent; color: var(--cq-blue) !important;
    font-family: var(--cq-sans); font-size: 14px; font-weight: 600;
}
.cq-site .issue-sidebar .issue-pdf .btn:hover { background: var(--cq-blue); color: #fff !important; }
.cq-site .issue-sidebar .issue-description, .cq-site .issue-sidebar .issue-description p { font-family: var(--cq-sans); font-size: 15px; line-height: 1.6; color: var(--cq-body); margin-top: 20px; }
.cq-site .cq-side-head, .cq-site .issue-sidebar .issue-toc h3.cq-side-head, .cq-site .issue-sidebar .cq-links h3.cq-side-head {
    margin: 30px 0 12px !important; padding-top: 20px; border-top: 1px solid var(--cq-line);
    font-family: var(--cq-sans) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cq-blue);
}
.cq-site .cq-side-head a { color: var(--cq-blue) !important; }
.cq-site .issue-sidebar .issue-toc-list { counter-reset: cq-toc; margin: 0 !important; }
.cq-site .issue-sidebar .issue-toc-list > li { counter-increment: cq-toc; display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; margin: 0 0 10px; font-family: var(--cq-serif); font-size: 15px; line-height: 1.35; }
.cq-site .issue-sidebar .issue-toc-list > li::before { content: counter(cq-toc, decimal-leading-zero); font-family: var(--cq-sans); font-size: 12px; font-weight: 700; color: var(--cq-faint); padding-top: 2px; }
.cq-site .issue-sidebar .issue-toc-list > li > ul { grid-column: 2; }
.cq-site .issue-sidebar .issue-toc-list a { color: var(--cq-text); }
.cq-site .issue-sidebar .issue-toc-list .current > a { color: var(--cq-ink); font-weight: 600; }
.cq-site .issue-sidebar .issue-toc-list .navlink { font-size: 14px; }
.cq-site .issue-sidebar .issue-toc-list .navlink a { color: #4a5d69; }
.cq-site .issue-sidebar .cq-recent, .cq-site .issue-sidebar .cq-online { list-style: none; padding: 0 !important; margin: 0 !important; }
.cq-site .issue-sidebar .cq-recent li { margin: 0 0 10px; font-family: var(--cq-serif); font-size: 15px; line-height: 1.35; }
.cq-site .issue-sidebar .cq-recent a { color: var(--cq-text); }
.cq-site .issue-sidebar .cq-more { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.cq-site .issue-sidebar .cq-online li { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.cq-site .cq-mdsg-card { margin-top: 32px; padding: 22px 20px; border: 1px solid var(--cq-line); border-radius: 6px; background: var(--cq-tint); text-align: center; }
.cq-site .cq-mdsg-card .cq-mdsg { margin: 0 0 4px; padding: 0; font-family: var(--cq-sans); font-variant: normal; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cq-site .cq-mdsg-card .cq-mdsg a { color: var(--cq-ink); }
.cq-site .cq-mdsg-card .navlink { font-family: var(--cq-sans); font-size: 13px; line-height: 1.5; color: var(--cq-muted); }
.cq-site .cq-mdsg-card .cq-logos img { width: 70%; }
.cq-site .cq-mdsg-card .cq-stay-head { font-family: var(--cq-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cq-muted); }
.cq-site .cq-mdsg-card .social-media-icons { font-size: 20px; gap: 12px; }
.cq-site .cq-mdsg-card .social-media-icons a { color: #3d505c; }
.cq-site .cq-mdsg-card .cq-support { padding: 6px 0 0; margin: 0; }
.cq-site .cq-mdsg-card .cq-support .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 0; border-radius: 20px !important; background: var(--cq-bar); color: #fff !important; font-family: var(--cq-sans); font-size: 13px; font-weight: 600; }

/* the footer: one quiet line on a rule */
.cq-site .cq-footer { margin: 0; padding: 22px 40px; border-top: 1px solid var(--cq-line); text-align: left; color: var(--cq-muted); }
.cq-site .cq-footer-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--cq-sans); font-size: 13px !important; color: var(--cq-muted); }
.cq-site .cq-footer-line em { font-family: var(--cq-serif); }

@media (max-width: 575.98px) {
    .cq-site .cqtext h1, .cq-site .cqtext h1.MAIN-HEAD { font-size: 32px !important; }
    .cq-site .archive-article .article-head h1 { font-size: 34px !important; }
    .cq-site .archive-article .article-body { font-size: 17.5px; }
    .cq-site .cq-content { padding: 24px 15px 40px; }
}
/* the refresh, over three older rules that outrank it: a core rule draws a
   rule beside each menu item, cq.net's h1 is weight 800, and its PDF button
   is a filled slate */
.cq-site .cq-navrow .navbar-nav > li.nav-item { border: 0 !important; }
.cq-site .cqtext h1, .cq-site .cqtext h1.MAIN-HEAD, .cq-site .cqtext h1 a { font-weight: 500 !important; }
.cq-site .cqtext .issue-newer-title, .cq-site .cqtext .issue-newer-title a { font-weight: 500 !important; }
.cq-site .issue-sidebar .issue-pdf .btn.download_cq { background: transparent !important; background-color: transparent !important; }
.cq-site .issue-sidebar .issue-pdf .btn.download_cq:hover { background: var(--cq-blue) !important; background-color: var(--cq-blue) !important; }
/* the rule between a newer issue's articles sits on the text column, not the row's gutters */
.cq-site .issue-newer-row { border-top: 0; background: linear-gradient(var(--cq-line), var(--cq-line)) no-repeat 15px 0 / calc(100% - 30px) 1px; }
.cq-site .issue-newer address.author { font-size: 14px !important; }
.cq-site .cq-kicker a { text-decoration: none; }
.cq-site .cq-kicker a:hover { text-decoration: underline; }

/* an older issue's list (issue.twig's other branch), in the same voice */
.cq-site .issue-splash img { border: 0 !important; border-radius: 4px; }
.cq-site .issue-splash-credit { font-family: var(--cq-sans); font-size: 13px; color: var(--cq-muted); }
.cq-site .section-head { margin: 36px 0 4px; font-family: var(--cq-sans) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--cq-blue) !important; }
.cq-site .issue-article { padding: 24px 0; border-bottom: 1px solid var(--cq-line); overflow: hidden; }
.cq-site .cqtext .issue-article-title, .cq-site .cqtext .issue-article-title a { margin: 0 0 6px; font-family: var(--cq-display) !important; font-weight: 500 !important; font-size: 23px !important; line-height: 1.25; color: var(--cq-ink); text-transform: none; }
.cq-site .issue-article-subtitle { margin: 0 0 8px; font-family: var(--cq-display); font-style: italic; font-size: 17px; color: #3d505c; }
.cq-site .issue-article .byline { margin: 0 0 10px; font-family: var(--cq-sans); font-size: 14px; font-weight: 600; color: var(--cq-text); text-transform: none; }
.cq-site .issue-article-thumb img { border-radius: 4px; }
.cq-site .issue-article-summary, .cq-site .issue-article-summary p { font-family: var(--cq-sans); font-size: 16px; line-height: 1.6; color: var(--cq-body); }
.cq-site .issue-article .more-link { font-family: var(--cq-sans); font-size: 14px; font-weight: 600; }
.cq-site .issue-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-family: var(--cq-sans); font-size: 14px; font-weight: 600; }

/* A figure is never wider than its picture, anywhere on the site: the box
   takes the picture's width, and its caption wraps inside the picture's edges
   rather than widening it (contain: inline-size keeps the caption out of the
   figure's sizing). A picture wider than its column still shrinks to fit. In
   an article's text they are inline blocks, so figures that follow one another
   sit side by side when they fit, as cq.net laid its picture pairs out. */
.cq-site figure { width: fit-content; max-width: 100%; }
.cq-site figure img { max-width: 100%; height: auto; }
.cq-site figure figcaption,
.cq-site figure .LEGEND,
.cq-site figure .issue-cover-blurb { contain: inline-size; }
.cq-site .article-body figure,
.cq-site .article-figures figure { display: inline-block; vertical-align: top; margin: 0 16px 22px 0; }

/* cq.net's article layout, put back by CQ 2.2.7 from the original pages
   (the migration had flattened its tables): a .cq-fig is one of its picture
   tables, floated left or right at its width, and a .cq-fig-set lays its
   pictures out in the same rows and columns. One callout style serves every
   box of text cq.net drew on a tint or inside a border, whatever colour it
   was, so they read as one family across the archive. */
.cq-site .article-body .cq-fig { max-width: 100%; margin: 6px 0 22px; }
.cq-site .article-body .cq-fig-right { float: right; clear: right; margin: 4px 0 18px 26px; }
.cq-site .article-body .cq-fig-left { float: left; clear: left; margin: 4px 26px 18px 0; }
.cq-site .article-body .cq-fig figure { display: block; margin: 0 0 8px; }
.cq-site .article-body .cq-fig figure:last-child { margin-bottom: 0; }
.cq-site .article-body .cq-fig-row { display: flex; gap: 12px; align-items: flex-start; }
.cq-site .article-body .cq-fig-row + .cq-fig-row { margin-top: 12px; }
.cq-site .article-body .cq-fig-cell { flex: 0 1 auto; min-width: 0; }
.cq-site .article-body .cq-fig-cell > :first-child { margin-top: 0; }

.cq-site .cq-callout {
    background: var(--cq-ground); border-left: 3px solid var(--cq-blue); border-radius: 0 6px 6px 0;
    padding: 18px 22px; margin: 8px 0 26px; clear: none;
    font-family: var(--cq-sans); font-size: 15.5px; line-height: 1.6; color: var(--cq-text);
}
.cq-site .cq-callout p, .cq-site .cq-callout li { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.cq-site .cq-callout > :first-child { margin-top: 0; }
.cq-site .cq-callout > :last-child { margin-bottom: 0; }
.cq-site .cq-callout .SUB-HEAD, .cq-site .cq-callout h2, .cq-site .cq-callout h3, .cq-site .cq-callout h4,
.cq-site .cq-callout .special_header {
    background: none; width: auto; padding: 0; margin: 0 0 8px;
    font-family: var(--cq-sans); font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cq-blue-dark);
}
.cq-site .cq-fig .cq-callout { margin: 10px 0 0; }
.cq-site .cq-callout-right { float: right; clear: right; max-width: 45%; margin: 4px 0 18px 26px; }
.cq-site .cq-callout-left { float: left; clear: left; max-width: 45%; margin: 4px 26px 18px 0; }
.cq-site .article-body::after { content: ''; display: block; clear: both; }

@media (max-width: 575.98px) {
    .cq-site .article-body .cq-fig-right, .cq-site .article-body .cq-fig-left,
    .cq-site .cq-callout-right, .cq-site .cq-callout-left { float: none; width: auto !important; max-width: 100%; margin: 6px 0 22px; }
    .cq-site .article-body .cq-fig-row { flex-wrap: wrap; }
}

/* A table of facts in an article (CQ 2.2.8 rebuilt V17N1's species table,
   cq.net's table.matrix): small capitals headings, a hairline under each row,
   the first column a picture over its name. On a phone it stays a table,
   only tighter: stacked rows would lose the column headings. */
.cq-site .cq-matrix { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-family: var(--cq-sans); font-size: 15px; line-height: 1.55; color: var(--cq-text); }
.cq-site .cq-matrix th { padding: 0 14px 8px 0; border-bottom: 2px solid var(--cq-blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cq-blue-dark); text-align: left; }
.cq-site .cq-matrix td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--cq-line); vertical-align: top; }
.cq-site .cq-matrix td:first-child { width: 150px; }
.cq-site .cq-matrix td:first-child img { display: block; max-width: 110px; height: auto; margin: 0 0 8px; }
.cq-site .cq-matrix td:first-child strong { color: var(--cq-ink); }
.cq-site .cq-matrix td:first-child em { color: var(--cq-muted); }
@media (max-width: 575.98px) {
    .cq-site .cq-matrix { font-size: 13.5px; }
    .cq-site .cq-matrix th, .cq-site .cq-matrix td { padding-right: 8px; }
    .cq-site .cq-matrix td:first-child { width: 88px; }
    .cq-site .cq-matrix td:first-child img { max-width: 72px; }
}

/* A page cq.net printed on a colored ground (CQ 2.2.9: the Aquaculture
   Primer's pale green, its title plate at the top). The panel carries its
   own ink, and a table inside it takes the panel's colors. */
.cq-site .cq-panel { padding: 26px 28px 8px; margin: 4px 0 28px; border-radius: 6px; }
.cq-site .cq-panel > :last-child { margin-bottom: 18px; }
.cq-site .cq-panel-masthead { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 0 18px; }
.cq-site .cq-panel-green { background: #dee8ce; color: #0c5229; }
.cq-site .cq-panel-green p, .cq-site .cq-panel-green a { color: inherit; }
.cq-site .cq-panel-green a { text-decoration: underline; }
.cq-site .cq-panel-green .cq-matrix,
.cq-site .cq-panel-green .cq-matrix th,
.cq-site .cq-panel-green .cq-matrix td:first-child strong,
.cq-site .cq-panel-green .cq-matrix td:first-child em { color: #0c5229; }
.cq-site .cq-panel-green .cq-matrix th { border-bottom-color: #0c5229; }
.cq-site .cq-panel-green .cq-matrix td { border-bottom-color: #fff; }
.cq-site .cq-panel-green .cq-matrix tr:last-child td { border-bottom: 0; }
@media (max-width: 575.98px) { .cq-site .cq-panel { padding: 18px 16px 4px; } }

/* cq.net's people tiles (V17N1's new staff and Knauss fellows): a tile is
   half the column, two to a row, or the whole width with .full-width, and
   its portrait floats left with the words wrapping round it. A picture
   classed left or right floats that way; the migration put each picture in
   a figure, so the figure carries the float. */
.cq-site .article-body .profile-tile { float: left; width: 47%; margin: 10px 3% 18px 0; font-size: 16.5px; line-height: 1.65; color: var(--cq-body); }
.cq-site .article-body .profile-tile.full-width { float: none; width: 100%; margin-right: 0; clear: both; display: flow-root; }
.cq-site .article-body .profile-tile figure { display: block; float: left; max-width: 37%; margin: 5px 14px 6px 0; }
.cq-site .article-body .profile-tile.full-width figure { max-width: 25%; margin-top: 0; }
/* where CQ 2.2.7 wrapped the portrait in a .cq-fig, the wrapper floats and
   takes the width, so the picture is not shrunk inside a wider float */
.cq-site .article-body .profile-tile > .cq-fig { float: left; max-width: 37%; margin: 5px 14px 6px 0; }
.cq-site .article-body .profile-tile.full-width > .cq-fig { max-width: 25%; margin-top: 0; }
.cq-site .article-body .profile-tile > .cq-fig > figure { float: none; max-width: 100%; margin: 0; }
.cq-site .article-body .profile-tile .bold { font-weight: 700; color: var(--cq-ink); }
.cq-site .article-body .clearfix { clear: both; }
.cq-site .article-body figure:has(> img.left) { display: block; float: left; margin: 5px 16px 8px 0; }
.cq-site .article-body figure:has(> img.right) { display: block; float: right; margin: 5px 0 8px 16px; }
@media (max-width: 575.98px) {
    .cq-site .article-body .profile-tile { float: none; width: 100%; margin-right: 0; display: flow-root; }
}

/* A table of pictures from cq.net (CQ 2.3.0 rebuilt them in 162 older
   articles): the original rows, spans and alignment, at its old width, the
   pictures touching as they did and the captions in the cells beside them. */
.cq-site .article-body .cq-figtable { max-width: 100%; border-collapse: collapse; margin: 10px 0 26px; }
.cq-site .article-body .cq-figtable td { padding: 0 6px 6px 0; }
.cq-site .article-body .cq-figtable td:last-child { padding-right: 0; }
.cq-site .article-body .cq-figtable img { display: inline-block; max-width: none; height: auto; vertical-align: bottom; margin: 0; }
.cq-site .article-body .cq-figtable .LEGEND { margin: 6px 0 0; padding: 0 4px; text-align: left; }
.cq-site .article-body .cq-figtable .cq-callout { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; border-left-width: 2px; }
.cq-site .article-body .cq-figtable.cq-fig-right { margin: 4px 0 18px 26px; }
.cq-site .article-body .cq-figtable.cq-fig-left { margin: 4px 26px 18px 0; }
@media (max-width: 575.98px) {
    .cq-site .article-body .cq-figtable { width: 100% !important; table-layout: fixed; }
    .cq-site .article-body .cq-figtable td { width: auto !important; }
    .cq-site .article-body .cq-figtable img { max-width: 100%; }
}