/* ============================================================================
   demo-personal-hub.css · Hub Personal — Creador & Aventurero (DARK "cuaderno
   de expedición", titanio + naranja expedición + steel + snow) · Capa 2
   Scopeado 100% en html.demo-personal-hub. Escrito entero desde el blueprint
   propio (dirección #8) — NO deriva de ningún theme Porto. Re-skineable: los
   colores salen de var(--primary)/(--secondary)/(--tertiary)/(--quaternary)/
   (--dark)/(--light), que SkinColorService reinyecta por tenant. Solo literales
   de contraste (rgba sobre foto/hairlines) quedan inline.
   Dirección #8: Space Grotesk (display) + Inter (body) + mono de sistema como
   rasgo de diseño (eyebrows, specs, tablas). El tinte de universo entra por
   --ph-u/--ph-u-rgb (inyectadas inline por la vista de universo — default =
   naranja expedición).
   Capa A (cd-system-base.css) ya alinea botones/badges/paginación globales;
   acá va la Capa B: home custom + landing de universos + ensamble de módulos
   (blog/projects/gallery/faqs) + overrides #57 (.text-color-dark de Porto) y
   #58 (#footer a de Porto) + re-assert de hero/secciones bespoke DESPUÉS del
   bloque de tipografía de módulos (trampa #60).
   ============================================================================ */

html.demo-personal-hub {
    --ph-bg: var(--dark, #161616);
    --ph-panel: var(--secondary, #1E1E1C);
    --ph-panel2: color-mix(in srgb, var(--secondary, #1E1E1C) 94%, white);
    --ph-acc: var(--primary, #F26D21);
    --ph-acc-deep: var(--tertiary, #C4581B);
    --ph-steel: var(--quaternary, #A0A0A0);
    --ph-snow: var(--light, #F2EFE6);
    --ph-line: rgba(var(--primary-rgb, 242, 109, 33), .18);
    --ph-hair: rgba(242, 239, 230, .09);
    --ph-u: var(--ph-acc);
    --ph-u-rgb: var(--primary-rgb, 242, 109, 33);
    --ph-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --ph-display-ff: var(--font-family-secondary, 'Space Grotesk', 'Avenir Next', system-ui, sans-serif);
    --ph-sans-ff: var(--font-family-primary, 'Inter', 'Helvetica Neue', system-ui, sans-serif);
}

html.demo-personal-hub body,
html.demo-personal-hub .body,
html.demo-personal-hub .ph-main {
    background: var(--ph-bg);
    color: var(--ph-steel);
    font-family: var(--ph-sans-ff);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
html.demo-personal-hub img { max-width: 100%; }
html.demo-personal-hub a { color: inherit; text-decoration: none; }
html.demo-personal-hub .ph-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
html.demo-personal-hub .ph-display {
    font-family: var(--ph-display-ff);
    font-weight: 700;
    color: var(--ph-snow);
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}
html.demo-personal-hub .ph-accent { color: var(--ph-u); }
html.demo-personal-hub .ph-eyebrow {
    font-family: var(--ph-mono); font-size: .74rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ph-acc); margin: 0 0 14px; display: block;
}
html.demo-personal-hub .ph-eyebrow--u { color: var(--ph-u); }
html.demo-personal-hub .ph-center { text-align: center; }
html.demo-personal-hub .ph-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ph-u);
    box-shadow: 0 0 12px var(--ph-u); display: inline-block; flex: 0 0 auto;
    animation: ph-pulse 2.4s infinite;
}
@keyframes ph-pulse { 50% { opacity: .35; } }
@keyframes ph-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    html.demo-personal-hub .ph-pulse, html.demo-personal-hub .ph-cursor { animation: none !important; }
}

/* ── botones (rectos, Space Grotesk, radio mínimo = detalle del blueprint) ── */
html.demo-personal-hub .ph-btn {
    display: inline-flex; align-items: center; gap: .6em;
    font-family: var(--ph-display-ff); font-weight: 500; font-size: .92rem;
    padding: 13px 26px; border-radius: 3px; border: 1px solid transparent;
    cursor: pointer; transition: .25s;
}
html.demo-personal-hub .ph-btn--fill { background: var(--ph-acc); border-color: var(--ph-acc); color: var(--ph-bg); }
html.demo-personal-hub .ph-btn--fill:hover { background: var(--ph-acc-deep); border-color: var(--ph-acc-deep); color: var(--ph-snow); }
html.demo-personal-hub .ph-btn--ghost { border-color: var(--ph-line); color: var(--ph-snow); background: transparent; }
html.demo-personal-hub .ph-btn--ghost:hover { border-color: var(--ph-u); color: var(--ph-u); }

/* ══ HEADER (barra titanio sticky glass) ══ */
html.demo-personal-hub .ph-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(12, 12, 12, .82); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ph-hair);
}
html.demo-personal-hub .ph-bar {
    max-width: 1180px; margin: 0 auto; padding: 13px 28px;
    display: flex; align-items: center; gap: 22px;
}
html.demo-personal-hub .ph-brand { display: flex; align-items: center; }
html.demo-personal-hub .ph-uchip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ph-mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ph-u);
    border: 1px solid rgba(var(--ph-u-rgb), .35); border-radius: 100px; padding: 5px 13px;
    white-space: nowrap;
}
html.demo-personal-hub .ph-uchip::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--ph-u); box-shadow: 0 0 9px var(--ph-u);
}
html.demo-personal-hub .ph-nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
html.demo-personal-hub .ph-nav a { font-size: .84rem; color: var(--ph-steel); transition: .2s; }
html.demo-personal-hub .ph-nav a:hover, html.demo-personal-hub .ph-nav a.on { color: var(--ph-snow); }
html.demo-personal-hub .ph-hright { display: flex; align-items: center; gap: 14px; margin-left: 4px; }
html.demo-personal-hub .ph-hd-cta {
    font-family: var(--ph-display-ff); font-weight: 500; font-size: .84rem;
    background: var(--ph-acc); color: var(--ph-bg); padding: 8px 18px; border-radius: 3px; transition: .25s;
    white-space: nowrap;
}
html.demo-personal-hub .ph-hd-cta:hover { background: var(--ph-acc-deep); color: var(--ph-snow); }
html.demo-personal-hub .ph-burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
html.demo-personal-hub .ph-burger span { width: 24px; height: 2px; background: var(--ph-snow); display: block; }

