/* Editorial presentation layer. The hero and its responsive geometry stay in styles.css. */
body { background: var(--bg); }

.section-panel:not(.hero) {
  --green: #c1d8a2;
  --muted: #b1b8b0;
  --soft: #929b93;
  padding-block: 72px;
}
.section-panel:not(.hero) .eyebrow {
  color: #aebca7;
  font: 600 .72rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
  margin-bottom: 15px;
}
.section-panel:not(.hero) .section-heading {
  max-width: 100%;
  margin-bottom: 30px;
}
.section-panel:not(.hero) .section-heading h2,
.section-panel:not(.hero) .signal-lab-heading h2 {
  max-width: 900px;
  font-size: clamp(1.85rem, 3.05vw, 2.8rem);
  font-weight: 640;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.section-panel:not(.hero) .section-subtitle {
  max-width: 660px;
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.65;
  white-space: normal;
}
.section-panel:not(.hero) .text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--text);
  font-size: .85rem;
  font-weight: 620;
}
.section-panel:not(.hero) .text-link:hover { color: var(--green); }
.section-panel:not(.hero) .text-link::after { display: none; }
.link-format {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--soft);
  font: 500 .62rem/1.4 ui-monospace, monospace;
}

/* A readable introduction and a compact factual record, rather than another card grid. */
.intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 68px; }
.intro-copy { font-size: 1.04rem; line-height: 1.85; }
.intro-copy > p:first-child { margin-top: 0; }
.intro-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; }
.facts { display: block; border: 0; border-radius: 0; background: transparent; }
.facts > div {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.facts > div:first-child { padding-top: 0; }
.facts dt { margin: 3px 0 0; color: var(--soft); font-size: .69rem; letter-spacing: .04em; }
.facts dd { font-size: .88rem; font-weight: 500; line-height: 1.65; }
.facts > div:nth-child(4) dd { color: var(--text); font-size: 1.3rem; font-weight: 650; line-height: 1.2; }

/* Retain grab, swipe, keyboard browsing, and the existing carousel sizing contract. */
.report-card, .projects.is-carousel .project-card {
  border-color: #ffffff20;
  border-radius: 8px;
  background: #0d110f;
}
.report-card:hover, .projects.is-carousel .project-card:hover {
  transform: none;
  border-color: #b7c9b65c;
  background: #101612;
}
.project-card::before, .project-card::after,
.contact-board::before, .contact-board::after { display: none; }
.reports.is-carousel .report-visual,
.projects.is-carousel .project-card .project-image {
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
  background: #e9ede5;
}
.reports.is-carousel .report-visual img,
.projects.is-carousel .project-card .project-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform: none;
}
.report-visual::after, .projects.is-carousel .project-image::after { display: none; }

/* Fit the original media to its own frame instead of the diagram's 2:1 frame. */
.reports.is-carousel #report-3 .report-visual,
.reports.is-carousel #report-4 .report-visual,
.projects.is-carousel #project-3 .project-image {
  position: relative;
  align-self: start;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
}
.reports.is-carousel #report-4 .report-visual { aspect-ratio: 736 / 504; }
.projects.is-carousel #project-3 .project-image { aspect-ratio: 2547 / 1524; }
.reports.is-carousel #report-4 .report-visual img,
.projects.is-carousel #project-3 .project-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Show only the upper three 5G charts: x=54, y=86, width=1216, height=792. */
.reports.is-carousel #report-3 .report-visual {
  aspect-ratio: 1216 / 792;
  background: #fff;
}
.reports.is-carousel #report-3 .report-visual img {
  position: absolute;
  display: block;
  width: calc(100% * 1323 / 1216);
  max-width: none;
  height: auto;
  left: calc(-100% * 54 / 1216);
  top: calc(-100% * 86 / 792);
  transform: none;
}

