.royal-page { background: #f5f7f6; }
.royal-hero {
  position: relative; overflow: hidden; padding: 72px 0;
  background: linear-gradient(118deg, #003f24 0%, #006233 55%, #7b1e24 100%);
  color: #fff;
}
.royal-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 18%, rgba(255,207,59,.15), transparent 28%), radial-gradient(circle at 86% 70%, rgba(255,255,255,.08), transparent 24%); }
.royal-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 54px; align-items: center; }
.royal-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #ffe99a; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.royal-hero h1 { margin: 20px 0 16px; color: #fff; font-size: clamp(2.5rem,5vw,4.8rem); line-height: 1.05; }
.royal-hero p { max-width: 790px; margin: 0; color: rgba(255,255,255,.9); font-size: 1.05rem; line-height: 1.8; }
.royal-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.royal-hero-button { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 6px; color: #004d29; background: #ffcf3b; font-weight: 800; }
.royal-hero-button.secondary { color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.35); }
.royal-portrait-card { position: relative; width: min(380px,100%); margin-left: auto; padding: 12px; background: #fff; border-radius: 14px; box-shadow: 0 26px 65px rgba(0,0,0,.32); }
.royal-portrait-card::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(210,173,63,.72); border-radius: 8px; pointer-events: none; }
.royal-portrait-card img { display: block; width: 100%; aspect-ratio: 724/1024; object-fit: cover; object-position: center top; border-radius: 8px; }
.royal-portrait-caption { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; padding: 14px 16px; color: #fff; background: rgba(0,50,29,.9); border-left: 4px solid #ffcf3b; border-radius: 4px; }
.royal-portrait-caption strong, .royal-portrait-caption span { display: block; }
.royal-portrait-caption strong { font-size: .95rem; }
.royal-portrait-caption span { margin-top: 3px; color: rgba(255,255,255,.78); font-size: .78rem; }
.royal-main { position: relative; padding: 70px 0 92px; }
.royal-main::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg, rgba(0,98,51,.025), transparent 45%); }
.royal-intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-bottom: 28px; padding: 24px 28px; background: #fff; border: 1px solid #dbe5df; border-left: 5px solid #d3ad3f; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,74,42,.07); }
.royal-intro h2 { margin: 0 0 8px; color: #004d29; font-size: 1.35rem; }
.royal-intro p { margin: 0; color: #5f6d66; line-height: 1.7; }
.royal-count { min-width: 120px; text-align: center; }
.royal-count strong { display: block; color: #006233; font-size: 2.3rem; line-height: 1; }
.royal-count span { color: #6d746f; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.royal-toolbar { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 12px; margin: 0 0 48px; padding: 14px; background: rgba(255,255,255,.94); border: 1px solid #dbe5df; border-radius: 10px; box-shadow: 0 10px 35px rgba(0,64,38,.09); backdrop-filter: blur(12px); }
.royal-search, .royal-year { position: relative; }
.royal-search i, .royal-year i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #006233; pointer-events: none; }
.royal-search input, .royal-year select { width: 100%; min-height: 48px; padding: 11px 15px 11px 45px; color: #24342d; background: #fff; border: 1px solid #cfdcd5; border-radius: 7px; font: inherit; }
.royal-search input:focus, .royal-year select:focus { outline: 3px solid rgba(0,98,51,.12); border-color: #006233; }
.royal-timeline { position: relative; z-index: 1; display: grid; gap: 32px; }
.royal-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: linear-gradient(#d3ad3f,#006233 12%,#006233 88%,#d3ad3f); }
.royal-entry { display: grid; grid-template-columns: minmax(0,1fr) 78px minmax(0,1fr); align-items: center; min-height: 160px; }
.royal-card { position: relative; grid-column: 1; padding: 26px 28px; background: #fff; border: 1px solid #e2e8e5; border-top: 4px solid #d3ad3f; border-radius: 9px; box-shadow: 0 15px 42px rgba(38,58,49,.09); }
.royal-card::after { content: ''; position: absolute; top: 50%; right: -14px; width: 26px; height: 26px; transform: translateY(-50%) rotate(45deg); background: #fff; border-top: 1px solid #e2e8e5; border-right: 1px solid #e2e8e5; }
.royal-entry:nth-child(even) .royal-card { grid-column: 3; }
.royal-entry:nth-child(even) .royal-card::after { right: auto; left: -14px; border: 0; border-bottom: 1px solid #e2e8e5; border-left: 1px solid #e2e8e5; }
.royal-card h3 { margin: 0 0 18px; color: #40536e; font-size: 1rem; line-height: 1.42; }
.royal-card-actions{display:flex;flex-wrap:wrap;gap:10px}.royal-view{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;color:#fff;background:#435775;border:1px solid #435775;border-radius:4px;font-size:.88rem;font-weight:700}.royal-view:hover{background:#006233;border-color:#006233}.royal-card-actions .royal-download{margin:0}
.royal-download { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; color: #006233; background: #fff; border: 1px solid #cbb88a; border-radius: 4px; font-size: .88rem; font-weight: 700; }
.royal-download:hover { color: #fff; background: #006233; border-color: #006233; }
.royal-marker { position: relative; z-index: 2; grid-column: 2; display: grid; width: 46px; height: 46px; margin: 0 auto; place-items: center; color: #fff; background: #435775; border: 5px solid #f5f7f6; border-radius: 50%; box-shadow: 0 0 0 1px rgba(67,87,117,.16); }
.royal-date { grid-column: 3; padding-left: 0; color: #927e4c; font-size: .9rem; font-weight: 800; }
.royal-entry:nth-child(even) .royal-date { grid-column: 1; grid-row: 1; padding-right: 0; text-align: right; }
.royal-entry[hidden] { display: none !important; }
.royal-empty { display: none; padding: 36px; text-align: center; background: #fff; border: 1px solid #dbe5df; border-radius: 10px; }
.royal-empty.visible { display: block; }
.royal-source-note { position: relative; z-index: 1; margin-top: 48px; padding: 22px 24px; color: #59675f; background: #eef4f0; border: 1px solid #cfddd5; border-radius: 8px; line-height: 1.7; }
.royal-source-note i { margin-right: 8px; color: #006233; }
@media (max-width: 900px) {
  .royal-hero-grid { grid-template-columns: 1fr; }
  .royal-portrait-card { margin: 0; max-width: 340px; }
  .royal-intro { grid-template-columns: 1fr; }
  .royal-count { text-align: left; }
  .royal-timeline::before { left: 23px; transform: none; }
  .royal-entry, .royal-entry:nth-child(even) { grid-template-columns: 47px minmax(0,1fr); gap: 16px; align-items: start; }
  .royal-marker, .royal-entry:nth-child(even) .royal-marker { grid-column: 1; grid-row: 1; width: 46px; height: 46px; margin: 18px 0 0; }
  .royal-card, .royal-entry:nth-child(even) .royal-card { grid-column: 2; grid-row: 1; }
  .royal-card::after, .royal-entry:nth-child(even) .royal-card::after { top: 34px; right: auto; left: -12px; width: 22px; height: 22px; transform: rotate(45deg); border: 0; border-bottom: 1px solid #e2e8e5; border-left: 1px solid #e2e8e5; }
  .royal-date, .royal-entry:nth-child(even) .royal-date { grid-column: 2; grid-row: 2; padding: 0 0 0 2px; text-align: left; }
}
@media (max-width: 640px) {
  .royal-hero { padding: 54px 0; }
  .royal-toolbar { position: relative; grid-template-columns: 1fr; margin-bottom: 34px; }
  .royal-card { padding: 22px; }
  .royal-card h3 { font-size: .94rem; }
}
.royal-source-note a { color: #006233; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.royal-source-note a:hover { color: #8d1f2a; }