/* v32 review copy. Additive visual refinements; the v31 base stays recoverable. */
:root {
  --motion-ease: cubic-bezier(.23, 1, .32, 1);
  --motion-fast: 160ms;
  --motion-image: 240ms;
  --reading-width: 68ch;
}

/* Preserve text zoom, while keeping landscape type and control feedback stable. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:is(.stack, .case-row, .experience-row, .facts, .hdv-meta) > * { min-width: 0; }
:is(.resume-contact, .resume-profile-links, .contact .small) { overflow-wrap: anywhere; }

/* One reading rhythm across the home story, role overviews and case chapters. */
.is-home .section { gap: 28px; }
.is-home .stack > p, .is-case .case-row p, .is-case .section > p,
.evidence-heading > p { max-width: var(--reading-width); }
.is-home .stack { gap: 22px; }
.professional-tile > div:first-child { gap: 12px; }
.professional-tile p:not(.tile-eyebrow) { line-height: 1.7; }
.professional-meta { line-height: 1.6; }
.tile-copy { gap: 12px; }
.tile-eyebrow { letter-spacing: .065em; }
.tile-open { opacity: 1; }
.evidence-heading { gap: 16px; }
.is-case .section > h2, .evidence-heading h2 { max-width: 25ch; }
.case-footer .button { max-width: 100%; white-space: normal; text-align: center; }
.hdv-hero .hdv-meta > div { min-width: 0; }

/* Actual 44px targets at every breakpoint; no invisibly scaled-down button. */
.v3-nav-links a, .v3-contact, .work-filters button, .pickup-toggle button,
.identity-links a, .resume-toc a, .evidence-toc a, .hdv-control { min-height: 44px; }
.identity-expand, .about-collapse, .artwork-controls button { width: 44px; height: 44px; }
.identity-expand { opacity: 1; transform: none; }
.detail-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.pickup-toggle { max-width: 100%; }
.pickup-toggle button { white-space: normal; line-height: 1.4; }

/* Focus is immediately visible and stationary. It never relies on a hover. */
:is(a, button, summary, [tabindex="0"], video):focus-visible {
  outline: 3px solid #2667a2;
  outline-offset: 4px;
  transition: none;
}
:is(.project-card, .zoomable, .sc-image-link, .button, .hd-action,
    .sc-action, .evidence-action, .menu-toggle):focus-visible { translate: none; }
