/* An open, asymmetric table. Portraits stay in place so every choice is reachable. */
.story-table{position:relative;isolation:isolate;padding:32px 0 24px;background:var(--paper)}
.table-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.table-heading h1{font-size:clamp(40px,4.2vw,64px);font-weight:550;line-height:1.1;letter-spacing:0;margin:0}
.table-heading h1 em{color:var(--accent);font-style:normal}
.table-heading>p{font-size:14px;margin:0;color:var(--muted)}
.table-stage{position:relative;height:clamp(450px,39vw,570px);direction:ltr;margin:8px 0 0;isolation:isolate}
.table-person{position:absolute;display:block;width:var(--w);left:var(--x);top:var(--y);padding:0;background:none;border:0;color:var(--ink);cursor:pointer;direction:rtl;text-align:center;transform:rotate(var(--tilt));transition:transform .28s ease-out;transform-origin:50% 75%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;z-index:1}
.table-person:nth-of-type(1){--x:34%;--y:5%;--w:27%;--tilt:-4deg;z-index:3}
.table-person:nth-of-type(2){--x:68%;--y:0%;--w:18%;--tilt:6deg}
.table-person:nth-of-type(3){--x:81%;--y:52%;--w:15%;--tilt:-8deg;z-index:2}
.table-person:nth-of-type(4){--x:57%;--y:38%;--w:19%;--tilt:5deg;z-index:4}
.table-person:nth-of-type(5){--x:16%;--y:0%;--w:20%;--tilt:-7deg}
.table-person:nth-of-type(6){--x:0%;--y:31%;--w:21%;--tilt:5deg;z-index:2}
.table-person .portrait-art{height:auto!important;width:100%;aspect-ratio:4/5;padding:0!important;margin:0;overflow:visible}
.table-person .portrait-art img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:none;transform:none}
.table-person.is-active{transform:rotate(0) translateY(-7px) scale(1.055);z-index:5}
.table-person:hover{transform:rotate(0) translateY(-5px)}
.table-person.is-active:hover{transform:rotate(0) translateY(-7px) scale(1.055)}
.table-person:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:16px;z-index:6}
.table-theme{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:2px 12px;background:var(--paper);border-radius:20px;font-size:13px;line-height:1.5;transform:rotate(calc(-1 * var(--tilt)));box-shadow:0 2px 12px #282c2610}
.table-theme>span{height:5px;width:5px;border-radius:50%;background:currentColor}
.table-person:nth-of-type(2) .table-theme{position:absolute;top:0;right:-18px}
.table-person.is-active .table-theme{background:var(--ink);color:var(--paper);transform:none}
.table-footer{position:relative;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
.table-caption-stack{width:min(540px,75%);min-height:78px}
.table-caption{display:flex;align-items:center;justify-content:space-between;gap:24px}
.table-caption p{font-size:14px;line-height:1.5;margin:0 0 5px;color:var(--muted)}
.table-caption h2{font-size:clamp(24px,2.5vw,34px);font-weight:550;line-height:1.25;margin:0}
.table-caption .table-story-link{position:static;display:inline-flex;flex-shrink:0;align-items:center;gap:18px;min-height:48px;padding:10px 20px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:30px;font-size:14px;text-decoration:none;transition:background .18s,color .18s}
.table-caption .table-story-link:hover{background:var(--paper);color:var(--ink)}
.table-surprise{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 15px;border:1px solid var(--line);border-radius:30px;background:none;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.table-surprise:hover{border-color:var(--ink);background:#ffffff60}
.table-caption[hidden],.table-surprise[hidden],.era-panel[hidden]{display:none}
.story-timeline{padding-block:48px 20px;border-top:1px solid var(--line);background:var(--paper)}
.era-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.era-heading p{font-size:13px;color:var(--accent);margin:0 0 8px}
.era-heading h2{font-size:clamp(28px,3.2vw,45px);font-weight:500;line-height:1.2;margin:0}
.era-heading>span{font-size:13px;color:var(--muted)}
.era-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));direction:ltr;border-top:1px solid var(--ink);gap:12px}
.era-track>a{position:relative;padding:20px 4px 10px;text-align:center;direction:rtl;min-height:90px;color:var(--muted);border-bottom:2px solid transparent}
.era-track>a:before{content:'';position:absolute;top:-4px;left:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.era-track bdi{font-size:30px;font-weight:450;display:block;line-height:1.2}
.era-track span{font-size:12px;line-height:1.6;display:block;margin-top:7px}
.era-track [aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}
.era-track [aria-pressed=true]:before{width:11px;height:11px;top:-6px;left:calc(50% - 5px);background:var(--accent)}
.era-panel{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:40px;min-height:300px;padding-block:28px;position:relative;isolation:isolate}
.era-portrait .portrait-art{height:240px;padding:0}
.era-story-copy h3{font-size:30px;font-weight:500;margin:0 0 8px;line-height:1.2}
.era-story-copy p{font-size:16px;margin:0 0 18px}.era-story-copy .era-period{font-size:13px;color:var(--muted);margin-bottom:10px}
.era-display-year{font-size:clamp(80px,12vw,180px);line-height:1;font-weight:400;color:#6f837b;direction:ltr;align-self:center;letter-spacing:-.05em;user-select:none}
@media(min-width:1600px){.table-stage{height:650px}}
@media(min-width:761px) and (max-width:1100px){.table-stage{height:420px}.table-person:nth-of-type(3){--y:48%}.table-person:nth-of-type(4){--y:43%}.table-footer{margin-top:15px}.era-panel{gap:24px;grid-template-columns:180px 1fr auto}.era-display-year{font-size:90px}}
@media(max-width:760px){
 .story-table{padding:24px 0 20px}.table-heading{display:block}.table-heading h1{font-size:clamp(38px,9vw,58px)}.table-heading>p{font-size:13px;margin-top:12px}
 .table-stage{height:clamp(350px,103vw,780px);margin:18px -3px 0}
 .table-person:nth-of-type(1){--x:33%;--y:0%;--w:37%;--tilt:-3deg}
 .table-person:nth-of-type(2){--x:72%;--y:10%;--w:27%;--tilt:6deg}
 .table-person:nth-of-type(3){--x:71%;--y:52%;--w:28%;--tilt:-5deg}
 .table-person:nth-of-type(4){--x:34%;--y:52%;--w:34%;--tilt:4deg}
 .table-person:nth-of-type(5){--x:0%;--y:2%;--w:30%;--tilt:-5deg}
 .table-person:nth-of-type(6){--x:0%;--y:47%;--w:31%;--tilt:5deg}
 .table-theme{font-size:12px;padding:2px 10px;min-height:28px;gap:5px}.table-person.is-active{transform:rotate(0) translateY(-3px) scale(1.025)}.table-person.is-active:hover{transform:rotate(0) translateY(-3px) scale(1.025)}
 .table-person:nth-of-type(2) .table-theme{position:relative;top:auto;right:auto}
 .table-footer{display:block;margin-top:8px;padding-top:17px}.table-caption-stack{width:100%;min-height:74px}.table-caption{gap:12px}.table-caption p{font-size:12px}.table-caption h2{font-size:24px}.table-caption .table-story-link{gap:9px;min-height:44px;padding:8px 14px;font-size:13px}.table-surprise{margin-top:12px;min-height:44px;padding:8px 13px;font-size:12px}
 .story-timeline{padding-block:35px 12px}.era-heading{display:block;margin-bottom:28px}.era-heading>span{display:block;margin-top:12px}.era-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}.era-track>a:nth-child(n+4){border-top:1px solid var(--line)}.era-track bdi{font-size:25px}.era-track span{font-size:11px}.era-panel{grid-template-columns:33% 1fr;gap:20px;min-height:235px;padding-block:24px}.era-portrait .portrait-art{height:190px}.era-story-copy h3{font-size:24px}.era-story-copy p{font-size:14px}.era-display-year{display:none}
}
@media(prefers-reduced-motion:reduce){html:not([data-preview-motion="full"]):not([data-motion="on"]) .table-person,html:not([data-preview-motion="full"]):not([data-motion="on"]) .table-story-link{transition:none!important}html:not([data-preview-motion="full"]):not([data-motion="on"]) .table-person:hover,html:not([data-preview-motion="full"]):not([data-motion="on"]) .table-person.is-active,html:not([data-preview-motion="full"]):not([data-motion="on"]) .table-person.is-active:hover{transform:rotate(var(--tilt))}}
@media(forced-colors:active){.table-person.is-active .table-theme,.table-caption .table-story-link{background:Highlight;color:HighlightText}.table-theme{border:1px solid ButtonText}.table-person.is-active{outline:2px solid Highlight}.era-track [aria-pressed=true]{border-color:Highlight}}