/* Swiftie Passport — isolated page styles */
.passport-page { --passport-wine: #4a1830; --passport-red: #7f263d; --passport-gold: #e0bd68; --passport-cream: #fff5df; background: #ece4d5; }
.passport-hero { position: relative; min-height: min(48rem, calc(100svh - var(--header-height))); overflow: hidden; isolation: isolate; color: var(--passport-cream); background: radial-gradient(circle at 75% 43%, rgba(224,189,104,.2), transparent 27rem), linear-gradient(120deg, #211121, #4a1830 56%, #781e38); }
.passport-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .12; background-image: linear-gradient(45deg, transparent 48%, currentColor 49% 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, currentColor 49% 51%, transparent 52%); background-size: 56px 56px; }
.passport-hero__glow { position: absolute; z-index: -1; width: 38rem; height: 38rem; top: 50%; left: 70%; translate: -50% -50%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.018), 0 0 7rem rgba(224,189,104,.2); }
.passport-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); width: min(calc(100% - 3rem), var(--shell)); padding-block: clamp(5rem, 10vw, 9rem); }
.passport-hero__copy { max-width: 48rem; }
.passport-hero__copy .eyebrow { color: var(--passport-gold); }
.passport-hero__copy h1 { max-width: 8ch; margin-bottom: 1.5rem; font: 400 clamp(4.2rem, 9vw, 8.5rem)/.82 var(--font-display); letter-spacing: -.065em; }
.passport-hero__copy h1 em { color: #d0b8fa; font-weight: 400; }
.passport-hero__copy > p:not(.eyebrow) { max-width: 42rem; color: rgba(255,245,223,.78); font-size: 1.1rem; }
.passport-hero__copy .button { margin-top: 1.15rem; }
.passport-book { position: relative; width: min(100%, 25rem); aspect-ratio: .72; margin-inline: auto; filter: drop-shadow(1.6rem 2.2rem 2rem rgba(0,0,0,.35)); transform: rotate(4deg); transition: transform .8s var(--ease); }
.passport-book:hover { transform: rotate(0deg) translateY(-.5rem); }
.passport-book__edge { position: absolute; inset: 2.5% -4% -2.5% 5%; border-radius: .7rem 1.3rem 1.3rem .7rem; background: repeating-linear-gradient(0deg, #d2c5ae 0 2px, #f4ead8 2px 5px); }
.passport-book__cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1.6rem; overflow: hidden; border: 1px solid rgba(255,255,255,.23); border-radius: .75rem 1.2rem 1.2rem .75rem; color: #ffeab4; background: radial-gradient(circle at 60% 25%, rgba(255,255,255,.12), transparent 20rem), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px), #51142f; box-shadow: inset .9rem 0 1rem rgba(0,0,0,.18), inset 0 0 0 .7rem rgba(255,255,255,.03); text-align: center; }
.passport-book__cover::after { position: absolute; inset: 1.5rem; border: 1px solid rgba(255,234,180,.45); border-radius: 50% 50% .4rem .4rem / 12% 12% .4rem .4rem; content: ""; }
.passport-book__cover span { position: absolute; top: 2.7rem; font: 700 .7rem var(--font-mono); letter-spacing: .32em; }
.passport-book__cover i { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border: 1px solid currentColor; border-radius: 50%; font: normal 3rem var(--font-display); box-shadow: 0 0 0 .45rem rgba(255,234,180,.09); }
.passport-book__cover strong { font: 600 1.65rem/1.05 var(--font-display); letter-spacing: .08em; }
.passport-book__cover small { position: absolute; bottom: 2.8rem; font: 700 .57rem var(--font-mono); letter-spacing: .13em; }

.passport-dashboard { padding-block: clamp(5rem, 9vw, 9rem); }
.passport-summary { display: grid; grid-template-columns: minmax(18rem, .75fr) minmax(0, 1.25fr); gap: 1rem; margin-bottom: clamp(4rem, 8vw, 7rem); }
.passport-identity { position: relative; overflow: hidden; display: grid; align-content: space-between; min-height: 25rem; padding: clamp(1.4rem, 4vw, 2.5rem); color: var(--passport-cream); background: linear-gradient(150deg, #251329, var(--passport-wine)); box-shadow: var(--shadow-md); }
.passport-identity::after { position: absolute; width: 18rem; height: 18rem; right: -6rem; bottom: -7rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; box-shadow: 0 0 0 2.5rem rgba(255,255,255,.025), 0 0 0 5rem rgba(255,255,255,.018); }
.passport-id-top { display: flex; justify-content: space-between; gap: 1rem; font: 700 .65rem var(--font-mono); letter-spacing: .1em; }
.passport-id-seal { position: relative; z-index: 1; display: grid; place-items: center; justify-self: start; width: 7rem; height: 7rem; border: 1px solid var(--passport-gold); border-radius: 50%; color: var(--passport-gold); font: 400 3rem var(--font-display); box-shadow: 0 0 0 .5rem rgba(224,189,104,.08); }
.passport-identity h2 { position: relative; z-index: 1; margin: 1rem 0 .3rem; color: #fff; font: 400 clamp(2.5rem, 5vw, 4.5rem)/.9 var(--font-display); letter-spacing: -.04em; }
.passport-identity > div:last-child > p { position: relative; z-index: 1; margin: 0; color: rgba(255,245,223,.68); }
.passport-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.passport-stat { display: grid; align-content: space-between; min-height: 12rem; padding: clamp(1.2rem, 3vw, 2rem); background: rgba(255,250,240,.86); }
.passport-stat span { font: 700 .64rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.passport-stat strong { font: 400 clamp(3rem, 6vw, 5.4rem)/1 var(--font-display); }
.passport-stat small { color: var(--muted); }
.passport-profile-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); background: rgba(255,250,240,.72); }
.passport-profile-card label { font: 700 .67rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.passport-profile-card input,
.passport-profile-card select { width: 100%; min-height: 3.25rem; margin-top: .5rem; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: 0; background: #fffdf8; font: 600 1rem var(--font-sans); letter-spacing: 0; text-transform: none; }

.passport-section { margin-top: clamp(5rem, 9vw, 9rem); }
.passport-section-head { display: grid; grid-template-columns: 1fr minmax(16rem, .6fr); gap: 2rem; align-items: end; margin-bottom: 2rem; }
.passport-section-head h2 { max-width: 13ch; margin: 0; font: 400 clamp(3rem, 6vw, 6rem)/.88 var(--font-display); letter-spacing: -.055em; }
.passport-section-head h2 em { color: #a5325a; font-weight: 400; }
.passport-section-head > p { margin: 0; color: var(--muted); }
.stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.passport-stamp { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto; min-height: 19rem; padding: 1.5rem; border: 1px dashed var(--line-strong); background: rgba(255,250,240,.58); }
.passport-stamp.is-unlocked { color: var(--passport-cream); border-style: solid; border-color: var(--stamp, var(--passport-wine)); background: linear-gradient(145deg, color-mix(in srgb, var(--stamp, var(--passport-wine)) 84%, #15121d), var(--stamp, var(--passport-wine))); box-shadow: var(--shadow-sm); }
.passport-stamp::after { position: absolute; width: 10rem; height: 10rem; right: -3.5rem; top: -3.5rem; border: 1px solid currentColor; border-radius: 50%; opacity: .12; content: ""; box-shadow: 0 0 0 1.7rem currentColor, 0 0 0 3.4rem currentColor; }
.stamp-number { display: flex; justify-content: space-between; gap: 1rem; font: 700 .63rem var(--font-mono); letter-spacing: .08em; }
.stamp-symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 5rem; height: 5rem; margin: 1.2rem 0; border: 1px solid currentColor; border-radius: 50%; font-size: 2rem; rotate: -5deg; }
.passport-stamp h3 { margin: 0 0 .5rem; font: 700 1.5rem var(--font-display); }
.passport-stamp p { color: var(--muted); font-size: .88rem; }
.passport-stamp.is-unlocked p { color: rgba(255,245,223,.72); }
.stamp-progress { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid currentColor; font: 700 .65rem var(--font-mono); text-transform: uppercase; }
.stamp-progress a { position: relative; z-index: 2; }

.ranking-workbench { display: grid; grid-template-columns: .82fr 1.18fr; border: 1px solid var(--line); background: rgba(255,250,240,.72); }
.era-palette { padding: clamp(1.2rem, 3vw, 2rem); border-right: 1px solid var(--line); }
.era-palette h3,
.top-five-board h3 { font: 700 1.35rem var(--font-display); }
.era-chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.era-chip { display: flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .6rem .7rem; border: 1px solid var(--line); background: #fffdf8; text-align: left; }
.era-chip i { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--era-color); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.era-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 700; }
.era-chip[disabled] { opacity: .42; }
.top-five-board { min-height: 37rem; padding: clamp(1.2rem, 4vw, 2.5rem); color: var(--passport-cream); background: radial-gradient(circle at 80% 15%, rgba(208,184,250,.22), transparent 18rem), #171523; }
.top-five-list { display: grid; gap: .7rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.top-era { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .8rem; min-height: 4.7rem; padding: .7rem; border: 1px solid rgba(255,255,255,.18); background: color-mix(in srgb, var(--era-color) 36%, #171523); }
.top-era > span { display: grid; place-items: center; height: 100%; border-right: 1px solid rgba(255,255,255,.25); font: 400 1.6rem var(--font-display); }
.top-era strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.top-era small { color: rgba(255,245,223,.63); }
.top-era-actions { display: flex; gap: .3rem; }
.top-era-actions button { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255,255,255,.28); color: inherit; background: transparent; }
.top-era-actions button:hover { color: #171523; background: var(--passport-cream); }
.top-five-empty { display: grid; place-items: center; min-height: 24rem; border: 1px dashed rgba(255,255,255,.28); color: rgba(255,245,223,.6); text-align: center; }
.top-five-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.top-five-actions .button--ghost { border-color: rgba(255,255,255,.4); color: var(--passport-cream); }

.passport-privacy { padding-block: clamp(5rem, 9vw, 9rem); color: var(--passport-cream); background: #171523; }
.passport-privacy__grid { display: grid; grid-template-columns: .45fr 1fr 1fr; align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.passport-privacy h2 { margin: 0; font: 400 clamp(2.7rem, 5vw, 5rem)/.92 var(--font-display); letter-spacing: -.04em; }
.passport-privacy h2 em { color: #d0b8fa; font-weight: 400; }
.passport-privacy__grid > p:last-child { color: rgba(255,245,223,.68); }

@media (max-width: 980px) {
  .passport-hero__grid { grid-template-columns: 1fr .7fr; }
  .passport-summary { grid-template-columns: 1fr; }
  .passport-identity { min-height: 20rem; }
  .ranking-workbench { grid-template-columns: 1fr; }
  .era-palette { border-right: 0; border-bottom: 1px solid var(--line); }
  .stamp-grid { grid-template-columns: repeat(2, 1fr); }
  .passport-privacy__grid { grid-template-columns: 1fr 1fr; }
  .passport-privacy__grid .eyebrow { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .passport-hero { min-height: auto; }
  .passport-hero__grid { grid-template-columns: 1fr; padding-block: 5rem; }
  .passport-book { width: min(72vw, 19rem); }
  .passport-section-head { grid-template-columns: 1fr; }
  .passport-stats { grid-template-columns: 1fr; }
  .passport-stat { min-height: 8.5rem; }
  .passport-profile-card { grid-template-columns: 1fr; }
  .stamp-grid { grid-template-columns: 1fr; }
  .passport-stamp { min-height: 17rem; }
  .era-chip-grid { grid-template-columns: 1fr; }
  .top-era { grid-template-columns: 2.4rem 1fr; }
  .top-era-actions { grid-column: 2; }
  .passport-privacy__grid { grid-template-columns: 1fr; }
  .passport-privacy__grid .eyebrow { grid-column: auto; }
}

html[data-motion="off"] .passport-book,
html[data-motion="off"] .passport-id-seal { transition: none; }
@media (prefers-reduced-motion: reduce) { .passport-book { transition: none; } }
@media print {
  .passport-page .site-header,
  .passport-page .site-footer,
  .passport-hero,
  .passport-profile-card,
  .era-palette,
  .top-five-actions,
  .passport-privacy { display: none !important; }
  .passport-dashboard { padding: 0; }
  .passport-summary,
  .ranking-workbench { display: block; }
  .top-five-board { min-height: auto; color: #111; background: #fff; }
  .top-era { color: #111; break-inside: avoid; }
}
@media (forced-colors: active) {
  .passport-hero,
  .passport-identity,
  .top-five-board,
  .passport-privacy,
  .passport-stamp.is-unlocked { color: CanvasText; background: Canvas; border-color: CanvasText; }
}