/* ══ HERO ══ */
html.demo-personal-hub .ph-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-hero-photo {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: .22;
}
html.demo-personal-hub .ph-hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22, 22, 22, .55), rgba(22, 22, 22, .25) 45%, rgba(22, 22, 22, .96));
}
html.demo-personal-hub .ph-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
html.demo-personal-hub .ph-hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(820px 460px at 78% 18%, rgba(var(--ph-u-rgb), .12), transparent 62%),
        radial-gradient(600px 500px at 8% 92%, rgba(var(--primary-rgb, 242, 109, 33), .08), transparent 60%);
}
html.demo-personal-hub .ph-hero-in {
    display: grid; grid-template-columns: 1.5fr .9fr; gap: 56px;
    align-items: end; padding: 92px 0 72px;
}
html.demo-personal-hub .ph-badge {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ph-mono); font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ph-acc);
    border: 1px solid var(--ph-line); border-radius: 100px;
    padding: 8px 18px; margin-bottom: 30px;
}
html.demo-personal-hub .ph-hero h1 {
    font-size: clamp(52px, 8.5vw, 104px); line-height: .98; letter-spacing: -0.025em;
}
html.demo-personal-hub .ph-lede { max-width: 33em; font-size: 1.1rem; color: var(--ph-steel); margin: 28px 0 36px; }
html.demo-personal-hub .ph-lede strong { color: var(--ph-snow); font-weight: 600; }
html.demo-personal-hub .ph-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* REGISTRO DE CAMPO (field card) */
html.demo-personal-hub .ph-field-card {
    border: 1px solid var(--ph-hair); background: rgba(30, 30, 28, .72);
    backdrop-filter: blur(6px); border-radius: 4px; padding: 22px 24px;
    font-family: var(--ph-mono); font-size: .8rem; line-height: 2.05;
}
html.demo-personal-hub .ph-fc-title {
    color: var(--ph-u); letter-spacing: .16em; font-size: .7rem; text-transform: uppercase;
    border-bottom: 1px solid var(--ph-hair); padding-bottom: 10px; margin-bottom: 12px;
}
html.demo-personal-hub .ph-fc-row { display: flex; justify-content: space-between; gap: 18px; text-transform: uppercase; letter-spacing: .04em; }
html.demo-personal-hub .ph-fc-row b { color: var(--ph-snow); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* ══ TICKER DE STATS ══ */
html.demo-personal-hub .ph-ticker {
    border-bottom: 1px solid var(--ph-hair); overflow: hidden;
    font-family: var(--ph-mono); font-size: .8rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ph-steel); white-space: nowrap; padding: 13px 0;
}
html.demo-personal-hub .ph-ticker-in { display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; }
html.demo-personal-hub .ph-ticker-in::-webkit-scrollbar { display: none; }
html.demo-personal-hub .ph-ticker b { color: var(--ph-acc); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── secciones / sec-heads ── */
html.demo-personal-hub .ph-sec { padding: 84px 0; border-bottom: 1px solid var(--ph-hair); position: relative; }
html.demo-personal-hub .ph-sec--band { background: var(--ph-panel); }
html.demo-personal-hub .ph-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 44px; }
html.demo-personal-hub .ph-sec-head h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; }
html.demo-personal-hub .ph-more, html.demo-personal-hub .ph-more-note {
    font-family: var(--ph-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ph-steel); white-space: nowrap; padding-bottom: 6px;
}
html.demo-personal-hub .ph-more:hover { color: var(--ph-u); }

