/* ============================================================================
   CV de Mael Houzard
   Feuille de style unique.

   Sommaire
     1.  Encre et papier (variables de thème)
     2.  Base
     3.  Bandeau de navigation
     4.  En-tête
     5.  Colonnes et sections
     6.  Entrées de parcours
     7.  Compétences
     8.  Méthode et réalisations
     9.  Pied de page
     10. Fenêtre calendrier
     11. Petits écrans
     12. Export PDF
     13. Impression

   Contrainte à respecter : aucune fonction de couleur moderne (color-mix,
   oklch, color()) dans ce fichier. html2canvas, utilisé par l'export PDF,
   ne sait pas les analyser et l'export échoue sans produire de fichier.
   ========================================================================= */


/* ============================================================================
   1. ENCRE ET PAPIER
   Palette chaude et désaturée. Aucun dégradé, aucune ombre portée,
   aucun bleu d'interface.
   ========================================================================= */
:root {
    --paper:       #faf8f4;
    --paper-2:     #f2efe8;
    --ink:         #1d1c1a;
    --ink-soft:    #545049;
    --ink-faint:   #8b857b;
    --rule:        #e1dcd1;
    --rule-strong: #bfb9ac;
    --accent:      #9c4a2c;
    --marker:      #9c4a2c;

    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "SF Mono", "Liberation Mono", monospace;

    --r: 2px;
    --col: 1080px;
}

[data-theme="dark"] {
    --paper:       #191817;
    --paper-2:     #211f1d;
    --ink:         #eae5dc;
    --ink-soft:    #a9a49a;
    --ink-faint:   #7c766c;
    --rule:        #33302b;
    --rule-strong: #4b4640;
    --accent:      #d2895f;
    --marker:      #d2895f;
}


/* ============================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transition appliquée seulement pendant le basculement de thème, pour que
   le reste de la page reste instantané. */
.theme-switching, .theme-switching * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.sheet { max-width: var(--col); margin: 0 auto; padding: 54px 32px 64px; }

svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: var(--paper);
    padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Apparition sobre au chargement, sans cascade au défilement. */
.js .reveal { opacity: 0; }
.js .reveal.is-visible { opacity: 1; transition: opacity 0.45s ease; }
.js .reveal:nth-of-type(2).is-visible { transition-delay: 0.05s; }
.js .reveal:nth-of-type(3).is-visible { transition-delay: 0.1s; }
.js .reveal:nth-of-type(4).is-visible { transition-delay: 0.15s; }


/* ============================================================================
   3. BANDEAU DE NAVIGATION
   Une barre de papier avec un filet, ni verre dépoli ni bouton pilule.
   ========================================================================= */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.topbar.is-visible { transform: translateY(0); }

.topbar-inner {
    max-width: var(--col); margin: 0 auto; padding: 11px 32px;
    display: flex; align-items: center; gap: 26px;
}
.topbar-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; white-space: nowrap; }

.topbar-nav { display: flex; gap: 22px; margin-left: auto; }
.topbar-nav a {
    font-size: 0.85rem; color: var(--ink-soft); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topbar-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.topbar-contact {
    font-size: 0.85rem; text-decoration: none; color: var(--ink);
    border: 1px solid var(--rule-strong); padding: 6px 14px; border-radius: var(--r);
    white-space: nowrap;
}
.topbar-contact:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 820px) {
    .topbar-nav { display: none; }
    .topbar-contact { margin-left: auto; }
}


/* ============================================================================
   4. EN-TÊTE
   ========================================================================= */
.masthead { position: relative; padding-bottom: 30px; border-bottom: 2px solid var(--ink); }

.tools { position: absolute; top: 2px; right: 0; display: flex; gap: 8px; z-index: 10; }
.tool-btn {
    font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-soft);
    background: none; border: 1px solid var(--rule); border-radius: var(--r);
    padding: 6px 11px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.tool-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.tool-btn[disabled] { opacity: 0.5; pointer-events: none; }
