/* ==========================================================================
   LORE & UNIVERS, hub de la section (maquette client « lore-hub »)

   Complète agent.css, qui fournit le reset, le body, la palette de marque et
   le fil d'Ariane du bandeau sombre. La maquette redéclarait tout cela dans un
   premier bloc de style, avec en prime le CSS complet d'un listing d'agents
   (grille, filtres, actualités, accordéon SEO) sans aucun balisage
   correspondant : rien n'en a été repris.

   TOUTES les règles sont scopées sous .lore-page, sans exception. La feuille
   est chargée dans @section('head'), donc AVANT agent.css et mega-menu.css :
   un sélecteur nu (.card, .sec, .note, .door…) y perdrait ses arbitrages de
   spécificité et surtout déborderait sur le reste du site. Plusieurs de ces
   noms existent déjà ailleurs (hub.css porte un .sec, un .sec-head et un
   .cta-line d'une autre anatomie), la question n'est donc pas théorique.

   L'ACCENT VIOLET #7c5cbf est celui de la rubrique Lore du méga menu. Il vit
   en jetons LOCAUX (--lr-*) et n'est jamais injecté en :root par ColorPalette :
   le méga menu et le pied de page lisent les mêmes variables et viraient au
   violet sur toute la page.

   Les quatre portes gardent chacune leur couleur (violet pour l'univers,
   corail pour le récit, or pour les personnages, bleu pour les lieux) : ce sont
   les teintes de la maquette, reprises des rôles.
   ========================================================================== */

  .lore-page {
    --lr: #7c5cbf;
    --lr-dark: #63489c;
    --lr-light: #efeafa;

    /* Les quatre portes. La variante sombre de l'or sert le libellé de
       section et le bouton : le ton clair ne passe pas sur fond blanc. */
    --b-univers: #7c5cbf;
    --b-recit: #E8637E;
    --b-perso: #e6b44d;
    --b-perso-dark: #9d7118;
    --b-lieux: #5c8ee6;
    --b-lieux-dark: #3f6fc4;
  }

  /* ========== HERO ATMOSPHÉRIQUE ========== */

  .lore-page .lore-hero {
    position: relative;
    overflow: hidden;
    background: #0b0714;
  }
  .lore-page .lore-hero .lh-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    opacity: 0.34;
  }
  .lore-page .lore-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(11,7,20,0.55) 0%, rgba(11,7,20,0.82) 55%, rgba(11,7,20,0.97) 100%),
      radial-gradient(ellipse at 28% 40%, rgba(124,92,191,0.28) 0%, transparent 62%);
  }
  .lore-page .lore-hero .grain {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 3px 3px;
  }
  .lore-page .lh-inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px 70px;
  }

  /* Le fil d'Ariane vient d'agent.css (mêmes classes, même anatomie) : seules
     les teintes changent, la maquette le voulant plus effacé et son survol
     violet plutôt que corail. */
  .lore-page .lh-inner .breadcrumb {
    margin-bottom: 34px;
  }
  .lore-page .lh-inner .breadcrumb a { color: rgba(255,255,255,0.3); }
  .lore-page .lh-inner .breadcrumb a:hover { color: #b49ce6; }
  .lore-page .lh-inner .breadcrumb .sep { color: rgba(255,255,255,0.14); }
  .lore-page .lh-inner .breadcrumb .current { color: rgba(255,255,255,0.58); }

  .lore-page .lh-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #b49ce6;
    margin-bottom: 14px;
  }
  .lore-page .lore-hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.2rem;
    color: white;
    letter-spacing: 2.5px;
    line-height: 1;
    margin-bottom: 18px;
    max-width: 780px;
  }
  .lore-page .lore-hero h1 span { color: #b49ce6; }
  .lore-page .lh-lede {
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.8;
    max-width: 640px;
  }

  /* ========== LES QUATRE PORTES ==========
     Ancres internes vers les quatre sections de la page : ce sont les seuls
     liens en « # » de la page, et ce sont de vraies destinations. */

  .lore-page .doors {
    background: var(--bg);
    border-bottom: 1px solid #ececec;
  }
  .lore-page .doors-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
  .lore-page .doors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .lore-page .door {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 26px 24px 24px;
    background: var(--white);
    border: 1px solid #ececec;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s, border-color 0.3s;
  }
  .lore-page .door::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c);
  }
  .lore-page .door:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(0,0,0,0.08);
    border-color: transparent;
  }
  .lore-page .door h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: var(--dark);
    letter-spacing: 1.5px;
    margin-bottom: 7px;
  }
  .lore-page .door p {
    font-size: 0.79rem;
    color: var(--text-light);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 15px;
  }
  .lore-page .door .d-go {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--c);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap 0.2s;
  }
  .lore-page .door:hover .d-go { gap: 11px; }

  /* ========== SECTIONS ========== */

  .lore-page .sec {
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 40px;
    /* La barre du méga menu est collante : --hdr-h vient de mega-menu.css et
       reste LA référence de hauteur d'en-tête du site. */
    scroll-margin-top: calc(var(--hdr-h, 72px) + 28px);
  }
  .lore-page .sec-head {
    margin-bottom: 26px;
    max-width: 820px;
  }
  .lore-page .sec-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-bottom: 9px;
  }
  .lore-page .sec h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.85rem;
    color: var(--dark);
    letter-spacing: 1.2px;
    line-height: 1.08;
    margin-bottom: 14px;
  }
  .lore-page .sec h2 em { font-style: normal; }
  .lore-page .sec p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 15px;
    max-width: 820px;
  }
  .lore-page .sec p:last-child { margin-bottom: 0; }
  .lore-page .sec p strong { color: var(--text); font-weight: 600; }

  /* ========== LE RÉCIT, BANDE SOMBRE ========== */

  .lore-page .dark-band {
    background: linear-gradient(180deg, #0b0714 0%, #140c22 55%, #0f0918 100%);
    position: relative;
    overflow: hidden;
  }
  .lore-page .dark-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 78% 30%, rgba(232,99,126,0.14) 0%, transparent 58%);
    pointer-events: none;
  }
  .lore-page .dark-band .sec { position: relative; z-index: 2; }
  .lore-page .dark-band .sec h2 { color: white; }
  .lore-page .dark-band .sec p { color: rgba(255,255,255,0.44); }
  .lore-page .dark-band .sec p strong { color: rgba(255,255,255,0.82); }

  /* ========== ENCYCLOPÉDIE ==========
     Les quatre dossiers ne sont PAS cliquables tant que leurs pages n'existent
     pas : ils sont rendus en <div>, jamais en lien mort. Leurs règles de survol
     restent en place, elles serviront telles quelles au branchement. */

  .lore-page .ency {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
  }
  .lore-page .card {
    background: var(--white);
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
  }
  .lore-page a.card[href]:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.08);
    border-color: transparent;
  }
  .lore-page .card.soon { opacity: 0.6; pointer-events: none; }

  /* Le bloc visuel attend les images de la section : le dégradé de famille
     tient la place, exactement comme sur la page des armes. La balise
     apparaîtra le jour où les fichiers seront déposés. */
  .lore-page .card-art {
    height: 132px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .lore-page .art-1 { background: linear-gradient(150deg, #150c26, #4a2a8a); }
  .lore-page .art-2 { background: linear-gradient(150deg, #0e1c14, #2a7a52); }
  .lore-page .art-3 { background: linear-gradient(150deg, #241206, #9a5a1a); }
  .lore-page .art-4 { background: linear-gradient(150deg, #0c1424, #2a4a8a); }
  .lore-page .art-5 { background: linear-gradient(150deg, #200c14, #8a2a44); }
  .lore-page .art-6 { background: linear-gradient(150deg, #1a1408, #7a6a1a); }
  .lore-page .art-7 { background: linear-gradient(150deg, #0e1418, #3a5a6a); }

  .lore-page .fmt {
    position: absolute;
    top: 11px;
    left: 11px;
    font-size: 0.53rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 4px 10px;
    border-radius: 5px;
    backdrop-filter: blur(6px);
  }
  .lore-page .fmt.dossier { background: rgba(255,255,255,0.9); color: #4a3a7a; }
  .lore-page .fmt.venir { background: rgba(255,255,255,0.82); color: #888; }

  .lore-page .card-body {
    padding: 17px 19px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .lore-page .card-body h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 7px;
    line-height: 1.28;
  }
  /* Le sélecteur descend par .sec : .lore-page .sec p est plus spécifique que
     .lore-page .card-body p, et reprendrait la main sans cela. La maquette
     réglait le même conflit à coups de !important. */
  .lore-page .sec .card-body p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.62;
    margin: 0;
    flex: 1;
  }
  .lore-page .card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #f4f4f4;
  }
  .lore-page .card-foot .cf-go {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--lr-dark);
  }

  /* ========== FRISE ========== */

  .lore-page .switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 30px;
  }
  .lore-page .switch button {
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.22s;
  }
  .lore-page .switch button:hover { color: rgba(255,255,255,0.75); }
  .lore-page .switch button.on { background: rgba(255,255,255,0.14); color: white; }

  .lore-page .tl { position: relative; padding-left: 40px; }
  .lore-page .tl::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(232,99,126,0.5), rgba(124,92,191,0.5), rgba(92,142,230,0.35));
  }
  .lore-page .tl-item { position: relative; margin-bottom: 26px; }
  .lore-page .tl-item:last-child { margin-bottom: 0; }
  .lore-page .tl-item::before {
    content: '';
    position: absolute;
    left: -34px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0f0918;
    border: 2px solid var(--tc, #7c5cbf);
    box-shadow: 0 0 0 4px rgba(15,9,24,0.9);
  }
  .lore-page .tl-item.key::before {
    background: var(--tc, #7c5cbf);
    box-shadow: 0 0 0 4px rgba(15,9,24,0.9), 0 0 14px var(--tc, #7c5cbf);
  }
  .lore-page .tl-when {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tc, #b49ce6);
    margin-bottom: 5px;
  }
  .lore-page .tl-item h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: white;
    margin-bottom: 7px;
  }
  /* Un titre de frise devient un LIEN le jour où sa sous-page sort (Duality
     depuis le 04/08) : il garde le blanc du titre et ne se signale que par un
     soulignement discret, qui prend la couleur de la période au survol. Les
     titres dont la page n'existe pas restent des titres. */
  .lore-page .tl-item h3 a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.28);
    transition: border-color 0.2s, color 0.2s;
  }
  .lore-page .tl-item h3 a:hover {
    color: var(--tc, #b49ce6);
    border-bottom-color: var(--tc, #b49ce6);
  }
  .lore-page .dark-band .sec .tl-item p {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.42);
    line-height: 1.75;
    margin: 0;
    max-width: 720px;
  }
  .lore-page .tl-tag {
    display: inline-block;
    margin-left: 9px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    vertical-align: 2px;
  }
  .lore-page .tl-view { display: none; }
  .lore-page .tl-view.on { display: block; }

  /* ========== PERSONNAGES ==========
     Les quatre cartes de rôles portent le pictogramme officiel du projet
     (<x-role-icon>, en currentColor) là où la maquette posait un emoji. */

  .lore-page .roles-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0;
  }
  .lore-page .rolec {
    background: var(--white);
    border: 1px solid #ececec;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.26s;
  }
  .lore-page a.rolec[href]:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.07);
    border-color: transparent;
  }
  .lore-page .rolec .rc-art {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.92);
  }
  .lore-page .rc-d { background: linear-gradient(145deg, #200e16, #a8344e); }
  .lore-page .rc-i { background: linear-gradient(145deg, #201a0e, #c49a3a); }
  .lore-page .rc-c { background: linear-gradient(145deg, #0e1420, #3a6cc4); }
  .lore-page .rc-s { background: linear-gradient(145deg, #0e2018, #2a9478); }
  .lore-page .rolec .rc-body { padding: 14px 16px 16px; }
  .lore-page .rolec h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 3px; }
  .lore-page .rolec .rc-n {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
    margin-bottom: 7px;
  }
  .lore-page .sec .rolec p {
    font-size: 0.76rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0;
  }

  .lore-page .factions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 22px;
  }
  .lore-page .fac {
    border-radius: 16px;
    padding: 22px 24px;
    border: 1px solid #ececec;
    background: var(--white);
  }
  .lore-page .fac .f-t {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
  }
  .lore-page .fac .f-s {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
  }
  .lore-page .fac.alpha { border-color: rgba(92,142,230,0.35); background: #fafcff; }
  .lore-page .fac.omega { border-color: rgba(232,99,126,0.32); background: #fffafb; }
  .lore-page .fac.alpha .f-s { color: #3f6fc4; }
  .lore-page .fac.omega .f-s { color: #d14d67; }
  .lore-page .sec .fac p {
    font-size: 0.84rem;
    line-height: 1.72;
    margin: 0;
  }

  .lore-page .cta-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 27px;
    border-radius: 10px;
    color: white;
    font-size: 0.77rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.22s;
  }
  .lore-page .cta-line.perso {
    background: var(--b-perso-dark);
    box-shadow: 0 6px 22px rgba(230,180,77,0.3);
  }
  .lore-page .cta-line.perso:hover { background: #7d5a12; transform: translateY(-2px); }
  .lore-page .cta-line.lieux {
    background: var(--b-lieux-dark);
    box-shadow: 0 6px 22px rgba(92,142,230,0.3);
  }
  .lore-page .cta-line.lieux:hover { background: #33599e; transform: translateY(-2px); }

  /* ========== LIEUX ========== */

  .lore-page .places {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
  .lore-page .place {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #ececec;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.26s;
  }
  .lore-page a.place[href]:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.07);
    border-color: transparent;
  }
  .lore-page .place .p-art {
    position: relative;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2.5px;
    overflow: hidden;
  }

  /* LE VISUEL DE LA FICHE remplit le bloc quand la carte en a un ; le dégradé
     de la vue reste en fond et redevient seul visible sinon. Le voile n'est
     posé que sur les blocs qui portent une image : sur le dégradé nu, il
     assombrirait pour rien un nom déjà lisible. */
  .lore-page .place .p-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lore-page .place .p-art-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.58));
  }
  .lore-page .place .p-name { position: relative; z-index: 1; }
  .lore-page .place .p-art-img .p-name {
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  }
  .lore-page .place .p-body { padding: 15px 17px 17px; }
  .lore-page .place h3 { font-size: 0.92rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
  .lore-page .place .p-loc {
    font-size: 0.7rem;
    color: var(--b-lieux-dark);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .lore-page .sec .place p {
    font-size: 0.79rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
  }

  /* Le renvoi aux deux articles lore du blog, entre les trois lieux et le
     bouton du listing. Volontairement sobre : une ligne de rappel et deux
     titres, il ne doit pas concurrencer les cartes qu'il suit. Un article
     dépublié est rendu en texte simple : c'est le <li> sans <a>, qui garde la
     couleur de texte courante et n'imite pas un lien. */
  .lore-page .reads {
    margin-top: 20px;
    padding: 15px 19px;
    border-radius: 12px;
    border: 1px solid #ececec;
    background: #fafafa;
  }
  .lore-page .reads .r-t {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--b-lieux-dark);
    margin-bottom: 8px;
  }
  .lore-page .reads ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .lore-page .reads li {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-light);
  }
  .lore-page .reads li + li { margin-top: 5px; }
  .lore-page .reads a {
    color: var(--b-lieux-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(92,142,230,0.35);
    transition: all 0.2s;
  }
  .lore-page .reads a:hover { border-bottom-color: var(--b-lieux-dark); }

  /* ========== ENCADRÉS ========== */

  .lore-page .note {
    margin: 24px 0;
    padding: 20px 24px;
    border-radius: 14px;
    border-left: 4px solid var(--lr);
    background: var(--lr-light);
  }
  .lore-page .sec .note p {
    margin: 0;
    font-size: 0.88rem;
    color: #4a3a7a;
    line-height: 1.78;
  }
  .lore-page .note .n-t {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--lr-dark);
    margin-bottom: 8px;
  }
  .lore-page .note.dark {
    background: rgba(255,255,255,0.05);
    border-left-color: rgba(124,92,191,0.7);
  }
  .lore-page .dark-band .sec .note.dark p { color: rgba(255,255,255,0.55); }
  .lore-page .note.dark .n-t { color: #b49ce6; }

  /* ========== RESPONSIVE ========== */

  @media (max-width: 1024px) {
    .lore-page .doors-grid { grid-template-columns: 1fr 1fr; }
    .lore-page .ency,
    .lore-page .places { grid-template-columns: 1fr 1fr; }
    .lore-page .roles-row { grid-template-columns: 1fr 1fr; }
    .lore-page .factions { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .lore-page .lh-inner { padding: 14px 20px 42px; }
    .lore-page .lore-hero h1 { font-size: 2.1rem; }
    .lore-page .doors-inner { padding: 26px 20px; }
    .lore-page .doors-grid { grid-template-columns: 1fr; }
    .lore-page .sec { padding: 34px 20px; }
    .lore-page .sec h2 { font-size: 1.45rem; }
    .lore-page .ency,
    .lore-page .places,
    .lore-page .roles-row { grid-template-columns: 1fr; }
    .lore-page .tl { padding-left: 32px; }
    .lore-page .tl::before { left: 8px; }
    .lore-page .tl-item::before { left: -29px; }
    .lore-page .switch { width: 100%; }
    .lore-page .switch button { flex: 1; padding: 9px 10px; font-size: 0.7rem; }
  }