/* ══ TABLERO "EN CURSO" ══ */
html.demo-personal-hub .ph-board { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
html.demo-personal-hub .ph-quest {
    border: 1px solid var(--ph-line); border-radius: 5px;
    background: linear-gradient(160deg, rgba(var(--ph-u-rgb), .12), transparent 45%), var(--ph-panel);
    padding: 30px 32px;
}
html.demo-personal-hub .ph-quest--next { background: var(--ph-panel); border-color: var(--ph-hair); }
html.demo-personal-hub .ph-qtag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ph-mono); font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ph-u); margin-bottom: 18px;
}
html.demo-personal-hub .ph-quest--next .ph-qtag { color: var(--ph-steel); }
html.demo-personal-hub .ph-quest h3 { font-size: 1.7rem; }
html.demo-personal-hub .ph-quest--next h3 { font-size: 1.3rem; }
html.demo-personal-hub .ph-qsub { color: var(--ph-steel); margin: 10px 0 26px; max-width: 36em; }
html.demo-personal-hub .ph-qmini { margin: 6px 0 0; font-size: .86rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-meter { height: 7px; border-radius: 100px; background: rgba(242, 239, 230, .08); overflow: hidden; }
html.demo-personal-hub .ph-meter i {
    display: block; height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, var(--ph-acc-deep), var(--ph-u));
    box-shadow: 0 0 14px rgba(var(--ph-u-rgb), .35);
}
html.demo-personal-hub .ph-meter-meta {
    display: flex; justify-content: space-between; font-family: var(--ph-mono);
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ph-steel); margin-top: 10px; font-variant-numeric: tabular-nums;
}
html.demo-personal-hub .ph-meter-meta b { color: var(--ph-snow); font-weight: 500; }
html.demo-personal-hub .ph-milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
html.demo-personal-hub .ph-mst { border: 1px solid var(--ph-hair); border-radius: 4px; padding: 13px 15px; font-size: .84rem; }
html.demo-personal-hub .ph-mst-date { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-u); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
html.demo-personal-hub .ph-mst-name { color: var(--ph-snow); font-weight: 600; }
html.demo-personal-hub .ph-mst.done { opacity: .55; }
html.demo-personal-hub .ph-mst.done .ph-mst-date { color: var(--ph-steel); }
html.demo-personal-hub .ph-quest-side { display: grid; gap: 22px; align-content: start; }
html.demo-personal-hub .ph-spec {
    border-top: 1px solid var(--ph-hair); padding-top: 12px; margin-top: 14px;
    font-family: var(--ph-mono); font-size: .76rem; line-height: 1.9; color: var(--ph-steel);
    text-transform: uppercase; letter-spacing: .04em;
}
html.demo-personal-hub .ph-spec-row { display: flex; justify-content: space-between; gap: 14px; }
html.demo-personal-hub .ph-spec b { color: var(--ph-snow); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
html.demo-personal-hub .ph-live, html.demo-personal-hub .ph-spec b.ph-live { color: var(--ph-u); }
html.demo-personal-hub .ph-follow { display: flex; gap: 10px; margin-top: 18px; font-family: var(--ph-mono); font-size: .74rem; letter-spacing: .08em; flex-wrap: wrap; }
html.demo-personal-hub .ph-follow a { border: 1px solid var(--ph-hair); border-radius: 3px; padding: 7px 13px; color: var(--ph-steel); transition: .2s; }
html.demo-personal-hub .ph-follow a:hover { color: var(--ph-u); border-color: rgba(var(--ph-u-rgb), .4); }

/* ── slots de foto ── */
html.demo-personal-hub .ph-photo {
    position: relative; overflow: hidden; border-radius: 5px; display: block;
    border: 1px solid var(--ph-hair); background: var(--ph-panel2); min-height: 240px;
}
html.demo-personal-hub .ph-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: .6s; }
html.demo-personal-hub .ph-photo:hover img { transform: scale(1.05); }
html.demo-personal-hub .ph-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 10, .82)); pointer-events: none; }