.menu-btn { display: none; position: absolute; top: 2px; right: 0; z-index: 20; }

.kicker {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px;
}

.masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.9rem);
    font-weight: 600; line-height: 1.02; letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.masthead .role {
    font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--ink-soft);
    font-weight: 400; margin-bottom: 26px;
}

/* La recherche de poste, posée comme un chapeau d'article. */
.brief {
    border-left: 3px solid var(--accent);
    padding: 2px 0 2px 18px; margin-bottom: 28px; max-width: 62ch;
    font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
}
.brief strong { color: var(--ink); font-weight: 600; }

.lede { max-width: 62ch; font-size: 1.02rem; line-height: 1.72; color: var(--ink-soft); margin-bottom: 14px; }
.lede strong { color: var(--ink); font-weight: 600; }

.aside-note { max-width: 62ch; font-size: 0.86rem; color: var(--ink-faint); margin-bottom: 30px; }
.aside-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.aside-note a:hover { border-bottom-color: var(--accent); }

/* Chiffres clés en filets, sans gros nombres colorés. */
.facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    border-top: 1px solid var(--rule); margin-bottom: 26px;
}
.facts > div { padding: 14px 20px 14px 0; border-right: 1px solid var(--rule); }
.facts > div:last-child { border-right: 0; }
.facts dt {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px;
}
.facts dd { font-family: var(--font-display); font-size: 1rem; line-height: 1.35; }

/* Coordonnées en ligne courante, sans boîtes. */
.contact { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.9rem; }
.contact > * { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); text-decoration: none; }
.contact a:hover { color: var(--accent); }
.contact svg { color: var(--ink-faint); }
.contact button {
    font-family: var(--font-body); font-size: 0.9rem;
    background: none; border: 0; cursor: pointer; color: var(--ink-faint);
}
.contact button:hover { color: var(--accent); }
.contact .copied { color: var(--accent); }

.date-trigger { cursor: pointer; }
.date-trigger:hover { color: var(--accent); }


/* ============================================================================
   5. COLONNES ET SECTIONS
   ========================================================================= */
.columns {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 0 46px; align-items: start; padding-top: 44px;
}

.section { margin-bottom: 42px; scroll-margin-top: 84px; }
.section:last-child { margin-bottom: 0; }

.section-head {
    display: flex; align-items: baseline; gap: 12px;
    border-top: 1px solid var(--rule-strong);
    padding-top: 12px; margin-bottom: 22px;
}
.section-head h2 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.section-head .tally { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }


/* ============================================================================
   6. ENTRÉES DE PARCOURS
   ========================================================================= */
.entry {
    position: relative; padding-left: 20px; margin-bottom: 26px;
    border-left: 1px solid var(--rule);
}
.entry:last-child { margin-bottom: 0; }
.entry::before {
    content: ''; position: absolute; left: -3px; top: 8px;
    width: 5px; height: 5px; background: var(--marker);
}
/* Repère allongé pour le poste occupé actuellement. */
.entry.current::before { height: 14px; }

.entry h3 { font-size: 1.03rem; font-weight: 650; line-height: 1.35; margin-bottom: 4px; }

.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 9px; }
.byline .org { font-weight: 600; color: var(--accent); font-size: 0.95rem; }

.tagline-type, .badge {
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 2px 7px; border-radius: var(--r);
    border: 1px solid var(--rule-strong); color: var(--ink-faint);
}
.badge-now { color: var(--accent); border-color: var(--accent); }

.meta {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint);
    margin-bottom: 10px;
}
.meta > * { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.meta a:hover { color: var(--accent); }

.entry p { font-size: 0.93rem; color: var(--ink-soft); }

.duties { list-style: none; margin-top: 9px; }
.duties li {
    position: relative; padding-left: 15px; font-size: 0.91rem;
    color: var(--ink-soft); line-height: 1.55; margin-bottom: 3px;
}
.duties li::before {
    content: ''; position: absolute; left: 0; top: 0.66em;
    width: 6px; height: 1px; background: var(--rule-strong);
}

.keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.keywords span {
    font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint);
    border: 1px solid var(--rule); border-radius: var(--r); padding: 2px 7px;
}

