@import url("assets/fonts/taipei/taipei.css");
/* Keep raster frames in the normal paint stack, including mobile WebKit. */
.civilization-dialog[data-page=home]:is([data-civ=nestkin],[data-civ=ancients]) .civ-chapter-link:nth-child(n)::before{display:none}
.civilization-dialog[data-page=home] .civ-material-frame{display:block;position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.civilization-dialog[data-page=home] .civ-material-frame img{display:block;position:absolute;left:0;top:-197.892%;width:200%;height:339%;max-width:none;max-height:none;object-fit:fill;margin:0;padding:0;border:0;opacity:1;transform:none;filter:none;-webkit-mask-image:none;mask-image:none}
.civilization-dialog[data-civ=ancients][data-page=home] .civ-material-frame img{left:-100%}
.civilizations,.civilization-dialog{--serif:'Taipei Sans TC',sans-serif;--sans:'Taipei Sans TC',sans-serif;--latin:'Taipei Sans TC',sans-serif;font-family:'Taipei Sans TC',sans-serif}
.civilizations :is(button,input,select),.civilization-dialog :is(button,input,select){font-family:'Taipei Sans TC',sans-serif}
.civilization-dialog[data-civ=grey-tide]{--civ-tone:#c4c4c6;--civ-muted:#aaa9ae;--civ-line:#aaa9ae40}
.civilization-dialog[data-civ=grey-tide] :is(h1,h2,h3,blockquote,.eyebrow,.civ-en,.civ-classification){color:#c7c7ca!important}
.civilization-dialog[data-civ=grey-tide] :is(p,a,small,button){color:#b9b9be}
.civilization-dialog[data-civ=ancients][data-page=home] #civ-view{position:relative;isolation:isolate;min-height:100svh}
.civilization-dialog[data-civ=ancients][data-page=home] #civ-view:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#090511b3,#0c061d66 45%,#06040dae),linear-gradient(0deg,#08050ddd,transparent 80%),url('assets/ancient-background-clean.webp') center/cover}
.civilization-dialog[data-civ=ancients][data-page=home] .civ-title>img{display:none}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-home{grid-template-columns:.8fr 1.2fr;gap:5%;align-items:center}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-title{text-shadow:0 2px 20px #000}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-menu{gap:15px 16px}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link{position:relative;isolation:isolate;border:0;border-radius:0;box-shadow:none;clip-path:none;transform:none;min-height:176px;padding:43px 39px 36px;text-align:left;display:flex;flex-direction:column;justify-content:center;background:none!important;transition:filter .25s,translate .25s}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/faction-button-atlas.webp');background-repeat:no-repeat;background-size:200% 339%;background-position:var(--material-x) var(--material-y);mask-image:none;opacity:1;transform:none;filter:drop-shadow(0 6px 8px #0007)}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link:after{display:none}
.civilization-dialog[data-civ=grey-tide]{--material-x:0%;--material-y:12.4%}
.civilization-dialog[data-civ=aurelians]{--material-x:100%;--material-y:12.4%}
.civilization-dialog[data-civ=nestkin]{--material-x:0%;--material-y:82.8%}
.civilization-dialog[data-civ=ancients]{--material-x:100%;--material-y:82.8%}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link h2{font-size:20px;margin:7px 0;line-height:1.4;letter-spacing:.04em}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link small{font-size:10px;line-height:1.4;letter-spacing:.08em}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link p{font-size:13px;line-height:1.65;margin:0;color:#c1bec5}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link>span{display:none}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link:hover{filter:brightness(1.2);translate:0 -2px;box-shadow:none}
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link:before{filter:drop-shadow(0 0 9px #fcd17c55)}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link:before{clip-path:none;border:0}
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link h2{color:#fff1c1;text-shadow:0 0 14px #f7c46a50}
.civilization-dialog[data-civ=ancients][data-page=home] .civ-chapter-link h2{color:#e4d5fb}
.civ-gateway[href='#civilizations/ancients']{--cover-position:26% center}
@media(max-width:960px){.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-home{grid-template-columns:1fr;gap:24px}.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link{min-height:185px}.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-title h1{font-size:clamp(52px,10vw,80px);margin:18px 0}}
@media(max-width:760px){.civ-gateway[href='#civilizations/ancients']>img{left:40%;width:65%;object-position:right center!important}}
@media(max-width:600px){.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-menu{grid-template-columns:1fr;gap:12px}.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link{min-height:188px;padding:45px 46px 39px}.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link h2{font-size:21px}.civilization-dialog[data-civ=ancients][data-page=home] #civ-view:before{background-position:center,center,60% center}}
@media(prefers-reduced-motion:reduce){.civilization-dialog .civ-chapter-link{transition:none!important;translate:none!important}}
/* Leave the architectural columns and fungal edges clear of live text. */
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link{padding-left:19%;padding-right:17%;padding-top:37px;padding-bottom:35px}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link small{display:none}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-title{align-self:start;padding-top:32px}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link p{font-size:13px}
.civilization-dialog[data-page=home]:not([data-civ=humanity]) .civ-chapter-link:nth-child(n):before{background-position:var(--material-x) var(--material-y)!important;transform:none!important}

/* Topic-only navigation for all five civilizations. Decoration never contains text. */
.civilization-dialog[data-page=home] .civ-chapter-link :is(p,small){display:none!important}
.civilization-dialog[data-page=home] .civ-chapter-link{display:flex;align-items:center;justify-content:center;text-align:center!important;min-height:176px;padding:40px 17%!important}
.civilization-dialog[data-page=home] .civ-chapter-link h2{position:relative;z-index:1;margin:0!important;max-width:100%;font-size:clamp(24px,2.1vw,30px)!important;font-weight:700!important;line-height:1.4!important;letter-spacing:.06em;overflow-wrap:anywhere;text-wrap:balance}
.civilization-dialog[data-page=home] .civ-chapter-link:focus-visible{outline:2px solid var(--civ-tone);outline-offset:5px}
.civilization-dialog[data-page=home]:is([data-civ=grey-tide],[data-civ=aurelians]) .civ-chapter-menu{gap:20px 22px}
.civilization-dialog[data-page=home]:is([data-civ=grey-tide],[data-civ=aurelians]) .civ-chapter-link{min-height:174px;padding:44px 32px!important;background:none!important;overflow:visible;filter:none}

/* The grey-tide surface comes from the actual reference: silvery membranes and veins. */
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:nth-child(n):before{inset:0;background:linear-gradient(90deg,#09090eb3,transparent 30%,#09090e22 70%,#09090e99),url('assets/civilizations/covers/grey-tide-cover.webp')!important;background-size:cover!important;background-position:36% 46%!important;mask-image:radial-gradient(ellipse 70% 76% at 50% 50%,#000 43%,transparent 72%);filter:saturate(.28);opacity:.85;clip-path:polygon(0 20%,13% 9%,33% 13%,50% 3%,73% 12%,94% 9%,100% 34%,96% 63%,100% 83%,78% 91%,56% 85%,32% 98%,12% 90%,3% 68%)}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:after{display:block;content:'';position:absolute;inset:13% 9%;z-index:0;background:radial-gradient(ellipse at center,#090b0ff7 15%,#090b0fea 44%,#15131ab0 63%,transparent 75%);pointer-events:none;border:0;clip-path:none;transform:none}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:nth-child(2n):before{background-position:55% 65%!important}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:nth-child(3n):before{background-position:20% 74%!important}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link h2{color:#e0dfe3!important;text-shadow:0 2px 14px #000,0 0 24px #ab87a333}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:hover:before{opacity:1;filter:saturate(.55) brightness(1.15)}

/* Light-built technology: slender floating arcs, a stellar spine, and white-gold light. */
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link:nth-child(n):before{inset:-8px -4px;background:url('assets/aurelian-light-gate.svg') center/100% 100% no-repeat!important;mask-image:none;clip-path:none;filter:drop-shadow(0 0 7px #ffe3a855);opacity:1}
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link:after{display:block;content:'';position:absolute;inset:26% 7% 24%;z-index:-2;background:radial-gradient(ellipse,#12110bf2,#101014b3 48%,transparent 73%);border:0;clip-path:none;transform:none;pointer-events:none}
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link h2{color:#fff3cf!important;text-shadow:0 2px 15px #000,0 0 23px #f9d28855}
.civilization-dialog[data-civ=aurelians][data-page=home] .civ-chapter-link:hover:before{filter:drop-shadow(0 0 12px #ffe3a8aa)}
@media(max-width:600px){.civilization-dialog[data-page=home] .civ-chapter-link{min-height:166px}.civilization-dialog[data-page=home] .civ-chapter-link h2{font-size:26px!important}.civilization-dialog[data-page=home]:is([data-civ=grey-tide],[data-civ=aurelians]) .civ-chapter-menu{gap:8px}.civilization-dialog[data-page=home]:is([data-civ=grey-tide],[data-civ=aurelians]) .civ-chapter-link{min-height:162px;padding:42px 32px!important}}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:nth-child(n):before{background-size:180% auto!important;filter:saturate(.35) brightness(1.5);opacity:1}
.civilization-dialog[data-civ=grey-tide][data-page=home] .civ-chapter-link:after{inset:23% 7%;background:radial-gradient(ellipse,#090b0ffa 15%,#090b0feb 45%,#15131a88 66%,transparent 80%)}

/* Keep civilization names within their own column on every screen. */
.civilization-dialog[data-civ][data-page=home] .civ-title{min-width:0;container-type:inline-size}
.civilization-dialog[data-civ][data-page=home] .civ-title h1{font-size:min(clamp(48px,6.8vw,100px),22cqi)!important;white-space:nowrap;letter-spacing:.1em;line-height:1.3}
@media(max-width:960px){.civilization-dialog[data-civ][data-page=home] .civ-title h1{font-size:min(clamp(46px,10.5vw,68px),22cqi)!important}}

.grey-overview-head{margin-bottom:30px}
.grey-overview{max-width:1000px}
.grey-overview h2{font-size:24px;line-height:1.5;margin:0 0 12px;letter-spacing:.02em}
.grey-overview p{font-size:16px;line-height:1.85;margin:0;color:#b9b9be}
.grey-overview .grey-definition{font-size:14px;margin-top:10px;color:#929298}
.grey-essence{padding-bottom:30px;border-bottom:1px solid #c7c7ca2e}
.grey-needs{padding-top:28px}
.grey-needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.grey-needs-grid>section{padding-left:16px;border-left:2px solid #a5a5ad50}
.grey-needs-grid h3{font-size:19px;line-height:1.5;margin:0 0 8px}
.grey-needs-grid p{font-size:14px}
.grey-overview .grey-limit{font-size:14px;margin-top:30px;padding-top:20px;border-top:1px solid #c7c7ca24;color:#98989f}
@media(max-width:650px){.grey-overview h2{font-size:21px}.grey-needs-grid{grid-template-columns:1fr;gap:20px}.grey-overview p{font-size:15px}.grey-overview-head{margin-bottom:24px}}

.grey-directive .grey-essence h2{font-size:32px;font-weight:500;margin-bottom:16px}
.grey-authority-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grey-authority-grid small{font-size:12px;font-weight:400;margin-left:8px;color:#94949c}
@media(max-width:650px){.grey-authority-grid{grid-template-columns:1fr}.grey-directive .grey-essence h2{font-size:27px}}

/* Illustrated, readable Grey Tide archives. */
.grey-symbol{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:20px;color:#d2d4d7;background:radial-gradient(circle,#aeb5b329,transparent 72%)}
.grey-symbol svg{width:48px;height:48px;filter:drop-shadow(0 0 7px #c6cece30)}
.grey-needs-illustrated>section{padding:22px 22px 24px;border:1px solid #c7c7ca25;background:linear-gradient(145deg,#bec6c50b,transparent);border-top-color:#c7c7ca60}
.grey-needs-illustrated .grey-symbol{margin-bottom:16px}
.grey-needs-illustrated p{font-size:16px}
.grey-explainer{max-width:1180px;color:#bcbfc1}
.grey-explainer h2{font-size:clamp(23px,2.1vw,30px);font-weight:600;line-height:1.5;letter-spacing:.02em;color:#e0e0e2;margin:0 0 16px}
.grey-explainer h3{font-size:21px;font-weight:500;line-height:1.5;color:#d7d8da;margin:0 0 12px}
.grey-explainer p{font-size:16px;line-height:1.95;margin:0 0 16px}
.grey-explainer p:last-child{margin-bottom:0}
.grey-kicker{display:block;font-size:12px;letter-spacing:.12em;color:#8e989c;margin-bottom:10px}
.grey-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.grey-profile-grid>section{min-width:0}
.grey-photo{margin:0 0 26px}
.grey-photo button{display:block;width:100%;padding:0;background:#0b0e10;border:0;cursor:zoom-in}
.grey-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#060a0c}
.grey-photo figcaption{font-size:12px;line-height:1.6;color:#8c9296;padding-top:10px}
.grey-profile-copy h2{font-size:32px;margin-bottom:12px}
.grey-profile-copy .grey-lead{font-size:19px;color:#dadbdd;line-height:1.65}
.grey-relation,.grey-differences,.grey-process-section,.grey-authority-section,.grey-consequence{margin-top:44px;padding-top:32px;border-top:1px solid #c7c7ca2b}
.grey-relation>p{max-width:980px}
.grey-relation-flow{display:flex;gap:20px;align-items:center;margin-top:26px}
.grey-relation-flow>div{flex:1;min-width:0;padding:20px;background:#bdcbd008;border-block:1px solid #b5c2c42b;text-align:center}
.grey-relation-flow strong,.grey-relation-flow span{display:block}
.grey-relation-flow strong{font-size:21px;color:#d5d8dc;margin-bottom:8px}
.grey-relation-flow div span{font-size:14px;line-height:1.6}
.grey-flow-link{transform:rotate(-90deg);color:#889997;font-size:24px}
.grey-table-scroll table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:16px;line-height:1.85}
.grey-table-scroll th,.grey-table-scroll td{padding:19px 20px;border-bottom:1px solid #c7c7ca26;text-align:left;vertical-align:top}
.grey-table-scroll th:first-child{width:19%}
.grey-table-scroll thead th{font-size:19px;color:#d7d9dc;background:#b5c2c408}
.grey-table-scroll tbody th{font-size:16px;font-weight:500;color:#b7c5c6}
.grey-example{margin-top:36px;padding:26px 30px;border-left:2px solid #8c9ea1;background:linear-gradient(100deg,#9cabad12,transparent)}
.grey-example h2{font-size:22px}
.grey-directive-intro{max-width:920px}
.grey-directive-intro h2{font-size:clamp(25px,2.5vw,34px)}
.grey-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:0;margin:24px 0 0;list-style:none}
.grey-process li{min-width:0;padding:22px;border-top:1px solid #bac6c856;background:linear-gradient(145deg,#bac6c810,transparent)}
.grey-process p{font-size:16px}
.grey-authority-section>p{max-width:900px}
.grey-authority-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:26px}
.grey-authority-cards>section{padding:24px;border:1px solid #bac6c829;background:#bac6c806}
.grey-authority-cards .grey-symbol{margin-bottom:16px}
.grey-consequence{max-width:960px}
@media(max-width:700px){.grey-profile-grid,.grey-authority-cards,.grey-process{grid-template-columns:1fr;gap:26px}.grey-profile-grid{gap:38px}.grey-relation-flow{flex-direction:column;gap:8px}.grey-relation-flow>div{width:100%}.grey-flow-link{transform:none}.grey-example{padding:22px}.grey-table-scroll th,.grey-table-scroll td{padding:13px 9px;font-size:14px}.grey-table-scroll th:first-child{width:20%}.grey-table-scroll thead th{font-size:16px}.grey-table-scroll tbody th{font-size:14px}.grey-explainer p,.grey-overview .grey-needs-illustrated p{font-size:16px}.grey-profile-copy .grey-lead{font-size:18px}.grey-process{gap:14px}.grey-process li{padding:20px}.grey-process .grey-symbol{float:left;margin:0 20px 8px 0}.grey-process h3{padding-top:4px}}