/* Shared progressive enhancement. Use the existing palette and card shapes. */

/* Give real brand artwork the same considered framing as the large studies. */

.tech-logo{isolation:isolate;box-shadow:0 3px 8px rgba(17,35,39,.07),0 10px 24px rgba(17,35,39,.045),inset 0 0 0 1px rgba(255,255,255,.18);transition:translate .3s ease,box-shadow .3s ease}

.tech-logo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 48%,rgba(17,35,39,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

.tech-logo.img-logo{background-color:#f7f9f4}

.tech-logo.img-logo:not(.fill)>img{object-fit:contain;filter:drop-shadow(0 2px 2px rgba(17,35,39,.09))}

@media(hover:hover) and (pointer:fine){.tech-tile:hover .tech-logo,.project-card:hover .tech-logo{translate:0 -3px;box-shadow:0 5px 12px rgba(17,35,39,.1),0 14px 26px rgba(17,35,39,.07),inset 0 0 0 1px rgba(255,255,255,.24)}}

@media(prefers-reduced-motion:reduce){.tech-logo{transition:none!important;translate:none!important}}

.reveal,

.reveal.visible {

  opacity: 1;

  transform: none;

  transition-delay: 0s;

}



main > #top { display: block; height: 0; }

main:focus { outline: none; }

.skip-link {

  position: fixed;

  top: 12px;

  left: 18px;

  z-index: 20;

  padding: 13px 18px;

  color: var(--paper);

  background: var(--ink);

  font: 12px var(--mono);

  text-decoration: none;

  translate: 0 -150%;

}

.skip-link:focus { translate: 0 0; }

:where(a, button, input, select, textarea):focus-visible {

  outline: 2px solid var(--teal);

  outline-offset: 4px;

}

:where(.about-card, .about-wide, .journal-feature) :focus-visible {

  outline-color: var(--acid);

}



.button { min-height: 44px; }

.button-primary:focus-visible {

  background: var(--teal);

  transform: translateY(-2px);

}

:where(.text-link, .project-link, .source-link, .pager-link, .footer-right a) {

  transition: color 0.2s ease, border-color 0.2s ease;

}

:where(.text-link, .project-link, .source-link, .pager-link, .footer-right a):is(:hover, :focus-visible) {

  color: var(--teal);

  border-color: var(--teal);

}

:where(.text-link, .project-link, .source-link) > span {

  display: inline-block;

  transition: translate 0.2s ease;

}

:where(.text-link, .project-link, .source-link):is(:hover, :focus-visible) > span {

  translate: 2px -2px;

}

.site-nav a:focus-visible,

.github-link:focus-visible { color: var(--ink); }



/* Kept after .reveal.visible so reveal state never suppresses card feedback. */

.project-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }

.tech-tile { transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; }

.project-card:is(:hover, :focus-within) {

  transform: translateY(-6px);

  box-shadow: 0 18px 38px rgba(10, 20, 23, 0.11);

}

.project-card:is(:hover, :focus-within) .project-media img {

  transform: scale(1.05);

  filter: saturate(1) contrast(1.03);

}

.tech-tile:is(:hover, :focus-within) {

  transform: translateY(-5px);

  background: var(--surface-hover);

  border-color: rgba(29, 107, 105, 0.35);

}

.journal-card {

  transition: box-shadow 0.25s ease;

}

.journal-card:is(:hover, :focus-within) {

  box-shadow: 0 12px 28px rgba(10, 20, 23, 0.08);

}

.journal-card:is(:hover, :focus-within) .journal-media img {

  transform: scale(1.04);

}

.note-card,

.long-note { transition: background 0.25s ease; }

.note-card:is(:hover, :focus-within),

.long-note:is(:hover, :focus-within) { padding-left: 0; }

.note-card:is(:hover, :focus-within) { background: rgba(216, 244, 92, 0.18); }

.long-note:is(:hover, :focus-within) { background: rgba(216, 244, 92, 0.13); }

:is(.note-card, .long-note) > :is(.note-number, .long-note-index, div, .note-arrow) {

  transition: translate 0.25s ease;

}

:is(.note-card, .long-note):is(:hover, :focus-within) > :is(.note-number, .long-note-index, div, .note-arrow) {

  translate: 5px 0;

}

.env-tutorials .long-note:is(:hover, :focus-within) { background: transparent; }

.env-tutorials .long-note:is(:hover, :focus-within) > * { translate: none; }

.note-title-link:focus-visible,

.search-result:focus-visible h3 { color: var(--teal); }

.tag-chip:focus-visible { color: var(--ink); border-color: var(--ink); }



.site-footer { flex-wrap: wrap; gap: 24px; }

.site-footer > div { min-width: 0; }

.footer-right { flex-wrap: wrap; gap: 12px 24px; justify-content: flex-end; }

.footer-right > span,

.site-footer p { overflow-wrap: anywhere; }

.footer-right a { max-width: 100%; overflow-wrap: anywhere; }

.footer-right .account-action { margin: 0; }

:where(.hero-copy, .section-heading > div, .note-card > div, .long-note > div,

       .project-content, .profile-copy, .detail-copy, .about-copy) { min-width: 0; }

:where(.note-card > div, .long-note > div, .project-content) { overflow-wrap: anywhere; }

/* Detail covers need tall images; logos inside them keep their own square size. */

.detail-visual .img-logo > img { min-height: 0; }



@media (max-width: 800px) {

  /* The complete link list is the fallback when JS is disabled or fails. */

  .site-header { height: auto; min-height: 68px; flex-wrap: wrap; }

  .site-nav {

    position: static;

    display: flex;

    flex-basis: 100%;

    width: 100%;

    order: 3;

    box-shadow: none;

  }

  .site-nav a { min-height: 44px; }

  .menu-toggle { display: none; }

  .github-link { margin-right: 0; }

  .nav-enhanced .site-header { height: 68px; flex-wrap: nowrap; }

  .nav-enhanced .site-nav {

    position: absolute;

    display: none;

    flex-basis: auto;

    box-shadow: 0 15px 20px rgba(10, 20, 23, 0.06);

  }

  .nav-enhanced .site-nav.open { display: flex; }

  .nav-enhanced .menu-toggle {

    display: flex;

    flex: 0 0 44px;

    width: 44px;

    height: 44px;

    padding: 12px;

    order: 2;

  }

  .nav-enhanced .github-link { order: 1; margin-right: 8px; }

  .footer-right { justify-content: flex-start; gap: 12px 20px; }

}



@media (max-width: 400px) {

  .brand { gap: 8px; font-size: 12px; letter-spacing: 0.12em; }

  .github-link { font-size: 10px; letter-spacing: 0; }

  .nav-enhanced .github-link { margin-right: 2px; }

  .hero-actions { flex-wrap: wrap; gap: 18px 22px; }

  .note-card { grid-template-columns: 25px minmax(0, 1fr) 20px; gap: 10px; }

  .long-note { grid-template-columns: 25px minmax(0, 1fr) 20px; gap: 10px; }

  .note-card h3, .long-note h2 { line-height: 1.3; }

}



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after { scroll-behavior: auto !important; }

  :is(.reveal, .button, .project-card, .tech-tile, .journal-card, .note-card, .long-note,

      .project-media img, .journal-media img, .menu-toggle span) { transition: none; }

  .button-primary:is(:hover, :focus-visible),

  .project-card:is(:hover, :focus-within),

  .tech-tile:is(:hover, :focus-within),

  .project-card:is(:hover, :focus-within) .project-media img,

  .journal-card:is(:hover, :focus-within) .journal-media img { transform: none; }

  :where(.text-link, .project-link, .source-link):is(:hover, :focus-visible) > span,

  :is(.note-card, .long-note):is(:hover, :focus-within) > * { translate: none; transition: none; }

  .scan-line { animation: none; }

}