/* ══ UNIVERSOS (home) ══ */
html.demo-personal-hub .ph-universes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
html.demo-personal-hub .ph-uni .ph-photo { min-height: 320px; margin-bottom: 20px; }
html.demo-personal-hub .ph-uni h3 { font-size: 1.6rem; }
html.demo-personal-hub .ph-uni-n { font-family: var(--ph-mono); font-size: .74rem; font-weight: 400; color: var(--ph-u); vertical-align: super; margin-left: 6px; }
html.demo-personal-hub .ph-uni p { margin: 10px 0 14px; font-size: .92rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-go { font-family: var(--ph-mono); font-size: .74rem; letter-spacing: .1em; color: var(--ph-u); transition: .2s; }
html.demo-personal-hub .ph-go:hover { opacity: .75; }

/* ══ BITÁCORA (blog en home) ══ */
html.demo-personal-hub .ph-journal { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; }
html.demo-personal-hub .ph-photo--feat { min-height: 340px; margin-bottom: 24px; }
html.demo-personal-hub .ph-emeta {
    font-family: var(--ph-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ph-steel); display: flex; gap: 16px; margin-bottom: 10px;
}
html.demo-personal-hub .ph-ecat { color: var(--ph-acc); }
html.demo-personal-hub .ph-ecat--u { color: var(--ph-u); }
html.demo-personal-hub .ph-feat h3 { font-size: 1.9rem; line-height: 1.15; }
html.demo-personal-hub .ph-feat h3 a:hover, html.demo-personal-hub .ph-entry h4 a:hover { color: var(--ph-u); }
html.demo-personal-hub .ph-feat p { margin: 14px 0 0; max-width: 38em; }
html.demo-personal-hub .ph-entries { display: flex; flex-direction: column; }
html.demo-personal-hub .ph-entry { padding: 22px 0; border-bottom: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-entry:first-child { padding-top: 6px; }
html.demo-personal-hub .ph-entry h4 { font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
html.demo-personal-hub .ph-entry p { font-size: .86rem; margin: 8px 0 0; color: var(--ph-steel); }
html.demo-personal-hub .ph-journal-note { margin-top: 26px; font-family: var(--ph-mono); font-size: .76rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-journal-note a { color: var(--ph-u); }

/* ══ EXPEDICIONES & PROYECTOS (projects en home) ══ */
html.demo-personal-hub .ph-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
html.demo-personal-hub .ph-proj {
    border: 1px solid var(--ph-hair); border-radius: 5px; background: var(--ph-panel);
    padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color .2s;
}
html.demo-personal-hub .ph-proj:hover { border-color: rgba(var(--ph-u-rgb), .4); }
html.demo-personal-hub .ph-ptype { font-family: var(--ph-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ph-acc-deep); }
html.demo-personal-hub .ph-ptype--u { color: var(--ph-u); }
html.demo-personal-hub .ph-proj h4 { font-size: 1.15rem; }
html.demo-personal-hub .ph-proj p { font-size: .82rem; margin: 0; flex: 1; color: var(--ph-steel); }
html.demo-personal-hub .ph-proj .ph-spec { margin-top: 0; }

/* ══ GALERÍA (gallery en home) ══ */
html.demo-personal-hub .ph-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
html.demo-personal-hub .ph-gal .ph-photo { min-height: 210px; }
html.demo-personal-hub .ph-gal .ph-tall { grid-row: span 2; min-height: 438px; }
html.demo-personal-hub .ph-gcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; z-index: 2; }
html.demo-personal-hub .ph-gname { font-family: var(--ph-display-ff); font-weight: 700; font-size: 1.05rem; color: var(--ph-snow); }
html.demo-personal-hub .ph-gcount { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-steel); margin-left: 8px; }

/* ══ POR CAPÍTULOS ══ */
html.demo-personal-hub .ph-chapters { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-chap { border-right: 1px solid var(--ph-hair); padding: 6px 22px 4px; }
html.demo-personal-hub .ph-cyear { font-family: var(--ph-mono); font-size: .74rem; color: var(--ph-acc); letter-spacing: .1em; text-transform: uppercase; }
html.demo-personal-hub .ph-chap h4 { font-size: 1.05rem; margin: 10px 0 8px; }
html.demo-personal-hub .ph-chap p { font-size: .82rem; margin: 0; color: var(--ph-steel); }
html.demo-personal-hub .ph-chap.now { background: linear-gradient(180deg, rgba(var(--primary-rgb, 242, 109, 33), .08), transparent); }

/* ══ CONEXIÓN ══ */
html.demo-personal-hub .ph-connect { text-align: center; padding: 100px 0; border-bottom: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-connect h2 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.02em; }
html.demo-personal-hub .ph-con-sub { max-width: 34em; margin: 18px auto 34px; color: var(--ph-steel); }
html.demo-personal-hub .ph-news {
    display: flex; max-width: 460px; margin: 0 auto; border: 1px solid var(--ph-line);
    border-radius: 4px; overflow: hidden; background: var(--ph-panel);
}
html.demo-personal-hub .ph-news input[type="email"] {
    flex: 1; background: transparent; border: 0; color: var(--ph-snow);
    font-family: var(--ph-mono); font-size: .84rem; padding: 14px 18px; outline: none;
}
html.demo-personal-hub .ph-news input::placeholder { color: var(--ph-steel); opacity: .7; }
html.demo-personal-hub .ph-news input:focus-visible { outline: 2px solid var(--ph-acc); outline-offset: -2px; }
html.demo-personal-hub .ph-news button {
    font-family: var(--ph-display-ff); font-weight: 500; font-size: .86rem; border: 0;
    background: var(--ph-acc); color: var(--ph-bg); padding: 0 22px; cursor: pointer; transition: .25s;
}
html.demo-personal-hub .ph-news button:hover { background: var(--ph-acc-deep); color: var(--ph-snow); }
html.demo-personal-hub .ph-con-alt { margin-top: 22px; font-family: var(--ph-mono); font-size: .8rem; }
html.demo-personal-hub .ph-con-alt a { color: var(--ph-acc); }
html.demo-personal-hub .ph-alert {
    background: rgba(var(--primary-rgb, 242, 109, 33), .12); border: 1px solid var(--ph-acc);
    color: var(--ph-snow); padding: 14px 16px; margin: 0 auto 16px; max-width: 460px; border-radius: 4px;
}

/* ══ PAGE HEADER (módulos/about/contact — banda titanio + curvas) ══ */
html.demo-personal-hub .ph-pagehead {
    background: var(--ph-panel); border-bottom: 1px solid var(--ph-hair);
    padding: 110px 0 54px; position: relative; overflow: hidden;
}
html.demo-personal-hub .ph-ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .4; }
html.demo-personal-hub .ph-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
html.demo-personal-hub .ph-crumb li { font-family: var(--ph-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-steel); }
html.demo-personal-hub .ph-crumb a { color: var(--ph-steel); }
html.demo-personal-hub .ph-crumb a:hover { color: var(--ph-acc); }
html.demo-personal-hub .ph-crumb li span { color: var(--ph-acc); }
html.demo-personal-hub .ph-pagehead h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); letter-spacing: -0.02em; }
html.demo-personal-hub .ph-pagehead p { color: var(--ph-steel); margin: 12px 0 0; max-width: 60ch; }

