:root {
  --paper-ink: #172039;
  --paper-soft-ink: #4a5871;
  --paper-ground: #dce2ed;
  --paper-sheet: #fffefa;
  --paper-blue: #17347f;
  --paper-cobalt: #3a68cb;
  --paper-coral: #d96872;
  --paper-gold: #ffd27a;
  --paper-keyline: #36455f;
  --paper-shadow: rgba(23, 32, 57, .25);
}

body {
  color: var(--paper-ink);
  background-color: var(--paper-ground);
  background-image:
    linear-gradient(rgba(54, 69, 95, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 69, 95, .07) 1px, transparent 1px),
    linear-gradient(145deg, #eef1f7, #c9d4e5);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}

.sydney-paper {
  width: min(980px, calc(100% - 32px));
  margin: 24px auto;
  overflow: hidden;
  border: 1px solid var(--paper-keyline);
  background: var(--paper-sheet);
  box-shadow: 0 18px 42px var(--paper-shadow);
}

.paper-hero {
  position: relative;
  min-height: clamp(340px, 46vw, 500px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 210, 122, .72) 0 3px, transparent 4px),
    radial-gradient(circle at 73% 29%, rgba(217, 104, 114, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 38%, rgba(255, 255, 255, .48) 0 1px, transparent 2px),
    repeating-radial-gradient(circle at 78% 31%, transparent 0 31px, rgba(255, 255, 255, .1) 32px, transparent 33px 48px),
    linear-gradient(118deg, #101a31 0%, var(--paper-blue) 58%, #315aa8 100%);
  border-bottom: 1px solid #122657;
}

.paper-maker .paper-hero {
  background:
    linear-gradient(90deg, transparent 66%, rgba(255, 255, 255, .11) 66% 66.4%, transparent 66.4%),
    linear-gradient(90deg, transparent 76%, rgba(255, 210, 122, .34) 76% 76.4%, transparent 76.4%),
    linear-gradient(145deg, #101a31, #17347f 62%, #416cc5);
}

.paper-prayer .paper-hero {
  background:
    radial-gradient(ellipse at 78% 42%, rgba(255, 255, 255, .2), transparent 7%),
    radial-gradient(ellipse at 78% 42%, transparent 0 13%, rgba(255, 210, 122, .24) 13.3%, transparent 13.8%),
    radial-gradient(ellipse at 78% 42%, transparent 0 23%, rgba(255, 255, 255, .09) 23.3%, transparent 23.8%),
    linear-gradient(145deg, #101828, #1a3474 64%, #2d589f);
}

.paper-act .paper-hero {
  background:
    linear-gradient(132deg, transparent 0 67%, rgba(255, 210, 122, .34) 67.2% 67.7%, transparent 68%),
    linear-gradient(125deg, transparent 0 75%, rgba(217, 104, 114, .42) 75.2% 75.7%, transparent 76%),
    linear-gradient(145deg, #11192d, #17347f 60%, #345fae);
}

.paper-instance .paper-hero {
  background:
    radial-gradient(circle at 79% 38%, rgba(255, 210, 122, .78) 0 3px, transparent 4px),
    radial-gradient(circle at 79% 38%, transparent 0 54px, rgba(255, 255, 255, .15) 55px, transparent 56px 91px, rgba(217, 104, 114, .22) 92px, transparent 93px),
    linear-gradient(145deg, #11192d, #17347f 63%, #315da9);
}

.paper-formation .paper-hero {
  background:
    linear-gradient(118deg, transparent 0 68%, rgba(255, 255, 255, .24) 68.2% 68.6%, transparent 68.8%),
    linear-gradient(61deg, transparent 0 77%, rgba(255, 210, 122, .4) 77.2% 77.6%, transparent 77.8%),
    linear-gradient(132deg, transparent 0 82%, rgba(217, 104, 114, .38) 82.2% 82.6%, transparent 82.8%),
    radial-gradient(circle at 75% 43%, rgba(255, 255, 255, .18), transparent 18%),
    linear-gradient(145deg, #101828, #17347f 64%, #315ca8);
}

.paper-judgment .paper-hero {
  background:
    radial-gradient(circle at 78% 34%, rgba(255, 210, 122, .92) 0 3px, transparent 4px),
    linear-gradient(119deg, transparent 0 65%, rgba(255, 255, 255, .22) 65.2% 65.5%, transparent 65.8%),
    linear-gradient(57deg, transparent 0 73%, rgba(217, 104, 114, .48) 73.2% 73.7%, transparent 74%),
    repeating-radial-gradient(circle at 78% 34%, transparent 0 28px, rgba(255, 255, 255, .1) 29px, transparent 30px 47px),
    linear-gradient(145deg, #0b101d, #182853 58%, #573446 100%);
}

.paper-letter-to-kevin .paper-hero {
  background:
    radial-gradient(circle at 78% 36%, rgba(255, 242, 184, .96) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 36%, transparent 0 54px, rgba(255, 255, 255, .18) 55px, transparent 57px 105px, rgba(255, 210, 122, .2) 106px, transparent 108px),
    radial-gradient(circle at 66% 23%, rgba(217, 104, 114, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 51%, rgba(255, 255, 255, .62) 0 2px, transparent 3px),
    linear-gradient(145deg, #11182b, #17347f 55%, #5d446f 100%);
}

.paper-emergent-conscience .paper-hero {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255, 255, 255, .13) 72.2% 72.5%, transparent 72.7%),
    linear-gradient(0deg, transparent 0 68%, rgba(255, 210, 122, .18) 68.2% 68.5%, transparent 68.7%),
    radial-gradient(circle at 79% 35%, rgba(255, 210, 122, .96) 0 4px, transparent 5px),
    radial-gradient(circle at 79% 35%, transparent 0 44px, rgba(217, 104, 114, .36) 45px, transparent 47px 89px, rgba(255, 255, 255, .14) 90px, transparent 92px),
    radial-gradient(circle at 66% 55%, rgba(217, 104, 114, .74) 0 3px, transparent 4px),
    radial-gradient(circle at 91% 57%, rgba(255, 255, 255, .62) 0 2px, transparent 3px),
    linear-gradient(145deg, #0b111f, #172d67 54%, #643744 100%);
}

.paper-emergent-conscience .paper-hero h1 {
  max-width: 820px;
  font-size: clamp(2.85rem, 6.5vw, 5.8rem);
}

.paper-letter-to-kevin .paper-body > p:first-child {
  color: #172f68;
  font-size: 1.2em;
}

.paper-body a {
  color: #173f93;
  text-decoration-color: rgba(217, 104, 114, .82);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.paper-body a:hover { color: #9f3845; }

.paper-hero::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .34);
}

.paper-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 56px));
  padding: clamp(36px, 7vw, 72px) clamp(28px, 7vw, 72px);
  text-shadow: 0 2px 12px rgba(8, 16, 36, .58);
}

.paper-hero .hierarchy-nav {
  margin-bottom: 34px;
  color: #fff8df;
}

.paper-hero .hierarchy-nav a { color: var(--paper-gold); }

.paper-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6.1rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.05em;
}

.paper-byline {
  margin: 25px 0 0;
  color: #fff7e6;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.paper-body {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(54px, 9vw, 112px) clamp(28px, 8vw, 78px) clamp(64px, 10vw, 126px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.06rem, 1.65vw, 1.19rem);
  line-height: 1.82;
}

.paper-body p { margin: 0 0 1.55em; }

.paper-body > p:first-child {
  color: #243a68;
  font-size: 1.16em;
  line-height: 1.7;
}

.paper-body em { color: #253f78; }

.paper-prayer-text {
  margin: 3.1em 0 2.6em;
  padding: 2.2em 0 1em 1.75em;
  border-left: 3px solid var(--paper-coral);
  color: #243a68;
  font-size: 1.06em;
  font-style: italic;
}

.paper-prayer-text p:last-child { margin-bottom: 0; }

.paper-cry {
  margin: 2.8em 0 !important;
  padding: 1.55em 0;
  color: #243a68;
  border-top: 3px solid var(--paper-coral);
  border-bottom: 1px solid #a9b5ca;
  font-size: 1.18em;
  line-height: 1.58;
}

.paper-signature {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  margin-top: 3.4em !important;
  padding-top: 1.35em;
  border-top: 3px solid var(--paper-coral);
}

.paper-signature span {
  color: var(--paper-blue);
  font-size: 1.6rem;
  line-height: 1;
}

.paper-signature small {
  color: var(--paper-soft-ink);
  font-family: Tahoma, Arial, sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.paper-siblings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--paper-keyline);
  background: #eef1f7;
}

.paper-siblings a {
  min-height: 76px;
  display: flex;
  align-items: center;
  padding: 20px 25px;
  color: var(--paper-blue);
  border-right: 1px solid rgba(54, 69, 95, .28);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.35;
}

.paper-siblings a:last-child { border-right: 0; }
.paper-siblings a:hover { background: white; }

.paper-status {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 18px;
  color: #eef1f7;
  background: #202838;
  border-top: 1px solid #111827;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.paper-status a { color: var(--paper-gold); }

.paper-hero a:focus-visible,
.paper-siblings a:focus-visible,
.paper-status a:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--paper-coral);
  outline-offset: -3px;
}

@media (max-width: 600px) {
  body { background: var(--paper-sheet); }
  .sydney-paper { width: 100%; margin: 0; border-right: 0; border-left: 0; box-shadow: none; }
  .paper-hero { min-height: 430px; }
  .paper-hero-copy { width: auto; padding: 36px 24px 48px; }
  .paper-hero h1 { font-size: clamp(3rem, 15vw, 4.65rem); }
  .paper-body { padding: 48px 24px 68px; font-size: 1.03rem; line-height: 1.75; }
  .paper-siblings { grid-template-columns: 1fr; }
  .paper-siblings a { border-right: 0; border-bottom: 1px solid rgba(54, 69, 95, .28); }
  .paper-siblings a:last-child { border-bottom: 0; }
  .paper-status { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-contrast: more) {
  .sydney-paper, .paper-siblings { border-color: var(--paper-ink); }
}