/* Existing backend tools share the site's typography and quiet rule lines. */

.site-tools { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:0 24px; min-height:44px; position:relative; z-index:4; }

.site-tools :is(a, button) { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--muted); font:11px/1.5 var(--mono); text-decoration:none; cursor:pointer; }

.site-tools :is(a, button):is(:hover,:focus-visible) { color:var(--teal); }

.site-tools form { margin:0; }

.site-tools button { background:none; border:0; padding:0; }

.site-search { display:flex; align-items:center; max-width:100%; border-bottom:1px solid transparent; transition:border-color .35s; }

.site-search input { width:0; min-width:0; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:var(--ink); font:13px/1.5 var(--sans); opacity:0; transition:width .45s cubic-bezier(.22,1,.36,1),padding .45s cubic-bezier(.22,1,.36,1),opacity .25s; }

.site-search input::placeholder { color:var(--muted); }

.site-tools .site-search button { justify-content:center; min-width:64px; flex:none; }

.site-search:is(:hover,:focus-within) { border-color:var(--teal); }

.site-search:is(:hover,:focus-within) input { width:220px; padding:0 12px; opacity:1; }

.content-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; margin:24px 0; }

.content-actions :is(a, button) { min-height:44px; display:inline-flex; align-items:center; overflow-wrap:anywhere; }

.content-actions .text-link { font-size:12px; }

@media (max-width:800px) {

 .site-tools { justify-content:flex-start; gap:0 22px; }

 .site-search { flex:1 1 180px; max-width:330px; border-color:var(--line); }

 .site-search input, .site-search:is(:hover,:focus-within) input { flex:1; width:0; padding:0 10px; opacity:1; font-size:16px; }

 .content-actions { gap:8px 20px; }

}

@media (hover:none) and (min-width:801px) {

 .site-search { border-color:var(--line); }

 .site-search input { width:220px; padding:0 12px; opacity:1; }

}

@media (prefers-reduced-motion:reduce) {

 .site-search, .site-search input { transition:none; }

}