/* ══ ABOUT / CONTACT ══ */
html.demo-personal-hub .ph-about-grid, html.demo-personal-hub .ph-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
html.demo-personal-hub .ph-about-title { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin: 4px 0 22px; }
html.demo-personal-hub .ph-about-grid p { color: var(--ph-steel); margin-bottom: 14px; }
html.demo-personal-hub .ph-about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.demo-personal-hub .ph-about-img { width: 100%; height: 420px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-about-img--b { margin-top: 42px; height: 378px; }
html.demo-personal-hub .ph-badge-line {
    display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--ph-line);
    border-radius: 4px; padding: 14px 20px; margin-top: 12px;
}
html.demo-personal-hub .ph-badge-line span:last-child { font-family: var(--ph-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ph-snow); }
html.demo-personal-hub .ph-rules { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-oath { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-rule { border-right: 1px solid var(--ph-hair); padding: 4px 20px; }
html.demo-personal-hub .ph-rn { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-acc); letter-spacing: .14em; }
html.demo-personal-hub .ph-rn--u { color: var(--ph-u); }
html.demo-personal-hub .ph-rule h4 { font-size: 1rem; margin: 8px 0 6px; }
html.demo-personal-hub .ph-rule p { font-size: .8rem; margin: 0; color: var(--ph-steel); }
html.demo-personal-hub .ph-contact-list { list-style: none; padding: 0; margin: 22px 0 0; }
html.demo-personal-hub .ph-contact-list li { padding: 14px 0; border-bottom: 1px solid var(--ph-hair); color: var(--ph-snow); }
html.demo-personal-hub .ph-contact-list a { color: var(--ph-snow); }
html.demo-personal-hub .ph-contact-list a:hover { color: var(--ph-acc); }
html.demo-personal-hub .ph-contact-list strong { display: block; font-family: var(--ph-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-acc); margin-bottom: 4px; font-weight: 500; }
html.demo-personal-hub .ph-follow--contact { margin-top: 24px; }
html.demo-personal-hub .ph-contact-form .ph-input {
    width: 100%; background: var(--ph-panel); border: 1px solid var(--ph-hair); color: var(--ph-snow);
    padding: 14px 16px; margin-bottom: 14px; font-family: var(--ph-sans-ff); font-size: .95rem; border-radius: 3px;
}
html.demo-personal-hub .ph-contact-form .ph-input::placeholder { color: var(--ph-steel); }
html.demo-personal-hub .ph-contact-form .ph-input:focus { outline: none; border-color: var(--ph-acc); }
html.demo-personal-hub .ph-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.demo-personal-hub .ph-map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.5); }

/* ══ FOOTER ══ */
html.demo-personal-hub .ph-footer { background: #101010; padding: 60px 0 36px; border-top: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-fin { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
html.demo-personal-hub .ph-fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 38px; margin-bottom: 42px; }
html.demo-personal-hub .ph-fbrand p { font-size: .86rem; color: var(--ph-steel); max-width: 34ch; }
html.demo-personal-hub .ph-footer h4 { font-family: var(--ph-mono); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ph-acc); margin-bottom: 16px; font-weight: 500; }
html.demo-personal-hub .ph-footer ul { list-style: none; padding: 0; margin: 0; }
html.demo-personal-hub .ph-footer ul li { margin-bottom: 8px; font-size: .86rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-mono-n { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-acc-deep); margin-right: 4px; }
/* trampa #58: Porto define #footer a{color:#555} (especificidad de ID) → todo link
   del footer se re-declara con !important para no quedar ilegible sobre titanio. */
