/* Aethorra: the finish layer. Mobile first: a slim bar, a full-screen menu, one-line section tabs,
   swipeable plates, stacked tables, gentle reveals and page-to-page fades. Loaded after base.css and realms.css. */
:root{--bar:56px;--radius:10px;--soft:0 14px 40px -18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.08);--ease:cubic-bezier(.2,.7,.2,1)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
html{scroll-padding-top:calc(var(--bar) + 56px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{text-rendering:optimizeLegibility;overflow-x:hidden}
@media (max-width:720px){
  body{font-size:18px;line-height:1.66}
  h1{font-size:clamp(2rem,9vw,2.8rem)}
  h2{font-size:1.55rem;margin:1.8em 0 .6em}
  h3{font-size:1.2rem}
  .col,.wrap,.realm-main{padding-left:1.15rem;padding-right:1.15rem}
  .lede{font-size:1.1em}
}
::selection{background:rgba(168,129,47,.35)}
a{-webkit-tap-highlight-color:rgba(168,129,47,.2)}

/* ---------- the bar ---------- */
.site-head{background:rgba(20,17,13,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(216,184,106,.35);transition:box-shadow .3s}
.site-head.scrolled{box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.site-head .inner{height:var(--bar);padding:0 1.15rem;flex-wrap:nowrap;gap:.8rem;justify-content:space-between}
.brand{font-size:1.02rem;letter-spacing:.42em;margin-right:auto;white-space:nowrap}
.site-nav{flex:0 1 auto;flex-wrap:nowrap;align-items:center;gap:.25rem}
.site-nav .hd-link{font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#e8dcc0;text-decoration:none;padding:.5rem .6rem;border-radius:999px;transition:background .2s,color .2s}
.site-nav .hd-link:hover{background:rgba(255,255,255,.08);color:#fff}
.site-nav .hd-enter{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#1c1712;background:linear-gradient(180deg,#e2c078,#b58f3c);text-decoration:none;padding:.5rem .85rem;border-radius:999px;font-weight:700;box-shadow:0 2px 10px -2px rgba(226,192,120,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.site-nav .hd-enter:hover{filter:brightness(1.08)}
.menu-btn{width:44px;height:44px;margin-right:-.4rem;flex:none;border:0;background:transparent;cursor:pointer;display:grid;place-content:center;gap:7px;padding:0}
.menu-btn i{display:block;width:22px;height:1.5px;background:#efe4cc;border-radius:2px;transition:transform .35s var(--ease)}
.menu-open .menu-btn i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-open .menu-btn i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
@media (max-width:720px){.hide-sm,.site-nav .hd-link{display:none}.brand{letter-spacing:.34em;font-size:.98rem}}
.site-nav a.hd-link[aria-current]{color:#f3d98b}

/* ---------- the menu ---------- */
.site-menu{position:fixed;inset:var(--bar) 0 0 0;z-index:49;background:rgba(16,13,10,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#efe4cc;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.menu-open .site-menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.menu-open{overflow:hidden}
.sm-inner{max-width:1080px;margin:0 auto;padding:1.4rem 1.15rem 3rem}
.sm-h{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#b89a5c;margin:0 0 .7rem}
.sm-realm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.sm-realm-grid a{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border:1px solid rgba(216,184,106,.22);border-radius:var(--radius);color:#f3e9d2;text-decoration:none;font-family:'Cinzel',serif;font-size:.9rem;letter-spacing:.06em;background:rgba(255,255,255,.03);transition:background .2s,border-color .2s}
.sm-realm-grid a:hover{background:rgba(216,184,106,.12);border-color:rgba(216,184,106,.5)}
.sm-realm-grid img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#f4ecd8;padding:2px;flex:none}
.sm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem 2rem;margin-top:2rem}
.sm-group>a{display:block;color:#e9dfc8;text-decoration:none;font-size:1.1rem;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.sm-group>a:hover{color:#f3d98b}
.sm-foot{margin-top:2.4rem;font-style:italic;color:#b8a57c;font-size:.95rem}

/* ---------- realm and people heroes: the land behind the name ---------- */
.realm-hero{isolation:isolate}
.realm-hero[style*="--hero"]::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hero) center 20%/cover no-repeat;opacity:.34;mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 88%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 88%)}
.realm-hero[style*="--hero"]::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.35) 100%)}
.realm-hero .kicker{color:inherit;opacity:.85}
.realm-hero h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.realm-kaishon .realm-hero[style*="--hero"]::before{opacity:.16;mix-blend-mode:multiply}
.realm-kaishon .realm-hero[style*="--hero"]::after{background:linear-gradient(180deg,rgba(246,242,232,.2),rgba(246,242,232,.7))}
.realm-kaishon .realm-hero h1{text-shadow:none}
@media (max-width:720px){
  .realm-hero .inner{padding:2.4rem 1.15rem 2.2rem;gap:1.2rem}
  .realm-hero .crest{max-width:170px!important;justify-self:start}
  .realm-caelvenne .realm-hero .crest{justify-self:center}
  .realm-hero .motto{font-size:1.12em}
  .realm-hero .greet{font-size:.98em;margin-top:.9rem}
  .realm-hrodvald .realm-hero .inner{padding-bottom:3.4rem}
  .realm-kaishon .realm-hero .seal{width:84px;height:84px;font-size:.85rem}
}

/* ---------- section tabs: one line, swipeable, the current one lit ---------- */
.realm-nav{top:var(--bar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.realm-nav .inner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:.45rem 1rem;gap:.35rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
.realm-nav .inner::-webkit-scrollbar{display:none}
.realm-nav a{scroll-snap-align:start;border-radius:999px;padding:.42rem .85rem;transition:background .2s,color .2s;flex:none}
.realm-caelvenne .realm-nav .inner{justify-content:flex-start}
@media (min-width:1000px){.realm-caelvenne .realm-nav .inner{justify-content:center}}
.realm-aldmere .realm-nav a.on{background:#2f4a2a;color:#f6ebcf}
.realm-tharax .realm-nav a.on{background:#c0853e;color:#0a0908}
.realm-caelvenne .realm-nav a.on{background:#1f3a8a;color:#fff}
.realm-castavar .realm-nav a.on{background:#1d1d1d;color:#fff}
.realm-zarvand .realm-nav a.on{background:#d8962b;color:#14284a}
.realm-kaishon .realm-nav a.on{background:#b3261e;color:#fff}
.realm-hrodvald .realm-nav a.on{background:#c23b2e;color:#fff}
.realm-free .realm-nav a.on,.realm-nav a.on{background:var(--accent);color:#fff}
.realm-main section{scroll-margin-top:calc(var(--bar) + 60px);padding:1.4rem 0}

/* ---------- plates: a swipeable strip on a phone ---------- */
@media (max-width:720px){
  .art-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin:0 -1.15rem;padding:.4rem 1.15rem 1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .art-grid::-webkit-scrollbar{display:none}
  .art-grid>.art{flex:0 0 78%;scroll-snap-align:center}
  .art .lb:hover{transform:none}
  .art.hero{margin-bottom:1.2rem}
  .gallery .swipe-hint{display:block}
}
.swipe-hint{display:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--head);color:var(--muted);text-align:right;margin:-.4rem 0 .2rem}

/* ---------- cards and grids ---------- */
.card{border-radius:var(--radius);box-shadow:var(--soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.card:hover,.card:has(a.cover:hover){transform:translateY(-2px)}
.dispatch{border-radius:var(--radius)}
.tribe-block{border-radius:var(--radius)}
details.more{border-radius:var(--radius)}
details.more>summary{padding:.7rem 0;list-style:none;display:flex;align-items:center;gap:.6rem}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:.55em;height:.55em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--ease);flex:none}
details.more[open]>summary::before{transform:rotate(45deg)}
@media (max-width:720px){
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .card{padding:1rem}
  .char-card{grid-template-columns:76px 1fr;gap:.8rem}
  .glance dl{gap:.1rem}
  .glance dt{margin-top:.8rem}
  .dispatch{padding:1rem 1.05rem}
  .toc{columns:1}
}

/* ---------- tables: scroll inside their box; narrow ones stack on a phone ---------- */
.table-wrap{border-radius:var(--radius);overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
.table-wrap table{margin:0}
@media (max-width:720px){
  table[data-stack],table[data-stack] tbody,table[data-stack] tr,table[data-stack] td{display:block;width:100%}
  table[data-stack]{background:transparent;border:0}
  table[data-stack] tr:has(th){display:none}
  table[data-stack] tr{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:.75rem .95rem;margin:0 0 .7rem}
  table[data-stack] td{border:0;padding:.12rem 0}
  table[data-stack] td:first-child{font-family:var(--head);font-size:.82rem;letter-spacing:.08em;color:var(--accent)}
  .table-wrap:has(table[data-stack]){overflow:visible}
}

/* ---------- gentle arrivals (only when scripts run, and never for those who ask for less motion) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- buttons, forms, footer ---------- */
.btn,.signup button{font-family:'Cinzel','Trajan Pro',Georgia,serif;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.72rem 1.2rem;border-radius:6px;border:1px solid rgba(0,0,0,.18);
  background:linear-gradient(180deg,#c9a24f,#a8812f);color:#1c1712;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px -8px rgba(0,0,0,.55);transition:filter .2s,transform .2s,background .2s}
.btn:hover,.signup button:hover{filter:brightness(1.07)}
.btn:active,.signup button:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--accent2);box-shadow:none}
.btn.ghost:hover{background:rgba(168,129,47,.1)}
.btn::after{content:"\2192";font-family:Georgia,serif;font-weight:400;letter-spacing:0;opacity:.8}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
@media (max-width:720px){.btn-row .btn{flex:1 1 100%}}
.signup input,.signup select,.filter,.acct select,.acct #c-name{border-radius:var(--radius);min-height:44px}
.site-foot{margin-top:4rem}
.site-foot .inner{gap:1.2rem;padding:2.2rem 1.15rem}
@media (max-width:720px){.site-foot .inner{flex-direction:column}}
.hero-world .inner{padding:3.2rem 1.15rem 2.6rem}
@media (max-width:720px){.hero-world h1{letter-spacing:.18em}}
.lbx{padding:1rem}

/* ---------- legibility fixes from the contrast audit ---------- */
.kicker{color:#86661f}
.realm-tharax .kicker,.realm-hrodvald .kicker{color:var(--accent2)}
.native{opacity:.9}
table[data-stack] td:first-child{color:var(--link)}
.realm-hrodvald{--link:#ef8378}
.realm-hrodvald .realm-hero .motto{color:#ef8378}
.realm-hero .kicker,.realm-tharax .realm-hero .kicker,.realm-hrodvald .realm-hero .kicker{color:inherit}
.hero-world .kicker{color:#dcbd72}
.grid>*{min-width:0}.shield-card h4,.words{overflow-wrap:anywhere;hyphens:auto}

/* ---------- folds: long reading nested behind its headings ---------- */
.fold-toc{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin:1.2rem -1.15rem 1.6rem;padding:.2rem 1.15rem .4rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent)}
.fold-toc::-webkit-scrollbar{display:none}
.fold-toc a{flex:none;font-family:var(--head);font-size:.74rem;letter-spacing:.06em;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:.4rem .8rem;background:var(--paper)}
@media (min-width:900px){.fold-toc{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-left:0;margin-right:0;padding:0}}
details.fold{border-top:1px solid var(--rule);scroll-margin-top:calc(var(--bar) + 12px)}
details.fold:last-of-type{border-bottom:1px solid var(--rule)}
details.fold>summary{list-style:none;cursor:pointer;padding:1.1rem 2.2rem 1.1rem 0;position:relative}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:.6rem;height:.6rem;border-right:2px solid var(--accent2);border-bottom:2px solid var(--accent2);transform:rotate(45deg);transition:transform .3s var(--ease)}
details.fold[open]>summary::after{transform:rotate(-135deg);top:1.8rem}
details.fold>summary>h2,details.fold>summary>h3,details.fold>summary>h4{margin:0 0 .3rem;display:block}
details.fold>summary .tease{display:block;color:var(--muted);font-style:italic;font-size:.95em;line-height:1.5}
details.fold[open]>summary .tease{display:none}
details.fold .fold-body{padding:0 0 1.4rem;animation:foldin .35s var(--ease)}
@keyframes foldin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.realm-main details.fold>summary>h3{font-size:1.25rem}

/* ================= THE TWO: black, blood-red, and quiet ================= */
.the-two-page{--bg:#0a0808;--paper:#141011;--ink:#e8e0d4;--muted:#a3968a;--rule:#3a2426;--accent:#c1121f;--accent2:#9e1b22;--link:#ec5a52;
  --head:'Cinzel','Trajan Pro',Georgia,serif;--body:'EB Garamond',Georgia,serif;background:#0a0808;color:#e8e0d4}
.the-two-page .site-foot{background:#050404;border-top:1px solid #2a1416}
.two-hero{position:relative;isolation:isolate;min-height:78svh;display:flex;align-items:flex-end;background:#050404;overflow:hidden;border-bottom:1px solid #5a1a1e}
.two-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero,none) 32% 60%/cover no-repeat;filter:grayscale(.15) contrast(1.1)}
.two-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,4,4,.15) 0,rgba(5,4,4,.35) 45%,#0a0808 100%),radial-gradient(ellipse at 50% 120%,rgba(193,18,31,.35),transparent 60%)}
.two-hero .inner{max-width:1080px;margin:0 auto;padding:6rem 1.15rem 3rem;width:100%;text-align:center}
.two-hero .kicker{color:#f0d3cc;text-shadow:0 1px 12px #000;letter-spacing:.34em;font-size:.68rem}
.two-hero h1{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(3.4rem,17vw,8rem);letter-spacing:.22em;margin:.25em 0 .1em;color:#f4ece0;text-shadow:0 4px 40px rgba(0,0,0,.8);padding-left:.22em}
.two-names{font-family:'Cinzel',serif;font-size:clamp(1rem,4.6vw,1.5rem);letter-spacing:.5em;color:#e5bdb6;padding-left:.5em}
.two-names i{color:#c1121f;font-style:normal;margin:0 .25em}
.two-oath{margin:1.6rem auto 0;font-style:italic;color:#cbb9ad;font-size:1.05rem;max-width:30em;border-top:1px solid rgba(193,18,31,.5);padding-top:1rem}
.two-main{max-width:760px;margin:0 auto;padding:1rem 1.15rem 2rem}
.two-main h2{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(1.15rem,4.8vw,1.5rem);color:#f1e7da;margin:3rem 0 .8rem;display:flex;align-items:center;gap:.8rem}
.two-main h2::before{content:"";width:22px;height:2px;background:#c1121f;flex:none}
.two-main a{color:var(--link)}
.two-preface{font-size:1.12em;color:#ddd3c6}
.two-preface p:first-of-type::first-letter{font-family:'Cinzel',serif;float:left;font-size:3.6em;line-height:.8;padding:.06em .1em 0 0;color:#c1121f}
.two-preface p:first-child em:only-child{color:#a3968a}
.two-lead{color:var(--muted);font-style:italic}
.traits{display:grid;gap:.7rem}
.trait,.people-tile{background:linear-gradient(180deg,#171112,#110d0e);border:1px solid #2e1c1e;border-radius:10px;box-shadow:0 14px 34px -22px #000}
.trait>summary,.people-tile>summary{list-style:none;cursor:pointer;padding:1rem 2.4rem 1rem 1.1rem;position:relative}
.trait>summary::-webkit-details-marker,.people-tile>summary::-webkit-details-marker{display:none}
.trait>summary::after,.people-tile>summary::after{content:"+";position:absolute;right:1rem;top:.85rem;font-family:'Cinzel',serif;color:#c1121f;font-size:1.3rem;transition:transform .3s var(--ease)}
.trait[open]>summary::after,.people-tile[open]>summary::after{transform:rotate(45deg)}
.trait b,.people-tile b{display:block;font-family:'Cinzel',serif;font-weight:600;letter-spacing:.08em;font-size:.92rem;color:#f0e4d6;margin-bottom:.25rem}
.trait span,.people-tile span{color:#b9aa9d;font-size:.98rem;line-height:1.5;display:block}
.trait>p,.people-tile>div,.people-tile>p,.people-tile>h3,.people-tile>h4{padding:0 1.1rem}
.trait[open],.people-tile[open]{border-color:#5a1d22}
.trait>p:last-child,.people-tile>p:last-child{padding-bottom:1rem}
.people-tiles{display:grid;grid-template-columns:1fr;gap:.7rem}
.people-tile[open]{grid-column:1/-1}
@media (min-width:720px){.people-tiles{grid-template-columns:1fr 1fr}}
.two-plate{margin:3rem -1.15rem;position:relative}
.two-plate img{width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 85%,transparent 100%)}
.two-plate figcaption{text-align:center;font-style:italic;color:#8f8176;font-size:.9rem;padding:.4rem 1.15rem 0}
@media (min-width:900px){.two-plate{margin:3rem -6rem}}
.the-two-page details.fold{border-color:#2e1c1e}
.the-two-page details.fold>summary::after{border-color:#c1121f}
.the-two-page .fold-toc a{background:#141011;border-color:#3a2426;color:#e8e0d4}
.the-two-page table{background:#141011}
.the-two-page th,.the-two-page td{border-color:#3a2426}
.the-two-page .site-head{background:rgba(8,6,6,.82);border-bottom-color:rgba(193,18,31,.45)}
.two-by{font-size:.85rem;color:#8f8176;margin:.8rem 0 0;font-style:italic}

/* ---------- painted portraits ---------- */
.char-card img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;object-position:50% 20%;border:0;border-radius:8px;background:#1c1712;box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.char-card{grid-template-columns:112px 1fr}
@media (max-width:720px){.char-card{grid-template-columns:92px 1fr}}

/* ================= swipe rows (with arrows) ================= */
.hs{position:relative;margin:1rem -1.15rem 1.4rem}
.hs-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.15rem;padding:.4rem 1.15rem 1.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hs-track::-webkit-scrollbar{display:none}
.hs-track>*{scroll-snap-align:start;flex:0 0 auto}
.hs-track.realm-tiles{display:flex}
.hs-track.realm-tiles>.realm-tile{width:min(62vw,230px);min-height:230px}
.hs-track.people>.card{width:min(86vw,440px)}
.hs-track.prov>.card{width:min(78vw,300px)}
.hs-track.shields>.card{width:min(44vw,200px)}
.hs-arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;
  background:rgba(20,17,13,.78);color:#f3e3bb;display:grid;place-items:center;font-size:1.2rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.7);transition:opacity .25s,transform .25s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hs-arrow:hover{transform:translateY(-60%) scale(1.06)}
.hs-arrow.prev{left:.4rem}.hs-arrow.next{right:.4rem}
.hs-arrow[hidden]{display:grid;opacity:0;pointer-events:none}
.hs::after{content:"";position:absolute;top:0;bottom:1.3rem;right:0;width:56px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));opacity:var(--fade,1);transition:opacity .25s}
@media (min-width:900px){.hs{margin-left:0;margin-right:0}.hs-track{padding-left:0;padding-right:0;scroll-padding:0}}

/* ================= the welcome ================= */
.welcome{margin:3rem 0 1rem;text-align:left}
.welcome h2{margin-top:.3rem}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-top:1.4rem}
.path{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#fffaf0,#f6ecd6);border:1px solid #d9c49a;border-radius:12px;padding:1.1rem 1.2rem 1.2rem;position:relative;overflow:hidden;
  box-shadow:0 1px 0 #fff inset,0 18px 36px -24px rgba(60,40,10,.55);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#c9a24f,#7a2e1c)}
.path b{display:block;font-family:'Cinzel',serif;letter-spacing:.08em;font-size:1rem;margin-bottom:.35rem}
.path b::after{content:" \2192";color:#a8812f}
.path span{display:block;color:var(--muted);font-size:.98rem;line-height:1.5}
.path:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 24px 44px -24px rgba(60,40,10,.7)}

/* ================= portraits ================= */
.portrait{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 25%;border-radius:10px;background:#1c1712;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 28px -16px rgba(0,0,0,.75);border:1px solid rgba(0,0,0,.35)}
.monogram{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--accent2,#a8812f),var(--accent,#7a2e1c) 70%);position:relative}
.monogram::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.4);border-radius:7px}
.monogram span{font-family:var(--head);font-size:1.9rem;color:#fff8e8;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.portrait.big{max-width:360px}.monogram.big span{font-size:4rem}
.char-card{grid-template-columns:104px 1fr;align-items:start}
@media (max-width:720px){.char-card{grid-template-columns:88px 1fr}}
.char-card img{background:transparent;border:0}

/* ================= plates: crisp, never oversized ================= */
.sketchbook .plate{max-width:260px}
.sketchbook{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.plate.map{max-width:980px;margin:1.2rem auto}
.plate.map img{cursor:zoom-in}
.realm-hero .crest{max-width:280px!important}
.art.hero{max-width:900px}
.art .mat img{image-rendering:auto}

/* ================= paper and grain: nothing flat, nothing plastic ================= */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background-image:var(--grain);opacity:.07;mix-blend-mode:multiply}
.the-two-page::before,.realm-tharax::before,.realm-hrodvald::before{mix-blend-mode:overlay;opacity:.12}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.card{background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%)}

/* ---------- ALDMERE: a hearth-lit book of hours ---------- */
.realm-aldmere{background:radial-gradient(ellipse at 50% -10%,#fbf3de 0,#f1e6cc 55%,#e7d7b3 100%) fixed}
.realm-aldmere .realm-main h2{text-shadow:0 1px 0 #fff8e6}
.realm-aldmere .realm-main h2::after{content:"\2766";display:block;font-size:1.1rem;color:#8a2417;margin-top:.25rem;letter-spacing:0}
.realm-aldmere .card{border:1px solid #bda371;box-shadow:inset 0 0 0 3px #f8f0dc,inset 0 0 0 4px #d9c69c,0 16px 30px -20px rgba(47,74,42,.55)}
.realm-aldmere .realm-hero{box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.45)}

/* ---------- THARAX: bronze on black, cut, not written ---------- */
.realm-tharax .realm-main h2{background:linear-gradient(180deg,#f1c27d,#b8762f 55%,#7a4a1c);-webkit-background-clip:text;background-clip:text;color:transparent;border-left-color:#c0853e}
.realm-tharax .card{background:linear-gradient(180deg,#1f1c18,#15130f);border:1px solid #3d3122;border-top:3px solid #c0853e;box-shadow:inset 0 1px 0 rgba(255,210,150,.08),0 20px 40px -24px #000}
.realm-tharax .realm-hero h1{background:linear-gradient(180deg,#ffd9a0,#c0853e 60%,#7a4a1c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(0,0,0,.8))}
.realm-tharax .realm-main section+section{border-top:1px solid #2a2219}

/* ---------- CAELVENNE: lapis, ivory and gold leaf, all at a whisper ---------- */
.realm-caelvenne{background:linear-gradient(180deg,#fbfaf5,#f3f0e5) fixed}
.realm-caelvenne .realm-main h2{background:linear-gradient(90deg,#14254f,#2a4aa8,#14254f);-webkit-background-clip:text;background-clip:text;color:transparent}
.realm-caelvenne .realm-main h2::after{border-color:#c19a3f;box-shadow:0 1px 0 #f5e3a8}
.realm-caelvenne .card{border:1px solid #e4d7b0;box-shadow:0 0 0 1px #fff inset,0 22px 40px -28px rgba(20,37,79,.55),0 1px 0 #c19a3f}
.realm-caelvenne .realm-hero h1{background:linear-gradient(180deg,#fff4cc,#e5c46c 50%,#b8912f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 16px rgba(0,0,0,.45))}

/* ---------- CASTAVAR: crimson, black and the cross of iron ---------- */
.realm-castavar{background:linear-gradient(180deg,#f2ebdf,#e8dccb) fixed}
.realm-castavar .realm-main h2{box-shadow:0 10px 24px -14px rgba(90,10,10,.8),inset 0 1px 0 rgba(255,255,255,.18);background:linear-gradient(180deg,#9e1f1f,#6e1212)}
.realm-castavar .realm-main h2::before{content:"\2720";margin-right:.5em;font-family:serif;opacity:.9}
.realm-castavar .card{box-shadow:inset 0 0 0 4px #fbf7f0,inset 0 0 0 5px #8e1b1b,0 18px 34px -22px rgba(0,0,0,.6)}

/* ---------- ZARVAND: tile, saffron and night ---------- */
.realm-zarvand{background-color:#fbf4e4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 L38 26 L60 32 L38 38 L32 60 L26 38 L4 32 L26 26 Z' fill='none' stroke='%230f6f7a' stroke-width='1' opacity='.09'/%3E%3C/svg%3E")}
.realm-zarvand{--head:'El Messiri','Marcellus SC',serif}
.realm-zarvand .realm-hero h1{font-family:'El Messiri',serif;font-weight:700;letter-spacing:.06em;background:linear-gradient(180deg,#ffe3a1,#f3c56b 50%,#d8962b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(0,0,0,.5))}
.realm-zarvand .realm-main h2{font-family:'El Messiri',serif;font-weight:700;letter-spacing:.04em}
.realm-zarvand .card,.realm-zarvand .plate{border-radius:28px 28px 6px 6px;padding:1.4rem 1.3rem 1.1rem;border:1px solid #d9c7a0;border-top:4px solid #0f6f7a;box-shadow:0 18px 36px -24px rgba(20,40,74,.6),inset 0 1px 0 #fff}
.realm-zarvand .plate.map{border-radius:10px;border-top-width:1px}
.realm-zarvand .glance{border-radius:40px 40px 8px 8px}
.realm-zarvand .char-card,.realm-zarvand .shield-card{border-radius:14px}

/* ---------- KAISHON: rice paper, vermilion seal, the brush ---------- */
.realm-kaishon{background:#f6f2e8 repeating-linear-gradient(90deg,rgba(0,0,0,.012) 0 1px,transparent 1px 7px)}
.realm-kaishon .card{box-shadow:6px 6px 0 rgba(22,22,22,.08),0 16px 30px -24px rgba(0,0,0,.6)}
.realm-kaishon .realm-main h2{letter-spacing:.08em}
.realm-kaishon .realm-hero h1{letter-spacing:.04em}

/* ---------- HRODVALD: slate, frost and the rune-cut ---------- */
.realm-hrodvald{background:radial-gradient(ellipse at 50% 0,#27323a 0,#1b2126 55%,#12171b 100%) fixed}
.realm-hrodvald .realm-main h2::after{content:"\16A0 \16A2 \16A6 \16A8 \16B1 \16B2";display:block;font-family:serif;font-size:.9rem;letter-spacing:.6em;color:#8fa7b4;opacity:.7;margin-top:.2rem}
.realm-hrodvald .card{background:linear-gradient(180deg,#27313a,#1f272e);border:1px solid #3b4a55;box-shadow:inset 0 1px 0 rgba(200,230,245,.08),0 22px 40px -24px #000}
.realm-hrodvald .realm-hero h1{text-shadow:0 0 30px rgba(143,167,180,.35),0 4px 24px rgba(0,0,0,.8)}
.hs-track.two-gal>.two-plate{width:min(88vw,620px);margin:0}
.hs-track.two-gal .two-plate img{-webkit-mask-image:none;mask-image:none;border-radius:8px;border:1px solid #3a2426}
.the-two-page .hs::after{background:linear-gradient(90deg,transparent,#0a0808)}

/* ================= allegiance picker ================= */
.pick{position:relative;display:inline-block;min-width:220px;flex:0 1 260px}
.pick-native{position:absolute!important;opacity:0;pointer-events:none;width:1px!important;height:1px!important;inset:0}
.pick-btn{width:100%;min-height:48px;display:flex;align-items:center;gap:.65rem;padding:.4rem .9rem .4rem .45rem;cursor:pointer;text-align:left;
  font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.08em;color:#f6ecd2;border-radius:10px;border:1px solid rgba(216,184,106,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),var(--h,#2a2118);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -14px rgba(0,0,0,.8);transition:background .3s}
.pick-btn img,.pick-opt img{width:34px;height:34px;border-radius:50%;background:#f4ecd8;padding:2px;flex:none;box-shadow:0 0 0 2px rgba(216,184,106,.6)}
.pick-dot{width:34px;height:34px;border-radius:50%;flex:none;border:1px dashed rgba(216,184,106,.7);background:radial-gradient(circle,rgba(216,184,106,.25),transparent 70%)}
.pick-cur{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-caret{width:.55rem;height:.55rem;border-right:2px solid #e2c078;border-bottom:2px solid #e2c078;transform:rotate(45deg) translateY(-3px);transition:transform .25s;flex:none}
.pick.open .pick-caret{transform:rotate(-135deg) translateY(-2px)}
.pick-panel{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);min-width:280px;max-height:min(62vh,440px);overflow-y:auto;padding:.45rem;border-radius:12px;
  background:rgba(20,17,13,.97);border:1px solid rgba(216,184,106,.45);box-shadow:0 24px 50px -12px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .2s,transform .2s}
.pick.open .pick-panel{opacity:1;transform:none;pointer-events:auto}
.pick-group{font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:#b89a5c;padding:.7rem .6rem .35rem}
.pick-opt{display:flex;align-items:center;gap:.7rem;width:100%;padding:.45rem .55rem;border:0;border-radius:9px;background:transparent;color:#efe4cc;cursor:pointer;text-align:left;font:inherit;position:relative}
.pick-opt.has-hue{background:linear-gradient(90deg,var(--h) 0,transparent 85%)}
.pick-opt:hover,.pick-opt:focus-visible{background:linear-gradient(90deg,var(--h,#6b5431),rgba(216,184,106,.18));outline:none}
.pick-opt[aria-selected="true"]{box-shadow:inset 0 0 0 1px #e2c078}
.pick-opt[aria-selected="true"]::after{content:"\2713";position:absolute;right:.8rem;color:#e2c078}
.pick-txt{display:flex;flex-direction:column;line-height:1.25}
.pick-txt b{font-family:'Cinzel',serif;font-weight:600;font-size:.86rem;letter-spacing:.06em}
.pick-txt small{font-style:italic;color:#cdbb92;font-size:.8rem}
.acct .pick{display:block;max-width:28rem;margin-top:.5rem}
@media (max-width:720px){.pick{flex:1 1 100%;min-width:0}.pick-panel{min-width:0}}
/* other selects: dressed to match */
.signup select,.acct select{appearance:none;-webkit-appearance:none;font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.06em;color:#f6ecd2;border:1px solid rgba(216,184,106,.55);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),#2a2118;padding:.6rem 2.2rem .6rem .9rem;
  background-image:linear-gradient(45deg,transparent 50%,#e2c078 50%),linear-gradient(135deg,#e2c078 50%,transparent 50%),linear-gradient(180deg,#3a2e22,#221a13);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%,0 0;background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat}
.signup select option,.acct select option{background:#221a13;color:#f6ecd2}

/* ================= great works ================= */
.works-intro{max-width:44em}
.hs-track.works>.work{width:min(86vw,400px)}
.work{position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.25rem 1rem;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 22px 40px -26px rgba(0,0,0,.65);overflow:hidden}
.work::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.work-kind{font-family:var(--head);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.work h3{margin:.35rem 0 .2rem;font-size:1.3rem}
.work-native{font-size:1.02rem}.work-native i{color:var(--accent)}.work-native span{color:var(--muted);font-size:.88rem;font-style:italic}
.work-by{font-size:.85rem;color:var(--muted);margin:.25rem 0 .4rem;font-family:var(--head);letter-spacing:.04em}
.work p{font-size:.98rem;line-height:1.55}
.work-quote{margin:.4rem 0 .6rem;padding:.7rem .9rem;border-left:3px solid var(--accent);background:rgba(0,0,0,.035);border-radius:0 8px 8px 0;font-style:normal;color:var(--ink)}
.work-quote i{display:block;font-size:1.08rem;color:var(--accent)}
.work-quote span{display:block;font-size:.9rem;color:var(--muted);font-style:italic;margin-top:.2rem}
.work-more{margin-top:auto;border-top:1px solid var(--rule);padding-top:.5rem}
.work-more summary{cursor:pointer;font-family:var(--head);font-size:.74rem;letter-spacing:.1em;color:var(--link);list-style:none}
.work-more summary::-webkit-details-marker{display:none}
.work-more summary::after{content:" +"}.work-more[open] summary::after{content:" \2212"}
.realm-tharax .work,.realm-hrodvald .work{background:linear-gradient(180deg,#221e1a,#171411)}
.realm-hrodvald .work{background:linear-gradient(180deg,#27313a,#1f272e)}
.realm-tharax .work-quote,.realm-hrodvald .work-quote{background:rgba(255,255,255,.04)}
.works-block{padding:1.5rem 1.15rem;margin:0 -1.15rem 1rem;border-radius:14px;background:var(--bg)}
@media (min-width:900px){.works-block{margin:0 0 1.2rem;padding:1.6rem 1.8rem}}
.work-kind,.work-by{font-family:'Cinzel',Georgia,serif!important}
.works-block>h2{color:var(--accent);margin-top:.2rem}
.works-block.realm-tharax>h2{color:#e0a45c}.works-block.realm-hrodvald>h2{color:#e3e9ec}
.works-block .lede{color:var(--muted)}
.hero-world{overflow:visible;z-index:5}
.signup .pick-btn,.signup .pick-opt{font-weight:400;min-height:0;letter-spacing:.08em;text-transform:none;box-shadow:none;filter:none;transform:none;justify-content:flex-start}
.signup .pick-btn{min-height:48px;padding:.4rem .9rem .4rem .45rem;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),var(--h,#2a2118);color:#f6ecd2;border:1px solid rgba(216,184,106,.55);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -14px rgba(0,0,0,.8)}
.signup .pick-opt{padding:.45rem .55rem;border:0;border-radius:9px;color:#efe4cc;background:transparent}
.signup .pick-opt.has-hue{background:linear-gradient(90deg,var(--h) 0,transparent 85%)}
.signup .pick-opt:hover{background:linear-gradient(90deg,var(--h,#6b5431),rgba(216,184,106,.18))}
.pick-btn::after,.pick-opt::before{content:none!important}
.signup .pick-opt[aria-selected="true"]{box-shadow:inset 0 0 0 1px #e2c078}
.pick-txt small,.signup .pick-txt small{text-transform:none;letter-spacing:0;font-family:"EB Garamond",Georgia,serif;font-size:.86rem}.pick-txt b{text-transform:none}

/* alliances and feuds */
.web-h{margin-top:1.8rem;display:flex;align-items:center;gap:.6rem}
.web-h::before{content:"";width:12px;height:12px;border-radius:50%;background:#3d6b2a;flex:none}
.web-h.feud::before{background:#8e1b1b}.web-h.league::before{background:#a8812f}
.web-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem;margin:.8rem 0 1.4rem}
.web-card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:1rem 1.1rem;box-shadow:0 16px 30px -22px rgba(0,0,0,.55);border-top:4px solid #3d6b2a}
.web-card.feud{border-top-color:#8e1b1b}.web-card.league{border-top-color:#a8812f}
.web-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem;margin-bottom:.5rem}
.web-chip{font-family:var(--head);font-size:.8rem;letter-spacing:.03em;padding:.3rem .65rem;border-radius:999px;background:rgba(61,107,42,.1);border:1px solid rgba(61,107,42,.35)}
.feud .web-chip{background:rgba(142,27,27,.08);border-color:rgba(142,27,27,.35)}
.web-link{color:#3d6b2a;font-weight:700}.web-vs{color:#8e1b1b;font-size:1.1rem}
.web-card p{margin:.2rem 0 0;font-size:.98rem;line-height:1.5}
.web-card h4{margin:0 0 .3rem}.web-who{font-size:.85rem;color:var(--muted);font-style:italic;margin-bottom:.3rem}
/* the words on the standard */
.crest-fig{margin:0;justify-self:center;text-align:center}
.crest-fig figcaption{margin-top:.7rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-family:'Cinzel',serif}
@media (max-width:720px){.crest-fig{justify-self:start;text-align:left}.realm-caelvenne .crest-fig{justify-self:center;text-align:center}}
/* tribe galleries: no empty space under the strip */
.tribe-block .art-grid{align-items:start}.tribe-block{padding-bottom:.6rem}
.town-search{max-width:28rem}