/* ============================================================
   Page-specific styles for the RISE rules page.
   Everything else comes from citta-theme.css.
   ============================================================ */

/* anchor jumps clear the sticky bar */
:target{scroll-margin-top:5rem}

/* ---- compact hero (this is a reference page, not a landing page) ---- */
.hero--brief{
  min-height:auto;
  padding-block:clamp(5.5rem,14vw,8rem) clamp(2.5rem,7vw,4rem);
  justify-content:flex-end;
}

/* ---- sticky tab bar ---- */
.tabbar{
  position:sticky;top:0;z-index:40;
  background:var(--ink);
  border-bottom:1px solid rgba(243,243,243,.12);
}
.tabbar__inner{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;gap:0;padding-inline:var(--gutter);
  overflow-x:auto;scrollbar-width:none;
}
.tabbar__inner::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;
  position:relative;
  padding:1.125rem 1.25rem;
  font-family:var(--font-display);font-weight:600;
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,243,243,.55);
  background:none;cursor:pointer;
  transition:color .15s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;text-align:center;
}
.tab:hover{color:var(--mist)}
.tab[aria-selected="true"]{color:#fff}
.tab::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.tab__n{
  display:block;font-size:.625rem;letter-spacing:.2em;
  color:var(--accent);margin-bottom:.25rem;font-weight:700;
}

/* ---- panels ---- */
.panel[hidden]{display:none}
.panel{animation:panel-in .35s cubic-bezier(.4,0,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}

/* ---- numbered rule list ---- */
/* rules are numbered so organizers and participants can cite them by number */
.rulelist{counter-reset:rule;margin-top:2.5rem;max-width:54rem}
.rulelist{margin-inline-start:-1rem}
.rulelist > li{
  counter-increment:rule;
  display:grid;grid-template-columns:2.75rem 1fr;gap:1rem;
  padding:1.125rem 0 1.125rem 1rem;
  border-top:1px solid var(--ink-10);
}
.rulelist > li:last-child{border-bottom:1px solid var(--ink-10)}
.rulelist > li::before{
  content:counter(rule,decimal-leading-zero);
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  letter-spacing:.05em;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:.15rem;
}
.rulelist p{font-size:var(--text-base);font-weight:500;color:var(--slate);line-height:1.6}
.rulelist strong{color:var(--ink);font-weight:700}

/* a rule whose breach has a stated consequence gets a red rail */
.rulelist > li.is-critical{
  background:rgba(255,31,31,.04);
  box-shadow:inset 3px 0 0 var(--accent);
}
.rulelist > li.is-critical p{color:var(--ink)}

/* ---- essentials ---- */
.facts{display:grid;gap:0;margin-top:2.5rem;max-width:54rem}
.fact{
  display:grid;grid-template-columns:1fr;gap:.25rem;
  padding-block:1.25rem;border-top:1px solid var(--ink-10);
}
.facts .fact:last-child{border-bottom:1px solid var(--ink-10)}
.fact__k{
  font-family:var(--font-display);font-weight:600;font-size:.75rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.fact__v{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);
  letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
.fact__note{font-size:var(--text-sm);font-weight:500;color:var(--slate)}

/* bring / don't-forget columns */
.cols{display:grid;gap:2.5rem;margin-top:3.5rem}

/* callout — the one thing you must not get wrong */
.callout{
  max-width:52rem;
  border-left:4px solid var(--accent);
  background:rgba(255,31,31,.05);
  padding:1.5rem 1.5rem 1.5rem 1.75rem;
  margin-top:2.5rem;
}
.callout__t{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
  letter-spacing:.02em;text-transform:uppercase;
}
.callout p{margin-top:.5rem;font-size:var(--text-sm);font-weight:500;color:var(--slate);line-height:1.625}
.section--ink .callout{
  max-width:52rem;background:rgba(255,31,31,.10)}
.section--ink .callout p{color:var(--mist-70)}

/* ---- print: QR scan users may print; organizers definitely will ---- */
@media print{
  .tabbar,.site-header,.hero,.no-print{display:none !important}
  .panel[hidden]{display:block !important}
  .section{padding-block:1.5rem;background:#fff !important;color:#000 !important}
  .section--ink{background:#fff !important;color:#000 !important}
  .section--ink .h2,.section--ink .lead{color:#000 !important}
  .glow{display:none}
  .rulelist > li{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* ---- breakpoints ---- */
@media (min-width:40rem){
  .fact{grid-template-columns:11rem 1fr;align-items:baseline;gap:1.5rem}
  .fact__k{padding-top:.4rem}
}
@media (min-width:48rem){
  .tab{flex:0 0 auto;padding-inline:2rem}
  .rulelist > li{grid-template-columns:3.5rem 1fr;gap:1.5rem}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}
}