html.demo-personal-hub #footer.ph-footer ul a,
html.demo-personal-hub #footer.ph-footer .ph-fbot a { color: var(--ph-steel) !important; }
html.demo-personal-hub #footer.ph-footer ul a:hover,
html.demo-personal-hub #footer.ph-footer .ph-fbot a:hover { color: var(--ph-snow) !important; }
html.demo-personal-hub .ph-social { display: flex; gap: 12px; margin: 4px 0 18px; }
html.demo-personal-hub #footer.ph-footer .ph-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ph-hair); border-radius: 3px; color: var(--ph-steel) !important; transition: .2s; }
html.demo-personal-hub #footer.ph-footer .ph-social a:hover { border-color: var(--ph-acc); color: var(--ph-acc) !important; }
/* CTA reutilizado en el footer (trampa #58): color REAL verificado con getComputedStyle */
html.demo-personal-hub #footer.ph-footer a.ph-hd-cta { color: var(--ph-bg) !important; }
html.demo-personal-hub #footer.ph-footer a.ph-hd-cta:hover { color: var(--ph-snow) !important; }
html.demo-personal-hub .ph-fcta { display: inline-block; }
html.demo-personal-hub .ph-fbot { border-top: 1px solid var(--ph-hair); padding-top: 20px; display: flex; justify-content: space-between; font-family: var(--ph-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; flex-wrap: wrap; gap: 8px; color: var(--ph-steel); }

/* ═══════════ LANDING DE UNIVERSO (categoría de blog bespoke) ═══════════ */
html.demo-personal-hub .ph-uhero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-uhero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
html.demo-personal-hub .ph-uhero-in { padding: 88px 0 64px; }
html.demo-personal-hub .ph-uhero h1 { font-size: clamp(56px, 9vw, 112px); letter-spacing: -0.03em; line-height: .95; }
html.demo-personal-hub .ph-udot { color: var(--ph-u); }
html.demo-personal-hub .ph-uline { max-width: 30em; font-size: 1.06rem; margin: 26px 0 0; color: var(--ph-steel); }
html.demo-personal-hub .ph-uline strong { color: var(--ph-snow); font-weight: 600; }
html.demo-personal-hub .ph-ukicker {
    font-family: var(--ph-mono); font-size: .8rem; letter-spacing: .12em;
    color: var(--ph-u); margin-bottom: 26px; display: block; text-transform: uppercase;
}
html.demo-personal-hub .ph-backlink { font-family: var(--ph-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-steel); display: inline-block; margin-bottom: 26px; transition: .2s; }
html.demo-personal-hub .ph-backlink:hover { color: var(--ph-u); }
/* CREAR — retícula blueprint */
html.demo-personal-hub .ph-uhero--grid::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background:
        repeating-linear-gradient(0deg, rgba(var(--ph-u-rgb), .05) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(90deg, rgba(var(--ph-u-rgb), .05) 0 1px, transparent 1px 72px),
        radial-gradient(700px 420px at 85% 10%, rgba(var(--ph-u-rgb), .1), transparent 60%);
}
html.demo-personal-hub .ph-cursor { display: inline-block; width: .5em; height: .9em; background: var(--ph-u); margin-left: 10px; animation: ph-blink 1.1s steps(1) infinite; vertical-align: baseline; }
html.demo-personal-hub .ph-glass {
    border: 1px solid rgba(var(--ph-u-rgb), .22); border-radius: 5px;
    background: linear-gradient(150deg, rgba(var(--ph-u-rgb), .08), rgba(30, 30, 28, .6));
    backdrop-filter: blur(8px); padding: 26px 28px;
}
html.demo-personal-hub .ph-shipnow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
html.demo-personal-hub .ph-shipnow h4 { font-size: 1.3rem; margin: 8px 0 6px; }
html.demo-personal-hub .ph-shipnow p { font-size: .88rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-ulive { color: var(--ph-u); }
html.demo-personal-hub .ph-shiplog { border-left: 1px solid rgba(var(--ph-u-rgb), .28); margin-left: 8px; padding-left: 34px; display: grid; gap: 30px; }
html.demo-personal-hub .ph-commit { position: relative; }
html.demo-personal-hub .ph-commit::before {
    content: ''; position: absolute; left: -39px; top: 7px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--ph-bg); border: 2px solid var(--ph-u);
}
html.demo-personal-hub .ph-chash { font-family: var(--ph-mono); font-size: .74rem; color: var(--ph-u); letter-spacing: .08em; }
html.demo-personal-hub .ph-commit h4 { font-size: 1.25rem; margin: 6px 0 6px; }
html.demo-personal-hub .ph-commit p { font-size: .88rem; margin: 0; max-width: 46em; color: var(--ph-steel); }
/* ENTRENAR — pulso + plan + marcas */
html.demo-personal-hub .ph-ekg-band { position: relative; height: 92px; border-bottom: 1px solid var(--ph-hair); overflow: hidden; }
html.demo-personal-hub .ph-ekg-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html.demo-personal-hub .ph-plan { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
html.demo-personal-hub .ph-day {
    border: 1px solid var(--ph-hair); border-radius: 4px; padding: 12px 10px 10px;
    font-family: var(--ph-mono); font-size: .7rem; text-align: center; line-height: 1.8;
}
html.demo-personal-hub .ph-dname { letter-spacing: .14em; color: var(--ph-steel); }
html.demo-personal-hub .ph-dw { color: var(--ph-snow); font-size: .78rem; text-transform: uppercase; }
html.demo-personal-hub .ph-dst { color: var(--ph-steel); }
html.demo-personal-hub .ph-day.done { opacity: .5; }
html.demo-personal-hub .ph-day.today { border-color: var(--ph-u); background: rgba(var(--ph-u-rgb), .12); }
html.demo-personal-hub .ph-day.today .ph-dname, html.demo-personal-hub .ph-day.today .ph-dst { color: var(--ph-u); }
html.demo-personal-hub .ph-train-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: stretch; }
html.demo-personal-hub .ph-photo--split { min-height: 360px; height: 100%; }
html.demo-personal-hub .ph-splits { width: 100%; border-collapse: collapse; font-family: var(--ph-mono); font-size: .82rem; }
html.demo-personal-hub .ph-splits th {
    text-align: left; font-weight: 500; letter-spacing: .14em; font-size: .66rem; text-transform: uppercase;
    color: var(--ph-u); border-bottom: 1px solid var(--ph-hair); padding: 0 14px 10px 0;
}
html.demo-personal-hub .ph-splits td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--ph-hair); color: var(--ph-steel); font-variant-numeric: tabular-nums; }
html.demo-personal-hub .ph-splits td b { color: var(--ph-snow); font-weight: 500; }
html.demo-personal-hub .ph-up { color: var(--ph-u); font-size: .68rem; }
html.demo-personal-hub .ph-table-note { font-family: var(--ph-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 16px; color: var(--ph-steel); }
html.demo-personal-hub .ph-ulink { color: var(--ph-u); }
/* EXPLORAR — coords + ruta + perfil */
html.demo-personal-hub .ph-coords { border-bottom: 1px solid var(--ph-hair); }
html.demo-personal-hub .ph-coords-in {
    font-family: var(--ph-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ph-steel); display: flex; gap: 30px; flex-wrap: wrap; padding: 14px 28px;
}
html.demo-personal-hub .ph-coords b { color: var(--ph-u); font-weight: 500; }
html.demo-personal-hub .ph-explore-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: start; }
html.demo-personal-hub .ph-explore-side { display: grid; gap: 20px; }
html.demo-personal-hub .ph-routelog { width: 100%; border-collapse: collapse; font-size: .88rem; }
html.demo-personal-hub .ph-routelog th {
    font-family: var(--ph-mono); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ph-u); text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--ph-hair);
}
html.demo-personal-hub .ph-routelog td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--ph-hair); color: var(--ph-steel); }
html.demo-personal-hub .ph-routelog td:first-child { color: var(--ph-snow); font-weight: 600; font-family: var(--ph-display-ff); font-size: .95rem; }
html.demo-personal-hub .ph-routelog .ph-mono { font-family: var(--ph-mono); font-size: .74rem; font-variant-numeric: tabular-nums; }
html.demo-personal-hub .ph-rst { font-family: var(--ph-mono); font-size: .64rem; letter-spacing: .1em; }
html.demo-personal-hub .ph-rst.ok { color: var(--ph-u); }
html.demo-personal-hub .ph-profile-card { border: 1px solid var(--ph-hair); border-radius: 5px; background: var(--ph-panel); padding: 26px 28px 18px; }
html.demo-personal-hub .ph-pchead { display: flex; justify-content: space-between; gap: 10px; font-family: var(--ph-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-steel); margin-bottom: 14px; flex-wrap: wrap; }
html.demo-personal-hub .ph-pchead b { color: var(--ph-u); font-weight: 500; }
html.demo-personal-hub .ph-pchead--foot { margin: 10px 0 0; }
html.demo-personal-hub .ph-profile-card canvas { width: 100%; height: 170px; display: block; }
html.demo-personal-hub .ph-photo--side { min-height: 220px; }
/* entradas + cross links */
html.demo-personal-hub .ph-entries--u { max-width: 720px; }
html.demo-personal-hub .ph-empty { font-family: var(--ph-mono); font-size: .8rem; color: var(--ph-steel); }
html.demo-personal-hub .ph-cross { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
html.demo-personal-hub .ph-cross a {
    border: 1px solid var(--ph-hair); border-radius: 5px; padding: 22px 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-family: var(--ph-display-ff); font-weight: 600; color: var(--ph-snow); font-size: 1.05rem;
    transition: border-color .2s;
}
html.demo-personal-hub .ph-cross a small { display: block; font-family: var(--ph-mono); font-weight: 400; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-steel); margin-bottom: 5px; }
html.demo-personal-hub .ph-cross a:hover { border-color: rgba(var(--ph-u-rgb), .4); }
html.demo-personal-hub .ph-arrow { color: var(--ph-u); font-size: 1.25rem; }
html.demo-personal-hub .ph-pagination { margin-top: 26px; }

