/* Perspective 2 – Poem on a circle with visible center circle, legible spacing, centered. */
body {
    margin: 0;
    padding: 0;
    font-family: "Adobe Jenson Pro", Georgia, serif;
    background-color: #1C1000;
    color: #fff;
}

.page-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 48px 72px;
    box-sizing: border-box;
}

.container {
    position: relative;
    width: 800px;
    height: 800px;
    margin: 0 auto;
    flex-shrink: 0;
}

.container p {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    /* Origin at start of line (left center) so the beginnings sit on the circle */
    transform-origin: 0 50%;
    color: #260B00;
    --r: 120px;
}

/* Rotate then move out by R: the start of each line lands on the circle and extends outward */
.line1  { transform: translateY(-50%) rotate(-90deg) translateX(var(--r)); }
.line2  { transform: translateY(-50%) rotate(-67.5deg) translateX(var(--r)); }
.line3  { transform: translateY(-50%) rotate(-45deg) translateX(var(--r)); }
.line4  { transform: translateY(-50%) rotate(-22.5deg) translateX(var(--r)); }
.line5  { transform: translateY(-50%) rotate(0deg) translateX(var(--r)); }
.line6  { transform: translateY(-50%) rotate(22.5deg) translateX(var(--r)); }
.line7  { transform: translateY(-50%) rotate(45deg) translateX(var(--r)); }
.line8  { transform: translateY(-50%) rotate(67.5deg) translateX(var(--r)); }
.line9  { transform: translateY(-50%) rotate(90deg) translateX(var(--r)); }
.line10 { transform: translateY(-50%) rotate(112.5deg) translateX(var(--r)); }
.line11 { transform: translateY(-50%) rotate(135deg) translateX(var(--r)); }
.line12 { transform: translateY(-50%) rotate(157.5deg) translateX(var(--r)); }
.line13 { transform: translateY(-50%) rotate(180deg) translateX(var(--r)); }
.line14 { transform: translateY(-50%) rotate(202.5deg) translateX(var(--r)); }
.line15 { transform: translateY(-50%) rotate(225deg) translateX(var(--r)); }
.line16 { transform: translateY(-50%) rotate(247.5deg) translateX(var(--r)); }

.nav-button {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 5px;
}

.nav-button:hover {
    opacity: 0.5;
}