/* character-design.css -- the reviewer's New Frontend Design, scoped. Every rule is prefixed with .cd-page so the character directory and detail pages can adopt this design without restyling missions, weapons or the rest of the site. :root and html[...] rules stay global because they only declare custom properties and the data-mode / data-game switches sit on . Sticky fixes applied on top of the original are commented where they occur. */ :root{ /* ONE typeface across the whole page. This used to run three families at once -- Oswald for headings, Inter for body, JetBrains Mono for every small-caps label -- which is what made the typography look unrelated to itself. All three variables now resolve to the same stack, so weight and size do the work instead of a change of typeface. The variables are kept rather than collapsed because hundreds of rules name them; --f-mono still exists purely so tabular figures can opt into a monospaced fallback if one is ever wanted. NOTE: ARS Maquette Web One is a licensed face and its files are NOT in this repo (see public/fonts/README.md). Until they are dropped in, every rule falls through to the system stack below -- which is why the page currently renders in the OS default rather than the intended face. */ --f-display:'ARS Maquette Web One',system-ui,-apple-system,'Segoe UI',sans-serif; --f-body:'ARS Maquette Web One',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'ARS Maquette Web One',system-ui,-apple-system,'Segoe UI',sans-serif; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --wrap:1600px; --head-h:58px; --stick:var(--head-h); --ease:cubic-bezier(.22,.61,.36,1); --bg:#f7f5f1; --bg-2:#fffdfa; --panel:#ffffff; --panel-2:#f2efe9; --sunk:#eae6de; --line:rgba(20,18,15,.13); --line-2:rgba(20,18,15,.07); --text:#14120f; /* Secondary and label text were mid-greys (#4a453d / #7c766c) and read as washed out on the white panels. Darkened so body copy is effectively black and labels stay distinguishable by weight and size rather than by fading. */ --text-2:#1d1a16; --muted:#3d382f; --shadow:0 1px 2px rgba(20,18,15,.05), 0 12px 32px -12px rgba(20,18,15,.18); --shadow-lg:0 2px 4px rgba(20,18,15,.06), 0 30px 60px -24px rgba(20,18,15,.35); --scrim:linear-gradient(to top,rgba(10,9,8,.92) 0%,rgba(10,9,8,.55) 38%,rgba(10,9,8,0) 72%); --art-bg:#dfdad1; --hero-ink:#fff; --chip-bg:rgba(20,18,15,.05); } html[data-mode="dark"]{ --bg:#0a0b0d; --bg-2:#101216; --panel:#141719; --panel-2:#191d21; --sunk:#0d0f11; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055); --text:#f0f2f4; --text-2:#c2c8ce; --muted:#8b949d; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.8); --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 34px 70px -26px rgba(0,0,0,.95); --art-bg:#1b1f23; --chip-bg:rgba(255,255,255,.06); } html[data-game="gta-v"]{ --accent:#ff6a1f; --accent-2:#ffb020; --accent-3:#2fb6c9; --accent-ink:#1a0d03; } html[data-game="rdr2"]{ --accent:#b3402f; --accent-2:#d9a441; --accent-3:#5d7a52; --accent-ink:#1b0c08; } html[data-game="cyberpunk"]{ --accent:#f6ff00; --accent-2:#00e5ff; --accent-3:#ff2e88; --accent-ink:#12120a; } html[data-game="elden-ring"]{ --accent:#c8a44d; --accent-2:#8f7bd6; --accent-3:#4d7fa8; --accent-ink:#14110a; } :root{ --c-protagonist:#ffb020; --c-antagonist:#f2564a; --c-ally:#39c07c; --c-heist:#a98bf0; --c-contact:#38a8e0; --c-law:#5b8def; } .cd-page *,.cd-page *::before,.cd-page *::after{box-sizing:border-box} .cd-page{ margin:0;background:var(--bg);color:var(--text); font-family:var(--f-body);font-size:19px;line-height:1.753; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* clip, not hidden: overflow-x:hidden makes overflow-y compute to auto, which turns body into a scroll container and silently breaks every position:sticky descendant -- the header, filter bar, section nav and both rails. clip confines overflow identically without creating that scroll container. */ overflow-x:clip; } .cd-page img{max-width:100%;display:block} .cd-page a{color:inherit;text-decoration:none} .cd-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .cd-page input,.cd-page select{font:inherit;color:inherit} .cd-page ::selection{background:var(--accent);color:var(--accent-ink)} .cd-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} .cd-page .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} @media(max-width:640px){.cd-page .wrap{width:calc(100% - 28px)}} .cd-page .kicker{ font-family:var(--f-mono);font-size:10.5px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--muted); } .cd-page h1,.cd-page h2,.cd-page h3,.cd-page h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.005em;margin:0;line-height:1.12} .cd-page .h-display{font-size:clamp(38px,6.4vw,76px);font-weight:700;letter-spacing:-.02em;line-height:.98;text-transform:uppercase} .cd-page .lede{font-size:clamp(15px,1.35vw,17.5px);line-height:1.68;color:var(--text-2);max-width:62ch} .cd-page .chip{ display:inline-flex;align-items:center;gap:6px; font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--chip-bg); color:var(--text-2);white-space:nowrap; } .cd-page .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .cd-page .chip.solid{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:700} .cd-page .chip[data-role="Protagonist"]{color:var(--c-protagonist)} .cd-page .chip[data-role="Antagonist"]{color:var(--c-antagonist)} .cd-page .chip[data-role="Ally"]{color:var(--c-ally)} .cd-page .chip[data-role="Heist Crew"]{color:var(--c-heist)} .cd-page .chip[data-role="Contact"]{color:var(--c-contact)} .cd-page .chip[data-role="Law Enforcement"]{color:var(--c-law)} .cd-page .tier-badge{ font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.62);color:#fff; backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16); } .cd-page .tier-badge[data-tier="core"]{background:var(--accent);color:var(--accent-ink);border-color:transparent} .cd-page .site-head{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line-2); } .cd-page .site-head .bar{display:flex;align-items:center;gap:22px;height:58px} .cd-page .brand{display:flex;align-items:center;gap:2px;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em} .cd-page .brand i{width:7px;height:7px;background:var(--accent);border-radius:2px;margin-left:4px;display:block} .cd-page .nav{display:flex;gap:20px;font-size:13.5px;font-weight:500;color:var(--text-2)} .cd-page .nav a{padding:4px 0;border-bottom:2px solid transparent} .cd-page .nav a:hover{color:var(--text)} .cd-page .nav a.on{color:var(--text);border-bottom-color:var(--accent)} .cd-page .head-tools{margin-left:auto;display:flex;align-items:center;gap:8px} .cd-page .icon-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:32px;padding:0 11px;border-radius:8px;border:1px solid var(--line); font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2); transition:.18s var(--ease); } .cd-page .icon-btn:hover{border-color:var(--accent);color:var(--text)} @media(max-width:860px){.cd-page .nav{display:none}} .cd-page .crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cd-page .crumbs a:hover{color:var(--accent)} .cd-page .crumbs span.sep{opacity:.4} .cd-page .crumbs .now{color:var(--text)} .cd-page .hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line-2)} .cd-page .hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .cd-page .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%; filter:saturate(.85) contrast(1.05);transform:scale(1.06)} .cd-page .hero-bg::after{ content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 78% 10%, color-mix(in srgb,var(--accent) 26%,transparent) 0%, transparent 58%), linear-gradient(180deg, rgba(6,7,9,.55) 0%, rgba(6,7,9,.78) 45%, var(--bg) 100%); } html[data-mode="light"] .hero-bg::after{ background: radial-gradient(120% 90% at 78% 8%, color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 55%), linear-gradient(180deg, rgba(8,9,11,.62) 0%, rgba(8,9,11,.72) 40%, var(--bg) 100%); } .cd-page .hero-grain{ position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .cd-page .hero-inner{position:relative;padding:34px 0 46px} .cd-page .hero .h-display,.cd-page .hero .lede,.cd-page .hero .kicker,.cd-page .hero .crumbs{color:var(--hero-ink)} .cd-page .hero .crumbs{color:rgba(255,255,255,.62)} .cd-page .hero .crumbs .now{color:#fff} .cd-page .hero .lede{color:rgba(255,255,255,.8)} .cd-page .hero .kicker{color:rgba(255,255,255,.6)} .cd-page .accent-word{color:var(--accent-2)} .cd-page .hero-top{display:flex;align-items:center;gap:12px;margin:26px 0 18px;flex-wrap:wrap} .cd-page .game-tag{ display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px); font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff; } .cd-page .game-tag b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-size:11px;letter-spacing:0} .cd-page .stat-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);overflow:hidden;background:rgba(10,11,13,.42);backdrop-filter:blur(10px)} .cd-page .stat-strip .s{flex:1 1 130px;padding:13px 16px;border-right:1px solid rgba(255,255,255,.12)} .cd-page .stat-strip .s:last-child{border-right:0} .cd-page .stat-strip .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)} .cd-page .stat-strip .v{font-family:var(--f-display);font-size:23px;font-weight:600;color:#fff;line-height:1.25} .cd-page .stat-strip .v small{font-size:12px;font-weight:400;color:rgba(255,255,255,.65)} .cd-page .featured{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px} @media(max-width:820px){.cd-page .featured{grid-template-columns:1fr;gap:10px}} .cd-page .feat{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10; border:1px solid rgba(255,255,255,.16);background:var(--art-bg); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s; } .cd-page .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .6s var(--ease)} .cd-page .feat::after{content:"";position:absolute;inset:0;background:var(--scrim)} .cd-page .feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 70%,transparent)} .cd-page .feat:hover img{transform:scale(1.06)} .cd-page .feat .meta{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2} .cd-page .feat .nm{font-family:var(--f-display);font-size:21px;font-weight:600;color:#fff;line-height:1.15} .cd-page .feat .rl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:4px} .cd-page .feat .ab{position:absolute;top:12px;right:12px;z-index:2} .cd-page .controls{position:sticky;top:var(--head-h);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line-2)} .cd-page .controls .row{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap} .cd-page .search{position:relative;flex:1 1 260px;min-width:200px} .cd-page .search input{ width:100%;height:40px;padding:0 14px 0 38px;border-radius:10px; border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:14px; transition:.2s var(--ease); } .cd-page .search input::placeholder{color:var(--muted)} .cd-page .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} .cd-page .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)} .cd-page .seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--sunk);border:1px solid var(--line-2)} .cd-page .seg button{ padding:6px 12px;border-radius:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);transition:.18s var(--ease); } .cd-page .seg button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:var(--shadow)} .cd-page .count{margin-left:auto;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cd-page .count b{color:var(--text)} .cd-page .filters{padding:4px 0 16px} .cd-page .fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0} .cd-page .fgroup > .lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);width:104px;flex:none} @media(max-width:640px){.cd-page .fgroup > .lbl{width:100%}} .cd-page .pill{ display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px; border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:500;color:var(--text-2); transition:.18s var(--ease); } .cd-page .pill em{font-family:var(--f-mono);font-style:normal;font-size:10px;color:var(--muted);padding:1px 5px;border-radius:4px;background:var(--sunk)} .cd-page .pill .mono-ini{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.02em;background:var(--sunk);color:var(--text-2)} .cd-page .pill:hover{border-color:var(--text-2);color:var(--text)} .cd-page .pill[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:600} .cd-page .pill[aria-pressed="true"] em,.cd-page .pill[aria-pressed="true"] .mono-ini{background:rgba(0,0,0,.16);color:inherit} .cd-page .pill[data-fx]{--fx:var(--accent)} .cd-page .pill[aria-pressed="true"][data-fx]{background:var(--fx);color:#0c0a08} .cd-page .clearf{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:1px} .cd-page .tier-head{display:flex;align-items:center;gap:14px;margin:34px 0 16px} .cd-page .tier-head h2{font-size:15px;font-family:var(--f-mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase} .cd-page .tier-head .ln{flex:1;height:1px;background:var(--line)} .cd-page .tier-head .n{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)} .cd-page .tier-head .sw{width:8px;height:8px;border-radius:2px;background:var(--accent)} .cd-page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px} @media(max-width:560px){.cd-page .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}} .cd-page .card{ position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s var(--ease); } .cd-page .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))} .cd-page .card .art{position:relative;aspect-ratio:4/5;background:var(--art-bg);overflow:hidden} .cd-page .card .art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .55s var(--ease),filter .35s} .cd-page .card:hover .art img{transform:scale(1.07)} .cd-page .card .art::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:.95} .cd-page .card .art,.cd-page .feat,.cd-page .d-portrait,.cd-page .qv-hero,.cd-page .node .ph,.cd-page .rel .av{position:relative} .cd-page .mono{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--f-display);font-size:44px;font-weight:700;letter-spacing:.02em; color:color-mix(in srgb,var(--text) 22%,transparent); background:linear-gradient(145deg,var(--art-bg),color-mix(in srgb,var(--accent) 12%,var(--art-bg))); } .cd-page .card .badges{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;z-index:2} .cd-page .card .role-tag{ font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; padding:4px 8px;border-radius:4px;background:rgba(8,8,10,.66);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); } .cd-page .card .name-over{position:absolute;left:14px;right:14px;bottom:12px;z-index:2} .cd-page .card .name-over .nm{font-family:var(--f-display);font-size:18px;font-weight:600;color:#fff;line-height:1.16} .cd-page .card .name-over .fac{font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:3px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .cd-page .card .body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:10px;flex:1} .cd-page .card .sum{font-size:12.8px;line-height:1.55;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0} .cd-page .card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--line-2)} .cd-page .card .va{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-page .card .go{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:5px;flex:none} .cd-page .card .go svg{transition:transform .25s var(--ease)} .cd-page .card:hover .go svg{transform:translateX(3px)} .cd-page .card .stretch{position:absolute;inset:0;z-index:3} .cd-page .card .art .qv{position:absolute;bottom:12px;right:12px;z-index:4;opacity:0;transform:translateY(4px);transition:.25s var(--ease); display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:6px; background:rgba(8,8,10,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px); font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#fff} .cd-page .card:hover .qv{opacity:1;transform:translateY(0)} .cd-page .card .qv:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent} .cd-page .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow)} .cd-page table{width:100%;border-collapse:collapse;min-width:760px} .cd-page thead th{ position:sticky;top:0;background:var(--panel-2);z-index:1; font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap; } .cd-page tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle} .cd-page tbody tr:hover{background:var(--panel-2)} .cd-page tbody tr:last-child td{border-bottom:0} .cd-page .t-name{display:flex;align-items:center;gap:11px;font-weight:600} .cd-page .t-name img,.cd-page .t-name .tm{width:34px;height:34px;border-radius:8px;object-fit:cover;object-position:50% 15%;background:var(--art-bg);flex:none} .cd-page .t-name .tm{display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--muted)} .cd-page .empty{padding:70px 20px;text-align:center;color:var(--muted)} .cd-page .empty b{display:block;font-family:var(--f-display);font-size:22px;color:var(--text);margin-bottom:6px} .cd-page .d-hero .hero-inner{padding:26px 0 0} .cd-page .d-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:44px;align-items:end;padding-bottom:0} @media(max-width:1080px){.cd-page .d-hero-grid{grid-template-columns:1fr;gap:26px}} .cd-page .d-chips{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 16px} .cd-page .d-hero .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.86);backdrop-filter:blur(6px)} .cd-page .d-hero .chip.solid{background:var(--accent);color:var(--accent-ink);border-color:transparent} .cd-page .d-name{font-family:var(--f-display);font-size:clamp(40px,6vw,74px);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;color:#fff} .cd-page .d-name .alias{display:block;font-size:.32em;font-weight:400;letter-spacing:.22em;color:var(--accent-2);margin-top:12px;text-transform:uppercase} .cd-page .d-lede{margin-top:18px;font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:rgba(255,255,255,.82);max-width:56ch} .cd-page .d-meta{display:flex;flex-wrap:wrap;gap:26px;margin:26px 0 30px} .cd-page .d-meta .m .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)} .cd-page .d-meta .m .v{font-family:var(--f-display);font-size:19px;font-weight:500;color:#fff;text-transform:capitalize} .cd-page .d-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px} .cd-page .btn{ display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:9px; font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; border:1px solid rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.07);backdrop-filter:blur(8px); transition:.2s var(--ease); } .cd-page .btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)} .cd-page .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700} .cd-page .btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .cd-page .d-portrait{position:relative;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;aspect-ratio:4/4.5; border:1px solid rgba(255,255,255,.2);border-bottom:0;background:var(--art-bg);box-shadow:0 -10px 60px -20px rgba(0,0,0,.8)} .cd-page .d-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .cd-page .d-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.65),transparent 46%)} .cd-page .d-portrait .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px} .cd-page .d-portrait .cap .t{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)} .cd-page .wheel{display:flex;align-items:center;gap:6px} .cd-page .wheel i{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);display:block} .cd-page .wheel i.on{background:var(--char-accent,var(--accent));width:30px} .cd-page .secnav{position:sticky;top:var(--head-h);z-index:48;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)} .cd-page .secnav .in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} .cd-page .secnav .in::-webkit-scrollbar{display:none} .cd-page .secnav a{ flex:none;padding:14px 14px;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:.18s var(--ease); } .cd-page .secnav a:hover{color:var(--text)} .cd-page .secnav a.on{color:var(--accent);border-bottom-color:var(--accent)} .cd-page .d-layout{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:48px;padding:44px 0 80px;align-items:start} @media(max-width:1400px){.cd-page .d-layout{grid-template-columns:minmax(0,1fr) 330px;gap:38px}} /* The rail scrolls with the page (no scrollbar of its own) but stretches the full height of the article, so the contents list at its foot has room to stick once the info cards have scrolled past. */ .cd-page .d-rail{align-self:stretch} .cd-page .d-toc{position:sticky;top:calc(var(--stick) + 18px); max-height:calc(100vh - var(--stick) - 36px);overflow-y:auto;overscroll-behavior:contain; scrollbar-width:none;padding:18px 0 4px} .cd-page .d-toc::-webkit-scrollbar{display:none} @media(max-width:940px){.cd-page .d-layout{grid-template-columns:1fr;gap:30px}.cd-page .d-toc{display:none}} .cd-page .d-toc .ttl,.cd-page .rail-card .ttl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .cd-page .d-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .cd-page .d-toc a{display:block;padding:6px 12px;font-size:12.5px;color:var(--muted);border-left:2px solid var(--line);transition:.18s var(--ease)} .cd-page .d-toc a:hover{color:var(--text);border-left-color:var(--text-2)} .cd-page .d-toc a.on{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:600} .cd-page .rail-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);margin-bottom:18px} .cd-page .rail-id{display:flex;gap:13px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line-2);margin-bottom:14px} .cd-page .rail-id img,.cd-page .rail-id .mn{width:56px;height:56px;border-radius:12px;object-fit:cover;object-position:50% 15%;background:var(--art-bg);flex:none} .cd-page .rail-id .mn{display:grid;place-items:center;font-family:var(--f-display);font-size:19px;font-weight:700;color:var(--muted)} .cd-page .rail-id .nm{font-family:var(--f-display);font-size:18px;font-weight:600;line-height:1.15} .cd-page .rail-id .sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:3px} .cd-page .dl{display:flex;flex-direction:column;gap:0;margin:0} .cd-page .dl .r{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)} .cd-page .dl .r:last-child{border-bottom:0} .cd-page .dl dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:2px} .cd-page .dl dd{margin:0;font-size:16px;color:var(--text);line-height:1.5} .cd-page .rail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .cd-page .sec{scroll-margin-top:calc(var(--stick) + 26px);margin-bottom:56px} .cd-page .sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)} .cd-page .sec-head h2{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .cd-page .sec-head .num{font-family:var(--f-body);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);padding-top:9px} .cd-page .sec-head .spoiler-flag{margin-left:auto;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-antagonist);border:1px solid color-mix(in srgb,var(--c-antagonist) 45%,transparent);padding:4px 8px;border-radius:4px} .cd-page .sec h3{font-size:25px;font-weight:700;margin:34px 0 12px;color:var(--text);line-height:1.22} .cd-page .sec h3::before{content:"";display:inline-block;width:14px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px;transform:translateY(-3px)} .cd-page .sec p{margin:0 0 17px;color:var(--text-2);line-height:1.753;font-size:19px} .cd-page .sec p:last-child{margin-bottom:0} .cd-page .takeaway-intro{padding:18px 20px;border-left:3px solid var(--accent);background:var(--panel-2);border-radius:0 var(--r-md) var(--r-md) 0;margin-bottom:20px} .cd-page .takeaway-intro p{margin:0;color:var(--text);font-size:19px;line-height:1.753} /* One card per row. These were auto-fit columns with a 280px minimum, so on a wide article they sat two or three abreast and each card came out roughly square -- a grid of tiles rather than a list of points. A takeaway is a sentence, so it reads far better as a full-width rectangle. */ .cd-page .kt-grid{display:grid;grid-template-columns:1fr;gap:12px} .cd-page .kt{position:relative;padding:14px 18px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);transition:.25s var(--ease);overflow:hidden} .cd-page .kt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;transition:.25s} .cd-page .kt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow)} .cd-page .kt:hover::before{opacity:1} .cd-page .kt .n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--accent);margin-bottom:8px} .cd-page .kt h4{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:5px;font-family:var(--f-body)} .cd-page .kt p{font-size:17px;line-height:1.62;color:var(--text-2);margin:0} .cd-page .kt a{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:5px} .cd-page .kt a:hover{text-decoration:underline;text-underline-offset:3px} .cd-page .glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .cd-page .glance .g{background:var(--panel);padding:14px 16px} .cd-page .glance .k{font-family:var(--f-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .cd-page .glance .v{font-size:14.5px;font-weight:500;line-height:1.45} .cd-page .glance .spoil{display:block;font-family:var(--f-mono);font-size:10px;color:var(--c-antagonist);letter-spacing:.06em;margin-top:3px;font-weight:400} .cd-page .note{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-sm);font-size:12.5px;color:var(--muted);line-height:1.6} .cd-page .pq{position:relative;margin:38px 0;padding:30px 34px;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));border:1px solid var(--line)} .cd-page .pq::before{content:"\201C";position:absolute;top:-18px;left:14px;font-family:var(--f-display);font-size:130px;color:var(--accent);opacity:.18;line-height:1} .cd-page .pq blockquote{margin:0;font-family:var(--f-display);font-size:clamp(20px,2.4vw,27px);font-weight:500;line-height:1.35;color:var(--text);position:relative} .cd-page .pq cite{display:block;margin-top:14px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-style:normal;line-height:1.7} .cd-page .spoiler-gate[data-hidden="true"] .gated{filter:blur(7px);opacity:.5;pointer-events:none;user-select:none} .cd-page .gate-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--c-antagonist) 35%,var(--line));border-radius:var(--r-md);background:color-mix(in srgb,var(--c-antagonist) 7%,var(--panel))} .cd-page .gate-bar p{margin:0 !important;font-size:13px;color:var(--text-2)} .cd-page .gate-bar button{margin-left:auto;height:32px;padding:0 14px;border-radius:7px;background:var(--c-antagonist);color:#fff;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700} /* The relationship map used to break out of its column with margin-inline:-52px above 1240px. Grid items do not clip, so on the three-column layout it simply grew under the contents rail and the sidebar and the map jumped width the moment the viewport crossed the breakpoint. It stays inside its column. */ .cd-page .tree-wrap{max-width:100%} .cd-page .tree-wrap{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background: radial-gradient(80% 60% at 50% 42%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 70%), var(--panel); padding:26px 20px 24px;overflow:hidden;box-shadow:var(--shadow)} .cd-page .tree-wrap::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px); background-size:34px 34px;opacity:.55;mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%)} .cd-page .tree{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:34px} .cd-page #treeLines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible} .cd-page #treeLines path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-linecap:round} .cd-page .node{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;text-align:center;transition:.25s var(--ease)} .cd-page .node .ph{position:relative;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--art-bg); border:2px solid var(--line);box-shadow:var(--shadow);transition:.28s var(--ease)} .cd-page .node .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%} .cd-page .node .ph .mono{font-size:15px;font-family:var(--f-mono);font-weight:700} .cd-page .node .nm{font-size:12.4px;font-weight:600;line-height:1.25} .cd-page .node .rl{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.35} .cd-page .node:hover,.cd-page .node.active{transform:translateY(-3px)} .cd-page .node:hover .ph,.cd-page .node.active .ph{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow)} .cd-page .node.self{width:150px} .cd-page .node.self .ph{width:112px;height:112px;border-width:3px;border-color:var(--char-accent,var(--accent)); box-shadow:0 0 0 6px color-mix(in srgb,var(--char-accent,var(--accent)) 14%,transparent),var(--shadow-lg)} .cd-page .node.self .nm{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:.01em} .cd-page .node.self .rl{color:var(--char-accent,var(--accent))} .cd-page .tree-branches{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;width:100%} .cd-page .branch{flex:1 1 150px;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:14px} .cd-page .branch .bh{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-2); padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);white-space:nowrap;text-align:center} .cd-page .branch .kids{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 2px} @media(max-width:760px){.cd-page .tree-branches{flex-direction:column;align-items:center;gap:26px}.cd-page #treeLines{display:none}.cd-page .branch{max-width:none;width:100%;border-top:1px solid var(--line);padding-top:16px}} /* Trivia entries are full paragraphs, so they need a visible marker and real separation; as a plain list they ran together into one undifferentiated block. .hl-list had no rules at all, which is why it never looked like a list in the first place. */ .cd-page .hl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .cd-page .hl-list>li{position:relative;padding-left:26px;max-width:76ch} .cd-page .hl-list>li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)} .cd-page .trivia-list>li{padding-bottom:14px;border-bottom:1px solid var(--line-2)} .cd-page .trivia-list>li:last-child{padding-bottom:0;border-bottom:0} .cd-page .tree-hint{text-align:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:20px} .cd-page .rel-group{margin-top:34px} .cd-page .rel-group > .gh{display:flex;align-items:center;gap:11px;margin-bottom:14px} .cd-page .rel-group > .gh span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)} .cd-page .rel-group > .gh .ln{flex:1;height:1px;background:var(--line)} .cd-page .rel{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;padding:18px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--panel);margin-bottom:12px;transition:.25s var(--ease);scroll-margin-top:130px} .cd-page .rel:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow)} .cd-page .rel.flash{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} .cd-page .rel .av{width:74px;height:74px;border-radius:12px;overflow:hidden;background:var(--art-bg);position:relative;display:block} .cd-page .rel .av img{width:100%;height:100%;object-fit:cover;object-position:50% 12%} .cd-page .rel .av .mono{font-size:18px;font-family:var(--f-mono);font-weight:700} .cd-page .rel h4{font-family:var(--f-display);font-size:18px;font-weight:600;line-height:1.2} .cd-page .rel .tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:4px 0 9px} .cd-page .rel p{margin:0;font-size:19px;line-height:1.753;color:var(--text-2)} @media(max-width:560px){.cd-page .rel{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:14px}.cd-page .rel .av{width:56px;height:56px}} .cd-page .timeline{position:relative;padding-left:6px} .cd-page .timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px; background:linear-gradient(to bottom,var(--accent),color-mix(in srgb,var(--accent) 18%,transparent))} .cd-page .mi{position:relative;padding:0 0 4px 52px;margin-bottom:4px} .cd-page .mi > .dot{position:absolute;left:6px;top:11px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--muted);z-index:2;transition:.22s var(--ease)} .cd-page .mi.open > .dot,.cd-page .mi:hover > .dot{background:var(--accent);color:var(--accent-ink);border-color:transparent} .cd-page .mi > button{width:100%;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1px solid transparent; display:flex;align-items:center;gap:12px;transition:.2s var(--ease)} .cd-page .mi > button:hover{background:var(--panel);border-color:var(--line)} .cd-page .mi.open > button{background:var(--panel);border-color:var(--line);border-bottom-left-radius:0;border-bottom-right-radius:0} .cd-page .mi .mt{font-family:var(--f-display);font-size:17px;font-weight:500} .cd-page .mi .chev{margin-left:auto;color:var(--muted);transition:transform .25s var(--ease);flex:none} .cd-page .mi.open .chev{transform:rotate(180deg);color:var(--accent)} .cd-page .mi .mbody{display:none;padding:2px 16px 16px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);background:var(--panel)} .cd-page .mi.open .mbody{display:block} .cd-page .mi .mbody p{margin:0;font-size:19px;line-height:1.753;color:var(--text-2)} .cd-page .ability{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:center;padding:24px; border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--char-accent,var(--accent)) 13%,var(--panel)),var(--panel));margin-bottom:26px} @media(max-width:720px){.cd-page .ability{grid-template-columns:1fr}} .cd-page .ability .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--char-accent,var(--accent))} .cd-page .ability h3{margin:6px 0 8px !important;font-size:27px} .cd-page .ability h3::before{display:none} .cd-page .ability p{margin:0;font-size:14px} .cd-page .meter{display:flex;flex-direction:column;gap:9px} .cd-page .meter .bar{height:9px;border-radius:99px;background:var(--sunk);overflow:hidden;border:1px solid var(--line-2)} .cd-page .meter .bar i{display:block;height:100%;width:72%;border-radius:99px; background:linear-gradient(90deg,var(--char-accent,var(--accent)),color-mix(in srgb,var(--char-accent,var(--accent)) 45%,#fff)); animation:pulse 2.6s var(--ease) infinite} .cd-page @keyframes pulse{0%,100%{width:64%;opacity:.9}50%{width:88%;opacity:1}} .cd-page .meter .lb{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* FAQ: one boxed, self-contained disclosure per question. All start closed so the reader scans the questions and opens only what they came for. */ .cd-page .faq{display:flex;flex-direction:column;gap:10px} .cd-page .faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:hidden; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s} .cd-page .faq details:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))} .cd-page .faq details[open]{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow)} .cd-page .faq summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:flex-start;gap:14px; font-weight:600;font-size:17.5px;line-height:1.45;color:var(--text)} .cd-page .faq summary::-webkit-details-marker{display:none} .cd-page .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-md)} .cd-page .faq summary .q{flex:1;min-width:0} /* A round +/x affordance, so it reads as something you can open rather than as a heading that happens to be bold. */ .cd-page .faq summary::after{content:"+";flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-top:1px; border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent); font-family:var(--f-mono);font-size:18px;line-height:1;transition:transform .25s var(--ease),background .2s} .cd-page .faq details[open] summary::after{transform:rotate(45deg);background:var(--accent);color:var(--accent-ink,#fff)} .cd-page .faq .a{padding:0 18px 18px;font-size:19px;line-height:1.753;color:var(--text-2);max-width:76ch} .cd-page .faq .a::before{content:"";display:block;height:1px;margin:0 0 14px;background:var(--line-2)} .cd-page .refs{display:grid;grid-template-columns:1fr;gap:18px} .cd-page .ref-col .rh{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid var(--line)} .cd-page .ref-cloud{display:flex;flex-wrap:wrap;gap:7px} .cd-page .ref-tag{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:7px;border:1px solid var(--line); background:var(--panel);font-size:12.8px;font-weight:500;transition:.18s var(--ease)} .cd-page .ref-tag em{font-family:var(--f-mono);font-style:normal;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cd-page .ref-tag:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .cd-page .srcs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--muted);font-size:13px} .cd-page .qv-back{position:fixed;inset:0;z-index:90;background:rgba(6,7,9,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.28s var(--ease)} .cd-page .qv-back.on{opacity:1;pointer-events:auto} .cd-page .qv-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:91;background:var(--bg-2); border-left:1px solid var(--line);box-shadow:var(--shadow-lg);transform:translateX(102%);transition:transform .34s var(--ease); display:flex;flex-direction:column;overflow-y:auto} .cd-page .qv-panel.on{transform:none} .cd-page .qv-hero{position:relative;aspect-ratio:5/4;background:var(--art-bg);flex:none} .cd-page .qv-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 18%} .cd-page .qv-hero::after{content:"";position:absolute;inset:0;background:var(--scrim)} .cd-page .qv-hero .x{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:9px;display:grid;place-items:center; background:rgba(8,8,10,.65);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)} .cd-page .qv-hero .x:hover{background:var(--accent);color:var(--accent-ink)} .cd-page .qv-hero .ov{position:absolute;left:20px;right:20px;bottom:16px;z-index:2} .cd-page .qv-hero .ov .nm{font-family:var(--f-display);font-size:26px;font-weight:700;color:#fff;line-height:1.1;margin-top:6px} .cd-page .qv-body{padding:20px;display:flex;flex-direction:column;gap:16px} .cd-page .qv-body p{margin:0;font-size:14px;line-height:1.68;color:var(--text-2)} .cd-page .foot{border-top:1px solid var(--line);padding:36px 0 46px;margin-top:20px} .cd-page .foot .in{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:space-between} .cd-page .foot .note{border:0;padding:0;max-width:62ch;margin:0} .cd-page .themepick{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .cd-page .themepick button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);transition:.2s var(--ease)} .cd-page .themepick button[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)} .cd-page .route{display:none} .cd-page .route.on{display:block} .cd-page .reveal{opacity:0;transform:translateY(14px)} .cd-page .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)} @media(prefers-reduced-motion:reduce){.cd-page *{animation:none !important;transition:none !important}.cd-page .reveal{opacity:1;transform:none}} html[data-game="elden-ring"]{ --accent:#c9a44a; --accent-2:#e6cf8f; --accent-3:#8d3a2a; --accent-ink:#100c05; } html[data-game="elden-ring"][data-mode="dark"]{ --bg:#08090a; --bg-2:#0d0e10; --panel:#121316; --panel-2:#17191c; --sunk:#0b0c0e; --line:rgba(214,196,150,.14); --line-2:rgba(214,196,150,.07); --text:#efe9dc; --text-2:#c3bba9; --muted:#8d867a; --art-bg:#1a1c1f; --chip-bg:rgba(214,196,150,.07); } html[data-game="elden-ring"][data-mode="light"]{ --bg:#f6f2e9;--bg-2:#fffdf7;--panel:#fff;--panel-2:#f1ece0;--sunk:#e8e2d4; --line:rgba(40,32,18,.14);--line-2:rgba(40,32,18,.07); --text:#171308;--text-2:#4a422f;--muted:#7b7263;--art-bg:#ded7c6;--chip-bg:rgba(40,32,18,.05); } html[data-game="elden-ring"] .h-display,html[data-game="elden-ring"] .d-name,html[data-game="elden-ring"] .sec-head h2{letter-spacing:.005em} html[data-game="elden-ring"] .hero-bg img{filter:saturate(.72) contrast(1.12) brightness(.82)} html[data-game="elden-ring"] .hero-bg::after{ background: radial-gradient(110% 80% at 74% 6%, color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 56%), linear-gradient(180deg, rgba(4,4,5,.62) 0%, rgba(4,4,5,.84) 46%, var(--bg) 100%); } html[data-game="elden-ring"]{ --c-protagonist:#c9a44a; --c-antagonist:#b04a36; --c-ally:#6fa88a; --c-heist:#8f7bd6; --c-contact:#c98a3a; --c-law:#7fa8c9; } .cd-page .chip[data-role="Demigod"]{color:var(--c-protagonist)} .cd-page .chip[data-role="Spirit Ash"]{color:var(--c-heist)} .cd-page .chip[data-role="Merchant"]{color:var(--c-contact)} .cd-page .chip[data-role="Deity"]{color:var(--c-law)} .cd-page .gs-hero{padding:0} .cd-page .gs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 0 90px} @media(max-width:1100px){.cd-page .gs-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cd-page .gs-grid{grid-template-columns:1fr;gap:14px}} .cd-page .gs{ position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;isolation:isolate; border:1px solid var(--line);aspect-ratio:16/11; background: radial-gradient(120% 100% at 20% 0%, color-mix(in srgb,var(--gs-accent,var(--accent)) 26%,transparent), transparent 62%), linear-gradient(160deg,#1c1d20,#0e0f11); box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s; } .cd-page .gs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease);filter:saturate(.8)} .cd-page .gs::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,6,8,.28) 0%,rgba(6,6,8,.72) 52%,rgba(6,6,8,.95) 100%)} .cd-page .gs:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--gs-accent,var(--accent)) 75%,transparent)} .cd-page .gs:hover img{transform:scale(1.07)} .cd-page .gs.live{grid-column:span 2;aspect-ratio:21/9} @media(max-width:560px){.cd-page .gs-grid{grid-template-columns:1fr}.cd-page .gs.live{grid-column:span 1;aspect-ratio:16/10}} .cd-page .gs.live .ttl{font-size:clamp(27px,3.2vw,40px)} .cd-page .gs .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px;gap:10px} .cd-page .gs .badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px; padding:5px 12px 5px 5px;border-radius:999px;background:rgba(8,8,10,.55);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px);font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#fff} .cd-page .gs .badge b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--gs-accent,var(--accent));color:#12100a;font-family:var(--f-display);font-size:10px;letter-spacing:0} .cd-page .gs .ttl{font-family:var(--f-display);font-size:clamp(23px,2.4vw,30px);font-weight:700;color:#fff;line-height:1.06;text-transform:uppercase} .cd-page .gs .colls{display:flex;flex-wrap:wrap;gap:6px} .cd-page .gs .colls span{font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase; padding:4px 8px;border-radius:5px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9)} .cd-page .gs .go{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--gs-accent,var(--accent));margin-top:2px} .cd-page .gs .go svg{transition:transform .3s var(--ease)} .cd-page .gs:hover .go svg{transform:translateX(4px)} .cd-page .gs.soon{pointer-events:none} .cd-page .gs.soon .in::before{content:"Directory in progress";position:absolute;top:16px;right:16px; font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75); padding:5px 9px;border-radius:5px;background:rgba(8,8,10,.5);border:1px solid rgba(255,255,255,.16)} .cd-page .gs-lead{max-width:64ch;margin-top:18px} .cd-page .endings{display:flex;flex-direction:column;gap:12px} .cd-page .ending{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:17px 19px;position:relative;overflow:hidden} .cd-page .ending::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)} .cd-page .ending h4{font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1.25;margin-bottom:7px} .cd-page .ending p{margin:0;font-size:19px;line-height:1.753;color:var(--text-2)} .cd-page .ending .flag{position:absolute;top:14px;right:16px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--c-antagonist)} .cd-page .card .loc{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-page .gamepick{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line); font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:.18s var(--ease)} .cd-page .gamepick:hover{border-color:var(--accent);color:var(--text)} .cd-page .gamepick i{width:8px;height:8px;border-radius:2px;background:var(--accent);display:block} /* --------------------------------------------------------------------------- Theme bridge. The design names its tokens --accent / --bg / --text, while this project emits each game's resolved palette as --t-* custom properties on the ThemeScope wrapper. Mapping one onto the other here is what lets every game keep its own accent inside this design without a single per-game branch, and it keeps the dark-mode convention already used in globals.css: a light palette on the bare selector, redefined under prefers-color-scheme (guarded so an explicit light choice wins) and again under [data-theme="dark"] so the toggle wins in both directions. --------------------------------------------------------------------------- */ .cd-page{ --accent:var(--t-accent,#ff6a1f); --accent-2:var(--t-accent-2,#ffb020); --accent-ink:#1a0d03; --bg:var(--t-bg-light,#f7f5f1); --text:var(--t-text-light,#14120f); --panel:var(--t-card-light,#ffffff); --f-display:var(--t-font-head,"Oswald",'Arial Narrow',system-ui,sans-serif); --f-body:'ARS Maquette Web One',var(--t-font-body,"Inter",system-ui,sans-serif); --f-mono:var(--t-font-mono,"JetBrains Mono",ui-monospace,monospace); background:var(--bg); color:var(--text); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cd-page{ --bg:var(--t-bg-dark,#0a0b0d); --bg-2:#101216; --panel:var(--t-card-dark,#141719); --panel-2:#191d21; --sunk:#0d0f11; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055); --text:var(--t-text-dark,#f0f2f4); --text-2:#c2c8ce; --muted:#8b949d; --art-bg:#1b1f23; --chip-bg:rgba(255,255,255,.06); --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.8); --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 34px 70px -26px rgba(0,0,0,.95); } } :root[data-theme="dark"] .cd-page{ --bg:var(--t-bg-dark,#0a0b0d); --bg-2:#101216; --panel:var(--t-card-dark,#141719); --panel-2:#191d21; --sunk:#0d0f11; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055); --text:var(--t-text-dark,#f0f2f4); --text-2:#c2c8ce; --muted:#8b949d; --art-bg:#1b1f23; --chip-bg:rgba(255,255,255,.06); --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.8); --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 34px 70px -26px rgba(0,0,0,.95); } /* The design's own site chrome is not used -- this project has its own header and footer -- so the sticky offsets start below OUR header instead. */ .cd-page .secnav,.cd-page .controls{top:0} /* Monogram fallback wherever a character has no art in the map. */ .cd-page .mn,.cd-page .mono{ display:grid;place-items:center;width:100%;height:100%; font-family:var(--f-display);font-weight:700;letter-spacing:.04em; color:var(--muted);background:var(--art-bg);font-size:clamp(18px,4vw,44px); } .cd-page .src-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .cd-page .src-list a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} /* Tier note under each grouping heading, from the design's directory. */ .cd-page .tier-note{margin:-8px 0 16px;color:var(--muted);font-size:13px} /* Sources strip: the design's dashed panel, with the list inside it. */ .cd-page .srcs .src-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px} .cd-page .srcs .src-list a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} /* Quote text reads as the character speaking, so it carries weight. Applies to the dealt pull quotes and to the consolidated Quotes section alike. */ .cd-page .pq blockquote{font-weight:700} .cd-page .quote-list blockquote{font-weight:700} .cd-page blockquote{font-weight:700} /* "Open" link on a mission row -- a real anchor beside the accordion toggle rather than inside it, since an anchor nested in a button is invalid. */ .cd-page .mi .mt-link{margin-left:auto;margin-right:12px;flex:none; font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);opacity:0;transition:opacity .18s var(--ease)} .cd-page .mi:hover .mt-link,.cd-page .mi .mt-link:focus-visible{opacity:1} .cd-page .mi .mt-link:hover{text-decoration:underline;text-underline-offset:3px} /* Prose links, restated inside the scope. The design resets anchors with `.cd-page a{color:inherit;text-decoration:none}`, which at specificity (0,1,1) outranks the `.inline-entity-link` rule in globals.css at (0,1,0) -- so every entity link on a character page rendered as plain body text: same colour, no underline, indistinguishable from prose. Restating it here at (0,2,0) puts the accent and the underline back. */ .cd-page .inline-entity-link{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent); transition:color .12s ease,text-decoration-color .12s ease; } .cd-page .inline-entity-link:hover{ color:var(--accent-2); text-decoration-color:var(--accent-2); text-decoration-thickness:2px; } /* Reading measure. Widening the shell to 1600px hands the article column roughly 900px, which at 15.2px would run past 130 characters a line -- past the point where the eye loses its place returning to the left margin. Capping the running text keeps the line length readable while the wider shell still buys real estate for the rail, the contents list, the stat grid and the relationship tree, which all benefit from the space. Full-width elements are exempted below. */ .cd-page .sec p, .cd-page .sec li{max-width:92ch} .cd-page .kt p, .cd-page .glance, .cd-page .tree-wrap, .cd-page .timeline, .cd-page .endings, .cd-page .refs, .cd-page .kt-grid, .cd-page .rel p{max-width:none} /* Reading measure at the larger type. 92ch was set against 15.2px text. At 19px the same character count is a much wider line, so the cap is restated here in the units that actually govern it. */ .cd-page .sec p, .cd-page .sec li{max-width:76ch} /* ...but NOT inside a takeaway card. `.cd-page .sec p` and `.cd-page .kt p` have identical specificity, so the later rule won and every takeaway wrapped at 76 characters inside a card far wider than that -- a wide band of dead space down the right of each one. The card is already a narrow measure; it does not need a second one inside it. */ .cd-page .sec .kt p, .cd-page .sec .kt h4{max-width:none} /* ── Quick reference rail ──────────────────────────────────────────────── The profile card, grouped the way the pack specifies it rather than as one flat run of rows. Labels sit left in small caps, values right; a value that names another page links to it. */ .cd-page .qref{padding:0;overflow:hidden} .cd-page .qref>.ttl{display:flex;align-items:center;gap:9px;margin:0;padding:15px 17px; border-bottom:1px solid var(--line);font-family:var(--f-body);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text)} .cd-page .qref>.ttl .dot{width:9px;height:9px;border-radius:2px;background:var(--accent);flex:none} .cd-page .qgrp{padding:15px 17px 5px;border-bottom:1px solid var(--line-2)} .cd-page .qgrp:last-child{border-bottom:0;padding-bottom:16px} .cd-page .qrgh{margin-bottom:11px;font-size:11.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--accent)} .cd-page .qref .dl{display:flex;flex-direction:column;gap:11px;margin:0} .cd-page .qref .dl .r{display:grid;grid-template-columns:98px 1fr;gap:12px;align-items:start} .cd-page .qref .dl dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);line-height:1.35;margin:0} .cd-page .qref .dl dd{margin:0;font-size:16.5px;font-weight:500;line-height:1.38;color:var(--text)} .cd-page .qref .dl dd a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .cd-page .qref .dl dd a:hover{text-decoration-thickness:2px} .cd-page .qref .dl dd .spoil{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)} @media(max-width:640px){.cd-page .qref .dl .r{grid-template-columns:1fr;gap:2px}} /* ── Quotes section ────────────────────────────────────────────────────── The dedicated Quotes block, which previously had no renderer at all. */ .cd-page .qgroups{display:flex;flex-direction:column;gap:26px} .cd-page .qgroup>.qgh{margin-bottom:13px;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent)} .cd-page .qq{margin:0 0 14px;padding:15px 18px 15px 20px;border-left:3px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;background:var(--panel-2)} .cd-page .qq:last-child{margin-bottom:0} .cd-page .qq blockquote{margin:0;font-size:19px;line-height:1.5;font-weight:500;color:var(--text)} .cd-page .qq blockquote::before{content:"\201C"} .cd-page .qq blockquote::after{content:"\201D"} .cd-page .qq figcaption{margin-top:8px;font-size:13px;color:var(--muted)} /* ── Entity hover cards ────────────────────────────────────────────────── A preview of the page an inline link points at. All data is resolved on the server for this render, so opening one fetches nothing. */ .cd-page .ehl{position:relative;display:inline} .cd-page .ehl-card{position:absolute;left:0;z-index:60;display:flex;gap:12px;width:330px;max-width:78vw; padding:13px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel); box-shadow:var(--shadow-lg);font-size:14px;line-height:1.45;text-align:left; animation:ehl-in .16s var(--ease)} .cd-page .ehl-bottom{top:calc(100% + 9px)} .cd-page .ehl-top{bottom:calc(100% + 9px)} @keyframes ehl-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .cd-page .ehl-art{flex:0 0 78px;width:78px;height:78px;overflow:hidden;border-radius:var(--r-md); background:var(--sunk)} .cd-page .ehl-art img{width:100%;height:100%;object-fit:cover;object-position:50% 15%} .cd-page .ehl-body{display:flex;flex-direction:column;gap:3px;min-width:0} .cd-page .ehl-kind{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent)} .cd-page .ehl-name{font-size:16px;font-weight:700;line-height:1.2;color:var(--text)} /* Clamped: a summary can run long and the card must stay a glance, not a read. */ .cd-page .ehl-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; font-size:13px;color:var(--text-2)} .cd-page .ehl-more{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12px; font-weight:700;color:var(--accent);text-decoration:none} .cd-page .ehl-more svg{width:12px;height:12px} .cd-page .ehl-more:hover{text-decoration:underline} @media(max-width:640px){.cd-page .ehl-card{display:none}} @media(prefers-reduced-motion:reduce){.cd-page .ehl-card{animation:none}} /* Related characters: a full-width strip of portrait cards under the article. */ .cd-page .d-related{padding-block:8px 72px} .cd-page .d-related .rh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .cd-page .d-related h2{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .cd-page .d-related .all{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .cd-page .d-related .all:hover{text-decoration:underline;text-underline-offset:3px} .cd-page .d-related .rc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} @media(max-width:1100px){.cd-page .d-related .rc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.cd-page .d-related .rc-grid{grid-template-columns:1fr}} .cd-page .d-related .rc{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:.22s var(--ease)} .cd-page .d-related .rc:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)} .cd-page .d-related .rc-art{display:block;aspect-ratio:4/5;background:var(--art-bg);overflow:hidden} .cd-page .d-related .rc-art img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;transition:transform .4s var(--ease)} .cd-page .d-related .rc:hover .rc-art img{transform:scale(1.03)} .cd-page .d-related .rc-art .mn{width:100%;height:100%;display:grid;place-items:center;font-family:var(--f-mono);font-size:28px;font-weight:700;color:var(--muted)} .cd-page .d-related .rc-body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 20px} .cd-page .d-related .rc-k{font-family:var(--f-display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .cd-page .d-related .rc-n{font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1.2;color:var(--text)} .cd-page .d-related .rc-s{font-size:13px;line-height:1.55;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}