/* ══ CAPA B · ENSAMBLE DE MÓDULOS (blog / projects / gallery / faqs compartidos) ══
   El demo es DARK → fondo titanio, cards panel legibles, acentos naranja.
   Nunca @if($activeDemo) en blades de módulos — solo estas reglas. */
html.demo-personal-hub .main > section:not([class*="ph-"]),
html.demo-personal-hub .main .section { background: var(--ph-bg); border-color: var(--ph-hair); }
/* cards de módulo → panel, borde hairline, texto snow */
html.demo-personal-hub .main .card,
html.demo-personal-hub .main .service-item,
html.demo-personal-hub .main .gallery-item,
html.demo-personal-hub .main .team-item,
html.demo-personal-hub .main .post-item,
html.demo-personal-hub .main .thumb-info {
    background: var(--ph-panel); border: 1px solid var(--ph-hair); color: var(--ph-snow);
}
html.demo-personal-hub .main .card .card-body { color: var(--ph-snow); background: var(--ph-panel); }
/* tipografía de módulos (títulos snow, texto steel) */
html.demo-personal-hub .main h1, html.demo-personal-hub .main h2, html.demo-personal-hub .main h3,
html.demo-personal-hub .main h4, html.demo-personal-hub .main h5 { color: var(--ph-snow); font-family: var(--ph-display-ff); }
html.demo-personal-hub .main p, html.demo-personal-hub .main li { color: var(--ph-steel); }
/* trampa #57: Porto define .text-color-dark {color: var(--dark) !important} en theme.css
   → en este demo DARK los títulos de card de vistas compartidas (blog/faqs) quedan
   negro-sobre-titanio ilegibles. Override canónico con !important desde el alta:
   headings → snow, texto corrido → steel. */
