/* Shared interaction and reading details; artwork and title scales stay local. */
:root {
  --experience-blue: #486cff;
  --experience-lime: #d8ff4f;
  --experience-label: .8rem;
  --experience-caption: .875rem;
  --experience-duration: 180ms;
  --experience-focus: var(--experience-blue);
  --site-nav-offset: 100px;
}
.stage-home,.stage-about { --experience-focus: var(--experience-lime); }
:is(.home-work,.home-about,.about-page-intro,.about-page-history,.topbar[data-theme="light"],.case-overlay-panel,.product-case-panel,.pulsian-case) { --experience-focus: var(--experience-blue); }
:is(.case-gallery,.pd-inherited,.pd-final,.pd-site-cta,.pc-section-dark) { --experience-focus: var(--experience-lime); }
.stage-home [id],.stage-about [id] { scroll-margin-top: var(--site-nav-offset); }

.topbar :is(a,button):focus-visible,
:is(.stage-home,.stage-about) main :is(a,button,[tabindex]):focus-visible,
:is(.case-overlay-panel,.product-case-panel,.pulsian-case) :is(a,button,input,select,textarea,[tabindex]):focus-visible:not(.case-viewer-overlay *) {
  outline: 2px solid var(--experience-focus);
  outline-offset: 4px;
}
.topbar .langs { gap: 2px; }
.topbar .langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
.topbar .navlinks a { min-height: 44px; display: inline-flex; align-items: center; }
.topbar .navlinks a[aria-current] { color: var(--acid, var(--experience-lime)); }
.topbar[data-theme="light"] .navlinks a[aria-current] { color: var(--blue, var(--experience-blue)); }
.topbar .navlinks a[aria-current]::after,.topbar .navlinks a:focus-visible::after { transform: scaleX(1); }
.topbar .navlinks a::after { transition-duration: var(--experience-duration); }
.topbar .menu-toggle { min-width: 44px; min-height: 44px; }
.topbar .menu-toggle[aria-expanded="true"] { border-color: currentColor; background: color-mix(in srgb,currentColor 8%,transparent); }
.topbar .menu-toggle[aria-expanded="true"] .menu-icon { border-color: transparent; }
.topbar .menu-toggle[aria-expanded="true"] .menu-icon::before,
.topbar .menu-toggle[aria-expanded="true"] .menu-icon::after { content: ""; position: absolute; left: 0; top: 4px; width: 17px; border-top: 1px solid currentColor; transform: rotate(45deg); }
.topbar .menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

