/* =========================================================
   goblin-laws.css
   Pipe-Works — Goblin Laws Page
   ========================================================= */

/* =========================================================
   ANCHOR OFFSET
   ========================================================= */

.rule {
  scroll-margin-top: 2rem;
}

/* =========================================================
   INDEX-FIRST VIEW
   ========================================================= */

/* Hide all laws and category headers by default */
.rule,
.ledger:not(#index) {
  display: none;
}

/* Show only the targeted law */
.rule:target {
  display: block;
  background: var(--paper);
  box-shadow:
    -0.5rem 0 0 var(--paper),
    0.5rem 0 0 var(--paper),
    0 0 0 1px var(--ink-faded);
  border-radius: 2px;
}

/* Hide index when viewing a law */
main:has(.rule:target) #index {
  display: none;
}

/* Back link — hidden by default, shown when law is targeted */
.rule .back-to-index {
  display: none;
}

.rule:target .back-to-index {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--ink-faded);
}

.rule:target .back-to-index:hover {
  color: var(--ink);
}

/* =========================================================
   PIPE MARK — Uses quirk system for responsive positioning
   ========================================================= */

#pipe-mark {
  position: absolute;
  left: 0;
  bottom: 7.6rem;
  opacity: 0.7;

  --quirk-x: -3rem;
  --quirk-y: 0rem;
  --quirk-rotate: 5deg;
  transform: translate(
      calc(var(--quirk-x) * var(--quirk-intensity)),
      calc(var(--quirk-y) * var(--quirk-intensity))
    )
    rotate(calc(var(--quirk-rotate) * var(--quirk-intensity)));
}

/* =========================================================
   BLOCKQUOTE
   ========================================================= */

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--ink-faded);
  font-style: italic;
}

blockquote p {
  margin: 0.5rem 0;
}

/* =========================================================
   MARGIN NOTE POSITIONING — Uses quirk system
   ========================================================= */

#note-goblin-laws {
  display: inline-block;
  max-width: 22rem;

  --quirk-x: 14rem;
  --quirk-y: -1.5rem;
  --quirk-rotate: 0deg;
  transform: translate(
      calc(var(--quirk-x) * var(--quirk-intensity)),
      calc(var(--quirk-y) * var(--quirk-intensity))
    )
    rotate(calc(var(--quirk-rotate) * var(--quirk-intensity)));
}