/* Josh's top bar on the Blog page — the same bar as About, Projects and Skills.
   Rules are copied from styles.css so the bar matches exactly; only the bits
   that depended on sitting inside .about are adjusted (marked below). */
@font-face {
  font-family: 'Google Sans';
  src: url('../assets/fonts/google-sans-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded Outline';
  src: url('../assets/fonts/unbounded-latin-700-overlap.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded Outline Merged';
  src: url('../assets/fonts/unbounded-latin-700-merged.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.blog-topbar {
  --background: #060606;
  --white: #ffffff;
  --accent: #ffffff;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --press-in: 100ms;
  --press-out: 160ms;
  --page-gutter: clamp(1rem, 2.8vw, 3.5rem);
  color: var(--white);
}
:where(.blog-topbar a) { color: inherit; text-decoration: none; }
:where(.blog-topbar a:focus-visible) { outline: 3px solid currentColor; outline-offset: 6px; }

.about-topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 0 calc(-1 * var(--page-gutter)); padding: 1rem var(--page-gutter) .75rem; background: rgba(6, 6, 6, .82); }
.about-topbar::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 1.5rem; background: linear-gradient(rgba(6, 6, 6, .82), rgba(6, 6, 6, 0)); pointer-events: none; }
.topbar-wordmark { flex: none; display: inline-flex; align-items: start; margin-left: -.45rem; padding: .34rem .45rem; color: transparent; -webkit-text-stroke: .055em var(--accent); font-family: 'Unbounded Outline', Arial, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2.125rem); letter-spacing: -.055em; }
.topbar-wordmark span { display: block; line-height: .88; transform: scaleY(1.25); transform-origin: center; }
.section-nav { display: flex; align-items: center; gap: .15rem; min-width: 0; margin-right: -.6rem; overflow-x: auto; scrollbar-width: none; }
.section-nav-divider { flex: none; width: 1px; height: .75rem; margin-inline: .6rem; background: currentColor; opacity: .45; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav-link { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .6rem; border-radius: .25rem; font-family: 'Google Sans', Arial, sans-serif; font-size: .9375rem; line-height: 1.3; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: background-color var(--press-out) var(--ease-out), color var(--press-out) var(--ease-out); }
.section-nav-link .nav-label { display: inline-block; vertical-align: top; }
.section-nav-link svg { display: none; width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: currentColor; overflow: visible; }
.section-nav-link svg .icon-tone { opacity: .4; }
.section-nav-link { --nav-pad: .6rem; position: relative; isolation: isolate; padding-inline: var(--nav-pad); }
.section-nav-link::before { content: ''; position: absolute; left: var(--nav-pad); right: var(--nav-pad); top: calc(50% + .35em + .3rem); height: 2px; background: var(--white); transform: scaleX(var(--pill, 0)); transform-origin: left center; pointer-events: none; transition: opacity var(--press-out) var(--ease-out); }
.section-nav-link[aria-current] { --pill: 1; }
.section-nav { position: relative; }

/* Hovering a link scrambles its label, as on the other pages (blog.js). */
.blog-topbar .nav-label { position: relative; overflow: hidden; }
.scramble-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.scramble-char { position: absolute; top: 0; text-align: center; }
.is-scrambling .scramble-text { opacity: 0; }
.is-scrambling .scramble-layer { opacity: 1; }

:is(.section-nav-link, .topbar-wordmark) { touch-action: manipulation; }
.topbar-wordmark span { transition: opacity var(--press-out) var(--ease-out); }
.section-nav-link:not([aria-current]).is-touch-pressed { background: rgba(255, 255, 255, .12); transition-duration: var(--press-in); }
.section-nav-link[aria-current].is-touch-pressed::before { opacity: .82; transition-duration: var(--press-in); }
.topbar-wordmark.is-touch-pressed span { opacity: .6; transition-duration: var(--press-in); }
@media (hover: hover) and (pointer: fine) {
  :root:not(.touch-input) .section-nav-link:not([aria-current]):hover { background: rgba(255, 255, 255, .08); }
  :root:not(.touch-input) .section-nav-link:not([aria-current]):active { background: rgba(255, 255, 255, .14); transition-duration: var(--press-in); }
  :root:not(.touch-input) .section-nav-link[aria-current]:active::before { opacity: .82; transition-duration: var(--press-in); }
  :root:not(.touch-input) .topbar-wordmark:hover span { opacity: .75; }
  :root:not(.touch-input) .topbar-wordmark:active span { opacity: .6; transition-duration: var(--press-in); }
}
/* The bar's comings and goings, as in styles.css. Arriving from the top bar,
   only the underline draws on; arriving from Home, the wordmark and each link
   drop in 30ms apart and then the line draws. Leaving for Home they lift out;
   leaving for About, Projects or Skills the line lifts off leftward, toward
   them. blog.js adds these only when motion is allowed. */
.blog-topbar { --ease-in-out: cubic-bezier(.77, 0, .175, 1); }
html.nav-line-enter .blog-topbar .section-nav-link[aria-current]::before { animation: nav-return-line .45s var(--ease-out) .06s both; }
html.nav-return .blog-topbar :is(.topbar-wordmark, .section-nav > *) { animation: nav-return .5s var(--ease-out) calc(.06s + var(--nav-i, 0) * 30ms) both; }
html.nav-return .blog-topbar .section-nav-link[aria-current]::before { animation: nav-return-line .5s var(--ease-out) .35s both; }
html.nav-leave .blog-topbar :is(.topbar-wordmark, .section-nav > *) { animation: nav-leave .24s var(--ease-in-out) calc(var(--nav-i, 0) * 15ms) both; }
html.nav-leave .blog-topbar .section-nav-link[aria-current]::before { transform-origin: right; animation: nav-leave-line .24s var(--ease-in-out) both; }
html.nav-line-leave .blog-topbar .section-nav-link[aria-current]::before { transform-origin: right; animation: nav-leave-line .26s var(--ease-in-out) both; }
html.nav-line-back.nav-line-leave .blog-topbar .section-nav-link[aria-current]::before { transform-origin: left; }
@keyframes nav-return { from { opacity: 0; translate: 0 -.75rem; } }
@keyframes nav-return-line { from { transform: scaleX(0); } }
@keyframes nav-leave { to { opacity: 0; translate: 0 -.75rem; } }
@keyframes nav-leave-line { to { transform: scaleX(0); } }
.section-nav-link:focus-visible { outline-width: 2px; outline-offset: -2px; }
.topbar-wordmark:focus-visible { outline-width: 2px; outline-offset: 0; }
@media (max-width: 1100px) {
  .section-nav-link { --nav-pad: .5rem; }
  .section-nav { margin-right: 0; }
  .section-nav { padding-inline: .75rem 1.25rem; -webkit-mask-image: linear-gradient(to right, transparent, #000 .75rem, #000 calc(100% - 1.25rem), transparent); mask-image: linear-gradient(to right, transparent, #000 .75rem, #000 calc(100% - 1.25rem), transparent); }
}
@media (max-width: 700px) {
  .blog-topbar { --page-gutter: 1.25rem; }
  .about-topbar { gap: .5rem; padding: max(.5rem, env(safe-area-inset-top)) 0 .5rem var(--page-gutter); }
  .about-topbar::after { height: 1.25rem; }
  .topbar-wordmark { font-size: 1.125rem; }
  .section-nav-divider { margin-inline: .35rem; }
  .section-nav { gap: .25rem; }
  .section-nav-link { font-size: .875rem; }
  .topbar-wordmark { font-family: 'Unbounded Outline Merged', 'Unbounded Outline', Arial, sans-serif; letter-spacing: -.035em; }
}
@media (prefers-reduced-transparency: reduce) {
  .about-topbar { background: var(--background); }
  .about-topbar::after { display: none; }
  .section-nav { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-contrast: more) {
  .about-topbar { background: var(--background); border-bottom: 1px solid #fff; }
  .about-topbar::after { display: none; }
  .section-nav-divider { opacity: 1; }
}
@media (forced-colors: active) {
  .section-nav-link::before { forced-color-adjust: none; background: CanvasText; }
}

/* Blog adjustments: the bar sits at the top of the page itself rather than in
   .about's padded column, and must stay above the gallery (z-index 10).
   The hairline sits inside the bar so the fade below it stays clear of the line. */
.blog-topbar { margin: 0; z-index: 100; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }
@media (prefers-contrast: more) {
  .blog-topbar { box-shadow: none; }
}
/* DAQ's gallery left room for its overlaid fixed header; this bar takes its
   own space in the flow, so the gallery starts closer. */
.OutcomesGallery-module__0WS_ta__gallery { padding-top: 48px; }
@media (max-width: 1023px) { .OutcomesGallery-module__0WS_ta__gallery { padding-top: 72px; } }
@media (max-width: 767px) { .OutcomesGallery-module__0WS_ta__gallery { padding-top: 48px; } }
/* Opaque on the Blog: nothing shows through the bar; the fade below starts
   from the page's own black. */
.blog-topbar { background: #000; }
.blog-topbar::after { background: linear-gradient(#000, rgba(0, 0, 0, 0)); }