/* Presidents of Estonia, version 3 */
:root {
  --night: #0C1626; --night-2: #13213A; --ink: #111827; --body: #3B4350; --slate: #5E6672;
  --paper: #F6F3ED; --stone: #ECE6DC; --white: #FFFFFF; --rule: #DCD5C9; --rule-soft: #E9E3D8;
  --blue: #0072CE; --sky: #8DB8E8; --gold: #B08E5A; --gold-soft: #D9C4A0;
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--blue); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[id] { scroll-margin-top: 80px; }
.era, #timeline-filters { scroll-margin-top: 90px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); }
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gold); }
.muted { color: var(--slate); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }
.more-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.more-link::after { content: "→"; transition: transform .25s ease; }
.more-link:hover::after { transform: translateX(4px); }

/* Flag rule and header */
.flag-rule span { display: block; height: 3px; }
.flag-rule span:nth-child(1) { background: var(--blue); }
.flag-rule span:nth-child(2) { background: #000; }
.flag-rule span:nth-child(3) { background: var(--white); height: 2px; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(246,243,237,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.masthead { display: flex; gap: 0 28px; justify-content: space-between; align-items: center; min-height: 72px; flex-wrap: nowrap; }
.logo { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; white-space: nowrap; flex: none; }
.logo .arms { width: 38px; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(12,22,38,.18)); }
.logo .flag { display: grid; grid-template-rows: repeat(3, 1fr); width: 33px; height: 21px; box-shadow: 0 0 0 1px rgba(12,22,38,.25); }
.logo .flag i:nth-child(1) { background: #0072CE; }
.logo .flag i:nth-child(2) { background: #000; }
.logo .flag i:nth-child(3) { background: #fff; }
.logo b { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: .005em; line-height: 1; margin-left: 4px; }
.main-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 22px; margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.main-nav a { text-decoration: none; color: var(--ink); padding: 8px 0; border-bottom: 1px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--ink); }
.lang { flex: none; display: flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; margin-left: 6px; }
.lang a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink); text-decoration: none; border: 0; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--white); }
.menu-btn { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; transition: background .2s ease, color .2s ease; }
.btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.light:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn.ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn.outline { background: transparent; color: var(--ink); min-height: 42px; padding: 0 18px; }
.btn.outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; font: 600 14px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip:disabled { opacity: .4; cursor: default; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--white); min-height: min(88vh, 860px); display: flex; align-items: flex-end; }
.hero-bg { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 55%; will-change: transform; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,15,27,.9) 0%, rgba(8,15,27,.62) 46%, rgba(8,15,27,.18) 100%), linear-gradient(0deg, rgba(8,15,27,.75) 0%, rgba(8,15,27,0) 45%); }
.hero-inner { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: end; padding-top: 120px; padding-bottom: 72px; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 { font-size: clamp(52px, 8vw, 112px); font-weight: 400; line-height: .95; margin: 22px 0 26px; max-width: 900px; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero .lede { font-size: 19px; color: rgba(255,255,255,.86); max-width: 620px; }
.rotator { margin: 36px 0 0; max-width: 680px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.rotator blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.22; min-height: 2.5em; transition: opacity .45s ease, transform .45s ease; }
.rotator blockquote::before { content: "“"; color: var(--gold-soft); margin-right: 2px; }
.rotator blockquote::after { content: "”"; color: var(--gold-soft); }
.rotator figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: rgba(255,255,255,.72); }
.rotator figcaption a { color: var(--white); font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.rotator figcaption a:hover { text-decoration: underline; }
.rotator .controls { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rotator .progress { width: 80px; height: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.rotator .progress i { display: block; height: 100%; width: 0; background: var(--gold-soft); }
.rotator.running .progress i { animation: fill 11s linear forwards; }
@keyframes fill { to { width: 100%; } }
.rotator .next { min-height: 38px; padding: 0 16px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.55); cursor: pointer; }
.rotator .next:hover { background: var(--white); color: var(--ink); }
.rotator.fading blockquote { opacity: 0; transform: translateY(6px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.current { background: rgba(246,243,237,.96); color: var(--ink); padding: 16px; display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.current .photo-credit { grid-column: 1 / -1; order: 3; margin: 0; }
.current .eyebrow::before { width: 18px; }
.current .eyebrow { font-size: 10px; }
.current b { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.05; }
.credit-line { position: absolute; right: 16px; bottom: 12px; z-index: 3; max-width: calc(100% - 32px); font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.75); text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.credit-line a { color: inherit; }

/* Portraits */
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #D9D3C8, #BFB7AA); display: flex; align-items: center; justify-content: center; }
.portrait > span { font-family: var(--display); font-size: 72px; color: rgba(255,255,255,.85); line-height: 1; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform .8s ease; }
.photo-credit { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.photo-credit a { color: var(--slate); }

/* Section heads */
.section { padding-top: 120px; padding-bottom: 100px; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: 64px; }
.section-head .num { display: block; font-family: var(--display); font-style: italic; font-size: 22px; color: var(--gold); margin-bottom: 8px; }
.section-head h2 { font-size: clamp(44px, 5.4vw, 76px); font-weight: 400; margin-top: 14px; }
.section-head p { font-size: 17px; color: var(--body); border-left: 1px solid var(--gold); padding-left: 22px; }
.dark { background: var(--night); color: var(--white); }
.dark .section-head p { color: rgba(255,255,255,.75); }
.dark .eyebrow { color: var(--gold-soft); }
.dark a { color: var(--white); }

/* President cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 36px; }
.card { display: flex; flex-direction: column; gap: 14px; }
.card .frame { position: relative; display: block; text-decoration: none; color: inherit; }
.card .pwrap { position: relative; display: block; }
.card .frame .portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,15,27,.72) 0%, rgba(8,15,27,0) 46%); pointer-events: none; }
.card .frame .ord { position: absolute; left: 22px; bottom: 14px; z-index: 2; font-family: var(--display); font-size: 64px; line-height: 1; color: var(--white); }
.card .frame .band { position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2; }
.card:hover .portrait img, .card:focus-within .portrait img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.card h3 { font-size: 36px; margin-top: 8px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--blue); }
.card .term { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--slate); }
.card p { font-size: 16px; color: var(--body); }
.card .chips .chip { min-height: 32px; font-size: 13px; padding: 0 12px; background: transparent; }
.card-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 14px; font-weight: 600; margin-top: 4px; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-size: 15px; }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; }

/* Timeline */
.tl-hero { position: relative; overflow: hidden; background: var(--night); color: var(--white); }
.tl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .55; }
.tl-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,38,.25) 0%, rgba(12,22,38,.92) 100%); }
.tl-hero .wrap { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 56px; }
.tl-hero h2 { font-size: clamp(46px, 6vw, 88px); font-weight: 400; margin: 18px 0 20px; max-width: 900px; }
.tl-hero p { max-width: 760px; color: rgba(255,255,255,.82); font-size: 18px; }
.tl-hero .eyebrow { color: var(--gold-soft); }
.tl-tools { background: var(--white); border-bottom: 1px solid var(--rule); }
.tl-tools .wrap { padding-top: 28px; padding-bottom: 28px; }
.filters { display: flex; flex-direction: column; gap: 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.filter-row > b { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); min-width: 130px; }
.segmented { display: inline-flex; border: 1px solid var(--ink); }
.segmented button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--white); color: var(--ink); border: 0; border-left: 1px solid var(--ink); cursor: pointer; }
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.segmented button[data-value="world"][aria-pressed="true"] { background: #4A5361; }
.segmented button[data-value="estonia"][aria-pressed="true"] { background: var(--blue); }
.ico-flag { display: inline-grid; grid-template-rows: repeat(3, 4px); width: 18px; border: 1px solid currentColor; }
.ico-flag i:nth-child(1) { background: var(--blue); } .ico-flag i:nth-child(2) { background: #000; } .ico-flag i:nth-child(3) { background: #fff; }
.filter-count { font-size: 13px; color: var(--slate); font-weight: 600; }
.era-bar { position: sticky; top: 77px; z-index: 30; background: rgba(246,243,237,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.era-bar .wrap { padding-top: 10px; padding-bottom: 10px; }
.era-track { display: flex; gap: 3px; height: 40px; }
.era-track a { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: var(--c); color: var(--white); text-decoration: none; font-size: 11px; line-height: 1.25; overflow: hidden; white-space: nowrap; opacity: .38; transition: opacity .35s ease, flex-grow .5s ease; }
.era-track a strong { font-weight: 700; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.era-track a:hover, .era-track a.active { opacity: 1; color: var(--white); }
.era-track a.active { flex-grow: calc(var(--w) * 1.8); }
.lanes-head { display: grid; grid-template-columns: 1fr 64px 1fr; padding-top: 56px; }
.lanes-head div { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.lanes-head .w { justify-content: flex-end; color: #4A5361; }
.lanes-head .e { color: var(--blue); grid-column: 3; }
.eras { padding-bottom: 40px; }
.era { padding: 64px 0 24px; }
.era[hidden] { display: none; }
.era-head { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; background: var(--white); border-top: 6px solid var(--c); padding: 36px 40px; box-shadow: 0 1px 0 var(--rule); }
.era-head .who { display: flex; flex-direction: column; gap: 10px; }
.era-head .who .portrait { aspect-ratio: 1; width: 100%; }
.era-head .ord { font-family: var(--display); font-size: 20px; letter-spacing: .14em; color: var(--c); }
.era-head h3 { font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; margin: 6px 0 8px; }
.era-head .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); margin: 18px 0 8px; }
.era-head ul { margin: 0; padding-left: 18px; font-size: 15px; color: var(--body); display: flex; flex-direction: column; gap: 6px; }
.era-head.simple { grid-template-columns: 1fr; }
.quote { margin: 0; }
.quote blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: 27px; line-height: 1.25; color: var(--ink); }
.quote blockquote::before { content: "“"; display: block; font-size: 72px; line-height: .55; color: var(--c, var(--gold)); padding-top: 18px; font-style: normal; }
.quote figcaption { margin-top: 12px; font-size: 13px; color: var(--slate); }
.events { list-style: none; margin: 0; padding: 32px 0 0; position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; grid-auto-flow: row dense; row-gap: 18px; align-items: start; }
.events::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(var(--c), var(--c)) ; opacity: .55; }
.ev { position: relative; grid-column: 3; display: flex; flex-direction: column; gap: 4px; background: var(--white); padding: 18px 22px; border-left: 3px solid var(--t); box-shadow: 0 1px 2px rgba(17,24,39,.06); }
.ev::before { content: ""; position: absolute; left: -42px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--c); }
.ev[hidden] { display: none; }
.ev .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; font-weight: 700; color: var(--slate); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t, var(--slate)); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.ev h4 { font-size: 25px; font-weight: 600; line-height: 1.15; }
.ev p { font-size: 15px; color: var(--body); }
.ev.world { grid-column: 1; background: #E4E7EB; border-left: 0; border-right: 3px solid #4A5361; text-align: right; align-items: flex-end; box-shadow: none; }
.ev.world::before { left: auto; right: -42px; border-color: #4A5361; border-style: dotted; }
.ev.world .meta { justify-content: flex-end; }
.ev.world h4 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: #2F3640; line-height: 1.3; }
.ev.world p { color: #4A5361; }
.ev.world .tag { color: #4A5361; }
.globe { flex: none; }
.era-empty { grid-column: 1 / -1; text-align: center; color: var(--slate); font-style: italic; padding: 12px 0; }
.tl-note { font-size: 13px; color: var(--slate); max-width: 820px; padding-bottom: 72px; }

/* Office and archive */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.three h3 { font-size: 32px; margin-bottom: 12px; }
.three p { color: var(--body); }
.three .n { font-family: var(--display); font-style: italic; font-size: 54px; line-height: 1; color: var(--gold); display: block; margin-bottom: 12px; }
.panel { background: var(--white); padding: 34px; display: flex; flex-direction: column; gap: 16px; border-top: 3px solid var(--ink); }
.panel h3 { font-size: 30px; }
.panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.panel li span { display: block; font-size: 13px; color: var(--slate); }
.panel .speech { font-family: var(--display); font-size: 24px; line-height: 1.2; text-decoration: none; }
.note-box { margin-top: 64px; display: grid; grid-template-columns: 220px 1fr; gap: 20px 48px; border-top: 1px solid var(--rule); padding-top: 40px; }
.note-box h3 { font-size: 34px; }
.office-photo { position: relative; height: 420px; overflow: hidden; background: var(--night); }
.office-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Famous mosaic */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 26px; color: var(--white); text-decoration: none; overflow: hidden; background: var(--c, var(--night-2)); }
.tile:first-child { grid-column: span 2; grid-row: span 2; }
.tile:nth-child(2) { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,27,0) 35%, rgba(8,15,27,.85) 100%); }
.tile:hover img { transform: scale(1.06); }
.tile > * { position: relative; z-index: 1; }
.tile .n { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--gold-soft); }
.tile b { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.02; }
.tile:first-child b { font-size: 52px; }
.tile small { font-size: 14px; color: rgba(255,255,255,.8); max-width: 420px; line-height: 1.5; }
.tile:not(:first-child) small { display: none; }
.tile .credit { position: absolute; top: 12px; right: 14px; z-index: 1; font-size: 10px; color: rgba(255,255,255,.7); }
.tile:hover { color: var(--white); }

/* People */
.people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 24px; }
.person { display: flex; flex-direction: column; gap: 8px; }
.person .portrait { aspect-ratio: 3 / 4; }
.person .portrait > span { font-size: 54px; }
.person:hover .portrait img { filter: grayscale(0); }
.person .field { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.person h3 { font-size: 27px; line-height: 1.05; }
.person .yrs { font-size: 13px; color: var(--slate); font-weight: 600; }
.person p { font-size: 14px; color: var(--body); line-height: 1.55; }
.person a.src { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-top: 4px; }
.people-source { margin-top: 48px; font-size: 14px; color: var(--slate); }

/* Famous page */
.theme { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; padding: 88px 0; border-top: 1px solid var(--rule); }
.theme:nth-of-type(even) .theme-photo { order: 2; }
.theme-photo { position: relative; margin: 0; }
.theme-photo .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c); }
.theme-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-photo figcaption { padding-top: 8px; font-size: 11px; color: var(--slate); }
.theme-photo figcaption a { color: var(--slate); }
.theme h2 { font-size: clamp(42px, 4.6vw, 64px); font-weight: 400; margin: 14px 0 18px; }
.theme .lead { font-size: 19px; color: var(--body); margin-bottom: 22px; }
.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ticks li { position: relative; padding: 12px 0 12px 34px; font-size: 15.5px; color: var(--body); border-top: 1px solid var(--rule-soft); }
.ticks li::before { content: counter(t, decimal-leading-zero); counter-increment: t; position: absolute; left: 0; top: 13px; font-family: var(--display); font-style: italic; font-size: 17px; color: var(--c, var(--gold)); }
.ticks { counter-reset: t; }
.jump { position: sticky; top: 77px; z-index: 30; background: rgba(246,243,237,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.jump .chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.jump .chips::-webkit-scrollbar { display: none; }
.jump .chip { flex: none; background: transparent; }

/* Profile */
.crumbs { font-size: 13px; color: var(--slate); padding-top: 22px; padding-bottom: 22px; }
.crumbs a { color: var(--slate); }
.p-hero { position: relative; background: var(--night); color: var(--white); overflow: hidden; }
.p-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 10%, var(--c) 0%, rgba(12,22,38,0) 60%); opacity: .9; }
.p-hero .wrap { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px 72px; align-items: end; padding-top: 72px; padding-bottom: 72px; }
.p-portrait .portrait img { filter: none; }
.p-portrait .photo-credit, .p-portrait .photo-credit a { color: rgba(255,255,255,.65); }
.p-head { display: flex; flex-direction: column; gap: 18px; }
.p-head .eyebrow { color: var(--gold-soft); }
.p-head h1 { font-size: clamp(56px, 7vw, 104px); font-weight: 400; line-height: .95; }
.p-head .lede { font-size: 20px; color: rgba(255,255,255,.86); max-width: 640px; }
.p-head .facts dt { color: rgba(255,255,255,.6); }
.p-head .facts { font-size: 15px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; }
.p-sec { padding: 64px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 64px; }
.p-sec:first-child { border-top: 0; }
.p-sec > h2 { font-size: 40px; font-weight: 400; }
.p-sec .content { display: flex; flex-direction: column; gap: 14px; color: var(--body); }
.p-sec .big { font-family: var(--display); font-size: 28px; line-height: 1.3; color: var(--ink); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows li { display: grid; grid-template-columns: 140px 1fr; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.rows li b { font-weight: 700; color: var(--ink); font-size: 14px; letter-spacing: .02em; }
.rows li em { font-family: var(--display); font-size: 24px; color: var(--ink); }
.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.p-sec .events { grid-template-columns: 1fr; padding-top: 0; }
.p-sec .events::before { left: 0; margin-left: 0; }
.p-sec .ev, .p-sec .ev.world { grid-column: 1; margin-left: 28px; text-align: left; align-items: flex-start; }
.p-sec .ev::before, .p-sec .ev.world::before { left: -36px; right: auto; }
.p-sec .ev.world { border-right: 0; border-left: 3px solid #4A5361; }
.p-sec .ev.world .meta { justify-content: flex-start; }
.prevnext { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 36px 0 96px; border-top: 1px solid var(--ink); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.prevnext a { text-decoration: none; }

/* Footer */
.site-footer { position: relative; background: var(--night); color: rgba(255,255,255,.72); overflow: hidden; }
.site-footer .skyline { display: block; width: 100%; height: 340px; object-fit: cover; object-position: 50% 55%; opacity: .7; }
.site-footer .fade { position: absolute; left: 0; right: 0; top: 0; height: 340px; background: linear-gradient(180deg, rgba(12,22,38,0) 40%, var(--night) 100%); }
.site-footer .wrap { position: relative; padding-top: 24px; padding-bottom: 56px; display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 32px 56px; font-size: 14px; }
.site-footer b { font-family: var(--display); font-size: 34px; font-weight: 500; color: var(--white); display: block; margin-bottom: 10px; line-height: 1; }
.site-footer a { color: var(--white); }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.site-footer nav a { text-decoration: none; }
.site-footer .credit-line { top: 300px; bottom: auto; }
.small { font-size: 12px; color: rgba(255,255,255,.55); display: flex; flex-direction: column; gap: 8px; }
.small a { color: rgba(255,255,255,.8); }

/* Music */
.music-btn { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 8px; border-radius: 999px; background: var(--night); color: var(--white); border: 1px solid rgba(255,255,255,.18); font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.music-btn .disc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--gold-soft) 0 3px, var(--night) 4px 7px, #2A3A55 8px 100%); }
.music-btn[aria-expanded="true"] .disc { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.music-btn:hover { background: var(--night-2); }
.music-panel { position: fixed; right: 22px; bottom: 86px; z-index: 50; width: min(380px, calc(100vw - 44px)); background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.music-panel[hidden] { display: none; }
.music-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.music-panel header b { font-family: var(--display); font-size: 28px; font-weight: 500; line-height: 1.05; }
.music-panel .close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--slate); }
.music-panel p { font-size: 13px; color: var(--slate); }
.music-panel iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; background: var(--stone); }

/* Motion */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .hero .rise { opacity: 0; transform: translateY(20px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .hero .rise:nth-child(2) { animation-delay: .12s; }
html.js .hero .rise:nth-child(3) { animation-delay: .24s; }
html.js .hero .rise:nth-child(4) { animation-delay: .36s; }
html.js .hero .rise:nth-child(5) { animation-delay: .48s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .hero .rise { opacity: 1; transform: none; transition: none; animation: none; }
  .tile img, .rotator blockquote, .era-track a, .portrait img { transition: none; }
  .rotator.running .progress i, .music-btn .disc { animation: none; }
}
@media print {
  html.js .reveal, html.js .hero .rise { opacity: 1; transform: none; }
  .music-btn, .music-panel, .era-bar, .jump, .filters, .site-header { display: none !important; }
}

/* Smaller screens */
@media (max-width: 1180px) {
  .masthead { gap: 0 20px; }
  .main-nav { gap: 0 14px; font-size: 11px; letter-spacing: .08em; }
  .logo b { font-size: 23px; }
}
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .era-head { grid-template-columns: 160px minmax(0, 1fr); }
  .era-head .quote { grid-column: 1 / -1; }
}
@media (max-width: 1040px) {
  .masthead { flex-wrap: wrap; padding-top: 12px; padding-bottom: 6px; }
  .main-nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 0 20px; scrollbar-width: none; padding-bottom: 2px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: none; }
  .lang { margin-left: auto; }
}
@media (max-width: 900px) {
  .era-bar, .jump { top: 0; position: sticky; }
  .site-header { position: relative; }
  .hero-inner { grid-template-columns: 1fr; }
  .current { max-width: 420px; }
  .section-head { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr; gap: 36px; }
  .note-box { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .tile:first-child { grid-column: span 2; grid-row: span 1; }
  .tile:first-child b { font-size: 40px; }
  .tile:nth-child(2) { grid-column: span 2; }
  .theme { grid-template-columns: 1fr; padding: 56px 0; }
  .theme:nth-of-type(even) .theme-photo { order: 0; }
  .p-hero .wrap { grid-template-columns: 1fr; }
  .p-portrait { max-width: 280px; }
  .p-sec { grid-template-columns: 1fr; padding: 44px 0; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  /* Timeline becomes one column; world events keep their grey card and globe */
  .lanes-head { display: none; }
  .events { grid-template-columns: 1fr; padding-left: 26px; }
  .events::before { left: 6px; margin-left: 0; }
  .ev, .ev.world { grid-column: 1; text-align: left; align-items: flex-start; }
  .ev::before, .ev.world::before { left: -27px; right: auto; }
  .ev.world { border-right: 0; border-left: 3px solid #4A5361; }
  .ev.world .meta { justify-content: flex-start; }
  .era-head { grid-template-columns: 1fr; padding: 28px 24px; }
  .era-head .who { flex-direction: row; align-items: center; gap: 16px; }
  .era-head .who .portrait { width: 84px; flex: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .logo { gap: 8px; }
  .masthead { column-gap: 8px; }
  .logo b { font-size: 18px; margin-left: 2px; }
  .logo .arms { width: 26px; }
  .logo .flag { width: 24px; height: 15px; }
  .lang a { padding: 0 8px; min-height: 28px; font-size: 10px; }
  .section { padding-top: 80px; padding-bottom: 64px; }
  .section-head { margin-bottom: 40px; }
  .hero { min-height: 0; }
  .hero-inner { padding-top: 72px; padding-bottom: 56px; }
  .rotator .controls { margin-left: 0; width: 100%; }
  .cards { grid-template-columns: 1fr; gap: 56px; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .person h3 { font-size: 22px; }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .tile:first-child, .tile:nth-child(2) { grid-column: span 1; }
  .filter-row > b { min-width: 0; width: 100%; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 8px; justify-content: center; font-size: 11px; gap: 6px; }
  .era-track a { padding: 0 4px; }
  .era-track a strong, .era-track a span { font-size: 9.5px; }
  .era-track a.active { flex-grow: calc(var(--w) * 3); }
  .rows li { grid-template-columns: 1fr; }
  .music-btn .label { display: none; }
  .music-btn { padding: 0 7px; }
  .office-photo { height: 260px; }
  .site-footer .skyline { height: 220px; }
  .site-footer .fade { height: 220px; }
  .site-footer .credit-line { top: 190px; }
}

/* Instagram */
.insta-band { background: var(--stone); }
.insta-band .wrap { padding-top: 88px; padding-bottom: 88px; }
.insta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 72px; align-items: center; }
.insta.compact { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px 40px; align-items: start; }
.insta-text { display: flex; flex-direction: column; gap: 18px; }
.insta-text h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 400; }
.insta-text p { color: var(--body); max-width: 520px; }
.insta-handle { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; font-size: 17px; }
.insta-post { min-height: 200px; }
.insta-post iframe { max-width: 100% !important; min-width: 0 !important; }
.insta-post .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
.insta-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 1; background: linear-gradient(135deg, #F2D7A8 0%, #D9849B 45%, #7B5EA7 100%); color: var(--white); text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.insta-placeholder:hover { color: var(--white); filter: saturate(1.15); }
@media (max-width: 900px) { .insta, .insta.compact { grid-template-columns: 1fr; } .insta-band .wrap { padding-top: 64px; padding-bottom: 64px; } }