:root{--bg:#090b0d;--panel:#11161a;--panel2:#161c21;--ink:#e9e5de;--muted:#9da4a8;--blood:#8e1e25;--line:#293138;--cold:#b7c9d2}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif}body{margin:0;background:radial-gradient(circle at 70% 0,#19232a 0,transparent 32rem),var(--bg);min-height:100vh}.topbar{position:sticky;top:0;z-index:20;height:68px;padding:0 max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;background:rgba(7,9,11,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}button{font:inherit}.brand{border:0;background:none;color:var(--ink);text-align:left;letter-spacing:.13em;cursor:pointer}.brand span{font-size:11px;color:var(--muted);display:block}.brand b{font-size:18px}.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:8px 11px}.nav{position:sticky;top:68px;z-index:19;display:flex;gap:8px;padding:10px max(18px,calc((100vw - 1100px)/2));background:#0c0f12;border-bottom:1px solid var(--line)}.nav button,.chip{border:1px solid transparent;background:none;color:var(--muted);padding:8px 11px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font:700 11px Arial,sans-serif}.nav button:hover,.nav button.active,.chip.active{color:var(--ink);border-color:#4c2428;background:#181214}#app{max-width:1100px;margin:auto;padding:24px 18px 80px}.hero{min-height:390px;padding:42px 34px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #2b343a;background:linear-gradient(0deg,rgba(6,8,10,.96),rgba(6,8,10,.18)),linear-gradient(120deg,#202c33,#111519 55%,#241315);box-shadow:inset 0 -100px 100px #090b0d}.eyebrow{font:700 10px Arial,sans-serif;letter-spacing:.22em;color:#c15a5f;text-transform:uppercase}.hero h1{font-size:clamp(46px,9vw,88px);line-height:.88;margin:10px 0 8px;letter-spacing:-.045em}.hero p{max-width:650px;color:var(--cold);font-size:17px}.status{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}.status>div{flex:1 1 calc(25% - 1px);min-width:0;padding:14px;background:var(--bg)}.status small{display:block;color:var(--muted);font:700 9px Arial,sans-serif;letter-spacing:.14em;margin-bottom:5px}.section-title{margin:38px 0 14px;font-size:26px}.grid{display:grid;gap:12px}.two{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:repeat(3,1fr)}.card{display:block;text-align:left;width:100%;border:1px solid var(--line);border-left:3px solid #493034;background:linear-gradient(145deg,var(--panel),#0d1114);padding:18px;color:var(--ink);cursor:pointer;transition:.15s}.card:hover{transform:translateY(-1px);border-color:#604047}.card h2,.card h3{margin:5px 0 8px}.card p{color:#b7bdc0;line-height:1.55;margin:0}.meta,.crumbs{font:700 10px Arial,sans-serif;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.badge{font:700 9px Arial,sans-serif;letter-spacing:.08em;border:1px solid #394249;padding:5px 7px;color:#bdc5c9}.filters{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 18px}.detail{max-width:800px}.detail h1{font-size:42px;margin:10px 0}.detail p{font-size:17px;line-height:1.7;color:#c6c9ca}.related{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}.back{background:none;border:0;color:#c15a5f;padding:0;cursor:pointer;font:700 11px Arial,sans-serif;letter-spacing:.1em}.empty{padding:30px;border:1px dashed var(--line);color:var(--muted)}footer{border-top:1px solid var(--line);padding:30px;text-align:center;color:#596168;font:700 9px Arial,sans-serif;letter-spacing:.3em}@media(max-width:700px){.menu-btn{display:block}.nav{display:none;position:fixed;top:68px;left:0;right:0;flex-direction:column;padding:12px 18px}.nav.open{display:flex}.nav button{text-align:left;padding:13px}.hero{min-height:330px;padding:26px 20px}.status>div{flex-basis:calc(50% - 1px)}.two,.three{grid-template-columns:1fr}.detail h1{font-size:34px}}
/* Keep the original lake, steel, and blood palette; use native links throughout. */
a{color:var(--cold);text-underline-offset:4px}a:hover{color:var(--ink)}a.card{text-decoration:none}.nav a{border:1px solid transparent;background:none;color:var(--muted);padding:10px 11px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font:700 11px Arial,sans-serif;display:flex;align-items:center;min-height:44px}.nav a:hover,.nav a.active{color:var(--ink);border-color:#4c2428;background:#181214}.nav{flex-wrap:wrap}.card,.detail,.grid>*{min-width:0;overflow-wrap:anywhere}:focus-visible{outline:2px solid var(--cold);outline-offset:4px}.skip-link{position:fixed;left:18px;top:-100px;z-index:40;background:var(--panel);padding:14px}.skip-link:focus{top:8px}.crumbs{margin-top:24px;line-height:2}.crumbs a{display:inline-block;min-height:32px}.facts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}.facts div{background:var(--panel);padding:16px}.facts dt{font:700 10px Arial,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.facts dd{margin:8px 0 0}.related .section-title{margin:0 0 14px;font-size:22px}.recap{cursor:default}.recap:hover{transform:none}.recap p+p{margin-top:12px}.badges a{padding:10px;border:1px solid var(--line);font-size:13px}.intro{color:var(--muted);line-height:1.7;max-width:720px}.search-row{display:flex;gap:8px;margin:12px 0 24px}input[type=search]{width:100%;min-width:0;padding:14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:16px}.search-row button{border:1px solid var(--line)}.chip,.menu-btn{min-height:44px}.detail h1{overflow-wrap:anywhere}.status div{overflow-wrap:anywhere}@media(min-width:701px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.nav{max-height:calc(100dvh - 68px);overflow:auto}.nav a{padding:13px}.detail h1{font-size:clamp(28px,9vw,34px)}}@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
.brand{text-decoration:none}.brand b{display:block}
@media(min-width:701px){.detail:not(.npc-detail):not(.location-detail):not(.power-detail) .facts div:last-child:nth-child(odd){grid-column:1/-1}}

.record-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}.record-link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 16px;border:1px solid var(--line);background:var(--panel);text-decoration:none;overflow-wrap:anywhere}.record-link:hover{border-color:#604047;background:var(--panel2)}.record-link span{color:var(--muted);flex-shrink:0}@media(min-width:701px){.record-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.npc-detail{max-width:1100px}.npc-panel{padding:20px;margin-top:20px;background:linear-gradient(145deg,var(--panel),#0d1114);border:1px solid var(--line);border-left:3px solid #493034;min-width:0;overflow-wrap:anywhere}.npc-panel h2{font-size:24px;margin:0 0 16px}.npc-panel h3{font-size:17px;margin:0 0 8px}.npc-panel p{font-size:16px;line-height:1.65;margin:0}.npc-sections{display:grid;gap:0 20px}.mechanic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mechanic-entry{padding:12px;background:#0b1013;border:1px solid var(--line);min-width:0}.mechanic-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.mechanic-heading h3{margin:0;font-size:15px;overflow-wrap:anywhere}.rating{font:700 18px Arial,sans-serif;color:var(--ink);flex-shrink:0}.npc-panel .mechanic-notes{font:12px/1.6 Arial,sans-serif;color:var(--muted);margin-top:10px}.note-list{padding-left:20px;margin:0}.note-list>li+li{margin-top:16px}.note-list ul{padding-left:20px}.note-list ul li+li{margin-top:10px}.ability-list{padding-left:18px;margin-bottom:0}.npc-panel .record-links{display:block}.npc-panel .record-links li+li{margin-top:12px}.npc-panel .record-links a{display:inline-block;min-height:32px}.facts a{overflow-wrap:anywhere}@media(min-width:701px){.mechanic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.npc-sections{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}@media(max-width:380px){.mechanic-grid{grid-template-columns:1fr}}
.npc-panel .connection-context{font:12px/1.5 Arial,sans-serif;color:var(--muted);margin:0 0 8px}
.npc-detail .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.npc-detail .facts .fact-wide{grid-column:1/-1}
/* Reference rules remain readable during play on narrow screens. */
.power-detail .facts { grid-template-columns:1fr; }
.power-detail .power-overview{margin:0}
.power-detail .power-overview+.power-overview{margin-top:1.35rem}
.rules-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.session-recap .note-list{list-style:none;padding-left:0}
.session-recap .note-list p{white-space:pre-line}
.connection-label-form{display:grid;gap:12px}.connection-label-form label{display:grid;gap:6px}.connection-label-form input{width:100%;min-width:0;padding:10px;background:var(--bg);color:var(--ink);border:1px solid var(--line);font:inherit}.connection-label-form button{justify-self:start}
.record-links li > .mechanic-notes { margin:0 0 1rem; }
.discipline-name{position:relative;display:block;width:fit-content;max-width:100%;padding:0 .8rem .32rem 0;text-shadow:0 2px 18px #000}
.discipline-name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#a5323a 0,#604047 48%,transparent 100%);box-shadow:0 0 12px #8e1e2566}
.power-list{display:block}
.power-list-entry{position:relative;border:1px solid var(--line);border-left:3px solid #604047;background:linear-gradient(105deg,#171417 0,var(--panel) 50%,#0d1215 100%);box-shadow:inset 0 1px #ffffff05;transition:border-color .15s,background .15s}
.power-list-entry+.power-list-entry{margin-top:1rem}
.discipline-detail .power-link{position:relative;display:flex;width:100%;justify-content:flex-start;min-height:58px;padding:12px 16px 8px 13px;border:0;background:transparent}
.power-list-entry:hover,.power-list-entry:focus-within{border-color:#a43b43;background:linear-gradient(105deg,#211417 0,var(--panel2) 55%,#10161a 100%)}
.record-link .power-link-mark{color:#a43b43;font-size:10px;flex:0 0 auto;filter:drop-shadow(0 0 5px #8e1e25)}
.record-link .power-link-name{color:var(--ink);font-size:20px;font-weight:bold;letter-spacing:.015em;flex:1 1 auto}
.record-link .power-link-arrow{color:#82949d;flex:0 0 auto}
.power-list-entry .power-summary{margin:0;padding:0 16px 15px 40px;color:#aeb5b8;font-size:13px;line-height:1.55;cursor:default}
@media(prefers-reduced-motion:reduce){.power-list-entry{transition:none}}
.ability-dialog{width:min(800px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:22px;background:var(--bg);color:var(--ink);border:1px solid #604047;overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 80px #0008}
.ability-dialog::backdrop{background:rgba(0,0,0,.78)}
.ability-close{display:block;margin:0 0 12px auto;min-height:44px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.ability-dialog .facts{grid-template-columns:1fr}.ability-open{overflow:hidden}
@media(max-width:700px){.ability-dialog{padding:16px}.ability-dialog h1{font-size:30px}}

/* Stack narrative boxes without the empty space imposed by shared grid rows. */
@media(min-width:901px){
  .npc-sections{display:block;column-count:2;column-gap:20px;margin-top:20px}
  .npc-sections>.npc-panel{break-inside:avoid;display:inline-block;width:100%;margin:0 0 20px;vertical-align:top}
  .disciplines-panel .mechanic-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}
@media(min-width:701px) and (max-width:900px){.npc-sections{grid-template-columns:1fr}}

/* Campaign cover art, with the bridge kept visible in the mobile crop. */
.hero{position:relative;isolation:isolate;overflow:hidden;box-shadow:none}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%;z-index:-2}
.hero:has(.hero-image)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,8,10,.94),rgba(6,8,10,.18) 75%)}
.hero:has(.hero-image) .eyebrow{color:#e7979b;text-shadow:0 1px 5px #000}
.hero:has(.hero-image) h1,.hero:has(.hero-image) p{text-shadow:0 2px 8px #000}
@media(max-width:700px){.hero-image{object-position:30% 42%}}
.hero-image{z-index:0}
.hero:has(.hero-image)::before{z-index:1}
.hero:has(.hero-image)>:not(.hero-image){position:relative;z-index:2}
.location-detail{max-width:1100px}.location-sections{display:grid;gap:20px;margin-top:24px;align-items:start}.location-sections>.npc-panel{margin:0}.location-directory{display:grid;gap:8px}.location-directory details{background:#0b1013;border:1px solid var(--line);padding:0 14px}.location-directory summary{padding:14px 0;min-height:48px;cursor:pointer;font-weight:bold;line-height:1.5}.location-directory details[open]{padding-bottom:16px}.location-directory .note-list{margin-top:8px}.location-directory .note-list h3{margin-top:12px}@media(min-width:901px){.location-sections{grid-template-columns:repeat(2,minmax(0,1fr))}.location-sections>.directory-panel{grid-column:1/-1}.location-directory{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.location-detail .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.location-detail .facts .fact-wide{grid-column:1/-1}
.person-header{display:flex;gap:22px;align-items:center;margin-top:20px}.person-header>div{min-width:0}.person-portrait{display:block;width:clamp(110px,22vw,180px);height:auto;flex-shrink:0;border:1px solid var(--line);background:var(--panel)}@media(max-width:420px){.person-header{align-items:flex-start;gap:16px}.person-header h1{font-size:28px}.person-portrait{width:100px}}
.source-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:16px}.author-notes .mechanic-notes{margin-top:0}.source-text::selection{background:#493034}

/* Auth uses the campaign's existing visual system. */
.nav[hidden]{display:none}
.account{display:flex;align-items:center;gap:.75rem;margin-left:auto;font-size:.8rem}
.account button,.login-panel button{color:var(--text,#eee);background:#171e22;border:1px solid #435059;padding:.7rem 1rem;cursor:pointer}
.login-panel{max-width:30rem;margin:3rem auto;padding:1.5rem;border:1px solid #29363c;background:#0e1417}
.login-panel label{display:block;margin:1rem 0}
.login-panel input{display:block;width:100%;box-sizing:border-box;margin-top:.5rem;padding:.8rem;background:#090b0d;color:#eee;border:1px solid #435059;font:inherit}
.note-editor summary{cursor:pointer;margin-top:1rem;color:#bdd3de}
.note-editor textarea{display:block;box-sizing:border-box;width:100%;background:#090b0d;color:#eee;border:1px solid #435059;padding:.8rem;font:inherit;margin:.6rem 0}
.note-editor button{background:#171e22;color:#eee;border:1px solid #435059;padding:.6rem 1rem;cursor:pointer}
.status-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.2rem}
.status-row-form{margin:0}.status-row-form label{display:block;font-size:.9rem;margin:1rem 0}
.status-row-form input,.status-row-form select{display:block;width:100%;min-width:0;box-sizing:border-box;background:#090b0d;color:#eee;border:1px solid #435059;padding:.75rem;margin-top:.4rem;font:inherit}
.status-row-options{display:grid;grid-template-columns:1fr 2fr;gap:1rem}
.status-row-form [role=status]{font-size:.9rem;min-height:1.5em}

/* Storyteller record authoring remains a single readable column on phones. */
.editor-section{margin-block:2rem}.editor-row{margin-block:.75rem;padding:1rem}.editor-row summary{cursor:pointer;overflow-wrap:anywhere}.editor-row summary .meta{display:inline-block;margin-left:.5rem}.editor-row form{display:grid;gap:1rem;margin-top:1rem}.editor-row label:not(.reveal-choice){display:grid;gap:.35rem;min-width:0}.editor-row input:not([type=checkbox]),.editor-row textarea,.editor-row select,[data-editor-search]{box-sizing:border-box;width:100%;min-width:0;background:#090e11;color:var(--text,#eee);border:1px solid #39444a;padding:.65rem;font:inherit}.editor-row textarea{resize:vertical}.editor-row small{font-size:.85rem;color:#abb9c4}.editor-row fieldset{min-width:0;border:1px solid #39444a;display:grid;gap:.75rem}.reveal-choice{display:flex;align-items:center;gap:.6rem}.reveal-toolbar{display:flex;gap:.6rem;flex-wrap:wrap}.editor-record-list{margin-top:1rem;max-height:30rem;overflow:auto}.editor-record-list [data-editor-record]{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid #29343b;padding:.75rem 0}.editor-record-list [hidden]{display:none}.editor-record-list label{min-width:0;overflow-wrap:anywhere}.editor-record-list small{display:block;color:#aabac8}.editor-record-list .storyteller-actions{margin:0;flex-shrink:0}.editor-record-list .chip{font-size:.8rem}.reveal-dialog{box-sizing:border-box;background:#10171b;color:#eee;border:1px solid #71818c;width:min(42rem,calc(100vw - 2rem));max-height:85vh;overflow:auto;padding:1.5rem}.reveal-dialog::backdrop{background:#000b}.reveal-dialog li{overflow-wrap:anywhere}.editor-row form>button{justify-self:start}
@media(min-width:800px){.editor-row form{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-row form>fieldset,.editor-row form>[role=status]{grid-column:1/-1}}
.editor-advanced{grid-column:1/-1;border-top:1px solid #39444a;padding-top:.75rem}.editor-advanced[open]{display:grid;gap:1rem}.editor-advanced summary{margin-bottom:.75rem}
.reveal-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.9rem;border-left:2px solid #526571;padding-left:.75rem}
.editor-filters{display:grid;gap:1rem;margin-bottom:1rem}.editor-filters label{display:grid;gap:.35rem;min-width:0}.editor-filters select{box-sizing:border-box;width:100%;min-width:0;background:#090e11;color:#eee;border:1px solid #39444a;padding:.65rem;font:inherit}
@media(min-width:700px){.editor-filters{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.editor-selection{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1rem}.editor-selection label{display:flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer}.editor-selection span{font-size:.85rem;color:var(--muted)}
@media(min-width:900px){.editor-filters{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}}
.coterie-page{max-width:100%}.coterie-grid{display:grid;gap:1rem}.coterie-page>.npc-panel{margin-top:1rem}.coterie-grid>.npc-panel{margin:0}.coterie-entry{padding:1rem 0;border-top:1px solid var(--line);min-width:0}.coterie-entry h3{overflow-wrap:anywhere}.coterie-editor{margin:1rem 0}.coterie-editor summary{cursor:pointer}.coterie-page form{display:grid;gap:1rem;margin-top:1rem}.coterie-page label{display:grid;gap:.35rem;min-width:0}.coterie-page input,.coterie-page select,.coterie-page textarea{width:100%;min-width:0;padding:.75rem;background:var(--bg);color:var(--ink);border:1px solid #435059;font:inherit}.coterie-page textarea{resize:vertical}.coterie-notes textarea{min-height:22rem}.coterie-page form>button{justify-self:start}.coterie-page p,.coterie-page li{overflow-wrap:anywhere}
@media(min-width:800px){.coterie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* A small blood-red brush mark leaves the character name fully readable. */
.death-mark{display:inline-block;width:1em;height:1.25em;margin-right:.4em;vertical-align:-.25em;pointer-events:none;flex-shrink:0}
.death-mark svg{display:block;width:100%;height:100%;fill:#ca343d;stroke:#821b25;stroke-width:.6;filter:drop-shadow(0 1px 1px #470c16)}

/* Detail-page death cross: translucent paint over the name, without changing text contrast. */
.dead-person-name{position:relative;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.death-name-cross{position:absolute;inset:0;width:100%;height:100%;fill:#df4b55;opacity:.38;pointer-events:none;user-select:none}

.summary-editor{display:grid;gap:12px}.summary-editor label{display:grid;gap:6px}.summary-editor textarea,.summary-editor input[type=text]{width:100%;min-width:0;resize:vertical;padding:10px;background:var(--bg);color:var(--ink);border:1px solid var(--line);font:inherit}.summary-editor button{justify-self:start}

.reveal-actions{display:flex;flex-wrap:wrap;gap:.6rem}.reveal-action{position:relative;display:inline-block;max-width:100%}.reveal-help{position:absolute;top:100%;left:0;z-index:10;box-sizing:border-box;width:min(22rem,calc(100vw - 6rem));padding:.85rem;background:#172126;color:var(--text,#eee);border:1px solid #71818c;box-shadow:0 5px 16px #0009;font-size:.9rem;line-height:1.5;visibility:hidden;opacity:0}.reveal-action:not([data-help-dismissed]):is(:hover,:focus-within) .reveal-help{visibility:visible;opacity:1}