/* LIVE 1.6: only the home-page structure. Normal document flow keeps translated
   content and zoom safe; measured SVG connectors are progressive enhancement. */
html:root body .red-community-cycle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: auto;
  gap: 0;
  isolation: isolate;
}
.red-community-cycle .red-cycle-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html:root body .red-community-cycle .red-method-orbit {
  position: relative;
  inset: auto;
  flex: none;
  width: 198px;
  min-height: 198px;
  margin: 0;
  transform: none;
  scroll-margin-top: 150px;
}
html:root body .red-community-cycle .red-structure-core {
  position: relative;
  inset: auto;
  flex: none;
  width: min(580px, 64%);
  height: 236px;
  margin: -38px 0 0;
  padding: 2rem 2rem 2.2rem;
}
html:root body .red-community-cycle .red-structure-branches {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: calc(100% - 84px);
  gap: 18px;
  margin: 90px 0 0;
}
html:root body .red-community-cycle .red-structure-card {
  min-width: 0;
  min-height: 212px;
  padding: 18px 14px;
  transition: background .18s ease, box-shadow .18s ease;
}
html:root body .red-community-cycle .red-structure-card:hover { transform: none; }
html:root body .red-community-cycle .red-structure-card h3 { min-height: 2.5em; }
html:root body .red-community-cycle .red-structure-community {
  position: relative;
  z-index: 3;
  width: min(680px, calc(100% - 180px));
  margin: 90px 0 0;
  padding: 26px 32px 28px;
  border: 1px solid #27482c;
  border-radius: 20px;
  background: #27482c;
  color: #fff9ed;
  box-shadow: 0 16px 38px rgb(35 53 27 / 13%);
  text-align: center;
}
.red-cycle-community-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.red-cycle-community-meta > span:first-child { color: #eddaad; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.red-cycle-status { border: 1px solid #baab7d; border-radius: 999px; padding: 3px 10px; color: #fff1cd; font-size: 11px; }
html:root body .red-community-cycle #red-community-title { margin: 14px 0 10px; color: #fff9ed; font-size: clamp(25px, 3vw, 34px); }
html:root body .red-community-cycle .red-structure-community p { max-width: 60ch; margin: 8px auto; color: #f0e7d3; }
html:root body .red-community-cycle p.red-cycle-community-lead { color: #fff9ed; font-weight: 600; }
.red-community-cycle .red-cycle-community-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; max-width: 100%; margin-top: 14px; padding: 9px 18px; border: 1px solid #fff9ed; border-radius: 999px; background: #fff9ed; color: #27482c; font-weight: 750; text-decoration: none; }
.red-community-cycle .red-cycle-community-button:hover { background: #efdfbc; border-color: #efdfbc; }
.red-community-cycle a:focus-visible { outline: 3px solid #ae7727; outline-offset: 5px; }
.red-community-cycle .red-cycle-community-button:focus-visible { outline-color: #fff9ed; }
html:root body .red-community-cycle .red-cycle-feedback { position: relative; z-index: 1; width: min(680px, calc(100% - 84px)); margin: 18px auto 8px; padding: 16px 20px; border-radius: 15px; background: #fff9ed; color: #493525; font-size: 13px; text-align: center; }
.red-cycle-feedback a { display: inline-block; margin-top: 6px; color: #27482c; font-weight: 650; text-underline-offset: 3px; }
.red-cycle-lines { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.red-cycle-lines path[data-edge] { fill: none; stroke: #27482c; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.red-cycle-lines path[data-edge^="community-method"] { stroke-width: 2; }
.red-cycle-label { display: none; }
@media (min-width: 1000px) {
  .red-community-cycle[data-connectors="ready"] .red-cycle-lines { display: block; }
  .red-community-cycle[data-connectors="ready"] .red-cycle-label { position: absolute; z-index: 1; top: 210px; display: block; width: 168px; padding: 9px 12px; border: 1px solid #d7c9a9; border-radius: 14px; background: #fff9ed; color: #27482c; font-size: 12px; line-height: 1.45; text-align: center; }
  .red-cycle-label-left { left: 48px; }
  .red-cycle-label-right { right: 48px; }
}
@media (max-width: 999px) {
  html:root body .red-community-cycle .red-structure-core { width: min(580px, 90%); }
  html:root body .red-community-cycle .red-structure-branches { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 46px; gap: 16px; }
  html:root body .red-community-cycle .red-structure-community { width: min(680px, 100%); margin-top: 46px; }
  html:root body .red-community-cycle .red-cycle-feedback { width: min(680px, 100%); }
  .red-community-cycle .red-structure-branches::before,
  .red-community-cycle .red-structure-community::before { content: '↓'; position: absolute; top: -37px; left: calc(50% - 12px); width: 24px; color: #27482c; font: 26px/1 Georgia, serif; text-align: center; }
}
@media (max-width: 580px) {
  html:root body .red-community-cycle .red-structure-core { width: 100%; height: 182px; padding: 1rem 1rem 1.5rem; margin-top: -24px; }
  html:root body .red-community-cycle .red-structure-core span { max-width: 28ch; margin-inline: auto; font-size: 9px; }
  html:root body .red-community-cycle .red-structure-branches { grid-template-columns: 1fr; }
  html:root body .red-community-cycle .red-structure-card { min-height: 0; padding: 22px; }
  html:root body .red-community-cycle .red-structure-card h3 { min-height: 0; margin: 12px 0 8px; }
  html:root body .red-community-cycle .red-structure-community { padding: 24px 20px; }
}