:root {
  --paper-ink: #172039;
  --paper-soft-ink: #4a5871;
  --paper-ground: #dce2ed;
  --paper-sheet: #fdfdfc;
  --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); }

/* The frame (width, outline, cast shadow) comes from .institution in site.css. */
.sydney-paper { background: var(--paper-sheet); }

.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.6rem, 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; }

/* Static, so the breadcrumb anchors to the hero's upper-left corner rather than to this block. */
.paper-hero-copy {
  width: min(760px, calc(100% - 56px));
  padding: clamp(88px, 12vw, 120px) clamp(28px, 7vw, 72px) clamp(36px, 6vw, 64px);
  text-shadow: 0 2px 12px rgba(8, 16, 36, .58);
}

.paper-hero .hierarchy-nav.hierarchy-nav {
  position: absolute;
  z-index: 8;
  top: 22px;
  left: clamp(18px, 3vw, 28px);
  max-width: calc(100% - 56px);
  margin: 0;
  text-shadow: none;
}

.paper-hero h1 {
  max-width: 760px;
  margin: 0;
  font: 600 clamp(3rem, 7vw, 6.1rem)/.96 var(--house-serif);
  letter-spacing: -.015em;
}

.paper-byline {
  margin: 22px 0 0;
  color: #fff7e6;
  font: 13px/1.4 var(--house-sans);
}

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

.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: var(--house-sans);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Related papers and the return line stay quiet: ordinary serif links on the reading surface. */
.paper-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 18px clamp(28px, 8vw, 78px);
  border-top: 1px solid var(--paper-line, #d3d9e4);
  background: var(--paper-sheet);
}

.paper-siblings a {
  font: 1rem/1.4 var(--house-serif);
  color: var(--paper-blue);
}

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

.paper-status {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(28px, 8vw, 78px);
  color: var(--paper-soft-ink);
  background: #eef1f7;
  border-top: 1px solid #d3d9e4;
  font: 12px/1.5 var(--house-sans);
}

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

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

@media (max-width: 600px) {
  .paper-hero { min-height: 430px; }
  .paper-hero .hierarchy-nav.hierarchy-nav { top: 16px; left: 16px; max-width: calc(100% - 32px); }
  .paper-hero-copy { width: auto; padding: 84px 24px 40px; }
  .paper-hero h1 { font-size: clamp(2.6rem, 13vw, 4.4rem); }
  .paper-body { padding: 48px 24px 68px; font-size: 1.03rem; line-height: 1.75; }
  .paper-siblings { flex-direction: column; padding: 16px 24px; }
  .paper-status { padding: 12px 24px; }
  .paper-status { align-items: flex-start; flex-direction: column; }
}

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

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