/* Homepage responsive layout; preserve desktop interaction geometry. */
[data-pencil-name="home"] { width: 100% !important; max-width: var(--width-page); }
[data-pencil-name="home"] > [data-pencil-name="Frame 5"] { left: auto !important; margin: 0 auto; width: min(560px, calc(100% - 48px)) !important; }
#rive-canvas { left: calc(50% - 114.046px) !important; }
/* Top paw reserved for a future light/dark toggle. */
[data-pencil-name="home"] > [data-pencil-name="Subtract"] { display: none; }
[data-pencil-name="Frame 5"] > [data-pencil-name="div"] { max-width: 100%; }
[data-pencil-name="Frame 3"] { width: 100% !important; }
[data-pencil-name="Frame 3"] > [data-pencil-name="UIUX"] { flex-basis: 100%; }
[data-pencil-name="bo d y"] { max-width: 100%; text-wrap: wrap; }
[data-pencil-name="Work Experience"] { width: 100% !important; }
.workspace-cover img, .workspace-cover video { height: auto; aspect-ratio: auto 542 / 310.5; object-fit: contain; }
@media (max-width: 620px) {
  [data-pencil-name="home"] { padding-top: 339.434px !important; }
  #rive-canvas { top: 80px !important; }
  [data-pencil-name="home"] > [data-pencil-name="Subtract"] { left: calc(100% - 24px) !important; }
  [data-pencil-name="Frame 3"] { flex-wrap: wrap; }
  [data-pencil-name="bo d y"] br { display: none; }
  [data-pencil-name="bo d y"] { text-wrap: balance; }
  .experience-card { padding-left: var(--experience-text-inset, 14.5px) !important; cursor: default; }
  .experience-card .experience-chevron { display: none; }
  .experience-card .experience-description { height: auto; opacity: var(--experience-description-opacity); transform: none; margin-top: 4px; transition: none; }
  .experience-card:hover, .experience-card.is-expanded:hover { background: transparent; box-shadow: none; }
  .experience-card-header { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .experience-card-header > [data-pencil-name="Company"],
  .experience-card-header > [data-pencil-name="div"] { max-width: 100%; min-width: 0; }
  .experience-card-header [data-pencil-name="Senior Product Designer"] { white-space: normal !important; }
  .workspace-caption { flex-wrap: wrap; }
}
/* Keep the yarn inside the viewport around the phone/tablet boundary. */
@media (min-width: 621px) and (max-width: 704px) {
  .experience-card { padding-left: 53px !important; }
  .experience-card-header { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .experience-card-header > [data-pencil-name="Company"],
  .experience-card-header > [data-pencil-name="div"] { max-width: 100%; min-width: 0; }
  .experience-card-header [data-pencil-name="Senior Product Designer"] { white-space: normal !important; }
}
@media (hover: none) {
  .experience-card:hover, .experience-card.is-expanded:hover { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  .experience-chevron { opacity: 1; }
  .experience-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
}

:root[data-theme="dark"] .experience-card:focus-visible { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 2px; }