.reports.is-carousel .report-body,
.projects.is-carousel .project-body { padding: 24px; }
.reports.is-carousel .report-body h3,
.projects.is-carousel .project-body h3 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.reports.is-carousel .report-id,
.projects.is-carousel .project-system-id {
  margin: 0 0 12px;
  color: var(--soft);
  font: 500 .66rem/1.5 ui-monospace, monospace;
  letter-spacing: .04em;
}
.reports.is-carousel .report-id span,
.projects.is-carousel .project-system-id span { color: #bed0b5; }
.projects.is-carousel .project-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 12px;
  margin-bottom: 12px;
  color: var(--soft);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.projects.is-carousel .project-summary {
  margin: 0 0 16px;
  color: #c8cec5;
  font-size: .9rem;
  line-height: 1.6;
}
.report-result {
  border-left: 2px solid #859b77;
  background: #ffffff04;
}
.reports.is-carousel .report-result strong { font-weight: 530; line-height: 1.6; }
.reports.is-carousel .report-course { color: var(--soft) !important; font-size: .66rem; font-weight: 500; line-height: 1.6; }
.report-details > p:not(.report-course), .project-details > p { font-size: .87rem; line-height: 1.7; }
.section-panel:not(.hero) .tag-row { gap: 6px; }
.section-panel:not(.hero) .tag-row span {
  padding: 4px 8px;
  border-color: #ffffff15;
  background: transparent;
  color: var(--soft);
  font-size: .65rem;
  font-weight: 450;
}
.report-counter, .project-counter { color: #c5cfc0; }
.report-arrow, .project-arrow { width: 44px; height: 44px; background: transparent; }
.report-browse-hint, .project-browse-hint { max-width: none; color: var(--soft); font-size: .75rem; }
/* Native overlay scrollbars can linger over expanded cards on touch browsers. */
.reports.is-carousel .report-grid,
.projects.is-carousel .project-list { scrollbar-width: none; }
.reports.is-carousel .report-grid::-webkit-scrollbar,
.projects.is-carousel .project-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.report-picker button, .project-picker button { min-height: 44px; }

/* Research reads as a list of interests, distinct from the project browser. */
.research-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 64px; }
.research-copy { font-size: 1rem; line-height: 1.8; }
.research-copy p:first-child { margin-top: 0; }
.research-map { display: block; border: 0; border-radius: 0; background: transparent; }
.research-map > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px 14px;
  min-height: 0;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.research-map > div:first-child { padding-top: 0; }
.research-map span { grid-row: 1 / 3; margin: 2px 0 0; color: #aab6a3; font: .72rem/1.7 ui-monospace, monospace; }
.research-map strong { margin: 0; font-size: 1.14rem; font-weight: 580; line-height: 1.4; }
.research-map p { grid-column: 2; font-size: .91rem; line-height: 1.7; }
.timeline article::before { background: #b3c6a6; box-shadow: none; }
.timeline span { color: var(--soft); font-size: .7rem; }
.timeline h3 { font-size: 1.2rem; font-weight: 620; line-height: 1.45; }
.timeline p { font-size: .93rem; line-height: 1.7; }

/* Familiar destinations are visible before the themed hover treatment. */
.contact-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 360px; border-color: var(--line); }
/* Let the grid size the image panel; the older tablet aspect ratio can otherwise make it wider than its column. */
.contact-preview { min-width: 0; width: 100%; min-height: 360px; aspect-ratio: auto; }
.contact-menu { min-width: 0; }
.contact-preview-content span { font: 500 .8rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.contact-preview-content strong { font-size: 1.8rem; font-weight: 600; }
.contact-card { align-items: flex-start; gap: 8px; padding: 25px 32px; text-align: left; }
.contact-card .contact-channel-title { font-size: 1.7rem; font-weight: 570; letter-spacing: -.03em; text-transform: none; }
.contact-card small { font-family: inherit; font-size: .8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.contact-card.is-active small, .contact-card:focus-visible small { color: var(--muted); }

/* Keep contact accessible without covering the page at any scroll position. */
.site-header { gap: 18px; }
.site-header .uplink-launch {
  position: static;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
  gap: 8px;
  border-color: #ffffff35;
  border-radius: 7px;
  color: var(--text);
  background: #ffffff06;
  box-shadow: none;
  font-size: .78rem;
}
.site-header .uplink-launch svg { width: 19px; height: 19px; }
.site-header .uplink-launch:hover,
.site-header .uplink-launch[aria-expanded="true"] { color: var(--ink); background: var(--green); transform: none; }

@media (min-width: 1051px) {
  .report-details { display: block; order: 2; margin: 14px 0; }
  .report-body .report-result { order: 1; margin: 4px 0 0; }
  .report-details .report-course { margin-bottom: 10px; }
  .report-details > p:not(.report-course) { margin: 0 0 14px; }
  .report-details .tag-row { margin-bottom: 0; }
}
@media (max-width: 1050px) {
  .intro-grid { gap: 32px; }
  .reports.is-carousel .report-visual img,
  .projects.is-carousel .project-card .project-image img { object-position: center top; }
  .facts > div { grid-template-columns: 105px minmax(0, 1fr); gap: 12px; }
  .research-layout { gap: 32px; }
  .reports.is-carousel .report-visual,
  .projects.is-carousel .project-card .project-image { height: 100%; aspect-ratio: auto; }
  .reports.is-carousel .report-details-toggle,
  .projects.has-carousel-controls .project-details-toggle { color: #aeb8a8; }
  .projects.is-carousel .project-meta { margin-bottom: 9px; }
}
@media (max-width: 700px) {
  .section-panel:not(.hero) { padding-block: 36px; }
  .section-panel:not(.hero) .section-heading,
  .projects.is-carousel .section-heading { margin-bottom: 18px; }
  .section-panel:not(.hero) .section-heading h2,
  .section-panel:not(.hero) .signal-lab-heading h2 { font-size: clamp(1.72rem, 6.7vw, 2.2rem); line-height: 1.16; }
  .section-panel:not(.hero) .eyebrow { font-size: .66rem; letter-spacing: .07em; margin-bottom: 12px; }
  .section-panel:not(.hero) .section-subtitle { font-size: .9rem; line-height: 1.6; margin-top: 12px; }
  .intro-grid, .research-layout { grid-template-columns: 1fr; gap: 26px; }
  .intro-copy { font-size: .96rem; line-height: 1.8; }
  .intro-links { margin-top: 18px; }
  .facts > div { padding-block: 12px; }
  .facts dd { font-size: .84rem; }
  .reports.is-carousel .report-toolbar,
  .projects.has-carousel-controls .project-toolbar { margin-bottom: 10px; }
  .report-arrow, .project-arrow { width: 44px; height: 44px; }
  .report-browse-hint, .project-browse-hint { font-size: .7rem; }
  .report-picker button span, .project-picker button span { display: none; }
  .report-picker button, .project-picker button { font-size: .71rem; }
  .reports.is-carousel .report-visual,
  .projects.is-carousel .project-card .project-image { height: auto; aspect-ratio: 2 / 1; }
  .reports.is-carousel .report-body, .projects.is-carousel .project-body { padding: 20px; }
  .reports.is-carousel .report-body h3, .projects.is-carousel .project-body h3 { font-size: 1.25rem; }
  .projects.is-carousel .project-summary { font-size: .88rem; margin-bottom: 12px; }
  .reports.is-carousel .report-result strong { font-size: .84rem; }
  .research-map strong { font-size: 1.06rem; }
  .research-map p { font-size: .88rem; }
  .contact-board { grid-template-columns: 1fr; }
  .contact-preview { min-height: 210px; }
  .contact-card { min-height: 98px; padding: 20px 22px; }
  .contact-card .contact-channel-title { font-size: 1.4rem; }
  .contact-card small { font-size: .78rem; }
  .site-header { gap: 10px; padding-inline: 14px; }
  .site-header .section-status { display: none; }
  .site-header .uplink-launch { width: 44px; height: 44px; margin-left: auto; padding: 0; justify-content: center; }
  .site-header .uplink-launch > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .menu-toggle { width: 44px; height: 44px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .section-panel:not(.hero) { padding-block: 28px; }
  .section-panel:not(.hero) .section-heading { margin-bottom: 16px; }
  .section-panel:not(.hero) .section-heading h2 { font-size: 1.65rem; }
  .section-panel:not(.hero) .eyebrow { margin-bottom: 8px; font-size: .63rem; }
  .section-panel:not(.hero) .section-subtitle { margin-block: 8px 0; font-size: .86rem; }
  .projects.has-carousel-controls .project-picker,
  .reports.is-carousel .report-picker { display: none; }
  .projects.has-carousel-controls .project-toolbar,
  .reports.is-carousel .report-toolbar { margin-bottom: 10px; }
}
@media (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .reports.is-carousel .report-card, .projects.is-carousel .project-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .reports.is-carousel .report-visual, .projects.is-carousel .project-card .project-image { height: 100%; aspect-ratio: auto; }
}