.doc-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft);
    text-decoration: none; border: 1px solid var(--rule);
    border-radius: var(--r); padding: 4px 9px; margin-top: 9px; margin-right: 6px;
}
.doc-link:hover { border-color: var(--accent); color: var(--accent); }

.linked { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.linked:hover { border-bottom-color: var(--accent); color: var(--accent); }


/* ============================================================================
   7. COMPÉTENCES
   ========================================================================= */
.cluster { margin-bottom: 20px; }
.cluster:last-of-type { margin-bottom: 0; }
.cluster h4 {
    font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
    margin-bottom: 9px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span {
    font-size: 0.83rem; color: var(--ink-soft);
    border: 1px solid var(--rule); border-radius: var(--r); padding: 3px 10px;
}
/* Compétence mise en avant dans son groupe. */
.chips .lead-chip { border-color: var(--accent); color: var(--accent); }

.rule-soft { border: 0; border-top: 1px solid var(--rule); margin: 26px 0 20px; }

.gauges { display: flex; flex-direction: column; gap: 15px; }
.gauge { display: flex; flex-direction: column; gap: 6px; }
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; }
.gauge-head b { font-weight: 500; color: var(--ink); }
.gauge-head span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }
.gauge-track { height: 3px; background: var(--rule); }
.gauge-fill { height: 100%; width: var(--pct); background: var(--ink-soft); }
.js .gauge-fill { width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.js .gauge.visible .gauge-fill { width: var(--pct); }


/* ============================================================================
   8. MÉTHODE ET RÉALISATIONS
   ========================================================================= */
.method {
    border: 1px solid var(--rule); border-left: 3px solid var(--accent);
    border-radius: var(--r); padding: 18px 20px; margin-bottom: 22px;
}
.method h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
.method p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 8px; }
.method p:last-child { margin-bottom: 0; }
.method strong { color: var(--ink); font-weight: 600; }

