:root{
    --papier: #FBF4EC;
    --encre: #241C33;
    --encre-douce: #3A3245;
    --aurore: #E27585;
    --aurore-dark: #C95A6C;
    --matin: #E3A857;
    --sky-color: #241C33;
    --orb-color: #F1E9E2;
    --orb-glow: rgba(241,233,226,.35);
    --card-bg: rgba(251,244,236,.94);
    --transition-slow: 1.8s ease;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }

  body{
    margin:0;
    font-family:'Karla', sans-serif;
    color:var(--encre-douce);
    background:var(--papier);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  .sky{
    position:fixed;
    inset:0;
    z-index:-2;
    background-color:var(--sky-color);
    transition:background-color var(--transition-slow);
  }

  .orb{
    position:fixed;
    top:5vh;
    right:6vw;
    width:150px;
    height:150px;
    z-index:-1;
    box-shadow:0 0 90px 30px var(--orb-glow);
    border-radius:50%;
    transition:box-shadow var(--transition-slow);
  }
  .orb canvas{display:block; width:100%; height:100%;}
  .orb-fallback{
    display:none;
    width:100%; height:100%;
    border-radius:50%;
    object-fit:contain;
    background:var(--orb-color);
    padding:20%;
    box-sizing:border-box;
  }

  @media (max-width:640px){
    .orb{width:76px;height:76px;top:3vh;right:5vw; box-shadow:0 0 50px 16px var(--orb-glow);}
  }

  .wordmark{
    position:fixed;
    top:1.6rem;
    left:1.8rem;
    z-index:10;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:1rem;
    color:var(--papier);
    text-decoration:none;
    letter-spacing:.01em;
    mix-blend-mode:difference;
  }
  .wordmark:focus-visible{outline:2px solid var(--aurore); outline-offset:4px;}

  main{position:relative; z-index:1;}

  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    max-width:780px;
    margin:0 auto;
    padding:8vh 1.8rem 12vh;
    color:var(--papier);
  }

  .eyebrow{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:.95rem;
    letter-spacing:.02em;
    color:var(--aurore);
    margin:0 0 1rem;
    text-transform:none;
  }
  .eyebrow .time{color:var(--matin);}
  .hero .eyebrow{color:var(--matin); opacity:.9;}

  h1{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:clamp(2.3rem, 6vw, 4rem);
    line-height:1.08;
    margin:0 0 1.6rem;
    max-width:14ch;
  }
  h1 em{font-style:italic; color:var(--aurore); font-weight:500;}

  .hero-sub{
    font-size:clamp(1.05rem, 2vw, 1.25rem);
    max-width:44ch;
    color:rgba(251,244,236,.85);
    margin:0 0 2.4rem;
  }

  .scroll-cue{
    font-family:'Karla', sans-serif;
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.04em;
    color:var(--papier);
    text-decoration:none;
    border-bottom:1px solid rgba(251,244,236,.4);
    padding-bottom:.3rem;
    transition:opacity .3s ease, border-color .3s ease;
  }
  .scroll-cue:hover, .scroll-cue:focus-visible{border-color:var(--aurore); opacity:.85;}

  .card{
    background:var(--card-bg);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    max-width:760px;
    margin:9vh auto;
    padding:clamp(2rem, 5vw, 3.6rem);
    border-radius:26px;
    box-shadow:0 30px 70px rgba(36,28,51,.14);
    color:var(--encre-douce);
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .card.in-view{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .card{opacity:1; transform:none; transition:none;}
  }

  .card .eyebrow{color:var(--aurore-dark); font-style:italic;}
  .card .eyebrow .time{color:var(--matin);}

  h2{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(1.5rem, 3.4vw, 2.1rem);
    color:var(--encre);
    margin:0 0 1.1rem;
    line-height:1.2;
  }

  p{margin:0 0 1rem;}
  .card p:last-child{margin-bottom:0;}

  .values-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.8rem 2.2rem;
    margin-top:1.6rem;
    padding-top:1.6rem;
    border-top:1px solid rgba(36,28,51,.1);
  }
  @media (max-width:560px){.values-grid{grid-template-columns:1fr;}}
  .value h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.05rem;
    color:var(--encre);
    margin:0 0 .4rem;
  }
  .value p{font-size:.96rem; margin:0; color:var(--encre-douce);}

  .public-list{
    list-style:none;
    margin:1.6rem 0 0;
    padding:1.6rem 0 0;
    border-top:1px solid rgba(36,28,51,.1);
    display:grid;
    gap:1rem;
  }
  .public-list li{
    padding-left:1.4rem;
    position:relative;
    font-size:.98rem;
  }
  .public-list li::before{
    content:"";
    position:absolute;
    left:0; top:.55em;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--aurore);
  }
  .public-list strong{color:var(--encre); font-weight:600;}

  .formes-list{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1.5rem;}
  .forme{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:.4rem 1.2rem;
    padding-bottom:1.4rem;
    border-bottom:1px solid rgba(36,28,51,.08);
  }
  .formes-list .forme:last-child{border-bottom:none; padding-bottom:0;}
  @media (max-width:560px){.forme{grid-template-columns:1fr;}}
  .forme .label{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    color:var(--aurore-dark);
    font-size:.98rem;
  }
  .forme .desc{font-size:.96rem; margin:0;}
  .forme .tag{
    display:inline-block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--matin);
    margin-top:.3rem;
  }

  .perspectives-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.3rem;
    margin-top:1.6rem;
    padding-top:1.6rem;
    border-top:1px solid rgba(36,28,51,.1);
  }
  @media (max-width:640px){.perspectives-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:420px){.perspectives-grid{grid-template-columns:1fr;}}
  .perspective{font-size:.9rem;}
  .perspective .label{
    display:block;
    font-family:'Fraunces', serif;
    font-weight:600;
    color:var(--encre);
    margin-bottom:.25rem;
  }

  .cta-card{text-align:left;}

  .chapter-card{border:1px solid rgba(226,117,133,.25);}
  .badge{
    display:inline-block;
    font-family:'Karla', sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--papier);
    background:var(--aurore);
    padding:.3rem .7rem;
    border-radius:999px;
    margin:0 0 .9rem;
  }

  .chapter-nav{
    list-style:none;
    margin:1.8rem 0 0;
    padding:1.6rem 0 0;
    border-top:1px solid rgba(36,28,51,.1);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
  }
  @media (max-width:560px){.chapter-nav{grid-template-columns:1fr;}}
  .chapter-nav a{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-family:'Karla', sans-serif;
    text-decoration:none;
    color:var(--encre);
    background:rgba(226,117,133,.06);
    border:1px solid rgba(36,28,51,.1);
    border-radius:14px;
    padding:.85rem 1rem;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .chapter-nav a:hover, .chapter-nav a:focus-visible{
    background:rgba(226,117,133,.14);
    border-color:var(--aurore);
    transform:translateY(-2px);
  }
  .chapter-nav .num{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:.85rem;
    color:var(--aurore-dark);
    flex:0 0 auto;
  }
  .chapter-nav .name{
    font-weight:600;
    font-size:.96rem;
    flex:1;
  }
  .chapter-nav .arrow{
    color:var(--aurore);
    font-size:1rem;
    flex:0 0 auto;
    transition:transform .25s ease;
  }
  .chapter-nav a:hover .arrow{transform:translateX(3px);}

  .breadcrumb{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:'Karla', sans-serif;
    font-size:.78rem;
    font-weight:600;
    color:var(--aurore-dark);
    text-decoration:none;
    margin-bottom:1.1rem;
    opacity:.85;
    transition:opacity .2s ease;
  }
  .breadcrumb:hover, .breadcrumb:focus-visible{opacity:1;}
  .breadcrumb span{
    font-weight:400;
    color:var(--encre-douce);
    opacity:.7;
  }

  /* ---- Dedicated sub-theme pages ---- */
  .subpage-main{
    padding-top:14vh;
    padding-bottom:6vh;
    min-height:100vh;
  }
  .home-link{
    position:fixed;
    top:1.6rem;
    right:1.8rem;
    z-index:10;
    font-family:'Karla', sans-serif;
    font-size:.82rem;
    font-weight:700;
    color:var(--papier);
    text-decoration:none;
    border-bottom:1px solid rgba(251,244,236,.4);
    padding-bottom:.2rem;
    mix-blend-mode:difference;
  }
  .page-nav{
    max-width:760px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:0 clamp(1rem, 4vw, 1.8rem);
  }
  .page-nav a{
    flex:1;
    display:block;
    text-decoration:none;
    background:var(--card-bg);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:18px;
    padding:1rem 1.3rem;
    box-shadow:0 16px 40px rgba(36,28,51,.1);
    transition:transform .25s ease;
  }
  .page-nav a:hover, .page-nav a:focus-visible{transform:translateY(-2px);}
  .page-nav .dir{
    display:block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--aurore-dark);
    margin-bottom:.3rem;
  }
  .page-nav .title{
    font-family:'Fraunces', serif;
    font-weight:600;
    color:var(--encre);
    font-size:.98rem;
  }
  .page-nav .next{text-align:right;}
  .btn{
    display:inline-block;
    margin-top:1.6rem;
    background:var(--aurore);
    color:var(--papier);
    text-decoration:none;
    font-weight:700;
    font-size:.95rem;
    padding:.95rem 1.9rem;
    border-radius:999px;
    transition:filter .25s ease, transform .25s ease;
  }
  .btn:hover{filter:brightness(.93); transform:translateY(-1px);}
  .btn:focus-visible{outline:3px solid var(--encre); outline-offset:3px;}

  footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding:4rem 1.8rem 3rem;
    color:var(--encre-douce);
    font-size:.85rem;
  }
  footer a{color:var(--encre-douce);}