.project-card:focus-visible .artwork img,
:is(.lead-art, .hero-product-preview, .brand-card, .decision-image):focus-visible img { scale: none; }
.project-card:focus-visible .editorial-name { translate: none; }
.artwork-tile-link:focus-visible { outline-color: #fff; outline-offset: -7px; }
.artwork-controls button:focus-visible { outline-color: #fff; outline-offset: -4px; }
.bento:focus-visible { border-color: #2667a2; }
.identity-links a, .about-links a, .about-projects a {
  background-image: none;
  text-decoration: underline;
  text-decoration-color: #afb7a9;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-fast), text-decoration-color var(--motion-fast);
}

/* Selection moves instantly; no width/left animation or delayed active state. */
.v3-nav-links.has-hover-indicator::before { transition: opacity 125ms ease; }
.work-filters.has-sliding-indicator::before { transition: none; }
.bento { transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast); }
.doctor-screens img, .cafe-screen img, .identity-portrait {
  transition: transform var(--motion-image) var(--motion-ease);
}
.project-hover-preview { transition: opacity 160ms var(--motion-ease), visibility 160ms; }
.project-hover-preview .preview-images { transition: transform 160ms var(--motion-ease); }
.artwork-slide { transform: none; transition: opacity 240ms var(--motion-ease); }
.artwork-slide.is-active { transform: none; }

/* Press feedback is brief; reading surfaces do not shift under a finger. */
:is(.work-filters button, .pickup-toggle button, .artwork-controls button,
    .identity-expand, .about-collapse, .hdv-control, .v3-contact) {
  transition: transform 100ms var(--motion-ease), background-color 160ms;
}
:is(.work-filters button, .pickup-toggle button, .artwork-controls button,
    .identity-expand, .about-collapse, .hdv-control, .v3-contact):active { transform: scale(.97); }
a.bento:active { border-color: #7b9178; }
.hdv-control:active { background: #e9ede3; }

@media (hover: hover) and (pointer: fine) {
  .identity-links a:hover, .about-links a:hover, .about-projects a:hover {
    text-decoration-color: currentColor;
  }
}
@media (hover: none), (pointer: coarse) {
  a.bento:hover, .identity-tile:hover, .artwork-tile:hover { transform: none; }
  .identity-tile:hover .identity-portrait { transform: none; }
  .v3-nav-links.has-hover-indicator::before { opacity: 0; }
  .v3-nav-links a:hover { background: transparent; color: inherit; }
  .identity-expand:hover, .about-collapse:hover { background: #fff; }
  .artwork-controls button:hover { background: transparent; }
  .hdv-control:hover { background: transparent; }
}

/* Keep instant keyboard interactions from inheriting decorative transitions. */
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] :is(.about-dialog, .lightbox, .artwork-slide,
  .project-hover-preview, .project-hover-preview .preview-images,
  .card-hover-label, .identity-expand, .tile-open) { animation: none; transition: none; }
html[data-input="keyboard"] .v3-nav-links::before,
html[data-input="keyboard"] .work-filters::before { transition: none; }

@media (max-width: 560px) {
  .v3-identity { min-width: 0; }
  .v3-identity > span:last-child { max-width: 128px; }
  .identity-links { flex-wrap: wrap; gap: 8px 22px; }
  .selection-toolbar { gap: 12px; }
  .selection-toolbar > p { font-size: 14px; }
  .work-filters button { padding-inline: 18px; }
  .is-home .section { gap: 24px; }
  .is-home .contact h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1.2; }
  .about-dialog #about { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .about-dialog #about p { line-height: 1.75; }
  .artwork-controls { top: 12px; right: 12px; }
  .hdv-integrated .hdv-summary { font-size: 16px; line-height: 1.7; }
  .hdv-integrated .hdv-meta > div { font-size: 12px; }
  .hdv-integrated .hdv-meta dt { font-size: 11px; }
  .hdv-integrated .hdv-meta dd { font-size: 12px; }
  .hdv-integrated .hdv-eyebrow { font-size: 10px; }
}
@media (max-width: 360px) {
  .v3-identity > span:last-child { max-width: 104px; }
  .identity-intro { gap: 12px; }
  .identity-intro h1 { overflow-wrap: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .artwork-slide, .identity-expand, .hdv-control:active,
  .work-filters button:active, .pickup-toggle button:active,
  .artwork-controls button:active, .about-collapse:active,
  .v3-contact:active { transform: none !important; }
}
@media print {
  .hdv-start, .hdv-controls { display: none !important; }
  .hdv-intro { padding: 24px; }
  .hdv-film { break-inside: avoid; }
}
html[data-input="keyboard"] :is(.work-filters button, .pickup-toggle button,
  .artwork-controls button, .identity-expand, .about-collapse, .hdv-control,
  .v3-contact):active { transform: none; }
.project-hover-preview { will-change: auto; }
.project-hover-preview[data-visible="true"] { will-change: transform; }

/* Recruiter review: keep paid-work context visible before the project grid. */
.recruiter-summary { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.recruiter-summary p { font-size:14px; color:var(--muted); line-height:1.6; }
.recruiter-summary a { display:inline-flex; align-items:center; min-height:44px; gap:12px; font-size:14px; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
/* A portrait and an unbroken name need a full row at narrow tablet widths. */
@media (min-width:561px) and (max-width:680px) {
 .portfolio-grid > .identity-tile, .portfolio-grid:not([data-view=all]) > .identity-tile { grid-template-columns:minmax(0,1fr); }
 .identity-tile .identity-intro { grid-column:1/-1; grid-row:auto; }
 .portfolio-grid:not([data-view=all]) > .identity-tile h1 { grid-row:auto; }
 .identity-tile .identity-links { flex-wrap:wrap; }
}