.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.work { border-top: 1px solid var(--rule); padding-top: 14px; }
.work h3 { font-size: 0.99rem; font-weight: 650; margin-bottom: 3px; }
.work .work-sub {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.work p { font-size: 0.89rem; color: var(--ink-soft); }


/* ============================================================================
   9. PIED DE PAGE
   ========================================================================= */
.colophon {
    margin-top: 54px; padding-top: 22px; border-top: 2px solid var(--ink);
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.colophon .reach { display: flex; flex-wrap: wrap; gap: 10px; }
.colophon .reach a {
    font-size: 0.9rem; text-decoration: none; color: var(--ink);
    border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 8px 16px;
    display: inline-flex; align-items: center; gap: 8px;
}
.colophon .reach a:hover { border-color: var(--accent); color: var(--accent); }
.colophon .signature { margin-left: auto; font-size: 0.82rem; color: var(--ink-faint); text-align: right; }


/* ============================================================================
   10. FENÊTRE CALENDRIER
   ========================================================================= */
.overlay {
    position: fixed; inset: 0; background: rgba(20, 18, 16, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.overlay.active { opacity: 1; pointer-events: auto; }

.dialog {
    background: var(--paper); border: 1px solid var(--rule-strong);
    border-radius: var(--r); padding: 22px; width: 90%; max-width: 360px;
}
.dialog-head {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--rule); padding-bottom: 11px; margin-bottom: 16px;
}
.dialog-head h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.dialog-close {
    background: none; border: 1px solid var(--rule); border-radius: var(--r);
    color: var(--ink-soft); width: 26px; height: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.dialog-close:hover { border-color: var(--accent); color: var(--accent); }

.cal-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-nav {
    background: none; border: 1px solid var(--rule); border-radius: var(--r);
    color: var(--ink-soft); padding: 3px 10px; cursor: pointer; font-family: var(--font-body);
}
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.cal-title { font-family: var(--font-display); font-size: 0.95rem; text-transform: capitalize; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint); padding-bottom: 6px;
}
.cal-day { padding: 7px 0; font-size: 0.86rem; color: var(--ink-soft); border-radius: var(--r); }
.cal-day.empty { visibility: hidden; }
.cal-day.marked { background: var(--accent); color: var(--paper); font-weight: 600; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink); }


/* ============================================================================
   11. PETITS ÉCRANS
   ========================================================================= */
@media (max-width: 900px) {
    .sheet { padding: 40px 22px 48px; }
    .columns { grid-template-columns: 1fr; gap: 0; padding-top: 34px; }
    .column-side { margin-top: 42px; }

    .menu-btn { display: inline-flex; }
    .tools {
        position: absolute; top: 44px; right: 0; flex-direction: column;
        background: var(--paper); border: 1px solid var(--rule-strong);
        border-radius: var(--r); width: 178px; padding: 0;
        max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
        transition: max-height 0.28s ease, opacity 0.28s ease, padding 0.28s ease;
    }
    .tools.open { max-height: 220px; opacity: 1; padding: 9px; pointer-events: auto; }
    .tools .tool-btn { width: 100%; justify-content: flex-start; border: 0; padding: 8px 10px; }

    /* Laisse la place au bouton de menu, positionné en absolu. */
    .kicker { margin-top: 34px; }
}

@media (max-width: 520px) {
    .sheet { padding: 30px 16px 40px; }
    .masthead h1 { font-size: 2.05rem; }
    .facts > div { border-right: 0; border-bottom: 1px solid var(--rule); }
    .facts > div:last-child { border-bottom: 0; }
    .contact { gap: 8px 18px; font-size: 0.85rem; }
    .colophon .signature { margin-left: 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .js .reveal { opacity: 1 !important; }
    .js .gauge-fill { width: var(--pct) !important; }
}


/* ============================================================================
   12. EXPORT PDF
   Classe posée sur <html> par generatePDF(), le temps de la capture.
   ========================================================================= */
.pdf-mode, .pdf-mode * {
    animation: none !important; transition: none !important;
    opacity: 1 !important; visibility: visible !important;
    /* Le reflow provoqué par .pdf-mode déclenche l'ancrage de défilement de
       Chrome, qui re-déroule la page juste avant la capture. Le PDF sort alors
       décalé, avec une première page blanche. */
    overflow-anchor: none !important;
}

.pdf-mode .topbar,
.pdf-mode .tools,
.pdf-mode .menu-btn,
.pdf-mode .overlay,
.pdf-mode .copy-btn,
.pdf-mode .skip-link { display: none !important; }

.pdf-mode .gauge-fill { width: var(--pct) !important; }

/* Ne JAMAIS imposer de largeur en pixels à .sheet ici : html2pdf place le clone
   dans un conteneur à la largeur utile de la page (environ 737 px), le contenu
   déborderait et la colonne de droite serait rognée. On ne règle que la densité
   et le nombre de colonnes, sinon une fenêtre étroite exporte la mise en page
   mobile et le CV part sur six pages. */
.pdf-mode { font-size: 13px !important; }
.pdf-mode .sheet { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.pdf-mode .columns { grid-template-columns: 1.75fr 1fr !important; gap: 0 24px !important; padding-top: 26px !important; }
.pdf-mode .column-side { margin-top: 0 !important; }
.pdf-mode .masthead { padding-bottom: 18px !important; }
.pdf-mode .kicker { margin-top: 0 !important; margin-bottom: 10px !important; }
.pdf-mode .masthead h1 { font-size: 2.5rem !important; }
.pdf-mode .masthead .role { margin-bottom: 16px !important; }
.pdf-mode .brief { margin-bottom: 16px !important; }
.pdf-mode .lede { margin-bottom: 10px !important; }
.pdf-mode .aside-note { margin-bottom: 18px !important; }
.pdf-mode .facts { margin-bottom: 18px !important; }
.pdf-mode .facts > div { padding: 10px 16px 10px 0 !important; }
.pdf-mode .section { margin-bottom: 26px !important; }
.pdf-mode .section-head { margin-bottom: 15px !important; padding-top: 9px !important; }
.pdf-mode .entry { margin-bottom: 17px !important; }
.pdf-mode .method { padding: 13px 15px !important; margin-bottom: 16px !important; }
.pdf-mode .works { gap: 14px !important; }
.pdf-mode .colophon { margin-top: 24px !important; padding-top: 14px !important; }


/* ============================================================================
   13. IMPRESSION
   ========================================================================= */
@media print {
    * {
        animation: none !important; transition: none !important;
        opacity: 1 !important;
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }
    @page { size: A4 portrait; margin: 12mm 11mm; }

    html, body { background: #ffffff !important; color: #1d1c1a !important; font-size: 10.5pt; }

    .topbar, .tools, .menu-btn, .overlay, .skip-link, .copy-btn, .colophon .reach { display: none !important; }

    .sheet { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

    /* La largeur d'une page A4 déclenche la requête des petits écrans :
       on rétablit les deux colonnes, sinon le CV s'étale sur six pages. */
    .columns { grid-template-columns: 1.75fr 1fr !important; gap: 0 22px !important; padding-top: 20px !important; }
    .column-side { margin-top: 0 !important; }
    .kicker { margin-top: 0 !important; color: #6f6a61 !important; }

    .masthead { border-bottom: 2px solid #1d1c1a !important; padding-bottom: 16px !important; }
    .masthead h1 { font-size: 25pt !important; }
    .masthead .role { color: #545049 !important; margin-bottom: 14px !important; }

    .lede, .entry p, .duties li, .method p, .work p { color: #4a463f !important; }
    .aside-note { color: #6f6a61 !important; }
    .brief { border-left-color: #9c4a2c !important; color: #4a463f !important; margin-bottom: 16px !important; }
    .brief strong, .lede strong, .method strong, .gauge-head b { color: #1d1c1a !important; }
    .aside-note a, .byline .org { color: #9c4a2c !important; }

    .facts { border-top-color: #bfb9ac !important; margin-bottom: 16px !important; }
    .facts > div { border-right-color: #e1dcd1 !important; padding: 9px 14px 9px 0 !important; }
    .facts dt { color: #6f6a61 !important; }

    .contact, .contact > * { color: #4a463f !important; }
    .contact svg { color: #8b857b !important; }

    .section { margin-bottom: 22px !important; }
    .section-head {
        border-top-color: #bfb9ac !important; margin-bottom: 14px !important;
        padding-top: 9px !important; break-after: avoid !important;
    }
    .section-head .tally { color: #8b857b !important; }

    /* Un bloc ne doit jamais être coupé en deux par un saut de page. */
    .entry, .work, .gauge, .cluster, .method { break-inside: avoid !important; page-break-inside: avoid !important; }

    .entry { border-left-color: #e1dcd1 !important; margin-bottom: 15px !important; }
    .entry::before { background: #9c4a2c !important; }
    .meta, .keywords span, .cluster h4, .work .work-sub, .gauge-head span { color: #6f6a61 !important; }
    .keywords span, .chips span, .tagline-type, .badge, .doc-link { border-color: #d5cfc3 !important; }
    .chips span { color: #4a463f !important; }
    .chips .lead-chip, .badge-now { color: #9c4a2c !important; border-color: #9c4a2c !important; }
    .method { border-color: #d5cfc3 !important; border-left-color: #9c4a2c !important; padding: 12px 14px !important; }
    .work { border-top-color: #e1dcd1 !important; }
    .gauge-track { background: #e1dcd1 !important; }
    .gauge-fill { background: #545049 !important; width: var(--pct) !important; }
    .rule-soft { border-top-color: #e1dcd1 !important; }

    .colophon { border-top: 2px solid #1d1c1a !important; margin-top: 20px !important; padding-top: 12px !important; }
    .colophon .signature { color: #6f6a61 !important; margin-left: 0 !important; text-align: left !important; }

    a { text-decoration: none !important; }
}