.pp-preview-nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px auto; padding: 12px 16px; max-width: 1120px; background: #fffaf1; border-radius: 6px; font: 14px Arial, sans-serif; }
.pp-preview-nav a { color: #354d57; text-underline-offset: 5px; }
.pp-preview-nav a[aria-current="page"] { font-weight: bold; }
.pp-page { --pp-accent: #5d90aa; --pp-gold: #bf953f; --pp-burgundy: #830c29; --pp-paper: #fffaf1; --pp-shadow: rgba(102, 75, 28, .09); position: relative; isolation: isolate; padding: 35px 36px 60px; margin: 0 auto 40px; max-width: 1120px; color: #433b33; background: #fffaf1; font-family: Georgia, 'Times New Roman', serif; }
.pp-page--sir { --pp-accent: #2f6f72; --pp-shadow: rgba(53, 79, 58, .13); background: #eef1e5; }
.pp-page::before { content: ''; position: absolute; z-index: -1; inset: 18px; border: 1px solid var(--pp-gold); pointer-events: none; }
.pp-corner { position: absolute; width: 100px; height: 100px; color: var(--pp-accent); pointer-events: none; }
.pp-corner--tl { top: 14px; left: 14px; }
.pp-corner--tr { top: 14px; right: 14px; transform: rotate(90deg); }
.pp-corner--br { bottom: 14px; right: 14px; transform: rotate(180deg); }
.pp-corner--bl { bottom: 14px; left: 14px; transform: rotate(270deg); }
.pp-header { text-align: center; position: relative; padding: 0 0 10px; }
.pp-event-name { display: flex; align-items: center; gap: 26px; justify-content: center; color: var(--pp-accent); font: 15px/1.6 Arial, sans-serif; letter-spacing: .35em; text-transform: uppercase; margin: 0 0 15px; }
.pp-event-name::before, .pp-event-name::after { content: ''; flex: 1; max-width: 210px; height: 1px; background: var(--pp-gold); }
.pp-event-name span { background: inherit; }
.pp-diamond { display: block; width: 8px; height: 8px; border: 1px solid var(--pp-accent); margin: 0 auto 10px; transform: rotate(45deg); }
.pp-page .pp-header h1 { font: 400 clamp(64px, 8vw, 100px)/1.1 'Bodoni MT', Didot, 'Times New Roman', serif !important; color: var(--pp-burgundy) !important; margin: 0 0 18px; letter-spacing: -.055em; text-shadow: none; }
.pp-divider { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--pp-gold); margin: 0 auto; width: min(500px, 70%); }
.pp-divider::before, .pp-divider::after { content: ''; height: 1px; flex: 1; background: var(--pp-gold); }
.pp-divider svg { width: 52px; height: 42px; }
.pp-divider span { font-size: 19px; }
.pp-section { margin: 0 0 42px; }
.pp-section:last-of-type { margin-bottom: 0; }
.pp-page .pp-section-title { margin: 18px 0 26px; text-align: center; text-transform: uppercase; font: 24px/1.5 Georgia, serif !important; letter-spacing: .18em; color: var(--pp-accent); }
.pp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.pp-card { flex: 0 0 calc((100% - 56px) / 3); min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 22px 14px 26px; border: 1px solid var(--pp-gold); border-radius: 17px; background: var(--pp-paper); box-shadow: 0 9px 17px var(--pp-shadow); text-align: center; }
.pp-portrait { position: relative; width: min(280px, 100%); aspect-ratio: 300 / 280; color: var(--pp-accent); flex-shrink: 0; }
.pp-fan { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-page .pp-portrait img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 73%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: 3px; border: 1.5px solid var(--pp-gold); background: var(--pp-paper); outline: 1px solid var(--pp-gold); outline-offset: 3px; box-shadow: none; max-width: none; margin: 0; }
.pp-page .pp-name { width: 100%; margin: 2px 0 12px; color: var(--pp-burgundy) !important; font: 400 clamp(23px, 2.5vw, 31px)/1.18 'Bodoni MT', Didot, 'Times New Roman', serif !important; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; text-shadow: none; }
.pp-discover { position: relative; display: block; margin: auto 0 0; padding: 2px 0 12px; color: var(--pp-accent); border: 0; border-radius: 0; background: transparent; font: 18px/1.4 Georgia, serif; cursor: pointer; }
.pp-discover::after { content: ''; position: absolute; height: 1px; width: 52px; bottom: 0; left: calc(50% - 26px); background: var(--pp-gold); transition: width .2s, left .2s; }
.pp-discover:hover::after { width: 100%; left: 0; }
.pp-discover:focus-visible, .pp-dialog button:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 5px; }
.pp-day { color: var(--pp-accent); font: 15px/1.5 Georgia, serif; margin: 0 0 6px; }
.pp-dialog { position: fixed; inset: 0; width: min(700px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 38px; color: #433b33; border: 1px solid var(--pp-gold); border-radius: 18px; background: var(--pp-paper); box-shadow: 0 20px 70px rgba(0,0,0,.2); overflow-y: auto; }
.pp-dialog::backdrop { background: rgba(24, 38, 40, .6); }
.pp-dialog img { display: block; width: min(280px, 80%); max-height: 320px; object-fit: contain; margin: 0 auto 24px; border-radius: 10px; }
.pp-page .pp-dialog h2 { color: var(--pp-burgundy); text-align: center; font: 32px/1.2 Georgia, serif !important; margin: 0 0 24px; }
#pp-dialog-bio { font: 16px/1.8 Arial, sans-serif; }
.pp-dialog-close { position: absolute; right: 12px; top: 8px; border: 0; background: transparent; color: var(--pp-accent); width: 36px; height: 36px; font: 30px/1 Arial, sans-serif; }
.pp-dialog-done { display: block; margin: 28px auto 0; padding: 9px 25px; background: transparent; color: var(--pp-accent); border: 1px solid var(--pp-gold); border-radius: 6px; font: 17px Georgia, serif; }
@media (max-width: 900px) { .pp-card { flex-basis: calc((100% - 28px) / 2); } .pp-event-name { font-size: 12px; letter-spacing: .22em; } .pp-corner { width: 75px; height: 75px; } }
@media (max-width: 575px) { .pp-page { padding: 38px 28px; } .pp-page::before { inset: 10px; } .pp-corner { width: 55px; height: 55px; } .pp-corner--tl, .pp-corner--tr { top: 7px; } .pp-corner--bl, .pp-corner--br { bottom: 7px; } .pp-corner--tl, .pp-corner--bl { left: 7px; } .pp-corner--tr, .pp-corner--br { right: 7px; } .pp-event-name { gap: 8px; letter-spacing: .14em; } .pp-event-name::before, .pp-event-name::after { display: none; } .pp-card { flex-basis: 100%; max-width: 340px; } .pp-grid { gap: 22px; } .pp-page .pp-name { font-size: 29px !important; } .pp-dialog { padding: 38px 22px 24px; } .pp-preview-nav { gap: 12px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .pp-discover::after { transition: none; } }