/* BezaSpeaks personal portfolio: additions on top of site.css */

/* persona bar: states plainly that this is a personal, non-commercial site */
.announce.persona{background:#0A1830;border-bottom:1px solid var(--line)}
.announce.persona .announce-row{color:var(--muted);font-size:.88rem;justify-content:center;text-align:center}
.announce.persona b{color:var(--text);font-weight:700}

/* wordmark only, no logo mark */
.brand{gap:12px;align-items:baseline}
.brand-sub{font:600 .72rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-left:1px solid var(--line2);padding-left:12px;white-space:nowrap}

/* four-item menu fits until tablet width */
.nav-link[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--teal);border-radius:0}
.mobile-menu .m-link[aria-current="page"]{color:var(--teal)}
@media (max-width:1260px){.nav{display:block}.menu-btn{display:none}}
@media (max-width:1060px){.brand-sub{display:none}}
@media (max-width:900px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (min-width:901px){.mobile-menu{display:none!important}}

/* five threads: an editorial index, not a row of feature cards */
.ideas{list-style:none;border-top:1px solid var(--line2)}
.idea a{display:grid;grid-template-columns:88px minmax(0,1.05fr) minmax(0,1.6fr) auto;gap:8px 28px;align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--text);transition:background .2s ease,padding .2s ease}
.idea-n{font:800 2.6rem/1 var(--display);color:var(--line2);transition:color .2s ease}
.idea-t{font:800 clamp(1.5rem,2.4vw,2rem)/1.05 var(--display);letter-spacing:.005em}
.idea-d{color:var(--muted);font-size:1.02rem}
.idea-go{font-weight:700;color:var(--teal);white-space:nowrap;font-size:.95rem}
.idea-go em{font-style:normal;display:inline-block;transition:transform .2s ease}
.idea a:hover,.idea a:focus-visible{background:linear-gradient(90deg,rgba(25,195,180,.08),transparent 70%);padding-left:16px}
.idea a:hover .idea-n,.idea a:focus-visible .idea-n{color:var(--amber)}
.idea a:hover .idea-go em{transform:translateX(4px)}
@media (max-width:900px){.idea a{grid-template-columns:56px minmax(0,1fr);padding:22px 4px}.idea-n{font-size:2rem;grid-row:span 3}.idea-d,.idea-go{grid-column:2}}

/* thesis band */
.thesis{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.thesis-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.thesis-q{font:800 clamp(2rem,4vw,3.3rem)/1.02 var(--display);color:#fff;letter-spacing:.005em}
.thesis-body p{color:var(--muted);font-size:1.05rem;margin-bottom:14px}
.thesis-body .cite{font-size:.85rem;color:var(--dim)}
.text-link{color:var(--teal);font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline}
@media (max-width:900px){.thesis-grid{grid-template-columns:1fr}}

/* home blog strip */

@media (max-width:900px){.bgrid-home{grid-template-columns:1fr}}

/* pages without a hero */
.page-top{padding-top:8px}
.page-top .section.blog{padding-top:clamp(36px,5vw,64px)}

/* notes that state the personal, non-commercial nature of the content */
.note-sec{padding:clamp(28px,4vw,48px) 0}
.note-box p{max-width:62em;margin:0;padding:18px 22px;border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:var(--r);background:rgba(255,255,255,.02);color:var(--muted)}
.note-box b{color:var(--text)}
.fw-soon{font-size:.85rem;color:var(--dim);font-style:italic}
.cmp-note{margin-top:18px;max-width:60em;color:var(--slate)}
.post-personal{margin-top:28px;font-size:.88rem;color:var(--dim);border-top:1px solid var(--line);padding-top:14px}

/* footer: let the disclaimer read as a statement */
.footer-about b{color:var(--text)}