:is(.button,.text-action,.about-full-link,.back-link,.hero-linkedin,.home-current a,.contact-links a,.case-modal-close,.case-contents button,.case-gallery-arrow,.case-modal-end a,.pc-case-close,.pc-contents a,.pc-tab,.pc-primary,.pc-secondary,.pc-early-action a) {
  transition: color var(--experience-duration) ease, background-color var(--experience-duration) ease, border-color var(--experience-duration) ease, box-shadow var(--experience-duration) ease;
}
:is(.stage-home,.stage-about) .button:hover { transform: none; }
:is(.stage-home,.stage-about) a.button:is([href^="#"],[href^="/"],[href^="mailto:"],[href^="https://ghiggi.me/"])::after { content: "→"; }
.hero-linkedin,.home-contact .contact-links a { display: inline-flex; align-items: center; min-height: 44px; }
.home-case-link { transition-duration: var(--experience-duration); }
.home-case-link.is-opening,.home-case-link[aria-busy="true"] { cursor: progress; box-shadow: inset 0 0 0 1px #a8b4e8; }
.home-case-link.is-opening .case-detail-button,.home-case-link[aria-busy="true"] .case-detail-button { color: var(--blue, var(--experience-blue)); }
.case-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stage-about .chapter:hover .chapter-number { transform: none; }
.stage-about .chapter:hover h3 { color: inherit; }

/* The same small type roles appear in every case shell. */
.case-modal-context,.pulsian-case .pc-bar-context {
  min-width: 0; max-width: none;
  font-family: var(--case-body,Archivo,Arial,sans-serif);
  font-size: var(--experience-label); font-weight: 600; line-height: 1.4; letter-spacing: .075em;
}
.home-case .case-card-meta,.case-modal-eyebrow,.case-reading-summary dt,
.pd-eyebrow,.pd-section-label,.pd-meta dt,.pulsian-case .pc-meta dt,.pulsian-case .pc-kicker {
  font-size: var(--experience-label); font-weight: 600; line-height: 1.5; letter-spacing: .08em;
}
.case-overlay-panel .case-reading-time,.pulsian-case .case-reading-time { font-size: var(--experience-label); line-height: 1.5; }
.home-leadership-photo figcaption,.home-portrait figcaption,
.case-inline-visual figcaption,.case-story-photo figcaption,.case-gallery-footer,
.pd-artifact-note,.pd-final-detail figcaption,
.pulsian-case .pc-figure figcaption,.pulsian-case .pc-figure figcaption small,.pulsian-case .pc-figure-note {
  font-size: var(--experience-caption); line-height: 1.6;
}
.case-modal-bar,.pulsian-case .pc-bar { min-height: 66px; box-sizing: border-box; }
.case-modal-bar,.pulsian-case .pc-bar-inner { gap: 16px; }
.case-modal-close,.pulsian-case .pc-case-close { min-width: 44px; min-height: 44px; font-size: .85rem; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.case-modal-close.case-return-action,.pulsian-case .pc-case-close.case-return-action { white-space: nowrap; }
.case-modal-close.case-return-action b,.pulsian-case .pc-case-close.case-return-action b { display: inline; }
.pulsian-case .pc-languages :is(a,span) { min-width: 44px; min-height: 44px; }
.case-gallery-arrow { min-width: 44px; min-height: 44px; }
.case-overlay-panel--construx .case-gallery-count { white-space: nowrap; flex-shrink: 0; }
.case-overlay-panel--construx .case-gallery-stage { touch-action: pan-y pinch-zoom; }
.case-gallery-head :is(h2,h3) { min-width: 0; }
.pulsian-case .pc-back:hover span,.pulsian-case .pc-image-link:hover::after { transform: none; }

@media (hover:hover) and (pointer:fine) {
  :is(.hero-linkedin,.contact-email,.back-link,.home-current a):hover { text-decoration-thickness: 2px; }
  .text-action:hover { border-color: currentColor; color: var(--paper, #f1efe8); }
  .topbar .langs a:not([aria-current]):hover { color: inherit; background: color-mix(in srgb,currentColor 8%,transparent); }
}

/* A single compact row replaces the intermediate two-line navigation. */
@media (max-width:1050px) {
  .topbar .nav { grid-template-columns: minmax(0,1fr) auto; min-height: 72px; padding-block: 0; gap: 16px; }
  .topbar .nav-end { grid-column: 2; grid-row: 1; gap: 12px; }
  .topbar .menu-toggle { display: inline-flex; }
  .topbar .navlinks {
    position: absolute; left: 0; right: 0; top: 100%; display: none;
    grid-column: auto; grid-row: auto; padding: 12px 20px 20px;
    background: var(--ink, #0b0c0e); border-bottom: 1px solid var(--line, rgba(241,239,232,.18));
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .topbar.is-menu-open .navlinks { display: flex; flex-direction: column; gap: 2px; }
  .topbar .navlinks a { display: flex; min-height: 48px; padding: 10px 12px; color: var(--paper, #f1efe8); font-size: 1.1rem; }
  .topbar .navlinks a::after { display: none; }
  .topbar .navlinks a[aria-current] { color: var(--acid, var(--experience-lime)); background: color-mix(in srgb,currentColor 7%,transparent); }
  .topbar[data-theme="light"] .navlinks { background: var(--paper, #f1efe8); border-color: #b8b5ac; }
  .topbar[data-theme="light"] .navlinks a { color: var(--ink, #0b0c0e); }
  .topbar[data-theme="light"] .navlinks a[aria-current] { color: var(--blue, var(--experience-blue)); }
  .stage-home .hero { padding-top: 130px; }
  .stage-about .about-page-intro { padding-top: 112px; }
}

@media (max-width:700px) {
  .stage-home .shell,.stage-about .shell { width: calc(100% - 40px); }
  .case-overlay-panel--designops { --leadership-gutter: 20px; }
  .case-overlay-panel--construx { --construx-gutter: 20px; }
  .product-case { --pd-gutter: 20px; }
  .pulsian-case { --pc-gutter: 20px; }
  .case-overlay-panel :is(.case-modal-header,.case-reading-summary,.case-contents,.case-detail-sections,.case-product-block,.case-gallery,.case-modal-end),
  .case-overlay-panel--construx .case-story-photo,
  .product-case :is(.pd-hero,.pd-section,.pd-site-cta) { padding-inline: 20px; }
  .product-case .case-contents.pd-jump-nav { padding-inline: 0; }
  .case-modal-bar,.pulsian-case .pc-bar-inner { padding-inline: 20px; }
  .case-modal-bar:has(.case-return-action),.pulsian-case .pc-bar-inner:has(.case-return-action) { flex-wrap: wrap; gap: 8px 16px; padding-block: 10px; }
  .case-modal-bar:has(.case-return-action) .case-modal-context { flex: 1 1 120px; }
  .case-modal-bar .case-return-action { margin-left: auto; }
  .pulsian-case .pc-bar-inner:has(.case-return-action) .pc-bar-right { margin-left: auto; }
  .case-overlay-panel--construx .case-gallery-head { gap: 20px; }
}

@media (max-width:420px) {
  .topbar .nav { gap: 8px; }
  .topbar .nav-end { gap: 8px; }
  .topbar .menu-toggle { padding-inline: 8px; gap: 7px; }
  .topbar .wordmark { font-size: .85rem; }
}

@media (max-width:360px) {
  .topbar .menu-toggle > span:first-child { display: none; }
  .topbar .menu-toggle { justify-content: center; padding-inline: 8px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  :is(.topbar,.stage-home main,.stage-about main,.case-overlay-panel,.product-case-panel,.pulsian-case) :is(a,button,input,select,textarea),
  :is(.topbar,.stage-home main,.stage-about main,.case-overlay-panel,.product-case-panel,.pulsian-case) :is(a,button)::before,
  :is(.topbar,.stage-home main,.stage-about main,.case-overlay-panel,.product-case-panel,.pulsian-case) :is(a,button)::after { transition: none; }
}

/* Keep direct-page return clear while leaving room for the project name on phones. */
.case-modal-close.case-return-action b span,.pulsian-case .pc-case-close.case-return-action b span { font: inherit; letter-spacing: inherit; }
.case-return-action > span { order: -1; }
.case-return-action .case-return-short { display: none; }
@media (max-width:700px) {
  .case-return-action .case-return-long { display: none; }
  .case-return-action .case-return-short { display: inline; }
}

/* On systems with a classic scrollbar, draw the native rail over the case.
   Overlay-scrollbar devices and forced-colors mode keep their own scrollbar. */
.case-edge-probe {
  position: absolute;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  overflow: scroll;
  visibility: hidden;
  pointer-events: none;
}
.case-scroll-edge { display: none; }
@media (forced-colors: none) {
  .case-overlay-panel.has-case-scroll-edge { scrollbar-width: none; }
  .case-overlay-panel.has-case-scroll-edge::-webkit-scrollbar { display: none; }
  .case-scroll-edge {
    position: sticky;
    z-index: 8;
    top: 0;
    display: block;
    height: 0;
    pointer-events: none;
    overflow-anchor: none;
  }
  .case-scroll-edge-rail {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--case-edge-width);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    background: transparent;
    scrollbar-color: #777 transparent;
    scrollbar-width: auto;
  }
  .case-scroll-edge-rail > div { width: 0; }
  @supports selector(::-webkit-scrollbar) {
    .case-scroll-edge-rail { scrollbar-color: auto; }
    .case-scroll-edge-rail::-webkit-scrollbar { width: var(--case-edge-width); background: transparent; }
    .case-scroll-edge-rail::-webkit-scrollbar-track { background: transparent; }
    .case-scroll-edge-rail::-webkit-scrollbar-thumb {
      border: 3px solid transparent;
      border-radius: 999px;
      background: #777;
      background-clip: padding-box;
    }
    .case-scroll-edge-rail::-webkit-scrollbar-thumb:hover { background-color: #888; }
  }
  :is(.product-case-panel--invited, .product-case-panel--zoomed, .pc-lightbox-open) > .case-scroll-edge {
    display: none;
  }
}