html.demo-personal-hub .main h1.text-color-dark, html.demo-personal-hub .main h2.text-color-dark,
html.demo-personal-hub .main h3.text-color-dark, html.demo-personal-hub .main h4.text-color-dark,
html.demo-personal-hub .main h5.text-color-dark, html.demo-personal-hub .main h6.text-color-dark { color: var(--ph-snow) !important; }
html.demo-personal-hub .main p.text-color-dark, html.demo-personal-hub .main span.text-color-dark,
html.demo-personal-hub .main li.text-color-dark, html.demo-personal-hub .main a.text-color-dark { color: var(--ph-steel) !important; }
/* enlaces / acentos → naranja */
html.demo-personal-hub .main a.text-color-primary,
html.demo-personal-hub .main .text-color-primary,
html.demo-personal-hub .main .price { color: var(--ph-acc) !important; }
/* botones de módulo (la Capa A ya los pinta con --primary) → texto titanio sobre naranja */
html.demo-personal-hub .main .btn-primary { color: var(--ph-bg) !important; }
/* fondos claros heredados de vistas compartidas → neutralizar a titanio/panel */
html.demo-personal-hub .main .bg-color-light,
html.demo-personal-hub .main .bg-light { background: var(--ph-bg) !important; }
html.demo-personal-hub .main .bg-color-grey,
html.demo-personal-hub .main .bg-color-grey-scale-1 { background: var(--ph-panel) !important; }
/* FAQs accordion (vista compartida) → superficie panel legible */
html.demo-personal-hub .main .accordion .card,
html.demo-personal-hub .main .accordion .card-header,
html.demo-personal-hub .main .accordion .card-header a,
html.demo-personal-hub .main .accordion .card-body { background: var(--ph-panel); color: var(--ph-snow); }
html.demo-personal-hub .main .accordion .card-header a { color: var(--ph-snow) !important; }
html.demo-personal-hub .main .accordion .card-body p { color: var(--ph-steel); }
/* formularios de vistas compartidas (sidebar blog, etc.) */
html.demo-personal-hub .main .form-control {
    background: var(--ph-panel); border-color: var(--ph-hair); color: var(--ph-snow);
}
html.demo-personal-hub .main .form-control::placeholder { color: var(--ph-steel); }
/* pills/badges de categorías del blog compartido */
html.demo-personal-hub .main .badge-primary, html.demo-personal-hub .main .badge.badge-primary { color: var(--ph-bg); }
html.demo-personal-hub .main .post-meta, html.demo-personal-hub .main .post-date { color: var(--ph-steel); }

/* trampa #60: el bloque de tipografía de módulos (arriba) EMPATA especificidad con las
   secciones bespoke y les gana por orden → re-assert de hero/uhero/pagehead DESPUÉS. */
html.demo-personal-hub .main .ph-hero h1, html.demo-personal-hub .ph-hero h1 { color: var(--ph-snow); }
html.demo-personal-hub .main .ph-hero h1 .ph-accent { color: var(--ph-u); }
html.demo-personal-hub .main .ph-uhero h1 { color: var(--ph-snow); }
html.demo-personal-hub .main .ph-uhero h1 .ph-udot { color: var(--ph-u); }
html.demo-personal-hub .main .ph-pagehead h1 { color: var(--ph-snow); }
html.demo-personal-hub .main .ph-quest h3, html.demo-personal-hub .main .ph-connect h2 { color: var(--ph-snow); }

/* ── responsive ── */
@media (max-width: 991px) {
    html.demo-personal-hub .ph-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; background: rgba(14, 14, 14, .97);
        border-bottom: 1px solid var(--ph-hair); padding: 8px 0; align-items: stretch;
    }
    html.demo-personal-hub .ph-nav.open { display: flex; }
    html.demo-personal-hub .ph-nav a { padding: 14px 28px; }
    html.demo-personal-hub .ph-burger { display: flex; }
    html.demo-personal-hub .ph-hd-cta { display: none; }
    html.demo-personal-hub .ph-fcta { display: inline-block; }
    html.demo-personal-hub .ph-uchip { display: none; }
}
@media (max-width: 900px) {
    html.demo-personal-hub .ph-hero-in { grid-template-columns: 1fr; align-items: start; padding: 64px 0 52px; }
    html.demo-personal-hub .ph-board { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-milestones { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-universes { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-journal { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-gal { grid-template-columns: repeat(2, 1fr); }
    html.demo-personal-hub .ph-gal .ph-tall { grid-row: auto; min-height: 210px; }
    html.demo-personal-hub .ph-chapters { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--ph-hair); }
    html.demo-personal-hub .ph-chap { border-right: 0; border-bottom: 1px solid var(--ph-hair); padding: 18px 4px; }
    html.demo-personal-hub .ph-about-grid, html.demo-personal-hub .ph-contact-grid { grid-template-columns: 1fr; gap: 40px; }
    html.demo-personal-hub .ph-shipnow { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-plan { grid-template-columns: repeat(4, 1fr); }
    html.demo-personal-hub .ph-oath, html.demo-personal-hub .ph-rules { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--ph-hair); }
    html.demo-personal-hub .ph-oath .ph-rule, html.demo-personal-hub .ph-rules .ph-rule { border-right: 0; border-bottom: 1px solid var(--ph-hair); padding: 16px 4px; }
    html.demo-personal-hub .ph-train-split, html.demo-personal-hub .ph-explore-split { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    html.demo-personal-hub .ph-cross { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-form-row { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-about-photos { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-about-img--b { margin-top: 0; }
}
@media (max-width: 620px) {
    html.demo-personal-hub .ph-projects { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-gal { grid-template-columns: 1fr; }
    html.demo-personal-hub .ph-wrap, html.demo-personal-hub .ph-bar, html.demo-personal-hub .ph-fin { padding-left: 20px; padding-right: 20px; }
    html.demo-personal-hub .ph-fgrid { grid-template-columns: 1fr 1fr; }
}