/* Small visual refinement: preserve the existing dark identity. */
:root {
  --portfolio-copy: #c7c7c7;
  --portfolio-secondary: #ababab;
  --portfolio-focus: #c4d2f9;
  --portfolio-ease: cubic-bezier(.23, 1, .32, 1);
}
html { scroll-padding-top: 112px; }
.karen-pet-case { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; margin-top: 40px; padding: 32px; border: 1px solid #ffffff1c; border-radius: 20px; background: #0d1016; }
.karen-pet-copy h3 { margin: 14px 0 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.karen-pet-copy > p { font-size: 14px; line-height: 1.8; color: var(--portfolio-copy); }
.karen-pet-copy .karen-pet-lead { font-size: 18px; color: #e6edf6; }
.karen-pet-copy .catalog-tags { margin-top: 0; padding-top: 12px; }
.karen-pet-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.karen-pet-copy .karen-pet-note { color: var(--portfolio-secondary); font-size: 12px; }
.karen-pet-capabilities { margin: 18px 0; padding-left: 18px; color: var(--portfolio-copy); font-size: 14px; line-height: 1.75; }
.karen-pet-capabilities li + li { margin-top: 10px; }
.karen-pet-capabilities li::marker { color: #9bcdd6; }
.karen-pet-preview { margin: 0; min-width: 0; }
.karen-pet-preview button { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #ffffff21; border-radius: 12px; background: #151923; color: #e6edf6; text-align: left; cursor: pointer; }
.karen-pet-preview img { display: block; width: 100%; height: auto; }
.karen-pet-preview .karen-pet-speaking-preview { width: min(100%, 320px); margin: 24px auto 12px; }
.karen-pet-preview button > span { display: block; padding: 14px 18px; font-size: 12px; }
.karen-pet-preview figcaption { margin-top: 12px; color: var(--portfolio-secondary); font-size: 11px; line-height: 1.7; }
@media (max-width: 960px) { .karen-pet-case { grid-template-columns: 1fr; gap: 22px; padding: 24px; } }
@media (max-width: 480px) { .karen-pet-case { padding: 18px; margin-top: 28px; } }
.glass-nav { box-shadow: 0 8px 30px #0005; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; transition: color 160ms ease, opacity 160ms ease; }
.language-toggle { min-width: 44px; min-height: 44px; }
.architecture-hero .subtitle { font-size: 16px; line-height: 1.75; max-width: 48ch; color: var(--portfolio-copy); }
.section-intro { max-width: 68ch; font-size: 16px; line-height: 1.75; color: var(--portfolio-copy); }
.catalog-card { padding: 28px; display: flex; flex-direction: column; }
.catalog-card h3 { line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.catalog-card p, .ai-stage .stage-text p, .project-item > p { font-size: 16px; line-height: 1.7; color: var(--portfolio-copy); }
.catalog-tags { gap: 8px; margin-top: auto; padding-top: 20px; }
.catalog-tags span { font-size: 12px; line-height: 1.5; padding: 4px 8px; }
.repo-link, .friday-mini-link, .friday-closing a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; width: fit-content; }
.glass-card:hover { transform: none; }
.catalog-card:hover { transform: none; }
#karen .friday-story > p:not(.friday-lead), #karen .detail-item p { font-size: 16px; line-height: 1.75; }
#karen .detail-item { padding: 26px; }
#karen .friday-closing p { font-size: 16px; line-height: 1.75; }
#karen .identity-note { color: #a8bdcc; font-size: 12px; }
#karen .friday-eyebrow, #karen .identity-label, #karen .friday-pillar-index { font-size: 11px; }
.hero-cta, .language-toggle, .project-view-strip button { transition: transform 160ms var(--portfolio-ease), background-color 160ms ease, border-color 160ms ease; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--portfolio-focus); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover { transform: translateY(-2px); }
  .hero-cta:active, .language-toggle:active, .project-view-strip button:active { transform: scale(.98); }
}
@media (max-width: 800px) {
  .catalog-card { padding: 24px; }
  .nav-links { gap: 12px; }
  .nav-links a { flex-shrink: 0; }
  #karen .friday-presentation { gap: 24px; }
}
@media (max-width: 480px) {
  .architecture-hero .subtitle { max-width: 100%; }
  #karen .detail-item { padding: 22px; }
  .portfolio-footer { gap: 16px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta, .language-toggle, .project-view-strip button { transition: none; }
  .hero-cta:hover, .hero-cta:active, .language-toggle:active, .project-view-strip button:active { transform: none; }
}