/* Clybourn Creative Group: the white papers' three headline figures on the home page. The papers themselves are
 * built in ~/Desktop/parent-brand-site-thesis/ and styled by thesis-papers.css. Its type sizes and two extra tones are scoped to .thesis-scope
 * so they never change the rest of the site. */
.thesis-scope {
  --ground-4: #221f1b;
  --bar:      #6b655c;
  --t-head:      clamp(2.75rem, 6.4vw, 6rem);
  --t-hero:      clamp(3.25rem, 7.5vw, 7rem);
  --t-statement: clamp(1.75rem, 2.6vw, 2.5rem);
  --t-name:      clamp(1.25rem, 1.6vw, 1.5rem);
  --t-body:      clamp(1.0625rem, 1.3vw, 1.1875rem);
  --t-src:       0.875rem;
  --gap:     clamp(0.75rem, 1.4vw, 1.25rem);
}
:where(.thesis-scope) :where(p, h2, h3, h4, ul, ol, figure) { margin: 0; }   /* zero specificity: the papers' own spacing wins */
:where(.thesis-scope) :where(ul, ol) { padding: 0; list-style: none; }

/* (the papers themselves are styled by thesis-papers.css) */
.thesis-top { background: var(--ground-2); padding-block: calc(var(--section) + 3rem) var(--section); }
.thesis-top__title { font-size: var(--t-head); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.88; }
.thesis-top__intro { margin-top: 1.75rem; max-width: 34ch; font-size: var(--t-name); color: var(--ink-2); line-height: 1.4; }
.thesis__legal { padding-block: 0 var(--section); font-size: var(--t-src); color: var(--muted); max-width: 70ch; }

/* ── The three headline figures on the home page ── */
/* each an outside fact, sourced, under the logo of the company whose paper it opens; set on the page, not in a box */
.glances { display: grid; gap: 3rem var(--gap); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 52rem) { .glances { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.glance { display: flex; flex-direction: column; align-items: flex-start; height: 100%; color: var(--ink); text-decoration: none; }
.glance__co { height: 3rem; margin-bottom: 1.5rem; }
.glance__co.co-logo--el { height: auto; width: 9rem; margin-block: calc((3rem - 9rem * 192 / 843) / 2) calc((3rem - 9rem * 192 / 843) / 2 + 1.5rem); }   /* same box as the square marks */
.glance__fig { font-size: var(--t-statement); font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.glance__label { margin-top: 0.75rem; font-size: var(--t-body); color: var(--ink-2); line-height: 1.4; }
.glance__src { margin-top: 0.75rem; font-size: var(--t-small); color: var(--muted); line-height: 1.4; flex: 1; }
.glance__go { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; margin-top: 0.75rem; font-size: var(--t-small); font-weight: 500; text-decoration: underline; text-decoration-color: var(--brass-ink); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.glance__go span { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .glance__go span { transition: none; } }

@media (hover: hover) and (pointer: fine) {
  .glance:hover .glance__go { color: var(--brass-ink); }
  .glance:hover .glance__go span { transform: translateX(3px); }
  .glance:hover .co-logo { background-color: var(--brass-ink); }
  .src a:hover, .chart__table summary:hover { color: var(--ink); }
  [data-tip]:hover .hbar__bar:not(.is-em), [data-tip]:hover .cols__bar:not(.is-em) { background: #8a8378; }
}
.glance:active { opacity: 0.8; transition: none; }
.ig { scroll-margin-top: 4.5rem; }   /* clear of the fixed header */